love-ui 1.2.12 → 1.2.14

package/public/r/comp-504.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-504",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/collapsible.json",
+    "https://loveui.dev/building-blocks/r/scroll-area.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-504.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport {\n  eachMonthOfInterval,\n  eachYearOfInterval,\n  endOfYear,\n  format,\n  isAfter,\n  isBefore,\n  startOfYear,\n} from \"date-fns\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { CaptionLabelProps, MonthGridProps } from \"react-day-picker\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/building-blocks/default/ui/collapsible\"\nimport { ScrollArea } from \"@/registry/building-blocks/default/ui/scroll-area\"\n\nexport default function Component() {\n  const today = new Date()\n  const [month, setMonth] = useState(today)\n  const [date, setDate] = useState<Date | undefined>(today)\n  const [isYearView, setIsYearView] = useState(false)\n  const startDate = new Date(1980, 6)\n  const endDate = new Date(2030, 6)\n\n  const years = eachYearOfInterval({\n    start: startOfYear(startDate),\n    end: endOfYear(endDate),\n  })\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        month={month}\n        onMonthChange={setMonth}\n        defaultMonth={new Date()}\n        startMonth={startDate}\n        endMonth={endDate}\n        className=\"overflow-hidden rounded-md border p-2\"\n        classNames={{\n          month_caption: \"ms-2.5 me-20 justify-start\",\n          nav: \"justify-end\",\n        }}\n        components={{\n          CaptionLabel: (props: CaptionLabelProps) => (\n            <CaptionLabel\n              isYearView={isYearView}\n              setIsYearView={setIsYearView}\n              {...props}\n            />\n          ),\n          MonthGrid: (props: MonthGridProps) => {\n            return (\n              <MonthGrid\n                className={props.className}\n                isYearView={isYearView}\n                setIsYearView={setIsYearView}\n                startDate={startDate}\n                endDate={endDate}\n                years={years}\n                currentYear={month.getFullYear()}\n                currentMonth={month.getMonth()}\n                onMonthSelect={(selectedMonth: Date) => {\n                  setMonth(selectedMonth)\n                  setIsYearView(false)\n                }}\n              >\n                {props.children}\n              </MonthGrid>\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        Advanced 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\nfunction MonthGrid({\n  className,\n  children,\n  isYearView,\n  startDate,\n  endDate,\n  years,\n  currentYear,\n  currentMonth,\n  onMonthSelect,\n}: {\n  className?: string\n  children: React.ReactNode\n  isYearView: boolean\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>\n  startDate: Date\n  endDate: Date\n  years: Date[]\n  currentYear: number\n  currentMonth: number\n  onMonthSelect: (date: Date) => void\n}) {\n  const currentYearRef = useRef<HTMLDivElement>(null)\n  const currentMonthButtonRef = useRef<HTMLButtonElement>(null)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (isYearView && currentYearRef.current && scrollAreaRef.current) {\n      const viewport = scrollAreaRef.current.querySelector(\n        \"[data-radix-scroll-area-viewport]\"\n      ) as HTMLElement\n      if (viewport) {\n        const yearTop = currentYearRef.current.offsetTop\n        viewport.scrollTop = yearTop\n      }\n      setTimeout(() => {\n        currentMonthButtonRef.current?.focus()\n      }, 100)\n    }\n  }, [isYearView])\n\n  return (\n    <div className=\"relative\">\n      <table className={className}>{children}</table>\n      {isYearView && (\n        <div className=\"absolute inset-0 z-20 -mx-2 -mb-2 bg-background\">\n          <ScrollArea ref={scrollAreaRef} className=\"h-full\">\n            {years.map((year) => {\n              const months = eachMonthOfInterval({\n                start: startOfYear(year),\n                end: endOfYear(year),\n              })\n              const isCurrentYear = year.getFullYear() === currentYear\n\n              return (\n                <div\n                  key={year.getFullYear()}\n                  ref={isCurrentYear ? currentYearRef : undefined}\n                >\n                  <CollapsibleYear\n                    title={year.getFullYear().toString()}\n                    open={isCurrentYear}\n                  >\n                    <div className=\"grid grid-cols-3 gap-2\">\n                      {months.map((month) => {\n                        const isDisabled =\n                          isBefore(month, startDate) || isAfter(month, endDate)\n                        const isCurrentMonth =\n                          month.getMonth() === currentMonth &&\n                          year.getFullYear() === currentYear\n\n                        return (\n                          <Button\n                            key={month.getTime()}\n                            ref={\n                              isCurrentMonth ? currentMonthButtonRef : undefined\n                            }\n                            variant={isCurrentMonth ? \"default\" : \"outline\"}\n                            size=\"sm\"\n                            className=\"h-7\"\n                            disabled={isDisabled}\n                            onClick={() => onMonthSelect(month)}\n                          >\n                            {format(month, \"MMM\")}\n                          </Button>\n                        )\n                      })}\n                    </div>\n                  </CollapsibleYear>\n                </div>\n              )\n            })}\n          </ScrollArea>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction CaptionLabel({\n  children,\n  isYearView,\n  setIsYearView,\n}: {\n  isYearView: boolean\n  setIsYearView: React.Dispatch<React.SetStateAction<boolean>>\n} & React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <Button\n      className=\"-ms-2 flex items-center gap-2 text-sm font-medium hover:bg-transparent data-[state=open]:text-muted-foreground/80 [&[data-state=open]>svg]:rotate-180\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={() => setIsYearView((prev) => !prev)}\n      data-state={isYearView ? \"open\" : \"closed\"}\n    >\n      {children}\n      <ChevronDownIcon\n        size={16}\n        className=\"shrink-0 text-muted-foreground/80 transition-transform duration-200\"\n        aria-hidden=\"true\"\n      />\n    </Button>\n  )\n}\n\nfunction CollapsibleYear({\n  title,\n  children,\n  open,\n}: {\n  title: string\n  children: React.ReactNode\n  open?: boolean\n}) {\n  return (\n    <Collapsible className=\"border-t px-2 py-1.5\" defaultOpen={open}>\n      <CollapsibleTrigger asChild>\n        <Button\n          className=\"flex w-full justify-start gap-2 text-sm font-medium hover:bg-transparent [&[data-state=open]>svg]:rotate-180\"\n          variant=\"ghost\"\n          size=\"sm\"\n        >\n          <ChevronDownIcon\n            size={16}\n            className=\"shrink-0 text-muted-foreground/80 transition-transform duration-200\"\n            aria-hidden=\"true\"\n          />\n          {title}\n        </Button>\n      </CollapsibleTrigger>\n      <CollapsibleContent className=\"overflow-hidden px-3 py-1 text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\">\n        {children}\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "collapsible",
+      "react daypicker",
+      "radix"
+    ],
+    "style": 1
+  }
+}

package/public/r/comp-505.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-505",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/scroll-area.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-505.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { format } from \"date-fns\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { ScrollArea } from \"@/registry/building-blocks/default/ui/scroll-area\"\n\nexport default function Component() {\n  const today = new Date()\n  const [date, setDate] = useState<Date>(today)\n  const [time, setTime] = useState<string | null>(null)\n\n  // Mock time slots data\n  const timeSlots = [\n    { time: \"09:00\", available: false },\n    { time: \"09:30\", available: false },\n    { time: \"10:00\", available: true },\n    { time: \"10:30\", available: true },\n    { time: \"11:00\", available: true },\n    { time: \"11:30\", available: true },\n    { time: \"12:00\", available: false },\n    { time: \"12:30\", available: true },\n    { time: \"13:00\", available: true },\n    { time: \"13:30\", available: true },\n    { time: \"14:00\", available: true },\n    { time: \"14:30\", available: false },\n    { time: \"15:00\", available: false },\n    { time: \"15:30\", available: true },\n    { time: \"16:00\", available: true },\n    { time: \"16:30\", available: true },\n    { time: \"17:00\", available: true },\n    { time: \"17:30\", available: true },\n  ]\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate)\n                setTime(null)\n              }\n            }}\n            className=\"p-2 sm:pe-5\"\n            disabled={[\n              { before: today }, // Dates before today\n            ]}\n          />\n          <div className=\"relative w-full max-sm:h-48 sm:w-40\">\n            <div className=\"absolute inset-0 py-4 max-sm:border-t\">\n              <ScrollArea className=\"h-full sm:border-s\">\n                <div className=\"space-y-3\">\n                  <div className=\"flex h-5 shrink-0 items-center px-5\">\n                    <p className=\"text-sm font-medium\">\n                      {format(date, \"EEEE, d\")}\n                    </p>\n                  </div>\n                  <div className=\"grid gap-1.5 px-5 max-sm:grid-cols-2\">\n                    {timeSlots.map(({ time: timeSlot, available }) => (\n                      <Button\n                        key={timeSlot}\n                        variant={time === timeSlot ? \"default\" : \"outline\"}\n                        size=\"sm\"\n                        className=\"w-full\"\n                        onClick={() => setTime(timeSlot)}\n                        disabled={!available}\n                      >\n                        {timeSlot}\n                      </Button>\n                    ))}\n                  </div>\n                </div>\n              </ScrollArea>\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        Appointment picker -{\" \"}\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",
+      "time",
+      "button",
+      "react daypicker"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-506.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-506",
+  "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-506.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { subDays, subMonths, subYears } 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 yesterday = subDays(today, 1)\n  const lastWeek = subDays(today, 7)\n  const lastMonth = subMonths(today, 1)\n  const lastYear = subYears(today, 1)\n  const [month, setMonth] = useState(today)\n  const [date, setDate] = useState<Date>(today)\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\">\n            <div className=\"h-full sm:border-e\">\n              <div className=\"flex flex-col px-2\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(today)\n                    setMonth(today)\n                  }}\n                >\n                  Today\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yesterday)\n                    setMonth(yesterday)\n                  }}\n                >\n                  Yesterday\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastWeek)\n                    setMonth(lastWeek)\n                  }}\n                >\n                  Last week\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastMonth)\n                    setMonth(lastMonth)\n                  }}\n                >\n                  Last month\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastYear)\n                    setMonth(lastYear)\n                  }}\n                >\n                  Last year\n                </Button>\n              </div>\n            </div>\n          </div>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate)\n              }\n            }}\n            month={month}\n            onMonthChange={setMonth}\n            className=\"p-2\"\n            disabled={[\n              { after: today }, // Dates before today\n            ]}\n          />\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        Calendar with presets -{\" \"}\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"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-507.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-507",
+  "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-507.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  endOfMonth,\n  endOfYear,\n  startOfMonth,\n  startOfYear,\n  subDays,\n  subMonths,\n  subYears,\n} from \"date-fns\"\nimport { DateRange } from \"react-day-picker\"\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 yesterday = {\n    from: subDays(today, 1),\n    to: subDays(today, 1),\n  }\n  const last7Days = {\n    from: subDays(today, 6),\n    to: today,\n  }\n  const last30Days = {\n    from: subDays(today, 29),\n    to: today,\n  }\n  const monthToDate = {\n    from: startOfMonth(today),\n    to: today,\n  }\n  const lastMonth = {\n    from: startOfMonth(subMonths(today, 1)),\n    to: endOfMonth(subMonths(today, 1)),\n  }\n  const yearToDate = {\n    from: startOfYear(today),\n    to: today,\n  }\n  const lastYear = {\n    from: startOfYear(subYears(today, 1)),\n    to: endOfYear(subYears(today, 1)),\n  }\n  const [month, setMonth] = useState(today)\n  const [date, setDate] = useState<DateRange | undefined>(last7Days)\n\n  return (\n    <div>\n      <div className=\"rounded-md border\">\n        <div className=\"flex max-sm:flex-col\">\n          <div className=\"relative py-4 max-sm:order-1 max-sm:border-t sm:w-32\">\n            <div className=\"h-full sm:border-e\">\n              <div className=\"flex flex-col px-2\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate({\n                      from: today,\n                      to: today,\n                    })\n                    setMonth(today)\n                  }}\n                >\n                  Today\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yesterday)\n                    setMonth(yesterday.to)\n                  }}\n                >\n                  Yesterday\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last7Days)\n                    setMonth(last7Days.to)\n                  }}\n                >\n                  Last 7 days\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(last30Days)\n                    setMonth(last30Days.to)\n                  }}\n                >\n                  Last 30 days\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(monthToDate)\n                    setMonth(monthToDate.to)\n                  }}\n                >\n                  Month to date\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastMonth)\n                    setMonth(lastMonth.to)\n                  }}\n                >\n                  Last month\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(yearToDate)\n                    setMonth(yearToDate.to)\n                  }}\n                >\n                  Year to date\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={() => {\n                    setDate(lastYear)\n                    setMonth(lastYear.to)\n                  }}\n                >\n                  Last year\n                </Button>\n              </div>\n            </div>\n          </div>\n          <Calendar\n            mode=\"range\"\n            selected={date}\n            onSelect={(newDate) => {\n              if (newDate) {\n                setDate(newDate)\n              }\n            }}\n            month={month}\n            onMonthChange={setMonth}\n            className=\"p-2\"\n            disabled={[\n              { after: today }, // Dates before today\n            ]}\n          />\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        Range calendar with presets -{\" \"}\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",
+      "button",
+      "react daypicker"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-508.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-508",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-508.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, 25),\n  })\n\n  return (\n    <div>\n      <Calendar\n        mode=\"range\"\n        selected={date}\n        onSelect={setDate}\n        numberOfMonths={2}\n        pagedNavigation\n        showOutsideDays={false}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          months: \"gap-8\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-sm:before:inset-x-2 max-sm:before:h-px max-sm:before:-top-2 sm:before:inset-y-2 sm:before:w-px before:bg-border sm:before:-left-4\",\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Two months 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"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-509.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-509",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-509.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, 48),\n  })\n\n  return (\n    <div>\n      <Calendar\n        mode=\"range\"\n        selected={date}\n        onSelect={setDate}\n        numberOfMonths={3}\n        pagedNavigation\n        showOutsideDays={false}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          months: \"sm:flex-col md:flex-row gap-8\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n        }}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Three months 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"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-51.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-51",
+  "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-51.tsx",
+      "content": "\"use client\"\n\nimport { useId, useMemo, useState } from \"react\"\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \"lucide-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  const [password, setPassword] = useState(\"\")\n  const [isVisible, setIsVisible] = useState<boolean>(false)\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState)\n\n  const checkStrength = (pass: string) => {\n    const requirements = [\n      { regex: /.{8,}/, text: \"At least 8 characters\" },\n      { regex: /[0-9]/, text: \"At least 1 number\" },\n      { regex: /[a-z]/, text: \"At least 1 lowercase letter\" },\n      { regex: /[A-Z]/, text: \"At least 1 uppercase letter\" },\n    ]\n\n    return requirements.map((req) => ({\n      met: req.regex.test(pass),\n      text: req.text,\n    }))\n  }\n\n  const strength = checkStrength(password)\n\n  const strengthScore = useMemo(() => {\n    return strength.filter((req) => req.met).length\n  }, [strength])\n\n  const getStrengthColor = (score: number) => {\n    if (score === 0) return \"bg-border\"\n    if (score <= 1) return \"bg-red-500\"\n    if (score <= 2) return \"bg-orange-500\"\n    if (score === 3) return \"bg-amber-500\"\n    return \"bg-emerald-500\"\n  }\n\n  const getStrengthText = (score: number) => {\n    if (score === 0) return \"Enter a password\"\n    if (score <= 2) return \"Weak password\"\n    if (score === 3) return \"Medium password\"\n    return \"Strong password\"\n  }\n\n  return (\n    <div>\n      {/* Password input field with toggle visibility button */}\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Input with password strength indicator</Label>\n        <div className=\"relative\">\n          <Input\n            id={id}\n            className=\"pe-9\"\n            placeholder=\"Password\"\n            type={isVisible ? \"text\" : \"password\"}\n            value={password}\n            onChange={(e) => setPassword(e.target.value)}\n            aria-describedby={`${id}-description`}\n          />\n          <button\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            type=\"button\"\n            onClick={toggleVisibility}\n            aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n            aria-pressed={isVisible}\n            aria-controls=\"password\"\n          >\n            {isVisible ? (\n              <EyeOffIcon size={16} aria-hidden=\"true\" />\n            ) : (\n              <EyeIcon size={16} aria-hidden=\"true\" />\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* Password strength indicator */}\n      <div\n        className=\"mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border\"\n        role=\"progressbar\"\n        aria-valuenow={strengthScore}\n        aria-valuemin={0}\n        aria-valuemax={4}\n        aria-label=\"Password strength\"\n      >\n        <div\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\n        ></div>\n      </div>\n\n      {/* Password strength description */}\n      <p\n        id={`${id}-description`}\n        className=\"mb-2 text-sm font-medium text-foreground\"\n      >\n        {getStrengthText(strengthScore)}. Must contain:\n      </p>\n\n      {/* Password requirements list */}\n      <ul className=\"space-y-1.5\" aria-label=\"Password requirements\">\n        {strength.map((req, index) => (\n          <li key={index} className=\"flex items-center gap-2\">\n            {req.met ? (\n              <CheckIcon\n                size={16}\n                className=\"text-emerald-500\"\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <XIcon\n                size={16}\n                className=\"text-muted-foreground/80\"\n                aria-hidden=\"true\"\n              />\n            )}\n            <span\n              className={`text-xs ${req.met ? \"text-emerald-600\" : \"text-muted-foreground\"}`}\n            >\n              {req.text}\n              <span className=\"sr-only\">\n                {req.met ? \" - Requirement met\" : \" - Requirement not met\"}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "password"
+    ]
+  }
+}

