diff --git a/.changeset/giant-otters-jump.md b/.changeset/giant-otters-jump.md new file mode 100644 index 00000000..a7a22dc9 --- /dev/null +++ b/.changeset/giant-otters-jump.md @@ -0,0 +1,5 @@ +--- +"@baselayer/components": patch +--- + +fix secondary button border diff --git a/packages/components/src/core/button/button.tsx b/packages/components/src/core/button/button.tsx index 50c6ba27..51855afd 100644 --- a/packages/components/src/core/button/button.tsx +++ b/packages/components/src/core/button/button.tsx @@ -13,7 +13,7 @@ const button = tv({ primary: "bg-primary text-primary-fg data-[hovered]:bg-primary/80", secondary: - "text-fg shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] shadow-border data-[hovered]:border-secondary data-[hovered]:bg-secondary", + "border border-border text-fg data-[hovered]:border-secondary data-[hovered]:bg-secondary", ghost: "bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg", danger: diff --git a/packages/components/src/registry.ts b/packages/components/src/registry.ts index 01c7f888..106fa64d 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": "1.9.0", + "version": "2.0.0", "components": [ { "id": "accordion", @@ -393,7 +393,7 @@ const templateContents: Record = { "accordion": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\tButton,\n\tDisclosure,\n\tDisclosureGroup,\n\ttype DisclosureGroupProps,\n\tDisclosurePanel,\n\ttype DisclosureProps,\n\tHeading,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { Minus, Plus } from \"lucide-react\";\n\nconst accordion = tv({\n\tslots: {\n\t\troot: \"group w-full\",\n\t\tgroup: \"flex flex-col gap-3\",\n\t\tbutton:\n\t\t\t\"flex w-full items-center justify-between gap-6 rounded-2xl border border-border bg-surface-2 p-4 data-[focus-visible]:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 data-[focus-visible]:ring-offset-surface group-data-[expanded]:rounded-b-none group-data-[expanded]:border-b-0\",\n\t\ticon: \"size-4 shrink-0 fill-none transition-transform duration-200\",\n\t\tpanel:\n\t\t\t\"rounded-b-2xl border-border bg-surface-2 px-4 text-muted-foreground text-sm group-data-[expanded]:border-x group-data-[expanded]:border-b group-data-[expanded]:pb-4\",\n\t},\n});\n\nconst styles = accordion();\n\ntype AccordionVariantProps = VariantProps;\n\ninterface AccordionProps\n\textends AccordionVariantProps,\n\t\tOmit {\n\tclassName?: string;\n\ttitle?: string;\n\tchildren?: ReactNode;\n}\n\nconst Accordion = ({\n\tclassName,\n\ttitle,\n\tchildren,\n\t...props\n}: AccordionProps) => {\n\treturn (\n\t\t\n\t\t\t{({ isExpanded }) => (\n\t\t\t\t<>\n\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\ninterface AccordionGroupProps extends DisclosureGroupProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nconst AccordionGroup = ({\n\tclassName,\n\tchildren,\n\t...props\n}: AccordionGroupProps) => (\n\t\n\t\t{children}\n\t\n);\n\nexport { Accordion, AccordionGroup };\nexport type { AccordionProps, AccordionGroupProps };\n", "badge": "import type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const badge = tv({\n\tbase: \"flex items-center justify-center rounded-4xl px-3 py-2 font-semibold text-xs\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tattention: \"bg-gradient-to-r from-pink-500 to-purple-500 text-white\",\n\t\t\tneutral: \"bg-secondary text-secondary-fg\",\n\t\t\tdanger: \"bg-danger text-danger-fg\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"attention\",\n\t},\n});\n\ntype BadgeProps = VariantProps & HTMLAttributes;\n\nconst Badge = ({ className, variant, ...props }: BadgeProps) => (\n\t\n);\n\nexport { Badge };\nexport type { BadgeProps };\n", "breadcrumbs": "\"use client\";\n\nimport {\n\tBreadcrumbs as AriaBreadcrumbs,\n\ttype BreadcrumbsProps as AriaBreadcrumbsProps,\n\tBreadcrumb,\n\ttype BreadcrumbProps,\n\tLink,\n\ttype LinkProps,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nconst breadcrumbs = tv({\n\tslots: {\n\t\troot: \"m-0 flex list-none items-center gap-2 p-0 font-md\",\n\t\tlink: \"relative cursor-pointer rounded-md text-fg outline-none ring-focus data-[hovered]:underline data-[focus-visible]:ring-2 [&[aria-current]]:font-extrabold [&[aria-current]]:text-fg\",\n\t\titem: \"flex items-center gap-2\",\n\t},\n});\n\nconst styles = breadcrumbs();\n\nconst Breadcrumbs = ({\n\tchildren,\n\tclassName,\n\t...props\n}: AriaBreadcrumbsProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst BreadcrumbsLink = ({\n\tchildren,\n\tclassName,\n\t...props\n}: LinkProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nconst BreadcrumbsItem = ({\n\tchildren,\n\tclassName,\n\t...props\n}: BreadcrumbProps & { className?: string }) => (\n\t\n\t\t{children}\n\t\n);\n\nexport { BreadcrumbsItem, BreadcrumbsLink, Breadcrumbs };", - "button": "\"use client\";\n\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst button = tv({\n\tbase: \"inline-flex appearance-none items-center justify-center rounded-full font-semibold outline-none ring-focus ring-offset-3 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"bg-primary text-primary-fg data-[hovered]:bg-primary/80\",\n\t\t\tsecondary:\n\t\t\t\t\"text-fg shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] shadow-border data-[hovered]:border-secondary data-[hovered]:bg-secondary\",\n\t\t\tghost:\n\t\t\t\t\"bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg\",\n\t\t\tdanger:\n\t\t\t\t\"border border-transparent bg-danger text-danger-fg data-[hovered]:bg-danger/80\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"px-2 py-1.5 text-sm\",\n\t\t\tmd: \"px-4 py-2.5 text-base\",\n\t\t\tlg: \"px-6 py-3.5 font-bold text-lg\",\n\t\t\ticon: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype ButtonVariantProps = VariantProps;\n\ninterface ButtonProps\n\textends Omit,\n\t\tButtonVariantProps {\n\tclassName?: string;\n}\n\nconst Button = ({\n\tclassName,\n\tsize,\n\tvariant,\n\tchildren,\n\t...props\n}: ButtonProps) => (\n\t\n\t\t{children}\n\t\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\nexport type { ButtonProps };\n", + "button": "\"use client\";\n\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst button = tv({\n\tbase: \"inline-flex appearance-none items-center justify-center rounded-full font-semibold outline-none ring-focus ring-offset-3 ring-offset-surface transition-transform duration-100 disabled:pointer-events-none disabled:opacity-50 data-[focus-visible]:ring-2\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary:\n\t\t\t\t\"bg-primary text-primary-fg data-[hovered]:bg-primary/80\",\n\t\t\tsecondary:\n\t\t\t\t\"border border-border text-fg data-[hovered]:border-secondary data-[hovered]:bg-secondary\",\n\t\t\tghost:\n\t\t\t\t\"bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg\",\n\t\t\tdanger:\n\t\t\t\t\"border border-transparent bg-danger text-danger-fg data-[hovered]:bg-danger/80\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"px-2 py-1.5 text-sm\",\n\t\t\tmd: \"px-4 py-2.5 text-base\",\n\t\t\tlg: \"px-6 py-3.5 font-bold text-lg\",\n\t\t\ticon: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype ButtonVariantProps = VariantProps;\n\ninterface ButtonProps\n\textends Omit,\n\t\tButtonVariantProps {\n\tclassName?: string;\n}\n\nconst Button = ({\n\tclassName,\n\tsize,\n\tvariant,\n\tchildren,\n\t...props\n}: ButtonProps) => (\n\t\n\t\t{children}\n\t\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\nexport type { ButtonProps };\n", "calendar": "\"use client\";\n\nimport {\n\tCalendar as AriaCalendar,\n\ttype CalendarProps as AriaCalendarProps,\n\tRangeCalendar as AriaRangeCalendar,\n\ttype RangeCalendarProps as AriaRangeCalendarProps,\n\tButton,\n\tCalendarCell,\n\tCalendarGrid,\n\tCalendarGridBody,\n\tCalendarGridHeader,\n\tCalendarHeaderCell,\n\ttype DateValue,\n\tHeading,\n\tText,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst baseStyles = tv({\n\tslots: {\n\t\troot: \"w-fit max-w-full rounded-2xl border border-border bg-surface p-4 text-fg\",\n\t\theader: \"flex w-full items-center gap-1 pb-4\",\n\t\theading: \"flex-1 text-center font-bold\",\n\t\theaderCell: \"pb-2 text-fg-muted text-sm\",\n\t\tmonthButton:\n\t\t\t\"flex appearance-none items-center justify-center rounded-full p-2 text-center outline-none ring-focus data-[hovered]:bg-secondary data-[focus-visible]:ring-2\",\n\t},\n});\n\nconst calendar = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tcell: \"flex size-9 cursor-default items-center justify-center rounded-full border-border text-center text-sm outline-focus outline-offset-2 data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:outline-2 data-[focus-visible]:outline-focus [&[data-outside-month]]:hidden\",\n\t},\n});\n\nconst rangeCalendar = tv({\n\textend: baseStyles,\n\tslots: {\n\t\tcell: \"flex size-9 cursor-default items-center justify-center rounded-full text-center text-sm outline-none outline-offset-2 data-[selected]:rounded-none data-[hovered]:bg-secondary data-[pressed]:bg-secondary data-[selected]:bg-primary data-[selected]:text-primary-fg data-[unavailable]:text-fg-muted data-[unavailable]:line-through data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus data-[focus-visible]:ring-offset-2 [&[data-outside-month]]:hidden [&[data-selection-end]]:rounded-r-full [&[data-selection-start]]:rounded-l-full\",\n\t},\n});\n\nconst styles = calendar();\nconst rangeStyles = rangeCalendar();\n\ninterface CalendarProps\n\textends Omit, \"className\"> {\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst Calendar = ({\n\tclassName,\n\terrorMessage,\n\t...props\n}: CalendarProps) => (\n\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t{(day) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{day}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t{(date) => }\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\ninterface RangeCalendarProps\n\textends Omit, \"className\"> {\n\terrorMessage?: string;\n\tclassName?: string;\n}\n\nconst RangeCalendar = ({\n\tclassName,\n\terrorMessage,\n\t...props\n}: RangeCalendarProps) => (\n\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t{(day) => (\n\t\t\t\t\t\n\t\t\t\t\t\t{day}\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t{(date) => }\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\nexport { Calendar, RangeCalendar };\nexport type { CalendarProps, RangeCalendarProps };\n", "card": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst card = tv({\n\tslots: {\n\t\troot: \"rounded-2xl border-2 bg-surface text-fg\",\n\t\theader: \"flex flex-col space-y-1.5 p-6\",\n\t\ttitle: \"font-semibold text-2xl leading-none tracking-tight\",\n\t\tdescription: \"text-fg-muted text-sm\",\n\t\tcontent: \"p-6 pt-0\",\n\t\tfooter: \"flex items-center p-6 pt-0\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\toutlined: {\n\t\t\t\troot: \"border border-border/50\",\n\t\t\t},\n\t\t\tfilled: {\n\t\t\t\troot: \"border-surface-2 bg-surface-2\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"outlined\",\n\t},\n});\n\nconst styles = card();\n\ntype CardVariantProps = VariantProps;\n\ninterface CardProps extends HTMLAttributes, CardVariantProps {\n\tclassName?: string;\n\ttitle?: string;\n\tdescription?: string;\n}\n\ninterface CardHeaderProps extends HTMLAttributes {\n\tclassName?: string;\n}\n\ninterface CardContentProps extends HTMLAttributes {\n\tclassName?: string;\n}\n\ninterface CardFooterProps extends HTMLAttributes {\n\tclassName?: string;\n}\n\nconst Card = ({\n\tclassName,\n\tvariant,\n\ttitle,\n\tdescription,\n\tchildren,\n\t...props\n}: CardProps) => (\n\t
\n\t\t{(title || description) && (\n\t\t\t
\n\t\t\t\t{title &&

{title}

}\n\t\t\t\t{description &&

{description}

}\n\t\t\t
\n\t\t)}\n\t\t{children}\n\t
\n);\n\nconst CardHeader = ({ className, ...props }: CardHeaderProps) => (\n\t
\n);\n\nconst CardContent = ({ className, ...props }: CardContentProps) => (\n\t
\n);\n\nconst CardFooter = ({ className, ...props }: CardFooterProps) => (\n\t
\n);\n\nexport { Card, CardHeader, CardContent, CardFooter };\nexport type { CardProps, CardHeaderProps, CardContentProps, CardFooterProps };\n", "checkbox": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport {\n\ttype CheckboxProps as AriaCheckBoxProps,\n\tCheckbox as AriaCheckbox,\n\tCheckboxGroup as AriaCheckboxGroup,\n\ttype CheckboxGroupProps as AriaCheckboxGroupProps,\n\tFieldError,\n\tText,\n\ttype ValidationResult,\n} from \"react-aria-components\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { Check } from \"lucide-react\";\n\nconst checkbox = tv({\n\tbase: \"group flex items-center justify-center gap-2 py-1 text-fg\",\n});\n\nconst checkboxGroup = tv({\n\tbase: \"flex flex-col gap-2\",\n});\n\ntype CheckboxVariantProps = VariantProps;\n\ninterface CheckboxProps extends CheckboxVariantProps, AriaCheckBoxProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst Checkbox = ({\n\tclassName,\n\terrorMessage,\n\tchildren,\n\tdescription,\n\t...props\n}: CheckboxProps) => {\n\treturn (\n\t\t\n\t\t\t{({ isSelected }) => (\n\t\t\t\t<>\n\t\t\t\t\t
\n\t\t\t\t\t\t{isSelected && }\n\t\t\t\t\t
\n\t\t\t\t\t{children}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{description}\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{errorMessage}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t);\n};\n\ninterface CheckboxGroupProps extends AriaCheckboxGroupProps {\n\tclassName?: string;\n\tlabel?: string;\n\tchildren: ReactNode;\n\tdescription?: string;\n\terrorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst CheckboxGroup = ({\n\tclassName,\n\tlabel,\n\tdescription,\n\terrorMessage,\n\tchildren,\n\t...props\n}: CheckboxGroupProps) => (\n\t\n\t\t{label && (\n\t\t\t\n\t\t\t\t{label}\n\t\t\t\n\t\t)}\n\t\t{children}\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 { Checkbox, CheckboxGroup };\nexport type { CheckboxProps, CheckboxGroupProps };\n", diff --git a/web/public/build-info.json b/web/public/build-info.json index bde46c3b..5daa28b9 100644 --- a/web/public/build-info.json +++ b/web/public/build-info.json @@ -1,5 +1,5 @@ { - "git": "281691a7451eaf590646ab3af33e7e4135604a40", - "builtAt": "2025-07-01T05:12:13.485Z", - "registrySHA256": "490f0479c8eaea65" + "git": "17982bc1ea526cd9977525c2f5fbed2d4a144788", + "builtAt": "2025-07-01T06:25:54.839Z", + "registrySHA256": "ab8d76391d5d99df" } \ No newline at end of file diff --git a/web/public/registry.json b/web/public/registry.json index eb4768b2..bb1d72c3 100644 --- a/web/public/registry.json +++ b/web/public/registry.json @@ -1,5 +1,5 @@ { - "version": "1.9.0", + "version": "2.0.0", "components": [ { "id": "accordion", diff --git a/web/public/templates/button.txt b/web/public/templates/button.txt index 50c6ba27..51855afd 100644 --- a/web/public/templates/button.txt +++ b/web/public/templates/button.txt @@ -13,7 +13,7 @@ const button = tv({ primary: "bg-primary text-primary-fg data-[hovered]:bg-primary/80", secondary: - "text-fg shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] shadow-border data-[hovered]:border-secondary data-[hovered]:bg-secondary", + "border border-border text-fg data-[hovered]:border-secondary data-[hovered]:bg-secondary", ghost: "bg-transparent text-fg data-[hovered]:bg-secondary data-[hovered]:text-secondary-fg", danger: