@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TabsPrimitive"],"sources":["../../../src/primitives/Tabs/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Tabs — built on Radix Tabs (content panels + roving-focus keyboard nav + a11y).\n// One component, four visual `variant`s, each supporting horizontal/vertical\n// `orientation`:\n//  - \"line\": underline under the active tab.\n//  - \"pill\" (default): a muted track; the active tab is an elevated pill.\n//  - \"segmented\": a muted track with a single sliding indicator that animates\n//    between tabs.\n//  - \"fancy\": translucent glass card tabs; the active tab merges into the glass\n//    content panel below (login-style). `size` controls the fancy vertical padding.\n// `variant`/`size`/`orientation` are set on the root and shared via context.\n\ntype TabsVariant = \"line\" | \"pill\" | \"segmented\" | \"fancy\";\ntype TabsSize = \"sm\" | \"md\" | \"lg\";\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\nconst TabsContext = React.createContext<{\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n}>({ variant: \"pill\", size: \"md\", orientation: \"horizontal\" });\n\n/**\n * Tabbed interface root: holds the active value and shares `variant`/`size`/\n * `orientation` with its `TabsList`/`TabsTrigger`/`TabsContent` via context.\n */\nfunction Tabs({\n  className,\n  variant = \"pill\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** Visual style of the tabs: underline, pill track, sliding segmented, or glass cards. */\n  variant?: TabsVariant;\n  /** Control density — drives padding and text size of the triggers. */\n  size?: TabsSize;\n}) {\n  const resolvedOrientation: TabsOrientation =\n    orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n  const ctx = React.useMemo(\n    () => ({ variant, size, orientation: resolvedOrientation }),\n    [variant, size, resolvedOrientation],\n  );\n  return (\n    <TabsContext.Provider value={ctx}>\n      <TabsPrimitive.Root\n        data-slot=\"tabs\"\n        data-variant={variant}\n        data-orientation={resolvedOrientation}\n        orientation={resolvedOrientation}\n        className={cn(\n          \"group/tabs flex data-[orientation=horizontal]:flex-col\",\n          variant === \"fancy\" ? \"gap-0\" : \"gap-2\",\n          className,\n        )}\n        {...props}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabsListVariants = cva(\"relative inline-flex items-center text-muted-foreground\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-lg bg-muted p-[3px]\",\n      segmented: \"justify-center rounded-xl bg-muted p-1\",\n      fancy: \"w-full items-stretch gap-2 bg-transparent\",\n    },\n    orientation: {\n      horizontal: \"\",\n      vertical: \"h-fit flex-col\",\n    },\n    size: { sm: \"\", md: \"\", lg: \"\" },\n  },\n  compoundVariants: [\n    // Track height for the horizontal pill/segmented variants.\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"sm\", class: \"h-8\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-9\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10\" },\n  ],\n  defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n});\n\n/** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */\nfunction TabsList({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  return (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, size, orientation }), className)}\n      {...props}\n    >\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-lg bg-background shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n    </TabsPrimitive.List>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-md border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-lg\",\n        fancy:\n          \"mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-[var(--glass-blur)] hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]\",\n      },\n      orientation: { horizontal: \"\", vertical: \"w-full justify-start\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    compoundVariants: [\n      // Padding + text size for the track variants.\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"sm\", class: \"px-1.5 py-1 text-xs\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm\" },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"lg\", class: \"px-3 py-1 text-base\" },\n      // Fancy footprint scales with size; the active tab adds bottom padding so it\n      // merges into the panel while inactive tabs stay shorter (gap above content).\n      { variant: \"fancy\", size: \"sm\", class: \"px-4 py-2 text-sm\" },\n      { variant: \"fancy\", size: \"md\", class: \"px-4 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-4 py-4 text-base\" },\n      // Underline position for the line variant (per orientation).\n      {\n        variant: \"line\",\n        orientation: \"horizontal\",\n        class:\n          \"after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n      {\n        variant: \"line\",\n        orientation: \"vertical\",\n        class:\n          \"after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-foreground after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100\",\n      },\n    ],\n    defaultVariants: { variant: \"pill\", orientation: \"horizontal\", size: \"md\" },\n  },\n);\n\n/** Clickable tab button; its `value` selects the matching `TabsContent` panel. */\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(tabsTriggerVariants({ variant, size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Panel shown when its `value` matches the active tab; styled as a glass panel for the `fancy` variant. */\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  const { variant } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\n        \"flex-1 outline-none\",\n        // Fancy: a glass panel the active tab merges into (flat top, matching tint).\n        variant === \"fancy\" &&\n          \"flex-none rounded-xl rounded-t-none bg-[var(--glass-light)] p-5 backdrop-blur-[var(--glass-blur)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Trailing count badge for a tab trigger; goes dark on the `fancy` variant to match its cards. */\nfunction TabsCounter({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"tabs-counter\"\n      className={cn(\n        \"ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-xs font-medium text-muted-foreground\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-foreground group-data-[variant=fancy]/tabs:text-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  TabsCounter,\n  tabsListVariants,\n  tabsTriggerVariants,\n};\n"],"mappings":";;;;;;AAuBA,MAAM,cAAc,MAAM,cAIvB;CAAE,SAAS;CAAQ,MAAM;CAAM,aAAa;AAAa,CAAC;;;;;AAM7D,SAAS,KAAK,EACZ,WACA,UAAU,QACV,OAAO,MACP,cAAc,cACd,GAAG,SAMF;CACD,MAAM,sBACJ,gBAAgB,aAAa,aAAa;CAC5C,MAAM,MAAM,MAAM,eACT;EAAE;EAAS;EAAM,aAAa;CAAoB,IACzD;EAAC;EAAS;EAAM;CAAmB,CACrC;CACA,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,oBAACA,OAAc,MAAf;GACE,aAAU;GACV,gBAAc;GACd,oBAAkB;GAClB,aAAa;GACb,WAAW,GACT,0DACA,YAAY,UAAU,UAAU,SAChC,SACF;GACA,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B;AAEA,MAAM,mBAAmB,IAAI,2DAA2D;CACtF,UAAU;EACR,SAAS;GACP,MAAM;GACN,MAAM;GACN,WAAW;GACX,OAAO;EACT;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;EACA,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CACA,kBAAkB;EAEhB;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAM;EACtF;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAM;EACtF;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAO;CACzF;CACA,iBAAiB;EAAE,SAAS;EAAQ,aAAa;EAAc,MAAM;CAAK;AAC5E,CAAC;;AAGD,SAAS,SAAS,EAChB,WACA,UACA,GAAG,SAC+C;CAClD,MAAM,EAAE,SAAS,MAAM,gBAAgB,MAAM,WAAW,WAAW;CACnE,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,MAAM,OAAuB,IAAI;CACjD,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAK9B,IAAI;CAEd,MAAM,gBAAgB;EACpB,IAAI,CAAC,aAAa;EAClB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,MAAM,eAAe;GACnB,MAAM,SAAS,KAAK,cAClB,qDACF;GACA,IAAI,CAAC,QAAQ;IACX,aAAa,IAAI;IACjB;GACF;GACA,aAAa;IACX,MAAM,OAAO;IACb,KAAK,OAAO;IACZ,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB,CAAC;EACH;EACA,OAAO;EACP,MAAM,WAAW,IAAI,iBAAiB,MAAM;EAC5C,SAAS,QAAQ,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,YAAY;GAAG,SAAS;EAAK,CAAC;EAC3F,MAAM,SAAS,IAAI,eAAe,MAAM;EACxC,OAAO,QAAQ,IAAI;EACnB,aAAa;GACX,SAAS,WAAW;GACpB,OAAO,WAAW;EACpB;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,OACE,qBAACA,OAAc,MAAf;EACE,KAAK;EACL,aAAU;EACV,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EACzE,GAAI;YAJN,CAMG,eAAe,aACd,oBAAC,QAAD;GACE,aAAU;GACV,eAAA;GACA,WAAU;GACV,OACE,gBAAgB,aACZ;IAAE,KAAK,UAAU;IAAK,QAAQ,UAAU;IAAQ,MAAM;IAAG,OAAO;GAAE,IAClE;IAAE,MAAM,UAAU;IAAM,OAAO,UAAU;IAAO,KAAK;IAAG,QAAQ;GAAE;EAEzE,CAAA,GAEF,QACiB;;AAExB;AAEA,MAAM,sBAAsB,IAC1B,0XACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,MAAM;GACN,WAAW;GACX,OACE;EACJ;EACA,aAAa;GAAE,YAAY;GAAI,UAAU;EAAuB;EAChE,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CACA,kBAAkB;EAEhB;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAsB;EACnF;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAoB;EACjF;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAAsB;EAGnF;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAoB;EAC3D;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAoB;EAC3D;GAAE,SAAS;GAAS,MAAM;GAAM,OAAO;EAAsB;EAE7D;GACE,SAAS;GACT,aAAa;GACb,OACE;EACJ;EACA;GACE,SAAS;GACT,aAAa;GACb,OACE;EACJ;CACF;CACA,iBAAiB;EAAE,SAAS;EAAQ,aAAa;EAAc,MAAM;CAAK;AAC5E,CACF;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,MAAM,EAAE,SAAS,MAAM,gBAAgB,MAAM,WAAW,WAAW;CACnE,OACE,oBAACA,OAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,MAAM,EAAE,YAAY,MAAM,WAAW,WAAW;CAChD,OACE,oBAACA,OAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,uBAEA,YAAY,WACV,qGACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,iIACA,6KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Text/index.cjs

