love-ui 1.2.12 → 1.2.14

package/public/r/comp-486.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-486",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-486.tsx",
+      "content": "import { useId } from \"react\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label className=\"flex-1\">Range</Label>\n      <div className=\"flex\">\n        <Input\n          id={`${id}-1`}\n          className=\"flex-1 rounded-e-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n          placeholder=\"From\"\n          type=\"number\"\n          aria-label=\"Min Value\"\n        />\n        <Input\n          id={`${id}-2`}\n          className=\"-ms-px flex-1 rounded-s-none [-moz-appearance:_textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n          placeholder=\"To\"\n          type=\"number\"\n          aria-label=\"Max Value\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "range"
+    ]
+  }
+}

package/public/r/comp-487.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-487",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar-rac.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-487.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { getLocalTimeZone, today } from \"@internationalized/date\"\nimport type { DateValue } from \"react-aria-components\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar-rac\"\n\nexport default function Component() {\n  const [date, setDate] = useState<DateValue | null>(today(getLocalTimeZone()))\n\n  return (\n    <div>\n      <Calendar\n        className=\"rounded-md border p-2\"\n        value={date}\n        onChange={setDate}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react aria"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-488.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-488",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar-rac.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-488.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { getLocalTimeZone, today } from \"@internationalized/date\"\nimport type { DateRange } from \"react-aria-components\"\n\nimport { RangeCalendar } from \"@/registry/building-blocks/default/ui/calendar-rac\"\n\nexport default function Component() {\n  const now = today(getLocalTimeZone())\n  const [date, setDate] = useState<DateRange | null>({\n    start: now,\n    end: now.add({ days: 3 }),\n  })\n\n  return (\n    <div>\n      <RangeCalendar\n        className=\"rounded-md border p-2\"\n        value={date}\n        onChange={setDate}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Range calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "range calendar",
+      "date",
+      "react aria"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-489.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-489",
+  "type": "registry:component",
+  "dependencies": [
+    "react-aria-components"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar-rac.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-489.tsx",
+      "content": "\"use client\"\n\nimport { getLocalTimeZone, isWeekend, today } from \"@internationalized/date\"\nimport { useLocale } from \"react-aria\"\nimport type { DateValue } from \"react-aria-components\"\n\nimport { RangeCalendar } from \"@/registry/building-blocks/default/ui/calendar-rac\"\n\nexport default function Component() {\n  const now = today(getLocalTimeZone())\n  const disabledRanges = [\n    [now, now], // Disables today\n    [now.add({ days: 14 }), now.add({ days: 14 })], // Disables only the 14th day from now\n    [now.add({ days: 23 }), now.add({ days: 23 })], // Disables only the 23rd day from now\n  ]\n\n  const { locale } = useLocale()\n  const isDateUnavailable = (date: DateValue) =>\n    isWeekend(date, locale) ||\n    disabledRanges.some(\n      (interval) =>\n        date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0\n    )\n\n  return (\n    <div>\n      <RangeCalendar\n        className=\"rounded-md border p-2\"\n        isDateUnavailable={isDateUnavailable}\n        minValue={today(getLocalTimeZone())}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Disabled dates -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://react-spectrum.adobe.com/react-aria/DateRangePicker.html\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Aria\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "range calendar",
+      "date",
+      "disabled",
+      "react aria"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-49.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-49",
+  "type": "registry:component",
+  "dependencies": [
+    "react-payment-inputs"
+  ],
+  "devDependencies": [
+    "@types/react-payment-inputs"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-49.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const { getCVCProps } = usePaymentInputs()\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`cvc-${id}`}>Code</Label>\n      <Input\n        {...getCVCProps()}\n        id={`cvc-${id}`}\n        className=\"[direction:inherit]\"\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "checkout",
+      "payment",
+      "credit card",
+      "form"
+    ]
+  }
+}

