@psnext/design-system 1.5.1 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn"],"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  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\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      {tabPrefix}\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      {tabSuffix}\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-10 border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm\",\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-glass 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-glass\",\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-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground\",\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,cAAcA,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,MAAMA,MAAM,eACT;EAAE;EAAS;EAAM,aAAa;CAAoB,IACzD;EAAC;EAAS;EAAM;CAAmB,CACrC;CACA,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAY,UAAb;EAAsB,OAAO;YAC3B,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,MAAf;GACE,aAAU;GACV,gBAAc;GACd,oBAAkB;GAClB,aAAa;GACb,WAAWC,WAAAA,GACT,0DACA,YAAY,UAAU,UAAU,SAChC,SACF;GACA,GAAI;EACL,CAAA;CACmB,CAAA;AAE1B;AAEA,MAAM,oBAAA,GAAA,yBAAA,KAAuB,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,WACA,WACA,GAAG,SAIF;CACD,MAAM,EAAE,SAAS,MAAM,gBAAgBF,MAAM,WAAW,WAAW;CACnE,MAAM,cAAc,YAAY;CAChC,MAAM,UAAUA,MAAM,OAAuB,IAAI;CACjD,MAAM,CAAC,WAAW,gBAAgBA,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,iBAAA,GAAA,kBAAA,MAACC,SAAAA,KAAc,MAAf;EACE,KAAK;EACL,aAAU;EACV,WAAWC,WAAAA,GAAG,iBAAiB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EACzE,GAAI;YAJN;GAMG;GACA,eAAe,aACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;IACV,OACE,gBAAgB,aACZ;KAAE,KAAK,UAAU;KAAK,QAAQ,UAAU;KAAQ,MAAM;KAAG,OAAO;IAAE,IAClE;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;KAAO,KAAK;KAAG,QAAQ;IAAE;GAEzE,CAAA;GAEF;GACA;EACiB;;AAExB;AAEA,MAAM,uBAAA,GAAA,yBAAA,KACJ,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,gBAAgBF,MAAM,WAAW,WAAW;CACnE,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,SAAf;EACE,aAAU;EACV,WAAWC,WAAAA,GAAG,oBAAoB;GAAE;GAAS;GAAM;EAAY,CAAC,GAAG,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,MAAM,EAAE,YAAYF,MAAM,WAAW,WAAW;CAChD,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAc,SAAf;EACE,aAAU;EACV,WAAWC,WAAAA,GACT,uBAEA,YAAY,WACV,uFACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,iIACA,kLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["React","TabsPrimitive","cn"],"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-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"w-full items-stretch gap-1 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-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\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  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\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      {tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg 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      {tabSuffix}\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-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_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-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\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      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\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-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 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-primary-txt 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-primary-txt 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-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\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-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\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":"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"}

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

@@ -1,2 +1,2 @@
-import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index59.cjs";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index60.cjs";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

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

@@ -1,2 +1,2 @@
-import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index59.js";
+import { a as TabsTrigger, i as TabsList, n as TabsContent, o as tabsListVariants, r as TabsCounter, s as tabsTriggerVariants, t as Tabs } from "../../index60.js";
 export { Tabs, TabsContent, TabsCounter, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants };

package/dist/primitives/Tabs/index.js

@@ -36,13 +36,13 @@ function Tabs({ className, variant = "pill", size = "md", orientation = "horizon
 		})
 	});
 }
