xlibs-components/dist/components/ui/calendar-24.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { ChevronDownIcon } from "lucide-react";
import { Button } from '../../components/ui/button.js';
import { Calendar } from '../../components/ui/calendar.js';
import { Input } from '../../components/ui/input.js';
import { Label } from '../../components/ui/label.js';
import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
export function Calendar24() {
    const [open, setOpen] = React.useState(false);
    const [date, setDate] = React.useState(undefined);
    return (_jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Label, { htmlFor: "date-picker", className: "px-1", children: "Date" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", id: "date-picker", className: "w-32 justify-between font-normal", children: [date ? date.toLocaleDateString() : "Select date", _jsx(ChevronDownIcon, {})] }) }), _jsx(PopoverContent, { className: "w-auto overflow-hidden p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: date, captionLayout: "dropdown", onSelect: (date) => {
                                        setDate(date);
                                        setOpen(false);
                                    } }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Label, { htmlFor: "time-picker", className: "px-1", children: "Time" }), _jsx(Input, { type: "time", id: "time-picker", step: "1", defaultValue: "10:30:00", className: "bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none" })] })] }));
}
Calendar24.displayName = "Calendar24";
// Static metadata export
export const calendar24Metadata = {
    displayName: "Calendar24",
    preferredWidth: 400,
    preferredHeight: "auto",
    minWidth: 300,
    minHeight: 80,
    layoutHints: ["datetime-picker", "form-control", "responsive", "interactive", "date-time"]
};