package/public/r/comp-510.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-510",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/calendar.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-510.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { format } from \"date-fns\"\nimport { DayButtonProps } from \"react-day-picker\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\n\nconst GOOD_PRICE_THRESHOLD = 100\n\nexport default function Component() {\n  const today = new Date()\n  const [date, setDate] = useState<Date | undefined>(today)\n\n  // Mock price data\n  const [mockPriceData, setMockPriceData] = useState<Record<string, number>>({})\n  useEffect(() => {\n    const generateMockPriceData = () => {\n      const data: Record<string, number> = {}\n\n      for (let i = 0; i < 180; i++) {\n        const date = new Date(today)\n        date.setDate(today.getDate() + i)\n        const dateKey = format(date, \"yyyy-MM-dd\")\n        const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80\n        data[dateKey] = randomPrice\n      }\n      return data\n    }\n    setMockPriceData(generateMockPriceData())\n  }, [])\n\n  const isDateDisabled = (date: Date) => {\n    return !mockPriceData[format(date, \"yyyy-MM-dd\")]\n  }\n\n  return (\n    <div>\n      <Calendar\n        mode=\"single\"\n        selected={date}\n        onSelect={setDate}\n        numberOfMonths={2}\n        pagedNavigation\n        showOutsideDays={false}\n        className=\"rounded-md border p-2\"\n        classNames={{\n          months: \"sm:flex-col md:flex-row gap-8\",\n          month:\n            \"relative first-of-type:before:hidden before:absolute max-md:before:inset-x-2 max-md:before:h-px max-md:before:-top-4 md:before:inset-y-2 md:before:w-px before:bg-border md:before:-left-4\",\n          weekday: \"w-12\",\n          day_button: \"size-12\",\n          today: \"*:after:hidden\",\n        }}\n        components={{\n          DayButton: (props: DayButtonProps) => (\n            <DayButton {...props} prices={mockPriceData} />\n          ),\n        }}\n        disabled={isDateDisabled}\n      />\n      <p\n        className=\"mt-4 text-center text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Pricing 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\nfunction DayButton(props: DayButtonProps & { prices: Record<string, number> }) {\n  const { day, modifiers, prices, ...buttonProps } = props\n  const price = prices[format(day.date, \"yyyy-MM-dd\")]\n  const isGoodPrice = price < GOOD_PRICE_THRESHOLD\n\n  return (\n    <button {...buttonProps}>\n      <span className=\"flex flex-col\">\n        {props.children}\n        {price && (\n          <span\n            className={cn(\n              \"text-[10px] font-medium\",\n              isGoodPrice\n                ? \"text-emerald-500\"\n                : \"text-muted-foreground group-data-selected:text-primary-foreground/70\"\n            )}\n          >\n            ${price}\n          </span>\n        )}\n      </span>\n    </button>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "calendar",
+      "date",
+      "react daypicker"
+    ],
+    "colSpan": 3,
+    "style": 1
+  }
+}

package/public/r/comp-511.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-511",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-511.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nexport default function Component() {\n  const id = useId()\n  const [date, setDate] = useState<Date | undefined>()\n\n  return (\n    <div>\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Date picker</Label>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              variant={\"outline\"}\n              className=\"group w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n            >\n              <span\n                className={cn(\"truncate\", !date && \"text-muted-foreground\")}\n              >\n                {date ? format(date, \"PPP\") : \"Pick a date\"}\n              </span>\n              <CalendarIcon\n                size={16}\n                className=\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-2\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\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://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",
+      "picker",
+      "react daypicker"
+    ]
+  }
+}

package/public/r/comp-512.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-512",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/calendar.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/popover.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-512.tsx",
+      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Calendar } from \"@/registry/building-blocks/default/ui/calendar\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\n\nexport default function Component() {\n  const id = useId()\n  const [date, setDate] = useState<DateRange | undefined>()\n\n  return (\n    <div>\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Date range picker</Label>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              variant=\"outline\"\n              className=\"group w-full justify-between border-input bg-background px-3 font-normal outline-offset-0 outline-none hover:bg-background focus-visible:outline-[3px]\"\n            >\n              <span\n                className={cn(\"truncate\", !date && \"text-muted-foreground\")}\n              >\n                {date?.from ? (\n                  date.to ? (\n                    <>\n                      {format(date.from, \"LLL dd, y\")} -{\" \"}\n                      {format(date.to, \"LLL dd, y\")}\n                    </>\n                  ) : (\n                    format(date.from, \"LLL dd, y\")\n                  )\n                ) : (\n                  \"Pick a date range\"\n                )}\n              </span>\n              <CalendarIcon\n                size={16}\n                className=\"shrink-0 text-muted-foreground/80 transition-colors group-hover:text-foreground\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-2\" align=\"start\">\n            <Calendar mode=\"range\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\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://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",
+      "picker",
+      "react daypicker"
+    ]
+  }
+}

