@bergetai/ui 0.16.2 → 0.18.0

package/dist/components/alert/Alert.d.cts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/alert/Alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "info" | "default" | "destructive" | "success" | "warning" | null | undefined;
+  variant?: "default" | "info" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/alert/Alert.d.mts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/alert/Alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "info" | "default" | "destructive" | "success" | "warning" | null | undefined;
+  variant?: "default" | "info" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/badge/Badge.d.cts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/badge/Badge.d.ts
 declare const badgeVariants: (props?: ({
   variant?: "default" | "tag" | "semantic" | null | undefined;
-  status?: "error" | "info" | "default" | "active" | "success" | "warning" | "tagDefault" | "tagActive" | "tagGhost" | null | undefined;
+  status?: "error" | "default" | "info" | "active" | "success" | "warning" | "tagDefault" | "tagActive" | "tagGhost" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/badge/Badge.d.mts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/badge/Badge.d.ts
 declare const badgeVariants: (props?: ({
   variant?: "default" | "tag" | "semantic" | null | undefined;
-  status?: "error" | "info" | "default" | "active" | "success" | "warning" | "tagDefault" | "tagActive" | "tagGhost" | null | undefined;
+  status?: "error" | "default" | "info" | "active" | "success" | "warning" | "tagDefault" | "tagActive" | "tagGhost" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/box/Box.d.cts

@@ -4,8 +4,8 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/box/Box.d.ts
 declare const boxVariants: (props?: ({
   direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
-  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+  align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+  justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
   wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SpacingScale = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96;

package/dist/components/box/Box.d.mts

@@ -4,8 +4,8 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/box/Box.d.ts
 declare const boxVariants: (props?: ({
   direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
-  align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
-  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
+  align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+  justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
   wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SpacingScale = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96;

package/dist/components/button/Button.cjs

@@ -24,6 +24,9 @@ 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.
 */
+/** Shared interaction chrome for every variant.
+* (Exported for `anchorVariants`, which replicates the wrapper chrome on
+* real `<a>` elements without dragging in button semantics.) */
 const interactionClasses = require_utils.cn(`
     focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2
     focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid
@@ -33,11 +36,23 @@ const interactionClasses = require_utils.cn(`
   `, "active:not-aria-[haspopup]:translate-y-0");
 /** Disabled treatment shared by every variant. */
 const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow-none";
-/** Brand-specific classes applied *on top* of the upstream primitive. */
+/** Brand-specific classes applied *on top* of the upstream primitive.
+* (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 "destructive-outline": return require_utils.cn(`
+          border-berget-button-destructive-outline-border bg-transparent
+          text-berget-button-destructive-outline-fg
+        `, `
+          hover:bg-berget-button-destructive-outline-hover
+          hover:text-berget-button-destructive-outline-fg
+          dark:hover:bg-berget-button-destructive-outline-hover
+        `, `
+          active:bg-transparent
+          dark:active:bg-transparent
+        `, "focus-visible:border-berget-button-destructive-outline-border", disabledClasses, "disabled:border-berget-button-disabled-border disabled:bg-transparent");
 		case "outline": return require_utils.cn(`
           border-berget-button-outline-border bg-transparent
           text-berget-button-outline-fg
@@ -72,6 +87,7 @@ function primitiveVariant(variant) {
 	switch (variant) {
 		case "primary":
 		case "destructive":
+		case "destructive-outline":
 		case "outline":
 		case "ghost": return "ghost";
 		default: return variant;
@@ -83,9 +99,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-[1.14em] py-[0.57em]", !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);
@@ -104,6 +118,9 @@ function Button({ className, variant = "default", size, asChild = false, width =
 }
 //#endregion
 exports.Button = Button;
+exports.brandVariantClasses = brandVariantClasses;
 exports.buttonVariants = require_button.buttonVariants;
+exports.interactionClasses = interactionClasses;
+exports.primitiveVariant = primitiveVariant;
 
 //# sourceMappingURL=Button.cjs.map

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. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | '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. Replaces the Radix `asChild` prop. */\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 */\nconst 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. */\nfunction 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 '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. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\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 — matches the 8px/16px spacing-scale\n    // values at the default text-sm (14px) and scales down/up with smaller or\n    // larger button text. h-auto drops the primitive's fixed h-* so the\n    // vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[1.14em] py-[0.57em]',\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqBA,cAAAA,GAGzB;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,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,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,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,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,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,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. Replaces the Radix `asChild` prop. */\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' ? '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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,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

@@ -1,8 +1,9 @@
 import { Button as Button$1, buttonVariants } from "../../primitives/button.cjs";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/button/Button.d.ts
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';
+export type CustomVariant = 'default' | 'primary' | 'destructive' | 'destructive-outline' | 'outline' | 'ghost' | 'link';
 /** Props for the Berget Button wrapper. */
 export interface ButtonProps extends Omit<React.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
   /** Visual style variant. `primary` is Berget-specific. */

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":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqLF,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;;wBAqNF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}

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

@@ -1,8 +1,9 @@
 import { Button as Button$1, buttonVariants } from "../../primitives/button.mjs";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 //#region src/components/button/Button.d.ts
 /** Variants exposed by the Berget wrapper. */
-type CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';
+export type CustomVariant = 'default' | 'primary' | 'destructive' | 'destructive-outline' | 'outline' | 'ghost' | 'link';
 /** Props for the Berget Button wrapper. */
 export interface ButtonProps extends Omit<React.ComponentProps<typeof Button$1>, 'variant' | 'ref'> {
   /** Visual style variant. `primary` is Berget-specific. */

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":";;;;KAQK;;iBAGY,oBAAoB,KACnC,MAAM,sBAAsBA;;EAI5B,UAAU;;EAEV;;EAEA;EACA,MAAM,MAAM,IAAI;;wBAqLF,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;;wBAqNF,SACd,WACA,SACA,MACA,SACA,OACA,MACA,KACA,aACG,SACF,0CAAW,IAAA"}

package/dist/components/button/Button.mjs

@@ -24,6 +24,9 @@ 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.
 */
+/** Shared interaction chrome for every variant.
+* (Exported for `anchorVariants`, which replicates the wrapper chrome on
+* real `<a>` elements without dragging in button semantics.) */
 const interactionClasses = cn(`
     focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2
     focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid
@@ -33,11 +36,23 @@ const interactionClasses = cn(`
   `, "active:not-aria-[haspopup]:translate-y-0");
 /** Disabled treatment shared by every variant. */
 const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow-none";
-/** Brand-specific classes applied *on top* of the upstream primitive. */
+/** Brand-specific classes applied *on top* of the upstream primitive.
+* (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 "destructive-outline": return cn(`
+          border-berget-button-destructive-outline-border bg-transparent
+          text-berget-button-destructive-outline-fg
+        `, `
+          hover:bg-berget-button-destructive-outline-hover
+          hover:text-berget-button-destructive-outline-fg
+          dark:hover:bg-berget-button-destructive-outline-hover
+        `, `
+          active:bg-transparent
+          dark:active:bg-transparent
+        `, "focus-visible:border-berget-button-destructive-outline-border", disabledClasses, "disabled:border-berget-button-disabled-border disabled:bg-transparent");
 		case "outline": return cn(`
           border-berget-button-outline-border bg-transparent
           text-berget-button-outline-fg
@@ -72,6 +87,7 @@ function primitiveVariant(variant) {
 	switch (variant) {
 		case "primary":
 		case "destructive":
+		case "destructive-outline":
 		case "outline":
 		case "ghost": return "ghost";
 		default: return variant;
@@ -83,9 +99,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-[1.14em] py-[0.57em]", !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);
@@ -103,6 +117,6 @@ function Button({ className, variant = "default", size, asChild = false, width =
 	});
 }
 //#endregion
-export { Button, buttonVariants };
+export { Button, brandVariantClasses, buttonVariants, interactionClasses, primitiveVariant };
 
 //# sourceMappingURL=Button.mjs.map

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. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | '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. Replaces the Radix `asChild` prop. */\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 */\nconst 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. */\nfunction 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 '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. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\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 — matches the 8px/16px spacing-scale\n    // values at the default text-sm (14px) and scales down/up with smaller or\n    // larger button text. h-auto drops the primitive's fixed h-* so the\n    // vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[1.14em] py-[0.57em]',\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB,GAGzB;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,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,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,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,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,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,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. Replaces the Radix `asChild` prop. */\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' ? '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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,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/components/button/anchorVariants.cjs

@@ -0,0 +1,56 @@
+"use client";
+const require_utils = require("../../lib/utils.cjs");
+const require_button = require("../../primitives/button.cjs");
+const require_Button = require("./Button.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/button/anchorVariants.tsx
+/**
+* Class variants for real `<a>` elements styled like `Button` chrome.
+*
+* Base UI's Button enforces button semantics and its docs forbid rendering
+* links through the `render` prop, and the package's `asChild` leaves
+* `nativeButton={true}` — anchors through it keep `role="button"` and log a
+* dev-console error. This helper bakes in exactly the wrapper chrome the
+* `Button` component applies, so consumers can style a plain anchor instead
+* of replicating package internals:
+*
+* ```tsx
+* <a className={anchorVariants({ variant: 'primary', width: 'full' })} href="…">
+*   Open dashboard
+* </a>
+* ```
+*
+* Class output is equivalent to `Button variant=… width=…` (ignoring
+* `disabled:*`, which does not apply to anchors), with anchor-safe focus
+* treatment: `:focus-visible` works natively on `<a>` elements, and the
+* shared outline-based focus ring lands the same way.
+*/
+function anchorVariants({ variant = "default", width = "default", size, className } = {}) {
+	const isIcon = typeof size === "string" && size.startsWith("icon");
+	return require_utils.cn(require_button.buttonVariants({
+		variant: require_Button.primitiveVariant(variant),
+		size
+	}), width === "full" ? "rounded-berget-xs" : "rounded-full", !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `text-base`), !isIcon && "font-normal", require_Button.brandVariantClasses(variant), require_Button.interactionClasses, width === "full" && "w-full", className);
+}
+/** Ready-to-use anchor styled through {@link anchorVariants}. For cases
+* where a component (rather than a class string) is easier to consume. */
+function Anchor({ variant, width, size, className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: anchorVariants({
+			variant,
+			width,
+			size,
+			className
+		}),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "inline-flex items-center gap-2",
+			children
+		})
+	});
+}
+//#endregion
+exports.Anchor = Anchor;
+exports.anchorVariants = anchorVariants;
+
+//# sourceMappingURL=anchorVariants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchorVariants.cjs","names":["cn","buttonVariants","primitiveVariant","brandVariantClasses","interactionClasses"],"sources":["../../../src/components/button/anchorVariants.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn } from '../../lib/utils';\nimport { buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n  brandVariantClasses,\n  interactionClasses,\n  primitiveVariant,\n  type CustomVariant,\n} from './Button';\n\n/** Props for {@link anchorVariants}. Consumes like `buttonVariants` with the\n * same variant union as the `Button` wrapper. */\nexport interface AnchorVariantsProps {\n  /** Visual style variant — same union as `Button`'s `variant` prop. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Button size ladder — maps to the same text scale as `Button`. */\n  size?: VariantProps<typeof buttonVariants>['size'];\n  /** Extra classes, merged last (same override position as `Button`). */\n  className?: string;\n}\n\n/**\n * Class variants for real `<a>` elements styled like `Button` chrome.\n *\n * Base UI's Button enforces button semantics and its docs forbid rendering\n * links through the `render` prop, and the package's `asChild` leaves\n * `nativeButton={true}` — anchors through it keep `role=\"button\"` and log a\n * dev-console error. This helper bakes in exactly the wrapper chrome the\n * `Button` component applies, so consumers can style a plain anchor instead\n * of replicating package internals:\n *\n * ```tsx\n * <a className={anchorVariants({ variant: 'primary', width: 'full' })} href=\"…\">\n *   Open dashboard\n * </a>\n * ```\n *\n * Class output is equivalent to `Button variant=… width=…` (ignoring\n * `disabled:*`, which does not apply to anchors), with anchor-safe focus\n * treatment: `:focus-visible` works natively on `<a>` elements, and the\n * shared outline-based focus ring lands the same way.\n */\nexport function anchorVariants({\n  variant = 'default',\n  width = 'default',\n  size,\n  className,\n}: AnchorVariantsProps = {}): string {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n\n  return cn(\n    buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Full-width anchors use the square radius; otherwise pill (same rule\n    // as the Button wrapper).\n    width === 'full' ? 'rounded-berget-xs' : 'rounded-full',\n    // Em-based padding, inline = 2× block, matching the Button wrapper.\n    !isIcon && 'h-auto px-[0.8em] py-[0.4em]',\n    // Text ladder: default renders at text-base like the wrapper Button.\n    !isIcon &&\n      (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : `text-base`),\n    !isIcon && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    width === 'full' && 'w-full',\n    className,\n  );\n}\n\nexport type AnchorProps = React.ComponentProps<'a'> & AnchorVariantsProps;\n\n/** Ready-to-use anchor styled through {@link anchorVariants}. For cases\n * where a component (rather than a class string) is easier to consume. */\nexport function Anchor({ variant, width, size, className, children, ...props }: AnchorProps) {\n  return (\n    <a className={anchorVariants({ variant, width, size, className })} {...props}>\n      <span className=\"inline-flex items-center gap-2\">{children}</span>\n    </a>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAgB,eAAe,EAC7B,UAAU,WACV,QAAQ,WACR,MACA,cACuB,CAAC,GAAW;CACnC,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CAEjE,OAAOA,cAAAA,GACLC,eAAAA,eAAe;EAAE,SAASC,eAAAA,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAG3D,UAAU,SAAS,sBAAsB,gBAEzC,CAAC,UAAU,gCAEX,CAAC,WACE,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAChF,CAAC,UAAU,eACXC,eAAAA,oBAAoB,OAAO,GAC3BC,eAAAA,oBACA,UAAU,UAAU,UACpB,SACF;AACF;;;AAMA,SAAgB,OAAO,EAAE,SAAS,OAAO,MAAM,WAAW,UAAU,GAAG,SAAsB;CAC3F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EAAG,WAAW,eAAe;GAAE;GAAS;GAAO;GAAM;EAAU,CAAC;EAAG,GAAI;EACrE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAkC;EAAe,CAAA;CAChE,CAAA;AAEP"}

package/dist/components/button/anchorVariants.d.cts

@@ -0,0 +1,45 @@
+import { buttonVariants } from "../../primitives/button.cjs";
+import { CustomVariant } from "./Button.cjs";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/button/anchorVariants.d.ts
+/** Props for {@link anchorVariants}. Consumes like `buttonVariants` with the
+ * same variant union as the `Button` wrapper. */
+export interface AnchorVariantsProps {
+  /** Visual style variant — same union as `Button`'s `variant` prop. */
+  variant?: CustomVariant;
+  /** Full width or auto width. */
+  width?: 'default' | 'full';
+  /** Button size ladder — maps to the same text scale as `Button`. */
+  size?: VariantProps<typeof buttonVariants>['size'];
+  /** Extra classes, merged last (same override position as `Button`). */
+  className?: string;
+}
+/**
+ * Class variants for real `<a>` elements styled like `Button` chrome.
+ *
+ * Base UI's Button enforces button semantics and its docs forbid rendering
+ * links through the `render` prop, and the package's `asChild` leaves
+ * `nativeButton={true}` — anchors through it keep `role="button"` and log a
+ * dev-console error. This helper bakes in exactly the wrapper chrome the
+ * `Button` component applies, so consumers can style a plain anchor instead
+ * of replicating package internals:
+ *
+ * ```tsx
+ * <a className={anchorVariants({ variant: 'primary', width: 'full' })} href="…">
+ *   Open dashboard
+ * </a>
+ * ```
+ *
+ * Class output is equivalent to `Button variant=… width=…` (ignoring
+ * `disabled:*`, which does not apply to anchors), with anchor-safe focus
+ * treatment: `:focus-visible` works natively on `<a>` elements, and the
+ * shared outline-based focus ring lands the same way.
+ */
+export declare function anchorVariants({ variant, width, size, className }?: AnchorVariantsProps): string;
+export type AnchorProps = React.ComponentProps<'a'> & AnchorVariantsProps;
+/** Ready-to-use anchor styled through {@link anchorVariants}. For cases
+ * where a component (rather than a class string) is easier to consume. */
+export declare function Anchor({ variant, width, size, className, children, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=anchorVariants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchorVariants.d.cts","names":[],"sources":["../../../src/components/button/anchorVariants.tsx"],"mappings":";;;;;;;iBAeiB;;EAEf,UAAU;;EAEV;;EAEA,OAAO,oBAAoB;;EAE3B;;;;;;;;;;;;;;;;;;;;;;;wBAwBc,iBACd,SACA,OACA,MACA,cACC;YAqBS,cAAc,MAAM,sBAAsB;;;wBAItC,SAAS,SAAS,OAAO,MAAM,WAAW,aAAa,SAAS,0CAAW,IAAA"}

package/dist/components/button/anchorVariants.d.mts

@@ -0,0 +1,45 @@
+import { buttonVariants } from "../../primitives/button.mjs";
+import { CustomVariant } from "./Button.mjs";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/button/anchorVariants.d.ts
+/** Props for {@link anchorVariants}. Consumes like `buttonVariants` with the
+ * same variant union as the `Button` wrapper. */
+export interface AnchorVariantsProps {
+  /** Visual style variant — same union as `Button`'s `variant` prop. */
+  variant?: CustomVariant;
+  /** Full width or auto width. */
+  width?: 'default' | 'full';
+  /** Button size ladder — maps to the same text scale as `Button`. */
+  size?: VariantProps<typeof buttonVariants>['size'];
+  /** Extra classes, merged last (same override position as `Button`). */
+  className?: string;
+}
+/**
+ * Class variants for real `<a>` elements styled like `Button` chrome.
+ *
+ * Base UI's Button enforces button semantics and its docs forbid rendering
+ * links through the `render` prop, and the package's `asChild` leaves
+ * `nativeButton={true}` — anchors through it keep `role="button"` and log a
+ * dev-console error. This helper bakes in exactly the wrapper chrome the
+ * `Button` component applies, so consumers can style a plain anchor instead
+ * of replicating package internals:
+ *
+ * ```tsx
+ * <a className={anchorVariants({ variant: 'primary', width: 'full' })} href="…">
+ *   Open dashboard
+ * </a>
+ * ```
+ *
+ * Class output is equivalent to `Button variant=… width=…` (ignoring
+ * `disabled:*`, which does not apply to anchors), with anchor-safe focus
+ * treatment: `:focus-visible` works natively on `<a>` elements, and the
+ * shared outline-based focus ring lands the same way.
+ */
+export declare function anchorVariants({ variant, width, size, className }?: AnchorVariantsProps): string;
+export type AnchorProps = React.ComponentProps<'a'> & AnchorVariantsProps;
+/** Ready-to-use anchor styled through {@link anchorVariants}. For cases
+ * where a component (rather than a class string) is easier to consume. */
+export declare function Anchor({ variant, width, size, className, children, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=anchorVariants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchorVariants.d.mts","names":[],"sources":["../../../src/components/button/anchorVariants.tsx"],"mappings":";;;;;;;iBAeiB;;EAEf,UAAU;;EAEV;;EAEA,OAAO,oBAAoB;;EAE3B;;;;;;;;;;;;;;;;;;;;;;;wBAwBc,iBACd,SACA,OACA,MACA,cACC;YAqBS,cAAc,MAAM,sBAAsB;;;wBAItC,SAAS,SAAS,OAAO,MAAM,WAAW,aAAa,SAAS,0CAAW,IAAA"}

package/dist/components/button/anchorVariants.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../../lib/utils.mjs";
+import { buttonVariants } from "../../primitives/button.mjs";
+import { brandVariantClasses, interactionClasses, primitiveVariant } from "./Button.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/anchorVariants.tsx
+/**
+* Class variants for real `<a>` elements styled like `Button` chrome.
+*
+* Base UI's Button enforces button semantics and its docs forbid rendering
+* links through the `render` prop, and the package's `asChild` leaves
+* `nativeButton={true}` — anchors through it keep `role="button"` and log a
+* dev-console error. This helper bakes in exactly the wrapper chrome the
+* `Button` component applies, so consumers can style a plain anchor instead
+* of replicating package internals:
+*
+* ```tsx
+* <a className={anchorVariants({ variant: 'primary', width: 'full' })} href="…">
+*   Open dashboard
+* </a>
+* ```
+*
+* Class output is equivalent to `Button variant=… width=…` (ignoring
+* `disabled:*`, which does not apply to anchors), with anchor-safe focus
+* treatment: `:focus-visible` works natively on `<a>` elements, and the
+* shared outline-based focus ring lands the same way.
+*/
+function anchorVariants({ variant = "default", width = "default", size, className } = {}) {
+	const isIcon = typeof size === "string" && size.startsWith("icon");
+	return cn(buttonVariants({
+		variant: primitiveVariant(variant),
+		size
+	}), width === "full" ? "rounded-berget-xs" : "rounded-full", !isIcon && "h-auto px-[0.8em] py-[0.4em]", !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `text-base`), !isIcon && "font-normal", brandVariantClasses(variant), interactionClasses, width === "full" && "w-full", className);
+}
+/** Ready-to-use anchor styled through {@link anchorVariants}. For cases
+* where a component (rather than a class string) is easier to consume. */
+function Anchor({ variant, width, size, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		className: anchorVariants({
+			variant,
+			width,
+			size,
+			className
+		}),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "inline-flex items-center gap-2",
+			children
+		})
+	});
+}
+//#endregion
+export { Anchor, anchorVariants };
+
+//# sourceMappingURL=anchorVariants.mjs.map