@psnext/design-system 1.2.1 → 1.4.0

package/dist/primitives/Tabs/index.js

@@ -81,7 +81,7 @@ const tabsListVariants = cva("relative inline-flex items-center text-muted-foreg
 	}
 });
 /** Row (or column) of tab triggers; renders the sliding indicator for the `segmented` variant. */
-function TabsList({ className, children, ...props }) {
+function TabsList({ className, children, tabPrefix, tabSuffix, ...props }) {
 	const { variant, size, orientation } = React.useContext(TabsContext);
 	const isSegmented = variant === "segmented";
 	const listRef = React.useRef(null);
@@ -126,22 +126,27 @@ function TabsList({ className, children, ...props }) {
 			orientation
 		}), className),
 		...props,
-		children: [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",
-			style: orientation === "vertical" ? {
-				top: indicator.top,
-				height: indicator.height,
-				left: 4,
-				right: 4
-			} : {
-				left: indicator.left,
-				width: indicator.width,
-				top: 4,
-				bottom: 4
-			}
-		}), children]
+		children: [
+			tabPrefix,
+			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",
+				style: orientation === "vertical" ? {
+					top: indicator.top,
+					height: indicator.height,
+					left: 4,
+					right: 4
+				} : {
+					left: indicator.left,
+					width: indicator.width,
+					top: 4,
+					bottom: 4
+				}
+			}),
+			children,
+			tabSuffix
+		]
 	});
 }
 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", {

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  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const { variant, size, orientation } = React.useContext(TabsContext);\n  const isSegmented = variant === \"segmented\";\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [indicator, setIndicator] = React.useState<{\n    left: number;\n    top: number;\n    width: number;\n    height: number;\n  } | null>(null);\n\n  React.useEffect(() => {\n    if (!isSegmented) return;\n    const list = listRef.current;\n    if (!list) return;\n    const update = () => {\n      const active = list.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n      );\n      if (!active) {\n        setIndicator(null);\n        return;\n      }\n      setIndicator({\n        left: active.offsetLeft,\n        top: active.offsetTop,\n        width: active.offsetWidth,\n        height: active.offsetHeight,\n      });\n    };\n    update();\n    const mutation = new MutationObserver(update);\n    mutation.observe(list, { attributes: true, attributeFilter: [\"data-state\"], subtree: true });\n    const resize = new ResizeObserver(update);\n    resize.observe(list);\n    return () => {\n      mutation.disconnect();\n      resize.disconnect();\n    };\n  }, [isSegmented]);\n\n  return (\n    <TabsPrimitive.List\n      ref={listRef}\n      data-slot=\"tabs-list\"\n      className={cn(tabsListVariants({ variant, size, orientation }), className)}\n      {...props}\n    >\n      {isSegmented && indicator && (\n        <span\n          data-slot=\"tabs-indicator\"\n          aria-hidden\n          className=\"absolute z-0 rounded-lg bg-background shadow-sm transition-all duration-200 ease-out motion-reduce:transition-none\"\n          style={\n            orientation === \"vertical\"\n              ? { top: indicator.top, height: indicator.height, left: 4, right: 4 }\n              : { left: indicator.left, width: indicator.width, top: 4, bottom: 4 }\n          }\n        />\n      )}\n      {children}\n    </TabsPrimitive.List>\n  );\n}\n\nconst tabsTriggerVariants = cva(\n  \"relative inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap text-foreground/70 outline-none transition-all hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        line: \"h-[calc(100%-1px)] flex-1 rounded-none\",\n        pill: \"h-[calc(100%-1px)] flex-1 rounded-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":"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"}
+{"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":"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"}

package/dist/styles/index.css

@@ -47,6 +47,9 @@
 /* ── Base layer (suite-wide defaults) ─────────────────────── */
 @import "./base.css";
 
+/* ── Global flow-content typography (raw/markdown tags) ────── */
+@import "./typography.css";
+
 /* Scan the design-system component source so the utility classes
    they use are emitted into the compiled stylesheet. */
 @source "../";

package/dist/styles/theme.css

@@ -120,7 +120,15 @@
   --shadow-2xl: var(--shadow-2xl);
 
   /* ── Font families (→ font-sans / font-heading / font-mono) ── */
-  --font-sans: var(--font-definitions-font-family-body);
-  --font-heading: var(--font-definitions-font-family-headings);
-  --font-mono: var(--font-definitions-font-family-monospace);
+  /* Brand font first, then a system fallback stack so text stays styled if the
+     web font fails to load / during FOUT. `--font-sans` also drives the base
+     body font (Tailwind's --default-font-family). */
+  --font-sans:
+    var(--font-definitions-font-family-body), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: var(--font-definitions-font-family-headings), ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: var(--font-definitions-font-family-monospace), ui-monospace, SFMono-Regular,
+    "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

package/dist/styles/typography.css

@@ -0,0 +1,136 @@
+/* ============================================================
+   Global flow-content typography — default styling for raw HTML
+   tags (markdown / CMS output) rendered WITHOUT design-system
+   component classes.
+
+   Scoped to `:not([class]):not([data-slot])`: Tailwind's preflight strips margins,
+   list markers, link styling, etc., and DS components re-style their
+   own elements via utility classes — so anything that already has a
+   `class` is component-managed and left alone. Bare tags (what a
+   markdown renderer emits) get a readable default here.
+
+   `@layer base` so component/app utilities always win. All values
+   come from the design-system tokens.
+   ============================================================ */
+
+@layer base {
+  /* ── Vertical rhythm (block flow) ─────────────────────────── */
+  :where(p, ul, ol, blockquote, pre, table, hr, figure):not([class]):not([data-slot]) {
+    margin-block: 0 1rem;
+  }
+  :where(h1, h2, h3, h4, h5, h6):not([class]):not([data-slot]) {
+    margin-block: 1.5rem 0.5rem;
+  }
+  /* No leading gap on the first block of a flow container. */
+  :where(p, ul, ol, blockquote, pre, table, hr, figure, h1, h2, h3, h4, h5, h6):not(
+      [class]
+    ):first-child {
+    margin-block-start: 0;
+  }
+
+  /* ── Paragraph / inline text ──────────────────────────────── */
+  p:not([class]):not([data-slot]) {
+    font-size: var(--paragraph-regular-font-size);
+    line-height: var(--paragraph-regular-line-height);
+  }
+  a:not([class]):not([data-slot]) {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  a:not([class]):not([data-slot]):hover {
+    text-decoration-thickness: 2px;
+  }
+  strong:not([class]):not([data-slot]),
+  b:not([class]):not([data-slot]) {
+    font-weight: 600;
+  }
+  em:not([class]):not([data-slot]),
+  i:not([class]):not([data-slot]) {
+    font-style: italic;
+  }
+  small:not([class]):not([data-slot]) {
+    font-size: var(--paragraph-small-font-size);
+  }
+
+  /* ── Lists ────────────────────────────────────────────────── */
+  ul:not([class]):not([data-slot]),
+  ol:not([class]):not([data-slot]) {
+    padding-inline-start: 1.5rem;
+  }
+  ul:not([class]):not([data-slot]) {
+    list-style: disc;
+  }
+  ol:not([class]):not([data-slot]) {
+    list-style: decimal;
+  }
+  li:not([class]):not([data-slot]) {
+    margin-block: 0.25rem;
+  }
+  /* Nested lists tighten up and lose the extra block margin. */
+  :where(ul, ol):not([class]):not([data-slot]) :where(ul, ol):not([class]):not([data-slot]) {
+    margin-block: 0.25rem 0;
+  }
+
+  /* ── Code ─────────────────────────────────────────────────── */
+  code:not([class]):not([data-slot]),
+  kbd:not([class]):not([data-slot]),
+  samp:not([class]):not([data-slot]) {
+    font-family: var(--font-definitions-font-family-monospace);
+    font-size: 0.875em;
+  }
+  /* Inline code chip (a bare <code> not inside a <pre>). */
+  :not(pre) > code:not([class]):not([data-slot]) {
+    border-radius: var(--rounded-sm);
+    background-color: var(--muted);
+    padding: 0.125rem 0.375rem;
+  }
+  pre:not([class]):not([data-slot]) {
+    overflow-x: auto;
+    border-radius: var(--rounded-lg);
+    background-color: var(--muted);
+    padding: 1rem;
+    font-size: var(--paragraph-small-font-size);
+    line-height: var(--paragraph-small-line-height);
+  }
+  pre:not([class]):not([data-slot]) code {
+    font-family: var(--font-definitions-font-family-monospace);
+    background-color: transparent;
+    padding: 0;
+  }
+
+  /* ── Blockquote ───────────────────────────────────────────── */
+  blockquote:not([class]):not([data-slot]) {
+    border-inline-start: 3px solid var(--border);
+    padding-inline-start: 1rem;
+    color: var(--muted-foreground);
+    font-style: italic;
+  }
+
+  /* ── Rule / media ─────────────────────────────────────────── */
+  hr:not([class]):not([data-slot]) {
+    border: 0;
+    border-top: 1px solid var(--border);
+  }
+  img:not([class]):not([data-slot]),
+  video:not([class]):not([data-slot]) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--rounded-lg);
+  }
+
+  /* ── Tables ───────────────────────────────────────────────── */
+  table:not([class]):not([data-slot]) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--paragraph-small-font-size);
+  }
+  :where(th, td):not([class]):not([data-slot]) {
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem 0.75rem;
+    text-align: start;
+  }
+  th:not([class]):not([data-slot]) {
+    font-weight: 600;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,