-const tabsListVariants = cva("relative inline-flex items-center text-muted-foreground", {
+const tabsListVariants = cva("relative inline-flex items-center text-muted-txt", {
 	variants: {
 		variant: {
 			line: "gap-1 bg-transparent",
-			pill: "justify-center rounded-lg bg-muted p-[3px]",
-			segmented: "justify-center rounded-xl bg-muted p-1",
-			fancy: "w-full items-stretch gap-2 bg-transparent"
+			pill: "justify-center rounded-10 bg-muted-bg p-0.75",
+			segmented: "justify-center rounded-12 bg-muted-bg p-1",
+			fancy: "w-full items-stretch gap-1 bg-transparent"
 		},
 		orientation: {
 			horizontal: "",
@@ -59,19 +59,19 @@ const tabsListVariants = cva("relative inline-flex items-center text-muted-foreg
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "sm",
-			class: "h-8"
+			class: "h-6 p-0.5"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "md",
-			class: "h-9"
+			class: "h-8.75"
 		},
 		{
 			variant: ["pill", "segmented"],
 			orientation: "horizontal",
 			size: "lg",
-			class: "h-10"
+			class: "h-10 p-1"
 		}
 	],
 	defaultVariants: {
@@ -131,7 +131,7 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 			isSegmented && indicator && /* @__PURE__ */ jsx("span", {
 				"data-slot": "tabs-indicator",
 				"aria-hidden": true,
-				className: "absolute z-0 rounded-lg bg-background shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
+				className: "absolute z-0 rounded-8 bg-primary-bg shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none",
 				style: orientation === "vertical" ? {
 					top: indicator.top,
 					height: indicator.height,
@@ -149,13 +149,13 @@ function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 		]
 	});
 }
-const tabsTriggerVariants = cva("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", {
+const tabsTriggerVariants = cva("relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			line: "h-[calc(100%-1px)] flex-1 rounded-none",
-			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm",
-			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-lg",
-			fancy: "mb-1.5 flex-1 justify-between rounded-xl bg-[var(--glass-subtle)] backdrop-blur-glass hover:bg-[var(--glass-light)] data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:bg-[var(--glass-light)]"
+			pill: "h-[calc(100%-1px)] flex-1 rounded-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm",
+			segmented: "z-[1] h-[calc(100%-1px)] flex-1 rounded-8",
+			fancy: cn("mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass", "bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg", "data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg", "data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold", "data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]", "data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]", "first:before:hidden last:after:hidden")
 		},
 		orientation: {
 			horizontal: "",
@@ -175,7 +175,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "sm",
-			class: "px-1.5 py-1 text-xs"
+			class: "px-2 py-0.5 text-xs leading-4"
 		},
 		{
 			variant: [
@@ -184,7 +184,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "md",
-			class: "px-2 py-1 text-sm"
+			class: "px-2 py-1 text-sm leading-5"
 		},
 		{
 			variant: [
@@ -193,7 +193,7 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 				"segmented"
 			],
 			size: "lg",
-			class: "px-3 py-1 text-base"
+			class: "px-2 py-1.5 text-sm leading-5"
 		},
 		{
 			variant: "fancy",
@@ -203,22 +203,22 @@ const tabsTriggerVariants = cva("relative inline-flex items-center justify-cente
 		{
 			variant: "fancy",
 			size: "md",
-			class: "px-4 py-3 text-sm"
+			class: "px-6 py-3 text-sm"
 		},
 		{
 			variant: "fancy",
 			size: "lg",
-			class: "px-4 py-4 text-base"
+			class: "px-6 py-4 text-base"
 		},
 		{
 			variant: "line",
 			orientation: "horizontal",
-			class: "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"
+			class: "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
 		},
 		{
 			variant: "line",
 			orientation: "vertical",
-			class: "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"
+			class: "after:absolute after:inset-y-0 after:right-[-5px] after:w-0.5 after:bg-primary-txt after:opacity-0 after:transition-opacity data-[state=active]:after:opacity-100"
 		}
 	],
 	defaultVariants: {
@@ -245,7 +245,7 @@ function TabsContent({ className, ...props }) {
 	const { variant } = React.useContext(TabsContext);
 	return /* @__PURE__ */ jsx(Tabs$1.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-xl rounded-t-none bg-[var(--glass-light)] p-5 backdrop-blur-glass", className),
+		className: cn("flex-1 outline-none", variant === "fancy" && "flex-none rounded-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass", className),
 		...props
 	});
 }
@@ -253,7 +253,7 @@ function TabsContent({ className, ...props }) {
 function TabsCounter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "tabs-counter",
-		className: cn("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", "group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground", className),
+		className: cn("ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-bg px-1 text-xs font-medium text-muted-txt", "group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt", className),
 		...props
 	});
 }

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

@@ -1 +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  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\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      {tabPrefix}\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      {tabSuffix}\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-10 border border-transparent data-[state=active]:bg-background data-[state=active]:shadow-sm\",\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-glass 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-glass\",\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-inverse group-data-[variant=fancy]/tabs:text-inverse-foreground\",\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,WACA,WACA,GAAG,SAIF;CACD,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;GAMG;GACA,eAAe,aACd,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;IACV,OACE,gBAAgB,aACZ;KAAE,KAAK,UAAU;KAAK,QAAQ,UAAU;KAAQ,MAAM;KAAG,OAAO;IAAE,IAClE;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;KAAO,KAAK;KAAG,QAAQ;IAAE;GAEzE,CAAA;GAEF;GACA;EACiB;;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,uFACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,iIACA,kLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"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-txt\", {\n  variants: {\n    variant: {\n      line: \"gap-1 bg-transparent\",\n      pill: \"justify-center rounded-10 bg-muted-bg p-0.75\",\n      segmented: \"justify-center rounded-12 bg-muted-bg p-1\",\n      fancy: \"w-full items-stretch gap-1 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-6 p-0.5\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"md\", class: \"h-8.75\" },\n    { variant: [\"pill\", \"segmented\"], orientation: \"horizontal\", size: \"lg\", class: \"h-10 p-1\" },\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  tabPrefix,\n  tabSuffix,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> & {\n  tabPrefix?: React.ReactNode;\n  tabSuffix?: React.ReactNode;\n}) {\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      {tabPrefix}\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-8 bg-primary-bg 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      {tabSuffix}\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-primary-txt outline-none transition-all focus-visible:ring-3 focus-visible:ring-focus disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary-txt [&_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-10 border border-transparent data-[state=active]:bg-primary-bg data-[state=active]:shadow-sm\",\n        segmented: \"z-[1] h-[calc(100%-1px)] flex-1 rounded-8\",\n        // Fancy (Figma Components file, node 1:6831): default = glass-60→glass-20\n        // vertical gradient card; hover = solid glass-none; selected = 4px taller,\n        // flat-bottomed, glass-none→glass-40 (72.6% stop), semibold, with concave\n        // 16px corner curves where it meets the panel.\n        fancy: cn(\n          \"mb-1 flex-1 justify-between rounded-16 font-normal backdrop-blur-glass\",\n          \"bg-gradient-to-b from-glass-60-bg from-[3.4%] to-glass-20-bg\",\n          \"data-[state=inactive]:hover:bg-none data-[state=inactive]:hover:bg-glass-none-bg\",\n          \"data-[state=active]:mb-0 data-[state=active]:rounded-b-none data-[state=active]:from-glass-none-bg data-[state=active]:to-glass-40-bg data-[state=active]:to-[72.6%] data-[state=active]:font-semibold\",\n          \"data-[state=active]:before:absolute data-[state=active]:before:-left-4 data-[state=active]:before:bottom-0 data-[state=active]:before:size-4 data-[state=active]:before:bg-[radial-gradient(circle_at_top_left,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          \"data-[state=active]:after:absolute data-[state=active]:after:-right-4 data-[state=active]:after:bottom-0 data-[state=active]:after:size-4 data-[state=active]:after:bg-[radial-gradient(circle_at_top_right,transparent_15.5px,var(--glass-40-bg)_16px)]\",\n          // The curves flow into NEIGHBOURING tabs only — never past the group edge.\n          \"first:before:hidden last:after:hidden\",\n        ),\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      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"sm\",\n        class: \"px-2 py-0.5 text-xs leading-4\",\n      },\n      { variant: [\"line\", \"pill\", \"segmented\"], size: \"md\", class: \"px-2 py-1 text-sm leading-5\" },\n      {\n        variant: [\"line\", \"pill\", \"segmented\"],\n        size: \"lg\",\n        class: \"px-2 py-1.5 text-sm leading-5\",\n      },\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-6 py-3 text-sm\" },\n      { variant: \"fancy\", size: \"lg\", class: \"px-6 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-primary-txt 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-primary-txt 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-16 rounded-t-none bg-glass-40-bg p-5 backdrop-blur-glass\",\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-bg px-1 text-xs font-medium text-muted-txt\",\n        \"group-data-[variant=fancy]/tabs:h-5 group-data-[variant=fancy]/tabs:min-w-5 group-data-[variant=fancy]/tabs:bg-primary-invert-bg group-data-[variant=fancy]/tabs:px-2 group-data-[variant=fancy]/tabs:leading-4 group-data-[variant=fancy]/tabs:font-semibold group-data-[variant=fancy]/tabs:text-primary-invert-txt\",\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,oDAAoD;CAC/E,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;EAAY;EAC5F;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAS;EACzF;GAAE,SAAS,CAAC,QAAQ,WAAW;GAAG,aAAa;GAAc,MAAM;GAAM,OAAO;EAAW;CAC7F;CACA,iBAAiB;EAAE,SAAS;EAAQ,aAAa;EAAc,MAAM;CAAK;AAC5E,CAAC;;AAGD,SAAS,SAAS,EAChB,WACA,UACA,WACA,WACA,GAAG,SAIF;CACD,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;GAMG;GACA,eAAe,aACd,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAU;IACV,OACE,gBAAgB,aACZ;KAAE,KAAK,UAAU;KAAK,QAAQ,UAAU;KAAQ,MAAM;KAAG,OAAO;IAAE,IAClE;KAAE,MAAM,UAAU;KAAM,OAAO,UAAU;KAAO,KAAK;KAAG,QAAQ;IAAE;GAEzE,CAAA;GAEF;GACA;EACiB;;AAExB;AAEA,MAAM,sBAAsB,IAC1B,6VACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,MAAM;GACN,WAAW;GAKX,OAAO,GACL,0EACA,gEACA,oFACA,0MACA,+PACA,4PAEA,uCACF;EACF;EACA,aAAa;GAAE,YAAY;GAAI,UAAU;EAAuB;EAChE,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CACA,kBAAkB;EAEhB;GACE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GACrC,MAAM;GACN,OAAO;EACT;EACA;GAAE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GAAG,MAAM;GAAM,OAAO;EAA8B;EAC3F;GACE,SAAS;IAAC;IAAQ;IAAQ;GAAW;GACrC,MAAM;GACN,OAAO;EACT;EAGA;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,8EACF,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAuC;CAC1E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,6HACA,yTACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Text/index.cjs

@@ -17,11 +17,11 @@ const textVariants = (0, require("class-variance-authority").cva)("", {
 			semibold: "font-semibold"
 		},
 		variant: {
-			default: "text-foreground",
-			muted: "text-muted-foreground",
-			primary: "text-primary",
-			destructive: "text-destructive",
-			success: "text-[var(--content-success)]"
+			default: "text-primary-txt",
+			muted: "text-muted-txt",
+			primary: "text-primary-txt",
+			destructive: "text-danger-txt",
+			success: "text-success-txt"
 		},
 		font: {
 			body: "font-sans",

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

@@ -1 +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"}
+{"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-primary-txt\",\n      muted: \"text-muted-txt\",\n      primary: \"text-primary-txt\",\n      destructive: \"text-danger-txt\",\n      success: \"text-success-txt\",\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-primary-txt). */\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

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

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

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

package/dist/primitives/Text/index.js

@@ -17,11 +17,11 @@ const textVariants = cva("", {
 			semibold: "font-semibold"
 		},
 		variant: {
-			default: "text-foreground",
-			muted: "text-muted-foreground",
-			primary: "text-primary",
-			destructive: "text-destructive",
-			success: "text-[var(--content-success)]"
+			default: "text-primary-txt",
+			muted: "text-muted-txt",
+			primary: "text-primary-txt",
+			destructive: "text-danger-txt",
+			success: "text-success-txt"
 		},
 		font: {
 			body: "font-sans",

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

@@ -1 +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"}
+{"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-primary-txt\",\n      muted: \"text-muted-txt\",\n      primary: \"text-primary-txt\",\n      destructive: \"text-danger-txt\",\n      success: \"text-success-txt\",\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-primary-txt). */\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

@@ -2,18 +2,30 @@ 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-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-ring-error aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
-	variants: { shape: {
-		default: "rounded-xl",
-		round: "rounded-2xl"
-	} },
-	defaultVariants: { shape: "default" }
+const textareaVariants = (0, require("class-variance-authority").cva)("text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",
+			ai: "ai-border [--ai-surface:var(--input-bg)]"
+		},
+		shape: {
+			default: "rounded-12",
+			round: "rounded-16"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		shape: "default"
+	}
 });
 /** Multi-line text input that auto-grows with its content and supports validation + disabled states. */
-function Textarea({ className, shape, ...props }) {
+function Textarea({ className, variant, shape, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		"data-slot": "textarea",
-		className: require_cn.cn(textareaVariants({ shape }), className),
+		className: require_cn.cn(textareaVariants({
+			variant,
+			shape
+		}), className),
 		...props
 	});
 }

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

@@ -1 +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-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-ring-error aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      shape: {\n        default: \"rounded-xl\",\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,gXACA;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"}
+{"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\n/* Figma: PS AI Helix – Core → Textarea (node 16:1745). Chrome matches Input. */\nconst textareaVariants = cva(\n  \"text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      shape: {\n        default: \"rounded-12\",\n        // Figma drew 18px here (off the radius scale, flagged to design); code rounds\n        // to the nearest token step, rounded-16.\n        round: \"rounded-16\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\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  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (12px) or `round` (16px). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ variant, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;AAMA,MAAM,oBAAA,qCAAA,EAAA,KACJ,4RACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EACA,OAAO;GACL,SAAS;GAGT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WAEA,SACA,OACA,GAAG,SAKA;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,iBAAiB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

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

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

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

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

package/dist/primitives/Textarea/index.js

@@ -2,18 +2,30 @@ 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-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-ring-error aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
-	variants: { shape: {
-		default: "rounded-xl",
-		round: "rounded-2xl"
-	} },
-	defaultVariants: { shape: "default" }
+const textareaVariants = cva("text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border",
+			ai: "ai-border [--ai-surface:var(--input-bg)]"
+		},
+		shape: {
+			default: "rounded-12",
+			round: "rounded-16"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		shape: "default"
+	}
 });
 /** Multi-line text input that auto-grows with its content and supports validation + disabled states. */
-function Textarea({ className, shape, ...props }) {
+function Textarea({ className, variant, shape, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn(textareaVariants({ shape }), className),
+		className: cn(textareaVariants({
+			variant,
+			shape
+		}), className),
 		...props
 	});
 }

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

@@ -1 +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-border placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-ring-error aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      shape: {\n        default: \"rounded-xl\",\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,gXACA;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"}
+{"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\n/* Figma: PS AI Helix – Core → Textarea (node 16:1745). Chrome matches Input. */\nconst textareaVariants = cva(\n  \"text-primary-txt placeholder:text-muted-txt focus-visible:ring-focus aria-invalid:ring-focus-error flex field-sizing-content min-h-19 w-full px-3 py-2 text-sm leading-5 transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      // `ai` swaps the border for the AI gradient; text/placeholder are unchanged.\n      variant: {\n        default:\n          \"border border-primary-border bg-input-bg focus-visible:border-primary-invert-border aria-invalid:border-danger-border\",\n        ai: \"ai-border [--ai-surface:var(--input-bg)]\",\n      },\n      shape: {\n        default: \"rounded-12\",\n        // Figma drew 18px here (off the radius scale, flagged to design); code rounds\n        // to the nearest token step, rounded-16.\n        round: \"rounded-16\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\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  /** Chrome style — `default` bordered field or `ai` (AI gradient border). */\n  variant,\n  shape,\n  ...props\n}: React.ComponentProps<\"textarea\"> &\n  VariantProps<typeof textareaVariants> & {\n    /** Corner radius: `default` (12px) or `round` (16px). */\n    shape?: VariantProps<typeof textareaVariants>[\"shape\"];\n  }) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ variant, shape }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Textarea, textareaVariants };\n"],"mappings":";;;;AAMA,MAAM,mBAAmB,IACvB,4RACA;CACE,UAAU;EAER,SAAS;GACP,SACE;GACF,IAAI;EACN;EACA,OAAO;GACL,SAAS;GAGT,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;;AAGA,SAAS,SAAS,EAChB,WAEA,SACA,OACA,GAAG,SAKA;CACH,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,iBAAiB;GAAE;GAAS;EAAM,CAAC,GAAG,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

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

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

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

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

package/dist/primitives/Toggle/index.cjs

@@ -3,25 +3,26 @@ 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-ring-error aria-invalid:border-destructive whitespace-nowrap", {
+const toggleVariants = (0, require("class-variance-authority").cva)("inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap", {
 	variants: {
-		/** Visual style: `default` (transparent) or `outline` (bordered). */
+		/** Visual style: `default` (transparent/ghost) or `outline` (bordered). */
 		variant: {
-			default: "bg-transparent",
-			outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground"
+			default: "bg-ghost-bg",
+			outline: "border border-primary-border bg-ghost-bg"
 		},
-		/** Control size: `sm`, `default`, or `lg`. */
+		/** Control size: `xs` (Mini 24), `sm` (32), `default` (36), or `lg` (40). */
 		size: {
+			xs: "h-6 px-1 min-w-6",
+			sm: "h-8 px-2 min-w-8",
 			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"
+			lg: "h-10 px-2 min-w-10"
 		},
 		shape: {
-			default: "rounded-md",
+			default: "rounded-8",
 			round: "rounded-full",
-			left: "rounded-l-md rounded-r-none",
+			left: "rounded-l-8 rounded-r-none",
 			middle: "rounded-none",
-			right: "rounded-r-md rounded-l-none"
+			right: "rounded-r-8 rounded-l-none"
 		}
 	},
 	compoundVariants: [{

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

@@ -1 +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-ring-error 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-border 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,uiBACA;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"}
+{"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\n/* Figma: PS AI Helix – Core → Toggle & Toggle Group (274:53016). Active state\n   is bg/interaction/toggle-active; Figma defines no hover state, so hover keeps\n   the subtle ghost tint. */\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 text-sm font-medium cursor-pointer text-primary-txt hover:bg-ghost-hover-bg disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-toggle-active-bg [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-focus focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-focus-error aria-invalid:border-danger-border whitespace-nowrap\",\n  {\n    variants: {\n      /** Visual style: `default` (transparent/ghost) or `outline` (bordered). */\n      variant: {\n        default: \"bg-ghost-bg\",\n        outline: \"border border-primary-border bg-ghost-bg\",\n      },\n      /** Control size: `xs` (Mini 24), `sm` (32), `default` (36), or `lg` (40). */\n      size: {\n        xs: \"h-6 px-1 min-w-6\",\n        sm: \"h-8 px-2 min-w-8\",\n        default: \"h-9 px-2 min-w-9\",\n        lg: \"h-10 px-2 min-w-10\",\n      },\n      // Shape (Figma): `default` (8px) 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-8\",\n        round: \"rounded-full\",\n        left: \"rounded-l-8 rounded-r-none\",\n        middle: \"rounded-none\",\n        right: \"rounded-r-8 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":";;;;;AASA,MAAM,kBAAA,qCAAA,EAAA,KACJ,2eACA;CACE,UAAU;;EAER,SAAS;GACP,SAAS;GACT,SAAS;EACX;;EAEA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,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"}