@bergetai/ui 0.19.0 → 0.19.2

package/dist/components/button/Button.cjs

@@ -23,6 +23,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the
 * Berget theme. Theme switching is driven entirely by the semantic tokens.
+* The variants below still pin `dark:bg-`/`dark:hover:bg-` twins for classes
+* the primitive emits on dark color-schemes (e.g. the ghost variant's
+* `dark:hover:bg-muted/50`) — the twin is a no-op colour-wise but makes
+* tailwind-merge strip the primitive override, whose `--berget-muted` value
+* equals the page background in dark themes and would erase the fill.
 */
 /** Shared interaction chrome for every variant.
 * (Exported for `anchorVariants`, which replicates the wrapper chrome on
@@ -40,8 +45,11 @@ const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow
 * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */
 function brandVariantClasses(variant) {
 	switch (variant) {
-		case "primary": return require_utils.cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
-		case "destructive": return require_utils.cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
+		case "primary": return require_utils.cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "dark:hover:bg-berget-button-primary-hover", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
+		case "destructive": return require_utils.cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", `
+          dark:bg-berget-button-destructive-bg
+          dark:hover:bg-berget-button-destructive-hover
+        `, "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
 		case "destructive-outline": return require_utils.cn(`
           border-berget-button-destructive-outline-border bg-transparent
           text-berget-button-destructive-outline-fg
@@ -99,9 +107,7 @@ function Button({ className, variant = "default", size, asChild = false, width =
 	const baseClass = require_utils.cn(!isLink && require_button.buttonVariants({
 		variant: primitiveVariant(variant),
 		size
-	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `
-        text-base
-      `), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
+	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `text-base`), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
         rounded-full
         shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]
       `, className);

package/dist/components/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["cn","buttonVariants","ButtonPrimitive","asChildRender"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\nexport type CustomVariant =\n  | 'default'\n  | 'primary'\n  | 'destructive'\n  | 'destructive-outline'\n  | 'outline'\n  | 'ghost'\n  | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component by merging props onto the child. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\n/** Shared interaction chrome for every variant.\n * (Exported for `anchorVariants`, which replicates the wrapper chrome on\n * real `<a>` elements without dragging in button semantics.) */\nexport const interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  `\n    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n  `,\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  `\n    disabled:pointer-events-none disabled:cursor-not-allowed\n    disabled:opacity-100\n  `,\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive.\n * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */\nexport function brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'destructive-outline':\n      // Muscaria-tinted outline: transparent fill, red border + red text;\n      // hover adds a subtle red fill (10% in both colour schemes). Follows\n      // the outline case's static-state shape, with token hues swapped.\n      return cn(\n        `\n          border-berget-button-destructive-outline-border bg-transparent\n          text-berget-button-destructive-outline-fg\n        `,\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        `\n          hover:bg-berget-button-destructive-outline-hover\n          hover:text-berget-button-destructive-outline-fg\n          dark:hover:bg-berget-button-destructive-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-destructive-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        `\n          border-berget-button-outline-border bg-transparent\n          text-berget-button-outline-fg\n        `,\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        `\n          hover:bg-berget-button-outline-hover\n          dark:hover:bg-berget-button-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        `\n          active:bg-berget-button-ghost-active\n          dark:active:bg-berget-button-ghost-active\n        `,\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        `\n          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n          underline-offset-4 shadow-none\n        `,\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        `\n          focus-visible:rounded-berget-xs focus-visible:outline-2\n          focus-visible:outline-offset-2\n          focus-visible:outline-berget-button-focus-ring\n          focus-visible:outline-solid\n        `,\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:cursor-not-allowed disabled:opacity-100',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        `\n          border-berget-button-default-border bg-berget-button-default-bg\n          text-berget-button-default-fg\n        `,\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nexport function primitiveVariant(\n  variant?: CustomVariant,\n): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'destructive-outline':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block, so the ratio holds as the padding\n    // scales down/up with smaller or larger button text. h-auto drops the\n    // primitive's fixed h-* so the vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[0.8em] py-[0.4em]',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg'\n        ? 'text-lg'\n        : size === 'sm'\n          ? 'text-sm'\n          : size === 'xs'\n            ? ''\n            : `\n        text-base\n      `),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon &&\n      `\n        rounded-full\n        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n      `,\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,qBAAqBA,cAAAA,GAGhC;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;;AAIxB,SAAgB,oBAAoB,SAAiC;CACnE,QAAQ,SAAR;EACE,KAAK,WACH,OAAOA,cAAAA,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAOA,cAAAA,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,uBAIH,OAAOA,cAAAA,GACL;;;WAMA;;;;WAKA;;;WAKA,iEACA,iBACA,uEACF;EACF,KAAK,WACH,OAAOA,cAAAA,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAOA,cAAAA,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAOA,cAAAA,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAOA,cAAAA,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAgB,iBACd,SACgD;CAChD,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAYA,cAAAA,GAChB,CAAC,UAAUC,eAAAA,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAIrD,CAAC,UAAU,CAAC,UAAU,gCAItB,CAAC,UACC,CAAC,WACA,SAAS,OACN,YACA,SAAS,OACP,YACA,SAAS,OACP,KACA;;UAMV,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAWD,cAAAA,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,QAAD;EACE,WAAW;EACN;EACL,QAAQC,cAAAA,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
+{"version":3,"file":"Button.cjs","names":["cn","buttonVariants","ButtonPrimitive","asChildRender"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\nexport type CustomVariant =\n  | 'default'\n  | 'primary'\n  | 'destructive'\n  | 'destructive-outline'\n  | 'outline'\n  | 'ghost'\n  | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component by merging props onto the child. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n * The variants below still pin `dark:bg-`/`dark:hover:bg-` twins for classes\n * the primitive emits on dark color-schemes (e.g. the ghost variant's\n * `dark:hover:bg-muted/50`) — the twin is a no-op colour-wise but makes\n * tailwind-merge strip the primitive override, whose `--berget-muted` value\n * equals the page background in dark themes and would erase the fill.\n */\n/** Shared interaction chrome for every variant.\n * (Exported for `anchorVariants`, which replicates the wrapper chrome on\n * real `<a>` elements without dragging in button semantics.) */\nexport const interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  `\n    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n  `,\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  `\n    disabled:pointer-events-none disabled:cursor-not-allowed\n    disabled:opacity-100\n  `,\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive.\n * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */\nexport function brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        // Twin for the primitive ghost's dark:hover:bg-muted/50 (see the\n        // comment on interactionClasses above): without it, dark color-scheme\n        // users lose the fill to a wash of --berget-muted (the page bg).\n        'dark:hover:bg-berget-button-primary-hover',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        // Twins for the primitive destructive variant's dark:bg-destructive/20\n        // and dark:hover:bg-destructive/30 (see the comment on\n        // interactionClasses above): without them, dark color-scheme users\n        // lose the solid muscaria fill to faint tints.\n        `\n          dark:bg-berget-button-destructive-bg\n          dark:hover:bg-berget-button-destructive-hover\n        `,\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'destructive-outline':\n      // Muscaria-tinted outline: transparent fill, red border + red text;\n      // hover adds a subtle red fill (10% in both colour schemes). Follows\n      // the outline case's static-state shape, with token hues swapped.\n      return cn(\n        `\n          border-berget-button-destructive-outline-border bg-transparent\n          text-berget-button-destructive-outline-fg\n        `,\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        `\n          hover:bg-berget-button-destructive-outline-hover\n          hover:text-berget-button-destructive-outline-fg\n          dark:hover:bg-berget-button-destructive-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-destructive-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        `\n          border-berget-button-outline-border bg-transparent\n          text-berget-button-outline-fg\n        `,\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        `\n          hover:bg-berget-button-outline-hover\n          dark:hover:bg-berget-button-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        `\n          active:bg-berget-button-ghost-active\n          dark:active:bg-berget-button-ghost-active\n        `,\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        `\n          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n          underline-offset-4 shadow-none\n        `,\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        `\n          focus-visible:rounded-berget-xs focus-visible:outline-2\n          focus-visible:outline-offset-2\n          focus-visible:outline-berget-button-focus-ring\n          focus-visible:outline-solid\n        `,\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:cursor-not-allowed disabled:opacity-100',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        `\n          border-berget-button-default-border bg-berget-button-default-bg\n          text-berget-button-default-fg\n        `,\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nexport function primitiveVariant(\n  variant?: CustomVariant,\n): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'destructive-outline':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block, so the ratio holds as the padding\n    // scales down/up with smaller or larger button text. h-auto drops the\n    // primitive's fixed h-* so the vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[0.8em] py-[0.4em]',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : `text-base`),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon &&\n      `\n        rounded-full\n        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n      `,\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,qBAAqBA,cAAAA,GAGhC;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;;AAIxB,SAAgB,oBAAoB,SAAiC;CACnE,QAAQ,SAAR;EACE,KAAK,WACH,OAAOA,cAAAA,GAEL,6DACA,wCAGA,uCAIA,6CACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAOA,cAAAA,GACL,qEACA,4CAGA,iDAKA;;;WAIA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,uBAIH,OAAOA,cAAAA,GACL;;;WAMA;;;;WAKA;;;WAKA,iEACA,iBACA,uEACF;EACF,KAAK,WACH,OAAOA,cAAAA,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAOA,cAAAA,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAOA,cAAAA,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAOA,cAAAA,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAgB,iBACd,SACgD;CAChD,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAYA,cAAAA,GAChB,CAAC,UAAUC,eAAAA,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAIrD,CAAC,UAAU,CAAC,UAAU,gCAItB,CAAC,UACC,CAAC,WACA,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAIhF,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAWD,cAAAA,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,QAAD;EACE,WAAW;EACN;EACL,QAAQC,cAAAA,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}

package/dist/components/button/Button.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;;YAQY;;iBAUK,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqNF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}
+{"version":3,"file":"Button.d.cts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;;YAQY;;iBAUK,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAsOF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}

package/dist/components/button/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;;YAQY;;iBAUK,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqNF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}
+{"version":3,"file":"Button.d.mts","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"mappings":";;;;;YAQY;;iBAUK,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAsOF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}

package/dist/components/button/Button.mjs

@@ -23,6 +23,11 @@ import { jsx } from "react/jsx-runtime";
 *
 * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the
 * Berget theme. Theme switching is driven entirely by the semantic tokens.
+* The variants below still pin `dark:bg-`/`dark:hover:bg-` twins for classes
+* the primitive emits on dark color-schemes (e.g. the ghost variant's
+* `dark:hover:bg-muted/50`) — the twin is a no-op colour-wise but makes
+* tailwind-merge strip the primitive override, whose `--berget-muted` value
+* equals the page background in dark themes and would erase the fill.
 */
 /** Shared interaction chrome for every variant.
 * (Exported for `anchorVariants`, which replicates the wrapper chrome on
@@ -40,8 +45,11 @@ const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow
 * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */
 function brandVariantClasses(variant) {
 	switch (variant) {
-		case "primary": return cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
-		case "destructive": return cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
+		case "primary": return cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "dark:hover:bg-berget-button-primary-hover", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
+		case "destructive": return cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", `
+          dark:bg-berget-button-destructive-bg
+          dark:hover:bg-berget-button-destructive-hover
+        `, "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
 		case "destructive-outline": return cn(`
           border-berget-button-destructive-outline-border bg-transparent
           text-berget-button-destructive-outline-fg
@@ -99,9 +107,7 @@ function Button({ className, variant = "default", size, asChild = false, width =
 	const baseClass = cn(!isLink && buttonVariants({
 		variant: primitiveVariant(variant),
 		size
-	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `
-        text-base
-      `), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
+	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `text-base`), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
         rounded-full
         shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]
       `, className);

package/dist/components/button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\nexport type CustomVariant =\n  | 'default'\n  | 'primary'\n  | 'destructive'\n  | 'destructive-outline'\n  | 'outline'\n  | 'ghost'\n  | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component by merging props onto the child. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\n/** Shared interaction chrome for every variant.\n * (Exported for `anchorVariants`, which replicates the wrapper chrome on\n * real `<a>` elements without dragging in button semantics.) */\nexport const interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  `\n    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n  `,\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  `\n    disabled:pointer-events-none disabled:cursor-not-allowed\n    disabled:opacity-100\n  `,\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive.\n * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */\nexport function brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'destructive-outline':\n      // Muscaria-tinted outline: transparent fill, red border + red text;\n      // hover adds a subtle red fill (10% in both colour schemes). Follows\n      // the outline case's static-state shape, with token hues swapped.\n      return cn(\n        `\n          border-berget-button-destructive-outline-border bg-transparent\n          text-berget-button-destructive-outline-fg\n        `,\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        `\n          hover:bg-berget-button-destructive-outline-hover\n          hover:text-berget-button-destructive-outline-fg\n          dark:hover:bg-berget-button-destructive-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-destructive-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        `\n          border-berget-button-outline-border bg-transparent\n          text-berget-button-outline-fg\n        `,\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        `\n          hover:bg-berget-button-outline-hover\n          dark:hover:bg-berget-button-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        `\n          active:bg-berget-button-ghost-active\n          dark:active:bg-berget-button-ghost-active\n        `,\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        `\n          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n          underline-offset-4 shadow-none\n        `,\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        `\n          focus-visible:rounded-berget-xs focus-visible:outline-2\n          focus-visible:outline-offset-2\n          focus-visible:outline-berget-button-focus-ring\n          focus-visible:outline-solid\n        `,\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:cursor-not-allowed disabled:opacity-100',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        `\n          border-berget-button-default-border bg-berget-button-default-bg\n          text-berget-button-default-fg\n        `,\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nexport function primitiveVariant(\n  variant?: CustomVariant,\n): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'destructive-outline':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block, so the ratio holds as the padding\n    // scales down/up with smaller or larger button text. h-auto drops the\n    // primitive's fixed h-* so the vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[0.8em] py-[0.4em]',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg'\n        ? 'text-lg'\n        : size === 'sm'\n          ? 'text-sm'\n          : size === 'xs'\n            ? ''\n            : `\n        text-base\n      `),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon &&\n      `\n        rounded-full\n        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n      `,\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,qBAAqB,GAGhC;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;;AAIxB,SAAgB,oBAAoB,SAAiC;CACnE,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,uBAIH,OAAO,GACL;;;WAMA;;;;WAKA;;;WAKA,iEACA,iBACA,uEACF;EACF,KAAK,WACH,OAAO,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAgB,iBACd,SACgD;CAChD,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAIrD,CAAC,UAAU,CAAC,UAAU,gCAItB,CAAC,UACC,CAAC,WACA,SAAS,OACN,YACA,SAAS,OACP,YACA,SAAS,OACP,KACA;;UAMV,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
+{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\nexport type CustomVariant =\n  | 'default'\n  | 'primary'\n  | 'destructive'\n  | 'destructive-outline'\n  | 'outline'\n  | 'ghost'\n  | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component by merging props onto the child. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n * The variants below still pin `dark:bg-`/`dark:hover:bg-` twins for classes\n * the primitive emits on dark color-schemes (e.g. the ghost variant's\n * `dark:hover:bg-muted/50`) — the twin is a no-op colour-wise but makes\n * tailwind-merge strip the primitive override, whose `--berget-muted` value\n * equals the page background in dark themes and would erase the fill.\n */\n/** Shared interaction chrome for every variant.\n * (Exported for `anchorVariants`, which replicates the wrapper chrome on\n * real `<a>` elements without dragging in button semantics.) */\nexport const interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  `\n    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n  `,\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  `\n    disabled:pointer-events-none disabled:cursor-not-allowed\n    disabled:opacity-100\n  `,\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive.\n * (Exported for `anchorVariants` — keep in lockstep with the `Button` wrapper.) */\nexport function brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        // Twin for the primitive ghost's dark:hover:bg-muted/50 (see the\n        // comment on interactionClasses above): without it, dark color-scheme\n        // users lose the fill to a wash of --berget-muted (the page bg).\n        'dark:hover:bg-berget-button-primary-hover',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        // Twins for the primitive destructive variant's dark:bg-destructive/20\n        // and dark:hover:bg-destructive/30 (see the comment on\n        // interactionClasses above): without them, dark color-scheme users\n        // lose the solid muscaria fill to faint tints.\n        `\n          dark:bg-berget-button-destructive-bg\n          dark:hover:bg-berget-button-destructive-hover\n        `,\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'destructive-outline':\n      // Muscaria-tinted outline: transparent fill, red border + red text;\n      // hover adds a subtle red fill (10% in both colour schemes). Follows\n      // the outline case's static-state shape, with token hues swapped.\n      return cn(\n        `\n          border-berget-button-destructive-outline-border bg-transparent\n          text-berget-button-destructive-outline-fg\n        `,\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        `\n          hover:bg-berget-button-destructive-outline-hover\n          hover:text-berget-button-destructive-outline-fg\n          dark:hover:bg-berget-button-destructive-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-destructive-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        `\n          border-berget-button-outline-border bg-transparent\n          text-berget-button-outline-fg\n        `,\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        `\n          hover:bg-berget-button-outline-hover\n          dark:hover:bg-berget-button-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        `\n          active:bg-berget-button-ghost-active\n          dark:active:bg-berget-button-ghost-active\n        `,\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        `\n          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n          underline-offset-4 shadow-none\n        `,\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        `\n          focus-visible:rounded-berget-xs focus-visible:outline-2\n          focus-visible:outline-offset-2\n          focus-visible:outline-berget-button-focus-ring\n          focus-visible:outline-solid\n        `,\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:cursor-not-allowed disabled:opacity-100',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        `\n          border-berget-button-default-border bg-berget-button-default-bg\n          text-berget-button-default-fg\n        `,\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nexport function primitiveVariant(\n  variant?: CustomVariant,\n): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'destructive-outline':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block, so the ratio holds as the padding\n    // scales down/up with smaller or larger button text. h-auto drops the\n    // primitive's fixed h-* so the vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[0.8em] py-[0.4em]',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : `text-base`),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon &&\n      `\n        rounded-full\n        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n      `,\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,qBAAqB,GAGhC;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;;AAIxB,SAAgB,oBAAoB,SAAiC;CACnE,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCAIA,6CACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDAKA;;;WAIA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,uBAIH,OAAO,GACL;;;WAMA;;;;WAKA;;;WAKA,iEACA,iBACA,uEACF;EACF,KAAK,WACH,OAAO,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAgB,iBACd,SACgD;CAChD,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAIrD,CAAC,UAAU,CAAC,UAAU,gCAItB,CAAC,UACC,CAAC,WACA,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAIhF,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}

package/dist/styles/index.css

@@ -18,6 +18,76 @@
 @source "../**/*.mjs";
 @source "../**/*.cjs";
 
+/* State/orientation shorthand variants the primitives rely on
+   (data-open:, data-horizontal:, …). Upstream defines these in the shadcn
+   tailwind.css preset (shadcn-ui/ui packages/shadcn/src/tailwind.css);
+   since consumers import ONLY this stylesheet, they must ship here.
+   Without them Tailwind falls back to its default semantics, which match
+   boolean attributes only ([data-open], [data-horizontal]) — Base UI emits
+   data-state/data-orientation valued attributes instead, so e.g. the
+   Slider track (data-horizontal:h-1) collapses to zero height.
+   Each alias matches the equivalent Radix data-state attribute OR the
+   Base UI boolean attribute, so the primitives work with both libraries. */
+@custom-variant data-open {
+  &:where([data-state='open']),
+  &:where([data-open]:not([data-open='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state='closed']),
+  &:where([data-closed]:not([data-closed='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state='checked']),
+  &:where([data-checked]:not([data-checked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state='unchecked']),
+  &:where([data-unchecked]:not([data-unchecked='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected='true']) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled='true']),
+  &:where([data-disabled]:not([data-disabled='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state='active']),
+  &:where([data-active]:not([data-active='false'])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation='horizontal']) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation='vertical']) {
+    @slot;
+  }
+}
+
 :root {
   /* ────────────────────────────
      GRANITE — neutral stone

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bergetai/ui",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "Berget Design System - Scandinavian-inspired design system with console aesthetic",
   "type": "module",
   "license": "MIT",