From bec659a95abada1ce8912dd0ce21ef282322153a Mon Sep 17 00:00:00 2001 From: Zach <86675944+zwgnr@users.noreply.github.com> Date: Wed, 9 Jul 2025 20:24:32 -0400 Subject: [PATCH 1/3] mobile fixes --- packages/components/src/core/date-picker/date-picker.tsx | 7 ++++--- packages/components/src/core/table/table.tsx | 2 +- packages/components/src/examples/accordion-base.tsx | 2 +- packages/components/src/examples/accordion-group.tsx | 2 +- packages/components/src/examples/card-base.tsx | 2 +- .../components/src/examples/date-range-picker-base.tsx | 6 +++++- packages/components/src/examples/table-base.tsx | 4 +++- web/app/docs/content/usage.mdx | 2 +- web/components/preview.tsx | 2 +- 9 files changed, 18 insertions(+), 11 deletions(-) diff --git a/packages/components/src/core/date-picker/date-picker.tsx b/packages/components/src/core/date-picker/date-picker.tsx index 0c028455..8945e949 100644 --- a/packages/components/src/core/date-picker/date-picker.tsx +++ b/packages/components/src/core/date-picker/date-picker.tsx @@ -47,7 +47,7 @@ const dateRangePicker = tv({ extend: baseStyles, slots: { group: - "relative flex min-h-11 w-fit min-w-96 flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface", + "relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface", dateSegment: "rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg", separator: "px-2 text-fg-muted", @@ -102,6 +102,7 @@ interface DateRangePickerProps label?: string; description?: string; errorMessage?: string; + className?: string; } const DateRangePicker = ({ @@ -112,9 +113,9 @@ const DateRangePicker = ({ children, ...props }: DateRangePickerProps) => ( - + {label && } - + {(segment) => ( { return ( - + You can cancel your subscription at any time by going to your account settings and clicking "Cancel Subscription". Your access will continue until the end of your current billing period, and you won't be charged diff --git a/packages/components/src/examples/accordion-group.tsx b/packages/components/src/examples/accordion-group.tsx index 8122ebce..b96ffdaa 100644 --- a/packages/components/src/examples/accordion-group.tsx +++ b/packages/components/src/examples/accordion-group.tsx @@ -4,7 +4,7 @@ export const AccordionGroupExample = () => { return (
diff --git a/packages/components/src/examples/card-base.tsx b/packages/components/src/examples/card-base.tsx index b56bc21d..7f3f7ba0 100644 --- a/packages/components/src/examples/card-base.tsx +++ b/packages/components/src/examples/card-base.tsx @@ -7,7 +7,7 @@ import { Input } from "../core/input/input"; export const CardBase = () => { return ( diff --git a/packages/components/src/examples/date-range-picker-base.tsx b/packages/components/src/examples/date-range-picker-base.tsx index 03c58347..f4f277f1 100644 --- a/packages/components/src/examples/date-range-picker-base.tsx +++ b/packages/components/src/examples/date-range-picker-base.tsx @@ -1,3 +1,7 @@ import { DateRangePicker } from "../core/date-picker/date-picker"; -export const DateRangePickerBase = () => ; \ No newline at end of file +export const DateRangePickerBase = () => ( +
+ +
+); diff --git a/packages/components/src/examples/table-base.tsx b/packages/components/src/examples/table-base.tsx index 77af54c2..d03442e8 100644 --- a/packages/components/src/examples/table-base.tsx +++ b/packages/components/src/examples/table-base.tsx @@ -56,7 +56,8 @@ const users: User[] = [ ]; export const TableExample = () => ( - +
+
Name Email @@ -86,4 +87,5 @@ export const TableExample = () => ( )}
+
); diff --git a/web/app/docs/content/usage.mdx b/web/app/docs/content/usage.mdx index b86c013c..b94bebf9 100644 --- a/web/app/docs/content/usage.mdx +++ b/web/app/docs/content/usage.mdx @@ -47,7 +47,7 @@ BaseLayer provides two convenient ways to work with AI chatbots:
  • ChatGPT/Claude/T3: Use the "Open in AI" button on any docs page for instant access, or save - https://www.baselayer.dev/llms.txt as a custom instruction + www.baselayer.dev/llms.txt as a custom instruction
    • diff --git a/web/components/preview.tsx b/web/components/preview.tsx index fd55f5c5..1cc2d92d 100644 --- a/web/components/preview.tsx +++ b/web/components/preview.tsx @@ -77,7 +77,7 @@ export const Preview = ({ )} -
    +
    {activeTab === "preview" ? (
    {children} From d3b554b4419141aeb99b63e24ea0714c97d109df Mon Sep 17 00:00:00 2001 From: Zach <86675944+zwgnr@users.noreply.github.com> Date: Wed, 9 Jul 2025 20:25:48 -0400 Subject: [PATCH 2/3] gen registry --- packages/components/src/registry.ts | 6 +++--- web/public/build-info.json | 6 +++--- web/public/registry.json | 2 +- web/public/templates/date-picker.txt | 7 ++++--- web/public/templates/table.txt | 2 +- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/components/src/registry.ts b/packages/components/src/registry.ts index 106fa64d..b152a39d 100644 --- a/packages/components/src/registry.ts +++ b/packages/components/src/registry.ts @@ -4,7 +4,7 @@ import type { ComponentRegistry, ComponentRegistryEntry } from '@baselayer/registry'; const registry: ComponentRegistry = { - "version": "2.0.0", + "version": "2.0.1", "components": [ { "id": "accordion", @@ -400,7 +400,7 @@ const templateContents: Record = { "combobox": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tComboBox as AriaComboBox,\n\ttype ComboBoxProps as AriaComboBoxProps,\n\tButton,\n\tFieldError,\n\tInput,\n\tLabel,\n\tListBox,\n\tListBoxItem,\n\ttype ListBoxItemProps,\n\tPopover,\n\tText,\n\ttype ValidationResult,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CheckIcon, ChevronsUpDown } from \"lucide-react\";\n\nconst combobox = tv({\n\tslots: {\n\t\troot: \"group max-h-inherit w-full overflow-auto p-1 outline-none\",\n\t\tinput:\n\t\t\t\"w-full rounded-lg border border-border bg-surface px-4 py-1.5 align-middle font-semibold text-fg outline-none ring-fg transition-all group-data-[focused]:border-transparent group-data-[focused]:bg-surface group-data-[focused]:ring-2\",\n\t\tbutton:\n\t\t\t\"absolute right-2 flex appearance-none items-center justify-center rounded-full border-0 outline-none ring-focus ring-offset-2 ring-offset-surface data-[focus-visible]:ring-2\",\n\t\tpopover:\n\t\t\t\"w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none\",\n\t\titem: \"relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t},\n});\n\nconst styles = combobox();\n\ninterface ComboBoxProps\n\textends Omit, \"className\"> {\n\tclassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst ComboBox = ({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: ComboBoxProps) => (\n\t\n\t\t{label && }\n\t\t
    \n\t\t\t\n\t\t\t\n\t\t
    \n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t{children}\n\t\t\n\t\n);\n\ninterface ComboBoxItemProps\n\textends Omit {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nconst ComboBoxItem = ({ className, ...props }: ComboBoxItemProps) => (\n\t\n\t\t{({ isSelected }) => (\n\t\t\t
    \n\t\t\t\t{props.children}\n\t\t\t\t{isSelected && }\n\t\t\t
    \n\t\t)}\n\t    \n);\n\nexport { ComboBox, ComboBoxItem };\nexport type { ComboBoxProps, ListBoxItemProps as ComboBoxItemProps };", "command": "\"use client\";\n\nimport type { ComponentType, ReactNode } from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport {\n\tButton as AriaButton,\n\tDialog as AriaDialog,\n\tDialogTrigger as AriaDialogTrigger,\n\tModal as AriaModal,\n\tAutocomplete,\n\tInput,\n\tMenu,\n\tMenuItem,\n\ttype MenuItemProps,\n\tModalOverlay,\n\ttype ModalOverlayProps,\n\tTextField,\n\tuseFilter,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Search } from \"lucide-react\";\n\nconst command = tv({\n\tslots: {\n\t\ttrigger:\n\t\t\t\"flex w-full items-center justify-between rounded-full bg-secondary px-4 py-2 font-semibold text-fg outline-none ring-primary ring-offset-2 ring-offset-surface transition-colors data-[hovered]:bg-secondary/75 data-[focus-visible]:ring-2\",\n\t\toverlay:\n\t\t\t\"data-[entering]:fade-in data-[exiting]:fade-out fixed inset-0 z-50 flex min-h-full items-start justify-center bg-zinc-500/25 p-4 text-center data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200 sm:items-center\",\n\t\tmodal:\n\t\t\t\"data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:duration-300 data-[exiting]:duration-200\",\n\t\tdialog:\n\t\t\t\"flex min-h-96 min-w-80 max-w-full flex-col gap-1 rounded-2xl bg-surface p-2 shadow-lg outline-none md:w-lg\",\n\t\tinput:\n\t\t\t\"rounded-lg border-b-2 border-none bg-transparent px-3 py-2 text-base text-fg leading-5 outline-none placeholder:text-fg-muted\",\n\t\tmenu: \"mt-2 h-80 overflow-auto\",\n\t\titem: \"group flex min-h-12 w-full cursor-default items-center rounded-lg px-3 py-2 text-fg outline-none data-[focused]:bg-secondary data-[pressed]:bg-surface-3 data-[focused]:text-focus-fg\",\n\t\tkbd: \"ml-auto rounded border border-border bg-surface-2 px-2 py-1 font-semibold text-fg-muted text-xs\",\n\t},\n});\n\nconst styles = command();\n\ninterface CommandItem {\n\tid: string;\n\tlabel: string;\n\tshortcut?: string;\n\ticon?: ComponentType<{ className?: string }>;\n\tonSelect?: () => void;\n}\n\ninterface CommandProps extends Omit {\n\tclassName?: string;\n\ttrigger?: ReactNode;\n\tcommands: CommandItem[];\n\tplaceholder?: string;\n\ttriggerKey?: string;\n\tonCommandSelect?: (command: CommandItem) => void;\n\tonSearchChange?: (search: string) => void;\n}\n\nconst Command = ({\n\tclassName,\n\ttrigger,\n\tcommands,\n\tplaceholder = \"Search commands…\",\n\ttriggerKey = \"k\",\n\tonCommandSelect,\n\tonSearchChange,\n\t...props\n}: CommandProps) => {\n\tconst [isOpen, setOpen] = useState(false);\n\tconst [isMac, setIsMac] = useState(true);\n\tconst { contains } = useFilter({ sensitivity: \"base\" });\n\n\tuseEffect(() => {\n\t\tsetIsMac(/Mac/.test(navigator?.platform || \"\"));\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\te.key.toLowerCase() === triggerKey.toLowerCase() &&\n\t\t\t\t(isMac ? e.metaKey : e.ctrlKey)\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetOpen((prev) => !prev);\n\t\t\t} else if (e.key === \"Escape\") {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => document.removeEventListener(\"keydown\", handleKeyDown);\n\t}, [isMac, triggerKey]);\n\n\tconst handleCommandSelect = (command: CommandItem) => {\n\t\tcommand.onSelect?.();\n\t\tonCommandSelect?.(command);\n\t\tsetOpen(false);\n\t};\n\n\treturn (\n\t\t\n\t\t\t{trigger || (\n\t\t\t\t\n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\t\t\t\t\t\tSearch\n\t\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t\t\t{isMac ? \"⌘\" : \"Ctrl\"} {triggerKey.toUpperCase()}\n\t\t\t\t\t\n\t\t\t\t    \n\t\t\t)}\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t true : contains}>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{({ label, shortcut, icon: Icon, ...command }) => (\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\thandleCommandSelect({\n\t\t\t\t\t\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\t\t\t\t\t\tshortcut,\n\t\t\t\t\t\t\t\t\t\t\t\ticon: Icon,\n\t\t\t\t\t\t\t\t\t\t\t\t...command,\n\t\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t{Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t{shortcut && (\n\t\t\t\t\t\t\t\t\t\t\t{shortcut}\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t    \n\t\t\t\t\t    \n\t\t\t\t    \n\t\t\t    \n\t\t    \n\t);\n};\n\ninterface CommandMenuItemProps extends Omit {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst CommandMenuItem = ({\n\tclassName,\n\tchildren,\n\t...props\n}: CommandMenuItemProps) => (\n\t\n\t\t{children}\n\t\n);\n\nconst CommandTrigger = AriaDialogTrigger;\n\nexport { Command, CommandMenuItem, CommandTrigger };\nexport type { CommandProps, CommandMenuItemProps, CommandItem };\n", "date-field": "\"use client\";\n\nimport type {\n\tDateFieldProps as AriaDateFieldProps,\n\tDateValue,\n} from \"react-aria-components\";\nimport {\n\tDateField as AriaDateField,\n\tDateInput,\n\tDateSegment,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst dateField = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"flex min-h-11 min-w-48 appearance-none items-center rounded-lg border border-border bg-surface px-3 py-0.5 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:border-none data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm\",\n\t\tsegmentStyles:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:text-primary-fg data-[focused]:bg-primary data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t},\n});\n\nconst styles = dateField();\n\ninterface DateFieldProps extends AriaDateFieldProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DateField = ({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\t...props\n}: DateFieldProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t{(segment) => (\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t\t{description && {description}}\n\t\t{errorMessage}\n\t\n);\n\nexport { DateField };\nexport type { DateFieldProps };\n", - "date-picker": "\"use client\";\n\nimport type {\n\tDatePickerProps as AriaDatePickerProps,\n\tDateRangePickerProps as AriaDateRangePickerProps,\n} from \"react-aria-components\";\nimport {\n\tDatePicker as AriaDatePicker,\n\tDateRangePicker as AriaDateRangePicker,\n\tButton,\n\tDateInput,\n\tDateSegment,\n\ttype DateValue,\n\tDialog,\n\tFieldError,\n\tGroup,\n\tLabel,\n\tPopover,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronDown } from \"lucide-react\";\n\nimport { Calendar, RangeCalendar } from \"../calendar/calendar\";\n\nconst baseStyles = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"appearance-none rounded-lg px-3 py-1.5 outline-none ring-primary transition-all\",\n\t\tpopover:\n\t\t\t\"overflow-auto rounded-2xl data-[entering]:animate-fade data-[exiting]:animate-fadeOut\",\n\t},\n});\n\nconst datePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-auto min-w-48 items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"min-w-16 rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t},\n});\n\nconst dateRangePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-fit min-w-96 flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t\tseparator: \"px-2 text-fg-muted\",\n\t},\n});\n\nconst styles = datePicker();\nconst rangeStyles = dateRangePicker();\n\ninterface DatePickerProps extends AriaDatePickerProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DatePicker = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DatePickerProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n);\n\ninterface DateRangePickerProps\n\textends AriaDateRangePickerProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DateRangePicker = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DateRangePickerProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t–\n\t\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n);\n\nexport { DatePicker, DateRangePicker };\nexport type { DatePickerProps, DateRangePickerProps };\n", + "date-picker": "\"use client\";\n\nimport type {\n\tDatePickerProps as AriaDatePickerProps,\n\tDateRangePickerProps as AriaDateRangePickerProps,\n} from \"react-aria-components\";\nimport {\n\tDatePicker as AriaDatePicker,\n\tDateRangePicker as AriaDateRangePicker,\n\tButton,\n\tDateInput,\n\tDateSegment,\n\ttype DateValue,\n\tDialog,\n\tFieldError,\n\tGroup,\n\tLabel,\n\tPopover,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronDown } from \"lucide-react\";\n\nimport { Calendar, RangeCalendar } from \"../calendar/calendar\";\n\nconst baseStyles = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"appearance-none rounded-lg px-3 py-1.5 outline-none ring-primary transition-all\",\n\t\tpopover:\n\t\t\t\"overflow-auto rounded-2xl data-[entering]:animate-fade data-[exiting]:animate-fadeOut\",\n\t},\n});\n\nconst datePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-auto min-w-48 items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"min-w-16 rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t},\n});\n\nconst dateRangePicker = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tgroup:\n\t\t\t\"relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface\",\n\t\tdateSegment:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg\",\n\t\tseparator: \"px-2 text-fg-muted\",\n\t},\n});\n\nconst styles = datePicker();\nconst rangeStyles = dateRangePicker();\n\ninterface DatePickerProps extends AriaDatePickerProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst DatePicker = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DatePickerProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n);\n\ninterface DateRangePickerProps\n\textends AriaDateRangePickerProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst DateRangePicker = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: DateRangePickerProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t–\n\t\t\t\n\t\t\t\n\t\t\t\t{(segment) => (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n);\n\nexport { DatePicker, DateRangePicker };\nexport type { DatePickerProps, DateRangePickerProps };\n", "input": "\"use client\";\n\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tValidationResult,\n} from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tTextField as AriaTextField,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst input = tv({\n\tbase: \"min-h-11 appearance-none rounded-lg border border-border bg-surface px-3 py-1 text-fg outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focused]:border-transparent data-[disabled]:bg-primary/10 data-[disabled]:text-fg-disabled data-[focused]:ring-2 [&::placeholder]:text-fg-muted [&::placeholder]:text-sm\",\n});\n\ninterface InputProps extends Omit {\n\tclassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n\tplaceholder?: string;\n}\n\nconst Input = ({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tplaceholder,\n\tclassName,\n\t...props\n}: InputProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\n);\n\nexport { Input };\nexport type { InputProps };\n", "menu": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport {\n\tHeader as AriaHeader,\n\tMenu as AriaMenu,\n\tMenuItem as AriaMenuItem,\n\tMenuSection as AriaMenuSection,\n\tMenuTrigger as AriaMenuTrigger,\n\ttype MenuItemProps,\n\ttype MenuProps,\n\tPopover,\n\tSeparator,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nexport const menu = tv({\n\tslots: {\n\t\tmenuPopover:\n\t\t\t\"data-[entering]:fade-in data-[exiting]:fade-out overflow-auto rounded-2xl border border-border/25 bg-surface shadow-xl data-[entering]:animate-in data-[exiting]:animate-out\",\n\t\theader: \"p-2 font-semibold\",\n\t\tcontent: \"flex h-fit min-w-56 flex-col gap-2 p-3 outline-none\",\n\t\titem: \"relative flex cursor-default justify-between rounded-lg p-3 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t\tseparator: \"h-[1px] bg-border\",\n\t},\n});\n\nconst { menuPopover, content, header, item, separator } = menu();\n\nconst MenuTrigger = AriaMenuTrigger;\nconst MenuSection = AriaMenuSection;\n\nconst MenuContent = ({\n\tchildren,\n\tclassName,\n\t...props\n}: MenuProps & { className?: string }) => (\n\t\n\t\t\n\t\t\t{children}\n\t\t\n\t\n);\n\nconst MenuItem = ({\n\tchildren,\n\tclassName,\n\t...props\n}: MenuItemProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst MenuHeader = ({\n\tchildren,\n\tclassName,\n\t...props\n}: HTMLAttributes & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst MenuSeperator = ({\n\tclassName,\n\t...props\n}: HTMLAttributes & { className?: string }) => (\n\t\n);\n\nexport {\n\tMenuContent,\n\tMenuHeader,\n\tMenuItem,\n\tMenuSeperator,\n\tMenuTrigger,\n\tMenuSection,\n};\n", "meter": "\"use client\";\n\nimport {\n\tMeter as AriaMeter,\n\ttype MeterProps as AriaMeterProps,\n\tLabel,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst bar = tv({\n\tbase: \"h-4 overflow-hidden rounded-2xl bg-surface-2\",\n});\n\ninterface MeterProps extends Omit {\n\tlabel?: string;\n\tclassName?: string;\n}\n\nconst Meter = ({ label, className, ...props }: MeterProps) => (\n\t\n\t\t{({ percentage, valueText }) => (\n\t\t\t<>\n\t\t\t\t
    \n\t\t\t\t\t{label && }\n\t\t\t\t\t{valueText}\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\t\t\t\t
    \n\t\t\t\n\t\t)}\n\t    \n);\n\nexport { Meter };\nexport type { MeterProps };\n", @@ -410,7 +410,7 @@ const templateContents: Record = { "select": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps,\n\tValidationResult,\n} from \"react-aria-components\";\nimport {\n\tSelect as AriaSelect,\n\tAutocomplete,\n\tButton,\n\tFieldError,\n\tInput,\n\tLabel,\n\tListBox,\n\tListBoxItem,\n\tPopover,\n\tSearchField,\n\tSelectValue,\n\tText,\n\tuseFilter,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CheckIcon, ChevronDown, Search } from \"lucide-react\";\n\nconst select = tv({\n\tslots: {\n\t\tgroup: \"group flex flex-col gap-1\",\n\t\tbutton:\n\t\t\t\"group flex w-fit items-center justify-between gap-4 rounded-full border border-border bg-surface px-4 py-2.75 align-middle font-semibold text-fg text-sm outline-none ring-fg transition-all data-[hovered]:bg-surface-2 group-data-[focus-visible]:border-transparent group-data-[open]:bg-surface-2 group-data-[focus-visible]:ring-2\",\n\t\titem: \"relative m-1 flex cursor-default flex-col rounded-lg p-2 font-semibold outline-none data-[disabled]:cursor-not-allowed data-[focused]:bg-secondary data-[disabled]:text-fg-disabled\",\n\t\tsearchField:\n\t\t\t\"group m-1 flex items-center rounded-full border border-border bg-surface px-2 py-1.5\",\n\t\tsearchInput:\n\t\t\t\"flex-1 bg-transparent text-fg outline-none placeholder:text-fg-muted\",\n\t\tsearchIcon: \"mr-2 size-4 text-fg-muted\",\n\t\tclearButton:\n\t\t\t\"ml-2 rounded p-0.5 text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg group-empty:invisible\",\n\t\tpopover:\n\t\t\t\"min-w-[var(--trigger-width)] rounded-xl border border-border/25 bg-surface p-1 text-fg shadow-lg outline-none\",\n\t},\n});\n\nconst styles = select();\n\ninterface SelectProps\n\textends Omit, \"className\"> {\n\tclassName?: string;\n\tpopoverClassName?: string;\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst Select = ({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tpopoverClassName,\n\tchildren,\n\t...props\n}: SelectProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\t\n\t\t\t{children}\n\t\t\n\t\n);\n\ninterface SelectItemProps\n\textends Omit {\n\tchildren: ReactNode;\n\tclassName?: string;\n}\n\nconst SelectItem = ({ className, ...props }: SelectItemProps) => (\n\t\n\t\t{({ isSelected }) => (\n\t\t\t
    \n\t\t\t\t{props.children}\n\t\t\t\t{isSelected && }\n\t\t\t
    \n\t\t)}\n\t    \n);\n\ninterface SearchableSelectProps\n\textends SelectProps {\n\tsearchPlaceholder?: string;\n}\n\nconst SearchableSelect = ({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\tsearchPlaceholder = \"Search...\",\n\tchildren,\n\tpopoverClassName,\n\t...props\n}: SearchableSelectProps) => {\n\tconst { contains } = useFilter({ sensitivity: \"base\" });\n\n\treturn (\n\t\t\n\t\t\t{label && }\n\t\t\t\n\t\t\t{description && (\n\t\t\t\t\n\t\t\t\t\t{description}\n\t\t\t\t\n\t\t\t)}\n\t\t\t{errorMessage}\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{children}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nexport { Select, SelectItem, SearchableSelect };\nexport type { SelectProps, SelectItemProps, SearchableSelectProps };\n", "slider": "\"use client\";\n\nimport {\n\tSlider as AriaSlider,\n\tSliderThumb as AriaSliderThumb,\n\tSliderTrack as AriaSliderTrack,\n\tLabel,\n\ttype LabelProps,\n\tSliderOutput,\n\ttype SliderProps,\n\ttype SliderThumbProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst slider = tv({\n\tslots: {\n\t\troot: \"grid w-64 auto-cols-fr grid-cols-1 text-fg-muted\",\n\t\tthumb:\n\t\t\t\"h-5 w-5 rounded-full bg-primary ring-focus ring-offset-2 ring-offset-surface data-[dragging]:outline-2 data-[focus-visible]:ring-2\",\n\t\ttrack:\n\t\t\t\"before:-translate-y-1/2 relative col-span-2 col-start-1 w-full before:absolute before:top-1/2 before:h-0.5 before:w-full before:transform before:bg-secondary\",\n\t},\n});\n\nconst { root, thumb, track } = slider();\n\nconst SliderRoot = ({\n\tchildren,\n\tclassName,\n\t...props\n}: SliderProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst SliderThumb = ({\n\tchildren,\n\tclassName,\n\t...props\n}: SliderThumbProps & { className?: string }) => (\n\t\n\t\t\n\t\n);\n\nconst SliderLabel = ({\n\tchildren,\n\tclassName,\n\t...props\n}: LabelProps & { className?: string }) => (\n\t
    \n\t\t\n\t\t\n\t
    \n);\n\nexport { SliderRoot, SliderThumb, SliderLabel };\n", "switch": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tSwitch as AriaSwitch,\n\ttype SwitchProps as AriaSwitchProps,\n\tLabel,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst switchStyles = tv({\n\tslots: {\n\t\troot: \"group flex items-center gap-2 transition-none duration-200\",\n\t\tindicator:\n\t\t\t\"h-6 w-10 cursor-pointer rounded-xl bg-secondary duration-200 before:mx-[3px] before:mt-[3px] before:block before:size-4.5 before:rounded-2xl before:bg-surface before:transition-all data-[selected]:bg-primary group-data-[selected]:bg-primary group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-focus group-data-[focus-visible]:ring-offset-2 group-data-[focus-visible]:ring-offset-surface group-data-[selected]:before:translate-x-4\",\n\t\tlabel: \"font-semibold text-fg text-sm\",\n\t},\t\n});\n\nconst styles = switchStyles();\n\ninterface SwitchProps extends AriaSwitchProps {\n\tchildren?: ReactNode;\n\tclassName?: string;\n}\n\n const Switch = ({ className, children, ...restProps }: SwitchProps) => (\n\t\n\t\t
    \n\t\t\n\t\n);\n\nexport { Switch };\nexport type { SwitchProps };", - "table": "\"use client\";\n\nimport {\n\tColumn as AriaColumn,\n\tTable as AriaTable,\n\tTableBody as AriaTableBody,\n\tTableHeader as AriaTableheader,\n\tCell,\n\ttype CellProps,\n\tCollection,\n\ttype ColumnProps,\n\tRow,\n\ttype RowProps,\n\ttype TableHeaderProps,\n\ttype TableProps,\n\tuseTableOptions,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Menu } from \"lucide-react\";\n\nimport { Button } from \"../button/button\";\nimport { Checkbox } from \"../checkbox/checkbox\";\n\nconst table = tv({\n\tslots: {\n\t\troot: \"table min-h-[100px] border-separate border-spacing-0 self-start rounded-xl border border-border p-4 outline-none\",\n\t\tcolumn: \"border-border border-b-2 px-4 py-1 text-left outline-none\",\n\t\theader: \"text-fg after:table-row after:h-[2px]\",\n\t\tlabel: \"text-fg-3\",\n\t\trow: \"relative cursor-default rounded-xl text-fg outline-none ring-focus data-[focus-visible]:ring-2\",\n\t\tcell: \"px-4 py-2 outline-none ring-focus data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = table();\n\nconst TableBody = AriaTableBody;\n\nconst Table = ({\n\tchildren,\n\tclassName,\n\t...props\n}: TableProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableCell = ({\n\tchildren,\n\tclassName,\n\t...props\n}: CellProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableColumn = ({\n\tchildren,\n\tclassName,\n\t...props\n}: ColumnProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableHeader = ({\n\tchildren,\n\tclassName,\n\tcolumns,\n\t...props\n}: TableHeaderProps & { className?: string }) => {\n\tconst { selectionBehavior, selectionMode, allowsDragging } =\n\t\tuseTableOptions();\n\treturn (\n\t\t\n\t\t\t{/* Add extra columns for drag and drop and selection. */}\n\t\t\t{allowsDragging && }\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t\n\t\t\t\t\t{selectionMode === \"multiple\" && (\n\t\t\t\t\t\t \n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t)}\n\t\t\t{children}\n\t\t\n\t);\n};\n\nconst TableRow = ({\n\tchildren,\n\tclassName,\n\tcolumns,\n\tid,\n\t...props\n}: RowProps & { className?: string }) => {\n\tconst { selectionBehavior, allowsDragging } = useTableOptions();\n\treturn (\n\t\t\n\t\t\t{allowsDragging && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\n\t\t\t)}\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport { TableColumn, Table, TableBody, TableCell, TableHeader, TableRow };\n", + "table": "\"use client\";\n\nimport {\n\tColumn as AriaColumn,\n\tTable as AriaTable,\n\tTableBody as AriaTableBody,\n\tTableHeader as AriaTableheader,\n\tCell,\n\ttype CellProps,\n\tCollection,\n\ttype ColumnProps,\n\tRow,\n\ttype RowProps,\n\ttype TableHeaderProps,\n\ttype TableProps,\n\tuseTableOptions,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Menu } from \"lucide-react\";\n\nimport { Button } from \"../button/button\";\nimport { Checkbox } from \"../checkbox/checkbox\";\n\nconst table = tv({\n\tslots: {\n\t\troot: \"table min-h-[100px] border-separate border-spacing-0 rounded-xl border border-border p-4 outline-none\",\n\t\tcolumn: \"border-border border-b-2 px-4 py-1 text-left outline-none\",\n\t\theader: \"text-fg after:table-row after:h-[2px]\",\n\t\tlabel: \"text-fg-3\",\n\t\trow: \"relative cursor-default rounded-xl text-fg outline-none ring-focus data-[focus-visible]:ring-2\",\n\t\tcell: \"px-4 py-2 outline-none ring-focus data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = table();\n\nconst TableBody = AriaTableBody;\n\nconst Table = ({\n\tchildren,\n\tclassName,\n\t...props\n}: TableProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableCell = ({\n\tchildren,\n\tclassName,\n\t...props\n}: CellProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableColumn = ({\n\tchildren,\n\tclassName,\n\t...props\n}: ColumnProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst TableHeader = ({\n\tchildren,\n\tclassName,\n\tcolumns,\n\t...props\n}: TableHeaderProps & { className?: string }) => {\n\tconst { selectionBehavior, selectionMode, allowsDragging } =\n\t\tuseTableOptions();\n\treturn (\n\t\t\n\t\t\t{/* Add extra columns for drag and drop and selection. */}\n\t\t\t{allowsDragging && }\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t\n\t\t\t\t\t{selectionMode === \"multiple\" && (\n\t\t\t\t\t\t \n\t\t\t\t\t)}\n\t\t\t\t\n\t\t\t)}\n\t\t\t{children}\n\t\t\n\t);\n};\n\nconst TableRow = ({\n\tchildren,\n\tclassName,\n\tcolumns,\n\tid,\n\t...props\n}: RowProps & { className?: string }) => {\n\tconst { selectionBehavior, allowsDragging } = useTableOptions();\n\treturn (\n\t\t\n\t\t\t{allowsDragging && (\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\t{selectionBehavior === \"toggle\" && (\n\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\n\t\t\t)}\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport { TableColumn, Table, TableBody, TableCell, TableHeader, TableRow };\n", "tabs": "\"use client\";\n\nimport {\n\tTab as AriaTab,\n\tTabList as AriaTabList,\n\ttype TabListProps as AriaTabListProps,\n\tTabPanel as AriaTabPanel,\n\ttype TabPanelProps as AriaTabPanelProps,\n\ttype TabProps as AriaTabProps,\n\ttype TabsProps as AriaTabsProps,\n\tTabs as AriaTabsRoot,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst tabs = tv({\n\tslots: {\n\t\troot: \"flex w-full flex-col items-start\",\n\t\tlist: \"relative inline-flex items-center justify-between gap-6 rounded-md p-1\",\n\t\ttab: \"relative flex w-fit cursor-pointer justify-center rounded-2xl border-primary pb-0.5 font-semibold text-fg-muted outline-none ring-focus ring-offset-2 ring-offset-surface transition-colors duration-200 aria-selected:cursor-default aria-selected:rounded-none aria-selected:border-b-2 aria-selected:pb-0 aria-selected:text-primary aria-selected:hover:bg-transparent data-[hovered]:text-primary data-[focus-visible]:ring-2\",\n\t\tpanel:\n\t\t\t\"mt-4 w-96 rounded-xl p-4 outline-none ring-focus data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = tabs();\n\ninterface TabsProps extends Omit {\n\tclassName?: string;\n}\n\nconst TabsRoot = ({ children, className, ...props }: TabsProps) => (\n\t\n\t\t{children}\n\t\n);\n\ninterface TabListProps extends Omit, \"className\"> {\n\tclassName?: string;\n}\n\nconst TabList = ({\n\tchildren,\n\tclassName,\n\t...props\n}: TabListProps) => (\n\t\n\t\t{children}\n\t\n);\n\ninterface TabProps extends Omit {\n\tclassName?: string;\n}\n\nconst Tab = ({ children, className, ...props }: TabProps) => (\n\t\n\t\t{children}\n\t\n);\n\ninterface TabPanelProps extends Omit {\n\tclassName?: string;\n}\n\nconst TabPanel = ({ children, className, ...props }: TabPanelProps) => (\n\t\n\t\t{children}\n\t\n);\n\nexport { Tab, TabList, TabPanel, TabsRoot };\nexport type { TabsProps, TabListProps, TabProps, TabPanelProps }; ", "tag-group": "\"use client\";\n\nimport {\n\tTag as AriaTag,\n\tTagGroup as AriaTagGroup,\n\ttype TagGroupProps as AriaTagGroupProps,\n\ttype TagProps as AriaTagProps,\n\tLabel,\n\tTagList,\n\ttype TagListProps,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst tagGroup = tv({\n\tslots: {\n\t\troot: \"flex flex-col gap-2 text-sm\",\n\t\tlist: \"flex flex-wrap gap-2\",\n\t\ttag: \"flex cursor-default items-center rounded-full border border-border px-2 py-1 outline-none ring-focus ring-offset-2 ring-offset-surface aria-selected:border-primary aria-selected:bg-primary aria-selected:text-primary-fg data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst styles = tagGroup();\n\ninterface TagGroupProps\n\textends Omit,\n\t\tPick, \"items\" | \"children\" | \"renderEmptyState\"> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst TagGroup = ({\n\tlabel,\n\tclassName,\n\tdescription,\n\terrorMessage,\n\titems,\n\tchildren,\n\trenderEmptyState,\n\t...props\n}: TagGroupProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t{children}\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage && (\n\t\t\t\n\t\t\t\t{errorMessage}\n\t\t\t\n\t\t)}\n\t\n);\n\nconst Tag = ({\n\tchildren,\n\tclassName,\n\t...props\n}: AriaTagProps & { className?: string }) => {\n\tconst textValue = typeof children === \"string\" ? children : undefined;\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport { Tag, TagGroup };\n", "time-field": "\"use client\";\n\nimport type {\n\tTimeFieldProps as AriaTimeFieldProps,\n\tTimeValue,\n} from \"react-aria-components\";\nimport {\n\tTimeField as AriaTimeField,\n\tDateInput,\n\tDateSegment,\n\tFieldError,\n\tLabel,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst timeField = tv({\n\tslots: {\n\t\tinput:\n\t\t\t\"appearance-none rounded-lg border border-border bg-surface px-3 py-1.75 outline-none ring-primary transition-all data-[disabled]:cursor-not-allowed data-[focus-within]:border-transparent data-[disabled]:bg-primary/10 data-[focus-within]:bg-surface data-[disabled]:text-fg-disabled data-[focus-within]:ring-2 [&::placeholder]:text-sm [&::placeholder]:focus:text-primary-fg\",\n\t\tsegmentStyles:\n\t\t\t\"rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted\",\n\t},\n});\n\nconst styles = timeField();\n\ninterface TimeFieldProps extends AriaTimeFieldProps {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n}\n\nconst TimeField = ({\n\tlabel,\n\tdescription,\n\terrorMessage,\n\t...props\n}: TimeFieldProps) => (\n\t\n\t\t{label && }\n\t\t\n\t\t\t{(segment) => (\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t\t{description && (\n\t\t\t\n\t\t\t\t{description}\n\t\t\t\n\t\t)}\n\t\t{errorMessage}\n\t\n);\n\nexport { TimeField };\nexport type { TimeFieldProps };\n", diff --git a/web/public/build-info.json b/web/public/build-info.json index 5daa28b9..32bb091f 100644 --- a/web/public/build-info.json +++ b/web/public/build-info.json @@ -1,5 +1,5 @@ { - "git": "17982bc1ea526cd9977525c2f5fbed2d4a144788", - "builtAt": "2025-07-01T06:25:54.839Z", - "registrySHA256": "ab8d76391d5d99df" + "git": "bec659a95abada1ce8912dd0ce21ef282322153a", + "builtAt": "2025-07-10T00:25:12.440Z", + "registrySHA256": "77a3bebabd24e10d" } \ No newline at end of file diff --git a/web/public/registry.json b/web/public/registry.json index bb1d72c3..959cf3dc 100644 --- a/web/public/registry.json +++ b/web/public/registry.json @@ -1,5 +1,5 @@ { - "version": "2.0.0", + "version": "2.0.1", "components": [ { "id": "accordion", diff --git a/web/public/templates/date-picker.txt b/web/public/templates/date-picker.txt index 0c028455..8945e949 100644 --- a/web/public/templates/date-picker.txt +++ b/web/public/templates/date-picker.txt @@ -47,7 +47,7 @@ const dateRangePicker = tv({ extend: baseStyles, slots: { group: - "relative flex min-h-11 w-fit min-w-96 flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface", + "relative flex min-h-11 w-full flex-wrap items-center rounded-lg border border-border bg-surface transition-all data-[focus-within]:border-transparent data-[focus-within]:bg-surface data-[focus-within]:ring-2 data-[focus-within]:ring-primary data-[focus-within]:ring-offset-surface", dateSegment: "rounded-md p-1 text-end outline-none focus:bg-primary focus:text-primary-fg data-[placeholder]:text-fg-muted data-[type='literal']:text-fg-muted data-[placeholder]:focus:text-primary-fg", separator: "px-2 text-fg-muted", @@ -102,6 +102,7 @@ interface DateRangePickerProps label?: string; description?: string; errorMessage?: string; + className?: string; } const DateRangePicker = ({ @@ -112,9 +113,9 @@ const DateRangePicker = ({ children, ...props }: DateRangePickerProps) => ( - + {label && } - + {(segment) => ( Date: Wed, 9 Jul 2025 20:26:30 -0400 Subject: [PATCH 3/3] add changeset --- .changeset/four-glasses-play.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/four-glasses-play.md diff --git a/.changeset/four-glasses-play.md b/.changeset/four-glasses-play.md new file mode 100644 index 00000000..cc1905d9 --- /dev/null +++ b/.changeset/four-glasses-play.md @@ -0,0 +1,6 @@ +--- +"@baselayer/components": patch +"@baselayer/web": patch +--- + +mobile optimizations