xlibs-components/dist/components/ui/calendar-22.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 { Label } from '../../components/ui/label.js';
import { Popover, PopoverContent, PopoverTrigger, } from '../../components/ui/popover.js';
export function Calendar22() {
    const [open, setOpen] = React.useState(false);
    const [date, setDate] = React.useState(undefined);
    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Label, { htmlFor: "date", className: "px-1", children: "Date of birth" }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", id: "date", className: "w-48 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);
                            } }) })] })] }));
}
Calendar22.displayName = "Calendar22";
// Static metadata export
export const calendar22Metadata = {
    displayName: "Calendar22",
    preferredWidth: 200,
    preferredHeight: "auto",
    minWidth: 180,
    minHeight: 40,
    layoutHints: ["date-picker", "popover", "dropdown", "interactive", "form-control"]
};