@@ -0,0 +1,64 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Text/Text.tsx
+const textVariants = (0, require("class-variance-authority").cva)("", {
+	variants: {
+		size: {
+			large: "text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]",
+			regular: "text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]",
+			small: "text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]",
+			mini: "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]",
+			caption: "text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase"
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold"
+		},
+		variant: {
+			default: "text-foreground",
+			muted: "text-muted-foreground",
+			primary: "text-primary",
+			destructive: "text-destructive",
+			success: "text-[var(--content-success)]"
+		},
+		font: {
+			body: "font-sans",
+			heading: "font-heading",
+			mono: "font-mono"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		truncate: { true: "truncate" }
+	},
+	defaultVariants: {
+		size: "regular",
+		weight: "normal",
+		variant: "default",
+		font: "body"
+	}
+});
+/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */
+function Text({ as, className, size, weight, variant, font, align, truncate, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "p", {
+		"data-slot": "text",
+		className: require_cn.cn(textVariants({
+			size,
+			weight,
+			variant,
+			font,
+			align,
+			truncate
+		}), className),
+		...props
+	});
+}
+//#endregion
+exports.Text = Text;
+exports.textVariants = textVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Text/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-foreground\",\n      muted: \"text-muted-foreground\",\n      primary: \"text-primary\",\n      destructive: \"text-destructive\",\n      success: \"text-[var(--content-success)]\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-foreground). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;AASA,MAAM,gBAAA,qCAAA,EAAA,KAAmB,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Text/index.d.cts

@@ -0,0 +1,2 @@
+import { n as TextProps, r as textVariants, t as Text } from "../../index60.cjs";
+export { Text, TextProps, textVariants };

package/dist/primitives/Text/index.d.ts

@@ -0,0 +1,2 @@
+import { n as TextProps, r as textVariants, t as Text } from "../../index60.js";
+export { Text, TextProps, textVariants };

package/dist/primitives/Text/index.js

@@ -0,0 +1,63 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Text/Text.tsx
+const textVariants = cva("", {
+	variants: {
+		size: {
+			large: "text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]",
+			regular: "text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]",
+			small: "text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]",
+			mini: "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]",
+			caption: "text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase"
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold"
+		},
+		variant: {
+			default: "text-foreground",
+			muted: "text-muted-foreground",
+			primary: "text-primary",
+			destructive: "text-destructive",
+			success: "text-[var(--content-success)]"
+		},
+		font: {
+			body: "font-sans",
+			heading: "font-heading",
+			mono: "font-mono"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		truncate: { true: "truncate" }
+	},
+	defaultVariants: {
+		size: "regular",
+		weight: "normal",
+		variant: "default",
+		font: "body"
+	}
+});
+/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */
+function Text({ as, className, size, weight, variant, font, align, truncate, ...props }) {
+	return /* @__PURE__ */ jsx(as ?? "p", {
+		"data-slot": "text",
+		className: cn(textVariants({
+			size,
+			weight,
+			variant,
+			font,
+			align,
+			truncate
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Text, textVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Text/Text.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Text — the typography primitive. Renders any element via `as` and drives\n// size/line-height from the design-system BODY type scale (Inter): the Figma\n// \"paragraph large/regular/small/mini\" + caption steps (tokens in\n// styles/tokens/typography.css). Inline links compose as children.\nconst textVariants = cva(\"\", {\n  variants: {\n    // Body scale — font-size + line-height come straight from the type tokens.\n    size: {\n      large:\n        \"text-[length:var(--paragraph-large-font-size)] leading-[var(--paragraph-large-line-height)]\",\n      regular:\n        \"text-[length:var(--paragraph-regular-font-size)] leading-[var(--paragraph-regular-line-height)]\",\n      small:\n        \"text-[length:var(--paragraph-small-font-size)] leading-[var(--paragraph-small-line-height)]\",\n      mini: \"text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]\",\n      caption:\n        \"text-[length:var(--caption-font-size)] leading-[var(--caption-line-height)] tracking-[var(--caption-letter-spacing)] uppercase\",\n    },\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    variant: {\n      default: \"text-foreground\",\n      muted: \"text-muted-foreground\",\n      primary: \"text-primary\",\n      destructive: \"text-destructive\",\n      success: \"text-[var(--content-success)]\",\n    },\n    font: {\n      body: \"font-sans\",\n      heading: \"font-heading\",\n      mono: \"font-mono\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    truncate: {\n      true: \"truncate\",\n    },\n  },\n  defaultVariants: {\n    size: \"regular\",\n    weight: \"normal\",\n    variant: \"default\",\n    font: \"body\",\n  },\n});\n\ntype TextProps = Omit<React.ComponentProps<\"p\">, \"color\"> &\n  VariantProps<typeof textVariants> & {\n    /** Element/component to render. Defaults to `p`. */\n    as?: React.ElementType;\n    /** Body type-scale step (font-size + line-height). Defaults to `regular`. */\n    size?: VariantProps<typeof textVariants>[\"size\"];\n    /** Font weight. Defaults to `normal`. */\n    weight?: VariantProps<typeof textVariants>[\"weight\"];\n    /** Foreground colour token. Defaults to `default` (text-foreground). */\n    variant?: VariantProps<typeof textVariants>[\"variant\"];\n    /** Font family. Defaults to `body` (sans). */\n    font?: VariantProps<typeof textVariants>[\"font\"];\n    /** Horizontal text alignment. */\n    align?: VariantProps<typeof textVariants>[\"align\"];\n    /** Truncate to a single line with an ellipsis. */\n    truncate?: VariantProps<typeof textVariants>[\"truncate\"];\n  };\n\n/** The typography primitive: renders any element via `as` and drives size/weight/colour from the body type scale. */\nfunction Text({\n  as,\n  className,\n  size,\n  weight,\n  variant,\n  font,\n  align,\n  truncate,\n  ...props\n}: TextProps) {\n  const Comp = as ?? \"p\";\n  return (\n    <Comp\n      data-slot=\"text\"\n      className={cn(textVariants({ size, weight, variant, font, align, truncate }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Text, textVariants, type TextProps };\n"],"mappings":";;;;AASA,MAAM,eAAe,IAAI,IAAI;CAC3B,UAAU;EAER,MAAM;GACJ,OACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;EACJ;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,SAAS;GACP,SAAS;GACT,OAAO;GACP,SAAS;GACT,aAAa;GACb,SAAS;EACX;EACA,MAAM;GACJ,MAAM;GACN,SAAS;GACT,MAAM;EACR;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU,EACR,MAAM,WACR;CACF;CACA,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,SAAS;EACT,MAAM;CACR;AACF,CAAC;;AAqBD,SAAS,KAAK,EACZ,IACA,WACA,MACA,QACA,SACA,MACA,OACA,UACA,GAAG,SACS;CAEZ,OACE,oBAFW,MAAM,KAEjB;EACE,aAAU;EACV,WAAW,GAAG,aAAa;GAAE;GAAM;GAAQ;GAAS;GAAM;GAAO;EAAS,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Textarea/index.cjs

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Textarea/Textarea.tsx
+const textareaVariants = (0, require("class-variance-authority").cva)("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", {
+	variants: { shape: {
+		default: "rounded-md",
+		round: "rounded-2xl"
+	} },
+	defaultVariants: { shape: "default" }
+});
+/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */
+function Textarea({ className, shape, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		"data-slot": "textarea",
+		className: require_cn.cn(textareaVariants({ shape }), className),
+		...props
+	});
+}
+//#endregion
+exports.Textarea = Textarea;
+exports.textareaVariants = textareaVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Textarea/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst textareaVariants = cva(\n  \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n  {\n    variants: {\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-2xl\",\n      },\n    },\n    defaultVariants: {\n      shape: \"default\",\n    },\n  },\n);\n\n/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */\nfunction Textarea({\n  className,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (rounded-md) or `round` (rounded-2xl). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;AAKA,MAAM,oBAAA,qCAAA,EAAA,KACJ,ubACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,OAAO;CACT,EACF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WACA,OACA,GAAG,SAKA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iBAAiB,EAAE,MAAM,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Textarea/index.d.cts

@@ -0,0 +1,2 @@
+import { n as textareaVariants, t as Textarea } from "../../index61.cjs";
+export { Textarea, textareaVariants };

package/dist/primitives/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+import { n as textareaVariants, t as Textarea } from "../../index61.js";
+export { Textarea, textareaVariants };

package/dist/primitives/Textarea/index.js

@@ -0,0 +1,23 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Textarea/Textarea.tsx
+const textareaVariants = cva("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", {
+	variants: { shape: {
+		default: "rounded-md",
+		round: "rounded-2xl"
+	} },
+	defaultVariants: { shape: "default" }
+});
+/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */
+function Textarea({ className, shape, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn(textareaVariants({ shape }), className),
+		...props
+	});
+}
+//#endregion
+export { Textarea, textareaVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst textareaVariants = cva(\n  \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n  {\n    variants: {\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-2xl\",\n      },\n    },\n    defaultVariants: {\n      shape: \"default\",\n    },\n  },\n);\n\n/** Multi-line text input that auto-grows with its content and supports validation + disabled states. */\nfunction Textarea({\n  className,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (rounded-md) or `round` (rounded-2xl). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;AAKA,MAAM,mBAAmB,IACvB,ubACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,OAAO;CACT,EACF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WACA,OACA,GAAG,SAKA;CACH,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,iBAAiB,EAAE,MAAM,CAAC,GAAG,SAAS;EACpD,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/ThemeProvider/index.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/ThemeProvider/ThemeProvider.tsx
+const PRODUCTS = [
+	"slingshot",
+	"sustain",
+	"bodhi",
+	"psai"
+];
+const ThemeContext = react.createContext(null);
+const DEFAULT_STORAGE_KEY = "ds-theme-preferences";
+function readStored(storageKey) {
+	try {
+		const raw = localStorage.getItem(storageKey);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw);
+		return {
+			theme: parsed.theme === "dark" || parsed.theme === "light" ? parsed.theme : void 0,
+			product: PRODUCTS.includes(parsed.product) ? parsed.product : void 0
+		};
+	} catch {
+		return {};
+	}
+}
+function prefersDark() {
+	try {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	} catch {
+		return false;
+	}
+}
+function applyToDocument({ theme, product }) {
+	const root = document.documentElement;
+	root.classList.toggle("dark", theme === "dark");
+	for (const p of PRODUCTS) root.classList.toggle(`theme-${p}`, p === product);
+}
+/**
+* Owns the app's global appearance (colour mode + active product), reflects it to
+* `<html>`, and persists it. Wrap the app tree once; read state with `useTheme()`.
+*/
+function ThemeProvider({ children, defaultTheme = "light", defaultProduct = "slingshot", storageKey = DEFAULT_STORAGE_KEY }) {
+	const [prefs, setPrefs] = react.useState(() => {
+		if (typeof window === "undefined") return {
+			theme: defaultTheme,
+			product: defaultProduct
+		};
+		const stored = readStored(storageKey);
+		return {
+			theme: stored.theme ?? (prefersDark() ? "dark" : defaultTheme),
+			product: stored.product ?? defaultProduct
+		};
+	});
+	react.useEffect(() => {
+		applyToDocument(prefs);
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(prefs));
+		} catch {}
+	}, [prefs, storageKey]);
+	const value = react.useMemo(() => ({
+		...prefs,
+		setTheme: (theme) => setPrefs((p) => ({
+			...p,
+			theme
+		})),
+		toggleTheme: () => setPrefs((p) => ({
+			...p,
+			theme: p.theme === "dark" ? "light" : "dark"
+		})),
+		setProduct: (product) => setPrefs((p) => ({
+			...p,
+			product
+		}))
+	}), [prefs]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+/** Read the current theme/product and the setters. Must be used inside a `<ThemeProvider>`. */
+function useTheme() {
+	const ctx = react.useContext(ThemeContext);
+	if (!ctx) throw new Error("useTheme must be used within a <ThemeProvider>.");
+	return ctx;
+}
+//#endregion
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/ThemeProvider/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React"],"sources":["../../../src/primitives/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// ThemeProvider — owns the two global appearance choices for an app and persists\n// them together (one localStorage entry, no extra variables):\n//   - `theme`   : light | dark  → toggles the `.dark` class on <html>\n//   - `product` : which brand    → toggles `.theme-{product}` on <html> (drives\n//                                   the Logo + PageBackground) and is the default\n//                                   logo shown by the Header.\n// Apps wrap their tree in <ThemeProvider>; components read state via useTheme().\n\n/** Colour mode: light or dark (toggles the `.dark` class on `<html>`). */\nexport type ThemeMode = \"light\" | \"dark\";\n/** Active brand/product (drives the `.theme-{product}` class on `<html>`). */\nexport type ThemeProduct = \"slingshot\" | \"sustain\" | \"bodhi\" | \"psai\";\n\nconst PRODUCTS: ThemeProduct[] = [\"slingshot\", \"sustain\", \"bodhi\", \"psai\"];\n\ntype ThemePreferences = { theme: ThemeMode; product: ThemeProduct };\n\ntype ThemeContextValue = ThemePreferences & {\n  /** Set the colour mode explicitly. */\n  setTheme: (theme: ThemeMode) => void;\n  /** Flip between light and dark. */\n  toggleTheme: () => void;\n  /** Switch the active product (logo + background + future customisations). */\n  setProduct: (product: ThemeProduct) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nconst DEFAULT_STORAGE_KEY = \"ds-theme-preferences\";\n\nfunction readStored(storageKey: string): Partial<ThemePreferences> {\n  try {\n    const raw = localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw) as Partial<ThemePreferences>;\n    return {\n      theme: parsed.theme === \"dark\" || parsed.theme === \"light\" ? parsed.theme : undefined,\n      product: PRODUCTS.includes(parsed.product as ThemeProduct) ? parsed.product : undefined,\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction prefersDark(): boolean {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  } catch {\n    return false;\n  }\n}\n\nfunction applyToDocument({ theme, product }: ThemePreferences): void {\n  const root = document.documentElement;\n  root.classList.toggle(\"dark\", theme === \"dark\");\n  for (const p of PRODUCTS) root.classList.toggle(`theme-${p}`, p === product);\n}\n\n/**\n * Owns the app's global appearance (colour mode + active product), reflects it to\n * `<html>`, and persists it. Wrap the app tree once; read state with `useTheme()`.\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme = \"light\",\n  defaultProduct = \"slingshot\",\n  storageKey = DEFAULT_STORAGE_KEY,\n}: {\n  /** App subtree that consumes the theme context. */\n  children: React.ReactNode;\n  /** Colour mode used when nothing is stored (system preference still wins on first load). */\n  defaultTheme?: ThemeMode;\n  /** Product used when nothing is stored. */\n  defaultProduct?: ThemeProduct;\n  /** localStorage key for the persisted `{ theme, product }`. */\n  storageKey?: string;\n}) {\n  // Lazy init from storage → system preference → defaults (runs once, client-side).\n  const [prefs, setPrefs] = React.useState<ThemePreferences>(() => {\n    if (typeof window === \"undefined\") return { theme: defaultTheme, product: defaultProduct };\n    const stored = readStored(storageKey);\n    return {\n      theme: stored.theme ?? (prefersDark() ? \"dark\" : defaultTheme),\n      product: stored.product ?? defaultProduct,\n    };\n  });\n\n  // Reflect to <html> and persist on every change.\n  React.useEffect(() => {\n    applyToDocument(prefs);\n    try {\n      localStorage.setItem(storageKey, JSON.stringify(prefs));\n    } catch {\n      // storage unavailable (private mode) — degrade silently\n    }\n  }, [prefs, storageKey]);\n\n  const value = React.useMemo<ThemeContextValue>(\n    () => ({\n      ...prefs,\n      setTheme: (theme) => setPrefs((p) => ({ ...p, theme })),\n      toggleTheme: () => setPrefs((p) => ({ ...p, theme: p.theme === \"dark\" ? \"light\" : \"dark\" })),\n      setProduct: (product) => setPrefs((p) => ({ ...p, product })),\n    }),\n    [prefs],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/** Read the current theme/product and the setters. Must be used inside a `<ThemeProvider>`. */\nfunction useTheme(): ThemeContextValue {\n  const ctx = React.useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useTheme must be used within a <ThemeProvider>.\");\n  }\n  return ctx;\n}\n\nexport { ThemeProvider, useTheme, ThemeContext };\n"],"mappings":";;;;;;AAiBA,MAAM,WAA2B;CAAC;CAAa;CAAW;CAAS;AAAM;AAazE,MAAM,eAAeA,MAAM,cAAwC,IAAI;AAEvE,MAAM,sBAAsB;AAE5B,SAAS,WAAW,YAA+C;CACjE,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,UAAU;EAC3C,IAAI,CAAC,KAAK,OAAO,CAAC;EAClB,MAAM,SAAS,KAAK,MAAM,GAAG;EAC7B,OAAO;GACL,OAAO,OAAO,UAAU,UAAU,OAAO,UAAU,UAAU,OAAO,QAAQ,KAAA;GAC5E,SAAS,SAAS,SAAS,OAAO,OAAuB,IAAI,OAAO,UAAU,KAAA;EAChF;CACF,QAAQ;EACN,OAAO,CAAC;CACV;AACF;AAEA,SAAS,cAAuB;CAC9B,IAAI;EACF,OAAO,OAAO,WAAW,8BAA8B,EAAE;CAC3D,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,gBAAgB,EAAE,OAAO,WAAmC;CACnE,MAAM,OAAO,SAAS;CACtB,KAAK,UAAU,OAAO,QAAQ,UAAU,MAAM;CAC9C,KAAK,MAAM,KAAK,UAAU,KAAK,UAAU,OAAO,SAAS,KAAK,MAAM,OAAO;AAC7E;;;;;AAMA,SAAS,cAAc,EACrB,UACA,eAAe,SACf,iBAAiB,aACjB,aAAa,uBAUZ;CAED,MAAM,CAAC,OAAO,YAAYA,MAAM,eAAiC;EAC/D,IAAI,OAAO,WAAW,aAAa,OAAO;GAAE,OAAO;GAAc,SAAS;EAAe;EACzF,MAAM,SAAS,WAAW,UAAU;EACpC,OAAO;GACL,OAAO,OAAO,UAAU,YAAY,IAAI,SAAS;GACjD,SAAS,OAAO,WAAW;EAC7B;CACF,CAAC;CAGD,MAAM,gBAAgB;EACpB,gBAAgB,KAAK;EACrB,IAAI;GACF,aAAa,QAAQ,YAAY,KAAK,UAAU,KAAK,CAAC;EACxD,QAAQ,CAER;CACF,GAAG,CAAC,OAAO,UAAU,CAAC;CAEtB,MAAM,QAAQA,MAAM,eACX;EACL,GAAG;EACH,WAAW,UAAU,UAAU,OAAO;GAAE,GAAG;GAAG;EAAM,EAAE;EACtD,mBAAmB,UAAU,OAAO;GAAE,GAAG;GAAG,OAAO,EAAE,UAAU,SAAS,UAAU;EAAO,EAAE;EAC3F,aAAa,YAAY,UAAU,OAAO;GAAE,GAAG;GAAG;EAAQ,EAAE;CAC9D,IACA,CAAC,KAAK,CACR;CAEA,OAAO,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;;AAGA,SAAS,WAA8B;CACrC,MAAM,MAAMA,MAAM,WAAW,YAAY;CACzC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iDAAiD;CAEnE,OAAO;AACT"}

package/dist/primitives/ThemeProvider/index.d.cts

@@ -0,0 +1,2 @@
+import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index62.cjs";
+export { ThemeContext, ThemeMode, ThemeProduct, ThemeProvider, useTheme };

package/dist/primitives/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+import { a as useTheme, i as ThemeProvider, n as ThemeMode, r as ThemeProduct, t as ThemeContext } from "../../index62.js";
+export { ThemeContext, ThemeMode, ThemeProduct, ThemeProvider, useTheme };

package/dist/primitives/ThemeProvider/index.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/ThemeProvider/ThemeProvider.tsx
+const PRODUCTS = [
+	"slingshot",
+	"sustain",
+	"bodhi",
+	"psai"
+];
+const ThemeContext = React.createContext(null);
+const DEFAULT_STORAGE_KEY = "ds-theme-preferences";
+function readStored(storageKey) {
+	try {
+		const raw = localStorage.getItem(storageKey);
+		if (!raw) return {};
+		const parsed = JSON.parse(raw);
+		return {
+			theme: parsed.theme === "dark" || parsed.theme === "light" ? parsed.theme : void 0,
+			product: PRODUCTS.includes(parsed.product) ? parsed.product : void 0
+		};
+	} catch {
+		return {};
+	}
+}
+function prefersDark() {
+	try {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	} catch {
+		return false;
+	}
+}
+function applyToDocument({ theme, product }) {
+	const root = document.documentElement;
+	root.classList.toggle("dark", theme === "dark");
+	for (const p of PRODUCTS) root.classList.toggle(`theme-${p}`, p === product);
+}
+/**
+* Owns the app's global appearance (colour mode + active product), reflects it to
+* `<html>`, and persists it. Wrap the app tree once; read state with `useTheme()`.
+*/
+function ThemeProvider({ children, defaultTheme = "light", defaultProduct = "slingshot", storageKey = DEFAULT_STORAGE_KEY }) {
+	const [prefs, setPrefs] = React.useState(() => {
+		if (typeof window === "undefined") return {
+			theme: defaultTheme,
+			product: defaultProduct
+		};
+		const stored = readStored(storageKey);
+		return {
+			theme: stored.theme ?? (prefersDark() ? "dark" : defaultTheme),
+			product: stored.product ?? defaultProduct
+		};
+	});
+	React.useEffect(() => {
+		applyToDocument(prefs);
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(prefs));
+		} catch {}
+	}, [prefs, storageKey]);
+	const value = React.useMemo(() => ({
+		...prefs,
+		setTheme: (theme) => setPrefs((p) => ({
+			...p,
+			theme
+		})),
+		toggleTheme: () => setPrefs((p) => ({
+			...p,
+			theme: p.theme === "dark" ? "light" : "dark"
+		})),
+		setProduct: (product) => setPrefs((p) => ({
+			...p,
+			product
+		}))
+	}), [prefs]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+/** Read the current theme/product and the setters. Must be used inside a `<ThemeProvider>`. */
+function useTheme() {
+	const ctx = React.useContext(ThemeContext);
+	if (!ctx) throw new Error("useTheme must be used within a <ThemeProvider>.");
+	return ctx;
+}
+//#endregion
+export { ThemeContext, ThemeProvider, useTheme };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/ThemeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// ThemeProvider — owns the two global appearance choices for an app and persists\n// them together (one localStorage entry, no extra variables):\n//   - `theme`   : light | dark  → toggles the `.dark` class on <html>\n//   - `product` : which brand    → toggles `.theme-{product}` on <html> (drives\n//                                   the Logo + PageBackground) and is the default\n//                                   logo shown by the Header.\n// Apps wrap their tree in <ThemeProvider>; components read state via useTheme().\n\n/** Colour mode: light or dark (toggles the `.dark` class on `<html>`). */\nexport type ThemeMode = \"light\" | \"dark\";\n/** Active brand/product (drives the `.theme-{product}` class on `<html>`). */\nexport type ThemeProduct = \"slingshot\" | \"sustain\" | \"bodhi\" | \"psai\";\n\nconst PRODUCTS: ThemeProduct[] = [\"slingshot\", \"sustain\", \"bodhi\", \"psai\"];\n\ntype ThemePreferences = { theme: ThemeMode; product: ThemeProduct };\n\ntype ThemeContextValue = ThemePreferences & {\n  /** Set the colour mode explicitly. */\n  setTheme: (theme: ThemeMode) => void;\n  /** Flip between light and dark. */\n  toggleTheme: () => void;\n  /** Switch the active product (logo + background + future customisations). */\n  setProduct: (product: ThemeProduct) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nconst DEFAULT_STORAGE_KEY = \"ds-theme-preferences\";\n\nfunction readStored(storageKey: string): Partial<ThemePreferences> {\n  try {\n    const raw = localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw) as Partial<ThemePreferences>;\n    return {\n      theme: parsed.theme === \"dark\" || parsed.theme === \"light\" ? parsed.theme : undefined,\n      product: PRODUCTS.includes(parsed.product as ThemeProduct) ? parsed.product : undefined,\n    };\n  } catch {\n    return {};\n  }\n}\n\nfunction prefersDark(): boolean {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  } catch {\n    return false;\n  }\n}\n\nfunction applyToDocument({ theme, product }: ThemePreferences): void {\n  const root = document.documentElement;\n  root.classList.toggle(\"dark\", theme === \"dark\");\n  for (const p of PRODUCTS) root.classList.toggle(`theme-${p}`, p === product);\n}\n\n/**\n * Owns the app's global appearance (colour mode + active product), reflects it to\n * `<html>`, and persists it. Wrap the app tree once; read state with `useTheme()`.\n */\nfunction ThemeProvider({\n  children,\n  defaultTheme = \"light\",\n  defaultProduct = \"slingshot\",\n  storageKey = DEFAULT_STORAGE_KEY,\n}: {\n  /** App subtree that consumes the theme context. */\n  children: React.ReactNode;\n  /** Colour mode used when nothing is stored (system preference still wins on first load). */\n  defaultTheme?: ThemeMode;\n  /** Product used when nothing is stored. */\n  defaultProduct?: ThemeProduct;\n  /** localStorage key for the persisted `{ theme, product }`. */\n  storageKey?: string;\n}) {\n  // Lazy init from storage → system preference → defaults (runs once, client-side).\n  const [prefs, setPrefs] = React.useState<ThemePreferences>(() => {\n    if (typeof window === \"undefined\") return { theme: defaultTheme, product: defaultProduct };\n    const stored = readStored(storageKey);\n    return {\n      theme: stored.theme ?? (prefersDark() ? \"dark\" : defaultTheme),\n      product: stored.product ?? defaultProduct,\n    };\n  });\n\n  // Reflect to <html> and persist on every change.\n  React.useEffect(() => {\n    applyToDocument(prefs);\n    try {\n      localStorage.setItem(storageKey, JSON.stringify(prefs));\n    } catch {\n      // storage unavailable (private mode) — degrade silently\n    }\n  }, [prefs, storageKey]);\n\n  const value = React.useMemo<ThemeContextValue>(\n    () => ({\n      ...prefs,\n      setTheme: (theme) => setPrefs((p) => ({ ...p, theme })),\n      toggleTheme: () => setPrefs((p) => ({ ...p, theme: p.theme === \"dark\" ? \"light\" : \"dark\" })),\n      setProduct: (product) => setPrefs((p) => ({ ...p, product })),\n    }),\n    [prefs],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/** Read the current theme/product and the setters. Must be used inside a `<ThemeProvider>`. */\nfunction useTheme(): ThemeContextValue {\n  const ctx = React.useContext(ThemeContext);\n  if (!ctx) {\n    throw new Error(\"useTheme must be used within a <ThemeProvider>.\");\n  }\n  return ctx;\n}\n\nexport { ThemeProvider, useTheme, ThemeContext };\n"],"mappings":";;;AAiBA,MAAM,WAA2B;CAAC;CAAa;CAAW;CAAS;AAAM;AAazE,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,MAAM,sBAAsB;AAE5B,SAAS,WAAW,YAA+C;CACjE,IAAI;EACF,MAAM,MAAM,aAAa,QAAQ,UAAU;EAC3C,IAAI,CAAC,KAAK,OAAO,CAAC;EAClB,MAAM,SAAS,KAAK,MAAM,GAAG;EAC7B,OAAO;GACL,OAAO,OAAO,UAAU,UAAU,OAAO,UAAU,UAAU,OAAO,QAAQ,KAAA;GAC5E,SAAS,SAAS,SAAS,OAAO,OAAuB,IAAI,OAAO,UAAU,KAAA;EAChF;CACF,QAAQ;EACN,OAAO,CAAC;CACV;AACF;AAEA,SAAS,cAAuB;CAC9B,IAAI;EACF,OAAO,OAAO,WAAW,8BAA8B,EAAE;CAC3D,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,gBAAgB,EAAE,OAAO,WAAmC;CACnE,MAAM,OAAO,SAAS;CACtB,KAAK,UAAU,OAAO,QAAQ,UAAU,MAAM;CAC9C,KAAK,MAAM,KAAK,UAAU,KAAK,UAAU,OAAO,SAAS,KAAK,MAAM,OAAO;AAC7E;;;;;AAMA,SAAS,cAAc,EACrB,UACA,eAAe,SACf,iBAAiB,aACjB,aAAa,uBAUZ;CAED,MAAM,CAAC,OAAO,YAAY,MAAM,eAAiC;EAC/D,IAAI,OAAO,WAAW,aAAa,OAAO;GAAE,OAAO;GAAc,SAAS;EAAe;EACzF,MAAM,SAAS,WAAW,UAAU;EACpC,OAAO;GACL,OAAO,OAAO,UAAU,YAAY,IAAI,SAAS;GACjD,SAAS,OAAO,WAAW;EAC7B;CACF,CAAC;CAGD,MAAM,gBAAgB;EACpB,gBAAgB,KAAK;EACrB,IAAI;GACF,aAAa,QAAQ,YAAY,KAAK,UAAU,KAAK,CAAC;EACxD,QAAQ,CAER;CACF,GAAG,CAAC,OAAO,UAAU,CAAC;CAEtB,MAAM,QAAQ,MAAM,eACX;EACL,GAAG;EACH,WAAW,UAAU,UAAU,OAAO;GAAE,GAAG;GAAG;EAAM,EAAE;EACtD,mBAAmB,UAAU,OAAO;GAAE,GAAG;GAAG,OAAO,EAAE,UAAU,SAAS,UAAU;EAAO,EAAE;EAC3F,aAAa,YAAY,UAAU,OAAO;GAAE,GAAG;GAAG;EAAQ,EAAE;CAC9D,IACA,CAAC,KAAK,CACR;CAEA,OAAO,oBAAC,aAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;;AAGA,SAAS,WAA8B;CACrC,MAAM,MAAM,MAAM,WAAW,YAAY;CACzC,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,iDAAiD;CAEnE,OAAO;AACT"}

package/dist/primitives/Toggle/index.cjs

@@ -0,0 +1,59 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Toggle/Toggle.tsx
+const toggleVariants = (0, require("class-variance-authority").cva)("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+	variants: {
+		/** Visual style: `default` (transparent) or `outline` (bordered). */
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+		},
+		/** Control size: `sm`, `default`, or `lg`. */
+		size: {
+			default: "h-9 px-2 min-w-9",
+			sm: "h-8 px-1.5 min-w-8",
+			lg: "h-10 px-2.5 min-w-10"
+		},
+		shape: {
+			default: "rounded-md",
+			round: "rounded-full",
+			left: "rounded-l-md rounded-r-none",
+			middle: "rounded-none",
+			right: "rounded-r-md rounded-l-none"
+		}
+	},
+	compoundVariants: [{
+		variant: "outline",
+		shape: "middle",
+		class: "border-l-0"
+	}, {
+		variant: "outline",
+		shape: "right",
+		class: "border-l-0"
+	}],
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		shape: "default"
+	}
+});
+/** A two-state button that can be toggled on or off, built on Radix Toggle. */
+function Toggle({ className, variant, size, shape, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Toggle.Root, {
+		"data-slot": "toggle",
+		className: require_cn.cn(toggleVariants({
+			variant,
+			size,
+			shape,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+exports.Toggle = Toggle;
+exports.toggleVariants = toggleVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Toggle/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["TogglePrimitive","cn"],"sources":["../../../src/primitives/Toggle/Toggle.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { Toggle as TogglePrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      /** Visual style: `default` (transparent) or `outline` (bordered). */\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      /** Control size: `sm`, `default`, or `lg`. */\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n      // Shape (Figma): `default` (rounded-md) and `round` (pill) are standalone\n      // shapes; `left`/`middle`/`right` join into a segmented group, rounding\n      // only the outer edge.\n      shape: {\n        default: \"rounded-md\",\n        round: \"rounded-full\",\n        left: \"rounded-l-md rounded-r-none\",\n        middle: \"rounded-none\",\n        right: \"rounded-r-md rounded-l-none\",\n      },\n    },\n    compoundVariants: [\n      // Outlined segments collapse the shared border between adjacent items.\n      { variant: \"outline\", shape: \"middle\", class: \"border-l-0\" },\n      { variant: \"outline\", shape: \"right\", class: \"border-l-0\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"default\",\n    },\n  },\n);\n\n/** A two-state button that can be toggled on or off, built on Radix Toggle. */\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;AAMA,MAAM,kBAAA,qCAAA,EAAA,KACJ,ilBACA;CACE,UAAU;;EAER,SAAS;GACP,SAAS;GACT,SAAS;EACX;;EAEA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;EAIA,OAAO;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;EACT;CACF;CACA,kBAAkB,CAEhB;EAAE,SAAS;EAAW,OAAO;EAAU,OAAO;CAAa,GAC3D;EAAE,SAAS;EAAW,OAAO;EAAS,OAAO;CAAa,CAC5D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;;AAGA,SAAS,OAAO,EACd,WACA,SACA,MACA,OACA,GAAG,SACuF;CAC1F,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAO;EAAU,CAAC,CAAC;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Toggle/index.d.cts

@@ -0,0 +1,2 @@
+import { n as toggleVariants, t as Toggle } from "../../index63.cjs";
+export { Toggle, toggleVariants };

package/dist/primitives/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+import { n as toggleVariants, t as Toggle } from "../../index63.js";
+export { Toggle, toggleVariants };

package/dist/primitives/Toggle/index.js

@@ -0,0 +1,58 @@
+import { t as cn } from "../../cn.js";
+import { Toggle as Toggle$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Toggle/Toggle.tsx
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+	variants: {
+		/** Visual style: `default` (transparent) or `outline` (bordered). */
+		variant: {
+			default: "bg-transparent",
+			outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+		},
+		/** Control size: `sm`, `default`, or `lg`. */
+		size: {
+			default: "h-9 px-2 min-w-9",
+			sm: "h-8 px-1.5 min-w-8",
+			lg: "h-10 px-2.5 min-w-10"
+		},
+		shape: {
+			default: "rounded-md",
+			round: "rounded-full",
+			left: "rounded-l-md rounded-r-none",
+			middle: "rounded-none",
+			right: "rounded-r-md rounded-l-none"
+		}
+	},
+	compoundVariants: [{
+		variant: "outline",
+		shape: "middle",
+		class: "border-l-0"
+	}, {
+		variant: "outline",
+		shape: "right",
+		class: "border-l-0"
+	}],
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+		shape: "default"
+	}
+});
+/** A two-state button that can be toggled on or off, built on Radix Toggle. */
+function Toggle({ className, variant, size, shape, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1.Root, {
+		"data-slot": "toggle",
+		className: cn(toggleVariants({
+			variant,
+			size,
+			shape,
+			className
+		})),
+		...props
+	});
+}
+//#endregion
+export { Toggle, toggleVariants };
+
+//# sourceMappingURL=index.js.map