package/public/r/comp-513.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-513",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-513.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger>\n              <StepperIndicator asChild>{step}</StepperIndicator>\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with numbers only\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-514.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-514",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-514.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with numbers and checkmarks\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-515.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-515",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-515.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger>\n              <StepperIndicator className=\"size-4 data-[state=active]:border-2 data-[state=active]:border-primary data-[state=active]:bg-transparent [&_span]:sr-only [&_svg]:size-3\" />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with tiny buttons and checkmarks\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-516.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-516",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-516.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2)\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper value={currentStep} onValueChange={setCurrentStep}>\n        {steps.map((step) => (\n          <StepperItem key={step} step={step} className=\"not-last:flex-1\">\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n        >\n          Prev step\n        </Button>\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          disabled={currentStep > steps.length}\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Controlled stepper with checkmarks\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-517.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-517",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-517.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2)\n  const [isLoading, setIsLoading] = useState(false)\n\n  const handleNextStep = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setCurrentStep((prev) => prev + 1)\n      setIsLoading(false)\n    }, 1000)\n  }\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper value={currentStep} onValueChange={setCurrentStep}>\n        {steps.map((step) => (\n          <StepperItem\n            key={step}\n            step={step}\n            className=\"not-last:flex-1\"\n            loading={isLoading}\n          >\n            <StepperTrigger asChild>\n              <StepperIndicator />\n            </StepperTrigger>\n            {step < steps.length && <StepperSeparator />}\n          </StepperItem>\n        ))}\n      </Stepper>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n        >\n          Prev step\n        </Button>\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={handleNextStep}\n          disabled={currentStep > steps.length}\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Controlled stepper with checkmarks and loading state\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-518.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-518",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-518.tsx",
+      "content": "import { Shuffle } from \"lucide-react\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperSeparator,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2}>\n        <StepperItem step={1} className=\"not-last:flex-1\">\n          <StepperTrigger>\n            <StepperIndicator asChild>\n              <img\n                className=\"rounded-full\"\n                src={\"https://i.pravatar.cc/160?img=12\"}\n                width={32}\n                height={32}\n                alt=\"Mike Palmer\"\n              />\n            </StepperIndicator>\n          </StepperTrigger>\n          <StepperSeparator />\n        </StepperItem>\n        <StepperItem step={2} className=\"not-last:flex-1\" loading>\n          <StepperTrigger>\n            <StepperIndicator />\n          </StepperTrigger>\n          <StepperSeparator />\n        </StepperItem>\n        <StepperItem step={3} className=\"not-last:flex-1\">\n          <StepperTrigger>\n            <StepperIndicator asChild>\n              <Shuffle size={14} aria-hidden=\"true\" />\n              <span className=\"sr-only\">Shuffle</span>\n            </StepperIndicator>\n          </StepperTrigger>\n        </StepperItem>\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with mixed elements\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-519.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-519",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-519.tsx",
+      "content": "import {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTitle,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [\n  {\n    step: 1,\n    title: \"Step One\",\n  },\n  {\n    step: 2,\n    title: \"Step Two\",\n  },\n  {\n    step: 3,\n    title: \"Step Three\",\n  },\n  {\n    step: 4,\n    title: \"Step Four\",\n  },\n]\n\nexport default function Component() {\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <Stepper defaultValue={2} className=\"items-start gap-4\">\n        {steps.map(({ step, title }) => (\n          <StepperItem key={step} step={step} className=\"flex-1\">\n            <StepperTrigger className=\"w-full flex-col items-start gap-2 rounded\">\n              <StepperIndicator asChild className=\"h-1 w-full bg-border\">\n                <span className=\"sr-only\">{step}</span>\n              </StepperIndicator>\n              <div className=\"space-y-0.5\">\n                <StepperTitle>{title}</StepperTitle>\n              </div>\n            </StepperTrigger>\n          </StepperItem>\n        ))}\n      </Stepper>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Stepper with labels\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-52.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-52",
+  "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-52.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 htmlFor={id}>Read-only input</Label>\n      <Input\n        id={id}\n        className=\"read-only:bg-muted\"\n        defaultValue=\"This is a read-only input\"\n        readOnly\n        placeholder=\"Email\"\n        type=\"email\"\n      />\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "read-only"
+    ]
+  }
+}