package/public/r/comp-490.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-490",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-490.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-491.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-491",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-491.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays } from \"date-fns\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  })\n\n  return (\n    <div>\n      <Calendar\n        mode=\"range\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Range calendar -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "range calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-492.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-492",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-492.tsx",
+      "content": "import { addDays } from \"date-fns\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n\n  return (\n    <div>\n      <Calendar\n        mode=\"range\"\n        disabled={[\n          { before: new Date() }, // Dates before today\n          new Date(), // Today\n          { dayOfWeek: [0, 6] }, // Weekends\n          {\n            from: addDays(today, 14), // 14th day from now\n            to: addDays(today, 16), // 16th day from now\n          },\n          {\n            from: addDays(today, 23), // 23th day from now\n            to: addDays(today, 24), // 24th day from now\n          },\n        ]}\n        excludeDisabled\n        className=\"rounded-md border p-2\"\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Disabled dates -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "range calendar",
+      "date",
+      "disabled",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-493.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-493",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-493.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays, subDays } from \"date-fns\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n  const [date, setDate] = useState<Date[] | undefined>([\n    subDays(today, 17),\n    addDays(today, 2),\n    addDays(today, 6),\n    addDays(today, 8),\n  ])\n\n  return (\n    <div>\n      <Calendar\n        mode=\"multiple\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Multiple day selection -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-494.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-494",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-494.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day_button: \"rounded-full\",\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Custom select day style -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-495.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-495",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-495.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays } from \"date-fns\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: today,\n    to: addDays(today, 3),\n  })\n\n  return (\n    <div>\n      <Calendar\n        mode=\"range\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          day: \"relative before:absolute before:inset-y-px before:inset-x-0 [&.range-start:not(.range-end):before]:bg-linear-to-r before:from-transparent before:from-50% before:to-accent before:to-50% [&.range-end:not(.range-start):before]:bg-linear-to-l\",\n          day_button:\n            \"rounded-full group-[.range-start:not(.range-end)]:rounded-e-full group-[.range-end:not(.range-start)]:rounded-s-full\",\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Custom select range style -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "range calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-496.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-496",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-496.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month_caption: \"ms-2.5 me-20 justify-start\",\n          nav: \"justify-end\",\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Right navigation -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-497.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-497",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-497.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { DropdownNavProps, DropdownProps } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event)\n  }\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          month_caption: \"mx-0\",\n        }}\n        captionLayout=\"dropdown\"\n        defaultMonth={new Date()}\n        startMonth={new Date(1980, 6)}\n        hideNavigation\n        components={{\n          DropdownNav: (props: DropdownNavProps) => {\n            return (\n              <div className=\"flex w-full items-center gap-2\">\n                {props.children}\n              </div>\n            )\n          },\n          Dropdown: (props: DropdownProps) => {\n            return (\n              <Select\n                value={String(props.value)}\n                onValueChange={(value) => {\n                  if (props.onChange) {\n                    handleCalendarChange(value, props.onChange)\n                  }\n                }}\n              >\n                <SelectTrigger className=\"h-8 w-fit font-medium first:grow\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent className=\"max-h-[min(26rem,var(--radix-select-content-available-height))]\">\n                  {props.options?.map((option) => (\n                    <SelectItem\n                      key={option.value}\n                      value={String(option.value)}\n                      disabled={option.disabled}\n                    >\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            )\n          },\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Monthly / yearly selects -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-498.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-498",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/select.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-498.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { DropdownNavProps, DropdownProps } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  const handleCalendarChange = (\n    _value: string | number,\n    _e: React.ChangeEventHandler<HTMLSelectElement>\n  ) => {\n    const _event = {\n      target: {\n        value: String(_value),\n      },\n    } as React.ChangeEvent<HTMLSelectElement>\n    _e(_event)\n  }\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        captionLayout=\"dropdown-years\"\n        defaultMonth={new Date()}\n        startMonth={new Date(1980, 6)}\n        components={{\n          DropdownNav: (props: DropdownNavProps) => {\n            return (\n              <div className=\"flex w-full items-center justify-center gap-3 [&>span]:text-sm [&>span]:font-medium\">\n                {props.children}\n              </div>\n            )\n          },\n          YearsDropdown: (props: DropdownProps) => {\n            return (\n              <Select\n                value={String(props.value)}\n                onValueChange={(value) => {\n                  if (props.onChange) {\n                    handleCalendarChange(value, props.onChange)\n                  }\n                }}\n              >\n                <SelectTrigger className=\"h-8 w-fit font-medium\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent className=\"max-h-[min(26rem,var(--radix-select-content-available-height))]\">\n                  {props.options?.map((option) => (\n                    <SelectItem\n                      key={option.value}\n                      value={String(option.value)}\n                      disabled={option.disabled}\n                    >\n                      {option.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            )\n          },\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Yearly select + nav -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-499.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-499",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-499.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport type { WeekNumberProps } from \"react-day-picker\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-md border p-2\"\n        fixedWeeks\n        showWeekNumber\n        components={{\n          WeekNumber: ({ week, ...props }: WeekNumberProps) => {\n            return (\n              <th {...props}>\n                <span className=\"inline-flex size-9 items-center justify-center\">\n                  {week.weekNumber}\n                </span>\n              </th>\n            )\n          },\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Weekly numbers -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "week",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-50.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-50",
+  "type": "registry:component",
+  "dependencies": [
+    "react-payment-inputs"
+  ],
+  "devDependencies": [
+    "@types/react-payment-inputs"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-50.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { CreditCardIcon } from \"lucide-react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\nimport images, { type CardImages } from \"react-payment-inputs/images\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\n\nexport default function Component() {\n  const id = useId()\n  const {\n    meta,\n    getCardNumberProps,\n    getExpiryDateProps,\n    getCVCProps,\n    getCardImageProps,\n  } = usePaymentInputs()\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <legend className=\"text-sm font-medium text-foreground\">\n        Card Details\n      </legend>\n      <div className=\"rounded-md shadow-xs\">\n        <div className=\"relative focus-within:z-10\">\n          <Input\n            className=\"peer rounded-b-none pe-9 shadow-none [direction:inherit]\"\n            {...getCardNumberProps()}\n            id={`number-${id}`}\n          />\n          <div className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n            {meta.cardType ? (\n              <svg\n                className=\"overflow-hidden rounded-sm\"\n                {...getCardImageProps({\n                  images: images as unknown as CardImages,\n                })}\n                width={20}\n              />\n            ) : (\n              <CreditCardIcon size={16} aria-hidden=\"true\" />\n            )}\n          </div>\n        </div>\n        <div className=\"-mt-px flex\">\n          <div className=\"min-w-0 flex-1 focus-within:z-10\">\n            <Input\n              className=\"rounded-e-none rounded-t-none shadow-none [direction:inherit]\"\n              {...getExpiryDateProps()}\n              id={`expiry-${id}`}\n            />\n          </div>\n          <div className=\"-ms-px min-w-0 flex-1 focus-within:z-10\">\n            <Input\n              className=\"rounded-s-none rounded-t-none shadow-none [direction:inherit]\"\n              {...getCVCProps()}\n              id={`cvc-${id}`}\n            />\n          </div>\n        </div>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "checkout",
+      "payment",
+      "credit card",
+      "form"
+    ]
+  }
+}

package/public/r/comp-500.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-500",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-500.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n  const selectedDay = addDays(today, -28)\n  const [month, setMonth] = useState(selectedDay)\n  const [date, setDate] = useState<Date | undefined>(selectedDay)\n\n  return (\n    <div>\n      <div className=\"rounded-md border p-2\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          month={month}\n          onMonthChange={setMonth}\n        />\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"mt-2 mb-1\"\n          onClick={() => setMonth(today)}\n        >\n          Current month\n        </Button>\n      </div>\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        With button -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "button",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-501.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-501",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-501.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nexport default function Component() {\n  const today = new Date()\n  const selectedDay = addDays(today, -28)\n  const [month, setMonth] = useState(selectedDay)\n  const [date, setDate] = useState<Date | undefined>(selectedDay)\n\n  return (\n    <div>\n      <div className=\"rounded-md border p-2\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          month={month}\n          onMonthChange={setMonth}\n        />\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"mt-2 mb-1\"\n          onClick={() => {\n            setDate(today)\n            setMonth(today)\n          }}\n        >\n          Today\n        </Button>\n      </div>\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        With button -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "button",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-502.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-502",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-502.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useId, useState } from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const today = new Date()\n  const [month, setMonth] = useState(today)\n  const [date, setDate] = useState<Date | undefined>(today)\n  const [inputValue, setInputValue] = useState(\"\")\n\n  const handleDayPickerSelect = (date: Date | undefined) => {\n    if (!date) {\n      setInputValue(\"\")\n      setDate(undefined)\n    } else {\n      setDate(date)\n      setMonth(date)\n      setInputValue(format(date, \"yyyy-MM-dd\"))\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setInputValue(value)\n\n    if (value) {\n      const parsedDate = new Date(value)\n      setDate(parsedDate)\n      setMonth(parsedDate)\n    } else {\n      setDate(undefined)\n    }\n  }\n\n  useEffect(() => {\n    setInputValue(format(today, \"yyyy-MM-dd\"))\n  }, [])\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <Calendar\n          mode=\"single\"\n          className=\"p-2\"\n          selected={date}\n          onSelect={handleDayPickerSelect}\n          month={month}\n          onMonthChange={setMonth}\n        />\n        <div className=\"border-t p-3\">\n          <div className=\"flex items-center gap-3\">\n            <Label htmlFor={id} className=\"text-xs\">\n              Enter date\n            </Label>\n            <div className=\"relative grow\">\n              <Input\n                id={id}\n                type=\"date\"\n                value={inputValue}\n                onChange={handleInputChange}\n                className=\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                aria-label=\"Select date\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <CalendarIcon size={16} aria-hidden=\"true\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Date input -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "input",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-503.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-503",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-503.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { ClockIcon } from \"lucide-react\"\n\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const [date, setDate] = useState<Date | undefined>(new Date())\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <Calendar\n          mode=\"single\"\n          className=\"p-2\"\n          selected={date}\n          onSelect={setDate}\n        />\n        <div className=\"border-t p-3\">\n          <div className=\"flex items-center gap-3\">\n            <Label htmlFor={id} className=\"text-xs\">\n              Enter time\n            </Label>\n            <div className=\"relative grow\">\n              <Input\n                id={id}\n                type=\"time\"\n                step=\"1\"\n                defaultValue=\"12:00:00\"\n                className=\"peer appearance-none ps-9 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n              />\n              <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n                <ClockIcon size={16} aria-hidden=\"true\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Time input -{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://daypicker.dev/\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React DayPicker\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "input",
+      "time",
+      "react daypicker"
+    ],
+    "style": 1
+  }
+}