@carbonid1/design-system 5.6.1 → 5.7.0

package/dist/Button/Button.d.ts

@@ -2,6 +2,7 @@ import type { ButtonProps } from './Button.types';
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "attention" | "destructive" | "link" | "ghost" | "outline" | "subtle" | "danger" | null | undefined;
     size?: "default" | "small" | "large" | "icon" | "smallIcon" | "largeIcon" | null | undefined;
+    selected?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Button: ({ className, variant, size, fullWidth, loading, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ className, variant, size, selected, fullWidth, loading, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };

package/dist/Button/Button.js

@@ -24,11 +24,29 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
             smallIcon: 'size-6 rounded-full',
             largeIcon: 'size-12 rounded-full',
         },
+        selected: {
+            true: 'bg-primary/10 ring-1 ring-primary/20',
+            false: '',
+        },
     },
+    compoundVariants: [
+        // Hold the selection tint on hover instead of letting the variant's own hover background win.
+        {
+            selected: true,
+            variant: 'ghost',
+            className: 'hover:bg-primary/10 dark:hover:bg-primary/10',
+        },
+        {
+            selected: true,
+            variant: 'outline',
+            className: 'hover:bg-primary/10 dark:hover:bg-primary/10',
+        },
+    ],
     defaultVariants: {
         variant: 'ghost',
         size: 'default',
+        selected: false,
     },
 });
-const Button = ({ className, variant, size, fullWidth, loading, disabled, children, ...props }) => (_jsxs(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), fullWidth && 'w-full justify-start', className), disabled: disabled ?? loading, "aria-busy": loading ?? undefined, ...props, children: [loading && _jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), children] }));
+const Button = ({ className, variant, size, selected, fullWidth, loading, disabled, children, ...props }) => (_jsxs(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, selected }), fullWidth && 'w-full justify-start', className), disabled: disabled ?? loading, "aria-busy": loading ?? undefined, ...props, children: [loading && _jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }), children] }));
 export { Button, buttonVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",

package/skills/design-system/SKILL.md

@@ -41,6 +41,19 @@ If you're editing `@carbonid1/design-system` itself (adding a primitive, changin
 - Tooltip: rely on defaults (`position="top"`, `delay={200}`). Only override when the default is wrong (e.g. header → `position="bottom"`, data-viz progressive disclosure → `delay={600}`). When a tooltip trigger also opens a popover, pass `disabled={open}`.
 - Icon toggle state: `<Icon fill={active ? 'currentColor' : 'none'} />` — not two different components.
 
+## Buttons & links
+
+- **Active/selected state** — pass `selected` (toolbar toggles, segmented controls, filter chips, tabs, nav links). It applies the selection tokens (`bg-primary/10` + `ring-1 ring-primary/20`, tint held on hover); never hand-layer those classes. `selected` is visual only — set the matching ARIA yourself: `aria-pressed` on toggle buttons, `aria-current` on nav links. It rides both `Button` and `buttonVariants(...)`.
+- **A link that looks like a button** — apply `buttonVariants({ variant, size, selected })` to the `Link`, not `<Button render={<Link/>}>`. Base UI's `Button` is button-semantic: rendering an `<a>` through it either warns or forces `role="button"`, which breaks navigation for screen readers. Keep the element a real link and style it:
+  ```tsx
+  <Link
+    href={href}
+    aria-current={active ? 'page' : undefined}
+    className={cn(buttonVariants({ variant: 'ghost', size: 'small', selected: active }))}
+  />
+  ```
+  Wrap in `cn(...)` so the `selected` hover tint resolves against the variant's own hover background.
+
 ## Visual Language
 
 - **Discrete elements** — rows/cards use `rounded-lg` with `space-y-1` gaps, never flat lists with hairline dividers