package/public/r/comp-520.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-520",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-520.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(2)\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <div className=\"flex items-center gap-2\">\n        <Button\n          className=\"shrink-0\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n          aria-label=\"Prev step\"\n        >\n          <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n        </Button>\n        <Stepper\n          value={currentStep}\n          onValueChange={setCurrentStep}\n          className=\"gap-1\"\n        >\n          {steps.map((step) => (\n            <StepperItem key={step} step={step} className=\"flex-1\">\n              <StepperTrigger\n                className=\"w-full flex-col items-start gap-2\"\n                asChild\n              >\n                <StepperIndicator asChild className=\"h-1 w-full bg-border\">\n                  <span className=\"sr-only\">{step}</span>\n                </StepperIndicator>\n              </StepperTrigger>\n            </StepperItem>\n          ))}\n        </Stepper>\n        <Button\n          className=\"shrink-0\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          disabled={currentStep === steps.length}\n          aria-label=\"Next step\"\n        >\n          <ChevronRightIcon size={16} aria-hidden=\"true\" />\n        </Button>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Paginated stepper\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-521.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-521",
+  "type": "registry:component",
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/stepper.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-521.tsx",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperTrigger,\n} from \"@/registry/building-blocks/default/ui/stepper\"\n\nconst steps = [1, 2, 3, 4]\n\nexport default function Component() {\n  const [currentStep, setCurrentStep] = useState(1)\n\n  return (\n    <div className=\"mx-auto max-w-xl space-y-8 text-center\">\n      <div className=\"space-y-3\">\n        <Stepper value={currentStep} onValueChange={setCurrentStep}>\n          {steps.map((step) => (\n            <StepperItem key={step} step={step} className=\"flex-1\">\n              <StepperTrigger\n                className=\"w-full flex-col items-start gap-2\"\n                asChild\n              >\n                <StepperIndicator\n                  asChild\n                  className=\"h-2 w-full rounded-none bg-border\"\n                >\n                  <span className=\"sr-only\">{step}</span>\n                </StepperIndicator>\n              </StepperTrigger>\n            </StepperItem>\n          ))}\n        </Stepper>\n        <div className=\"text-sm font-medium text-muted-foreground tabular-nums\">\n          Step {currentStep} of {steps.length}\n        </div>\n      </div>\n      <div className=\"flex justify-center space-x-4\">\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev - 1)}\n          disabled={currentStep === 1}\n        >\n          Prev step\n        </Button>\n        <Button\n          variant=\"outline\"\n          className=\"w-32\"\n          onClick={() => setCurrentStep((prev) => prev + 1)}\n          disabled={currentStep >= steps.length}\n        >\n          Next step\n        </Button>\n      </div>\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Progress stepper\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "stepper"
+    ],
+    "colSpan": 3
+  }
+}