@neasg/design-system 0.4.7 → 0.4.9

package/dist/theme.d.ts

@@ -188,6 +188,34 @@ export declare const neaPalette: {
         readonly name: "Neutral 900";
         readonly token: "--nea-neutral-900";
     }];
+    readonly darkNeutral: readonly [{
+        readonly name: "Dark Neutral 50";
+        readonly token: "--nea-dark-neutral-50";
+    }, {
+        readonly name: "Dark Neutral 100";
+        readonly token: "--nea-dark-neutral-100";
+    }, {
+        readonly name: "Dark Neutral 200";
+        readonly token: "--nea-dark-neutral-200";
+    }, {
+        readonly name: "Dark Neutral 300";
+        readonly token: "--nea-dark-neutral-300";
+    }, {
+        readonly name: "Dark Neutral 400";
+        readonly token: "--nea-dark-neutral-400";
+    }, {
+        readonly name: "Dark Neutral 500";
+        readonly token: "--nea-dark-neutral-500";
+    }, {
+        readonly name: "Dark Neutral 600";
+        readonly token: "--nea-dark-neutral-600";
+    }, {
+        readonly name: "Dark Neutral 700";
+        readonly token: "--nea-dark-neutral-700";
+    }, {
+        readonly name: "Dark Neutral 800";
+        readonly token: "--nea-dark-neutral-800";
+    }];
 };
 export declare const semanticColorTokens: readonly [{
     readonly name: "Background";
@@ -200,6 +228,9 @@ export declare const semanticColorTokens: readonly [{
     readonly name: "Card";
     readonly token: "--card";
     readonly foregroundToken: "--card-foreground";
+}, {
+    readonly name: "Card Border";
+    readonly token: "--card-border";
 }, {
     readonly name: "Popover";
     readonly token: "--popover";
@@ -244,6 +275,20 @@ export declare const semanticColorTokens: readonly [{
     readonly name: "Status Destructive";
     readonly token: "--status-destructive";
     readonly foregroundToken: "--status-destructive-foreground";
+}, {
+    readonly name: "Tab List";
+    readonly token: "--tab-list-background";
+}, {
+    readonly name: "Tab List Border";
+    readonly token: "--tab-list-border";
+}, {
+    readonly name: "Tab Trigger";
+    readonly token: "--tab-trigger-hover-background";
+    readonly foregroundToken: "--tab-trigger-foreground";
+}, {
+    readonly name: "Tab Trigger Active";
+    readonly token: "--tab-trigger-active-background";
+    readonly foregroundToken: "--tab-trigger-active-foreground";
 }, {
     readonly name: "Border";
     readonly token: "--border";
@@ -253,6 +298,18 @@ export declare const semanticColorTokens: readonly [{
 }, {
     readonly name: "Ring";
     readonly token: "--ring";
+}, {
+    readonly name: "Component Border";
+    readonly token: "--component-border";
+}, {
+    readonly name: "Button Outline";
+    readonly token: "--button-outline-background";
+}, {
+    readonly name: "Button Outline Hover";
+    readonly token: "--button-outline-hover-background";
+}, {
+    readonly name: "Button Outline Border";
+    readonly token: "--button-outline-border";
 }];
 export declare const typographyTokens: readonly [{
     readonly name: "Sans Font";
@@ -291,6 +348,15 @@ export declare const radiusTokens: readonly [{
 }, {
     readonly name: "Radius XLarge";
     readonly token: "--radius-xl";
+}, {
+    readonly name: "Control Radius";
+    readonly token: "--radius-control";
+}, {
+    readonly name: "Surface Radius";
+    readonly token: "--radius-surface";
+}, {
+    readonly name: "Overlay Radius";
+    readonly token: "--radius-overlay";
 }];
 export declare const spacingTokens: readonly [{
     readonly name: "Space 0";
@@ -324,20 +390,77 @@ export declare const spacingTokens: readonly [{
     readonly token: "--space-12";
 }];
 export declare const layoutTokens: readonly [{
+    readonly name: "Chrome Background";
+    readonly token: "--layout-chrome-background";
+    readonly description: "Shared background for outer app chrome surfaces including the shell and sidebar.";
+}, {
     readonly name: "Shell Background";
     readonly token: "--layout-shell-background";
+}, {
+    readonly name: "Sidebar Background";
+    readonly token: "--layout-sidebar-background";
+}, {
+    readonly name: "Sidebar Logo Background";
+    readonly token: "--layout-sidebar-logo-background";
+}, {
+    readonly name: "Surface Background";
+    readonly token: "--layout-surface-background";
+    readonly description: "Shared background for the workspace content surface, draggable tabs row, and right panel.";
+}, {
+    readonly name: "Workspace Header Background";
+    readonly token: "--layout-workspace-header-background";
+    readonly description: "Background for the sticky breadcrumb/action row above workbench tabs.";
+}, {
+    readonly name: "Surface Border";
+    readonly token: "--layout-surface-border";
+}, {
+    readonly name: "Surface Shadow";
+    readonly token: "--layout-surface-shadow";
 }, {
     readonly name: "Sidebar Width";
     readonly token: "--layout-sidebar-width";
 }, {
     readonly name: "Sidebar Collapsed Width";
     readonly token: "--layout-sidebar-collapsed-width";
+}, {
+    readonly name: "Right Panel Width";
+    readonly token: "--layout-right-panel-width";
+}, {
+    readonly name: "Right Panel Background";
+    readonly token: "--layout-right-panel-background";
+}, {
+    readonly name: "Right Panel Border";
+    readonly token: "--layout-right-panel-border";
+}, {
+    readonly name: "Right Panel Shadow";
+    readonly token: "--layout-right-panel-shadow";
+}, {
+    readonly name: "Right Panel Padding";
+    readonly token: "--layout-right-panel-padding";
+}, {
+    readonly name: "Right Panel Gap";
+    readonly token: "--layout-right-panel-gap";
+}, {
+    readonly name: "Right Panel Tabs Gap";
+    readonly token: "--layout-right-panel-tabs-gap";
+}, {
+    readonly name: "Right Panel Footer Gap";
+    readonly token: "--layout-right-panel-footer-gap";
+}, {
+    readonly name: "Right Panel Section Gap";
+    readonly token: "--layout-right-panel-section-gap";
+}, {
+    readonly name: "Right Panel Heading Gap";
+    readonly token: "--layout-right-panel-heading-gap";
 }, {
     readonly name: "Sidebar Padding Inline";
     readonly token: "--layout-sidebar-padding-inline";
 }, {
     readonly name: "Sidebar Padding Top";
     readonly token: "--layout-sidebar-padding-top";
+}, {
+    readonly name: "Sidebar Section Gap";
+    readonly token: "--layout-sidebar-section-gap";
 }, {
     readonly name: "Content Gap Start";
     readonly token: "--layout-content-gap-start";
@@ -368,4 +491,48 @@ export declare const layoutTokens: readonly [{
 }, {
     readonly name: "Surface Gap";
     readonly token: "--layout-surface-gap";
+}, {
+    readonly name: "Page Gap";
+    readonly token: "--layout-page-gap";
+    readonly description: "Vertical gap between the largest page regions.";
+}, {
+    readonly name: "Page Header Gap";
+    readonly token: "--layout-page-header-gap";
+    readonly description: "Spacing inside the page heading group, such as title to alert.";
+}, {
+    readonly name: "Page Section Gap";
+    readonly token: "--layout-page-section-gap";
+    readonly description: "Spacing between major page sections, such as metrics to controls.";
+}, {
+    readonly name: "Page Control Gap";
+    readonly token: "--layout-page-control-gap";
+    readonly description: "Spacing inside control groups, such as tabs to filters.";
+}, {
+    readonly name: "Page Context Gap";
+    readonly token: "--layout-page-context-gap";
+    readonly description: "Tighter spacing between contextual metadata and its content.";
+}, {
+    readonly name: "Page Alert Margin";
+    readonly token: "--layout-page-alert-margin";
+    readonly description: "Vertical margin used to isolate page-level alerts.";
+}, {
+    readonly name: "Page Title Offset";
+    readonly token: "--layout-page-title-offset";
+    readonly description: "Small top offset when a title follows sticky workspace chrome.";
+}, {
+    readonly name: "Table Border";
+    readonly token: "--table-border";
+    readonly description: "Border color for table containers and row separators; linked to the shared component border.";
+}, {
+    readonly name: "Table Header Background";
+    readonly token: "--table-header-background";
+    readonly description: "Header background for dense data tables.";
+}, {
+    readonly name: "Table Striped Row Background";
+    readonly token: "--table-row-striped-background";
+    readonly description: "Neutral alternating row background for dense data tables.";
+}, {
+    readonly name: "Table Warning Row Background";
+    readonly token: "--table-row-warning-background";
+    readonly description: "Conditional row background for attention or breach states.";
 }];

package/dist/theme.js

@@ -72,11 +72,23 @@ export const neaPalette = {
         { name: "Neutral 800", token: "--nea-neutral-800" },
         { name: "Neutral 900", token: "--nea-neutral-900" },
     ],
+    darkNeutral: [
+        { name: "Dark Neutral 50", token: "--nea-dark-neutral-50" },
+        { name: "Dark Neutral 100", token: "--nea-dark-neutral-100" },
+        { name: "Dark Neutral 200", token: "--nea-dark-neutral-200" },
+        { name: "Dark Neutral 300", token: "--nea-dark-neutral-300" },
+        { name: "Dark Neutral 400", token: "--nea-dark-neutral-400" },
+        { name: "Dark Neutral 500", token: "--nea-dark-neutral-500" },
+        { name: "Dark Neutral 600", token: "--nea-dark-neutral-600" },
+        { name: "Dark Neutral 700", token: "--nea-dark-neutral-700" },
+        { name: "Dark Neutral 800", token: "--nea-dark-neutral-800" },
+    ],
 };
 export const semanticColorTokens = [
     { name: "Background", token: "--background", foregroundToken: "--foreground" },
     { name: "Foreground", token: "--foreground" },
     { name: "Card", token: "--card", foregroundToken: "--card-foreground" },
+    { name: "Card Border", token: "--card-border" },
     { name: "Popover", token: "--popover", foregroundToken: "--popover-foreground" },
     { name: "Primary", token: "--primary", foregroundToken: "--primary-foreground" },
     { name: "Secondary", token: "--secondary", foregroundToken: "--secondary-foreground" },
@@ -108,9 +120,21 @@ export const semanticColorTokens = [
         token: "--status-destructive",
         foregroundToken: "--status-destructive-foreground",
     },
+    { name: "Tab List", token: "--tab-list-background" },
+    { name: "Tab List Border", token: "--tab-list-border" },
+    { name: "Tab Trigger", token: "--tab-trigger-hover-background", foregroundToken: "--tab-trigger-foreground" },
+    {
+        name: "Tab Trigger Active",
+        token: "--tab-trigger-active-background",
+        foregroundToken: "--tab-trigger-active-foreground",
+    },
     { name: "Border", token: "--border" },
     { name: "Input", token: "--input" },
     { name: "Ring", token: "--ring" },
+    { name: "Component Border", token: "--component-border" },
+    { name: "Button Outline", token: "--button-outline-background" },
+    { name: "Button Outline Hover", token: "--button-outline-hover-background" },
+    { name: "Button Outline Border", token: "--button-outline-border" },
 ];
 export const typographyTokens = [
     { name: "Sans Font", token: "--font-sans" },
@@ -127,6 +151,9 @@ export const radiusTokens = [
     { name: "Radius Medium", token: "--radius-md" },
     { name: "Radius Large", token: "--radius-lg" },
     { name: "Radius XLarge", token: "--radius-xl" },
+    { name: "Control Radius", token: "--radius-control" },
+    { name: "Surface Radius", token: "--radius-surface" },
+    { name: "Overlay Radius", token: "--radius-overlay" },
 ];
 export const spacingTokens = [
     { name: "Space 0", token: "--space-0" },
@@ -141,11 +168,41 @@ export const spacingTokens = [
     { name: "Space 12", token: "--space-12" },
 ];
 export const layoutTokens = [
+    {
+        name: "Chrome Background",
+        token: "--layout-chrome-background",
+        description: "Shared background for outer app chrome surfaces including the shell and sidebar.",
+    },
     { name: "Shell Background", token: "--layout-shell-background" },
+    { name: "Sidebar Background", token: "--layout-sidebar-background" },
+    { name: "Sidebar Logo Background", token: "--layout-sidebar-logo-background" },
+    {
+        name: "Surface Background",
+        token: "--layout-surface-background",
+        description: "Shared background for the workspace content surface, draggable tabs row, and right panel.",
+    },
+    {
+        name: "Workspace Header Background",
+        token: "--layout-workspace-header-background",
+        description: "Background for the sticky breadcrumb/action row above workbench tabs.",
+    },
+    { name: "Surface Border", token: "--layout-surface-border" },
+    { name: "Surface Shadow", token: "--layout-surface-shadow" },
     { name: "Sidebar Width", token: "--layout-sidebar-width" },
     { name: "Sidebar Collapsed Width", token: "--layout-sidebar-collapsed-width" },
+    { name: "Right Panel Width", token: "--layout-right-panel-width" },
+    { name: "Right Panel Background", token: "--layout-right-panel-background" },
+    { name: "Right Panel Border", token: "--layout-right-panel-border" },
+    { name: "Right Panel Shadow", token: "--layout-right-panel-shadow" },
+    { name: "Right Panel Padding", token: "--layout-right-panel-padding" },
+    { name: "Right Panel Gap", token: "--layout-right-panel-gap" },
+    { name: "Right Panel Tabs Gap", token: "--layout-right-panel-tabs-gap" },
+    { name: "Right Panel Footer Gap", token: "--layout-right-panel-footer-gap" },
+    { name: "Right Panel Section Gap", token: "--layout-right-panel-section-gap" },
+    { name: "Right Panel Heading Gap", token: "--layout-right-panel-heading-gap" },
     { name: "Sidebar Padding Inline", token: "--layout-sidebar-padding-inline" },
     { name: "Sidebar Padding Top", token: "--layout-sidebar-padding-top" },
+    { name: "Sidebar Section Gap", token: "--layout-sidebar-section-gap" },
     { name: "Content Gap Start", token: "--layout-content-gap-start" },
     { name: "Content Gap Start MD", token: "--layout-content-gap-start-md" },
     { name: "Content Gap Start LG", token: "--layout-content-gap-start-lg" },
@@ -156,4 +213,59 @@ export const layoutTokens = [
     { name: "Surface Padding MD", token: "--layout-surface-padding-md" },
     { name: "Surface Padding LG", token: "--layout-surface-padding-lg" },
     { name: "Surface Gap", token: "--layout-surface-gap" },
+    {
+        name: "Page Gap",
+        token: "--layout-page-gap",
+        description: "Vertical gap between the largest page regions.",
+    },
+    {
+        name: "Page Header Gap",
+        token: "--layout-page-header-gap",
+        description: "Spacing inside the page heading group, such as title to alert.",
+    },
+    {
+        name: "Page Section Gap",
+        token: "--layout-page-section-gap",
+        description: "Spacing between major page sections, such as metrics to controls.",
+    },
+    {
+        name: "Page Control Gap",
+        token: "--layout-page-control-gap",
+        description: "Spacing inside control groups, such as tabs to filters.",
+    },
+    {
+        name: "Page Context Gap",
+        token: "--layout-page-context-gap",
+        description: "Tighter spacing between contextual metadata and its content.",
+    },
+    {
+        name: "Page Alert Margin",
+        token: "--layout-page-alert-margin",
+        description: "Vertical margin used to isolate page-level alerts.",
+    },
+    {
+        name: "Page Title Offset",
+        token: "--layout-page-title-offset",
+        description: "Small top offset when a title follows sticky workspace chrome.",
+    },
+    {
+        name: "Table Border",
+        token: "--table-border",
+        description: "Border color for table containers and row separators; linked to the shared component border.",
+    },
+    {
+        name: "Table Header Background",
+        token: "--table-header-background",
+        description: "Header background for dense data tables.",
+    },
+    {
+        name: "Table Striped Row Background",
+        token: "--table-row-striped-background",
+        description: "Neutral alternating row background for dense data tables.",
+    },
+    {
+        name: "Table Warning Row Background",
+        token: "--table-row-warning-background",
+        description: "Conditional row background for attention or breach states.",
+    },
 ];

package/dist/toaster.js

@@ -4,19 +4,20 @@ import { Toaster as SonnerToaster, toast } from "sonner";
 import { buttonVariants } from "./button";
 import { XIcon } from "./animated-icons/x";
 import { cn } from "./lib/utils";
+import { typographyVariants } from "./typography";
 function Toaster({ position = "top-right", visibleToasts = 3, closeButton = true, duration = 4000, }) {
     return (_jsx(SonnerToaster, { position: position, visibleToasts: visibleToasts, closeButton: closeButton, duration: duration, icons: {
             close: _jsx(XIcon, { size: 14 }),
         }, toastOptions: {
             classNames: {
-                toast: "group relative border border-border bg-background text-foreground shadow-md rounded-lg p-4 pr-10 flex items-start gap-3",
+                toast: "group relative border border-border bg-background text-foreground shadow-md rounded-overlay p-3 pr-9 flex items-start gap-2",
                 content: "min-w-0 flex-1 gap-1",
-                title: "text-sm font-medium leading-5",
-                description: "text-sm text-muted-foreground leading-5",
+                title: cn(typographyVariants({ variant: "bodySm" }), "font-medium"),
+                description: cn(typographyVariants({ variant: "bodySm" }), "text-muted-foreground"),
                 icon: "mt-0.5 text-muted-foreground",
                 actionButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !p-0 !text-sm !font-medium !text-primary !no-underline hover:!text-primary/80 hover:!no-underline"),
                 cancelButton: cn(buttonVariants({ variant: "link" }), "!h-auto !min-h-0 !self-start !bg-transparent !p-0 !text-sm !font-medium !text-muted-foreground !no-underline hover:!bg-transparent hover:!text-foreground hover:!no-underline"),
-                closeButton: "!absolute !left-auto !right-2 !top-2 !h-6 !w-6 !translate-x-0 !translate-y-0 !rounded-md !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
+                closeButton: "!absolute !left-auto !right-2 !top-2 !h-6 !w-6 !translate-x-0 !translate-y-0 !rounded-control !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
                 success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-success-foreground))]",
                 error: "border-destructive/20 [&_[data-icon]]:text-[hsl(var(--status-destructive-foreground))]",
                 warning: "border-[hsl(var(--status-warning-foreground))]/20 [&_[data-icon]]:text-[hsl(var(--status-warning-foreground))]",

package/dist/tooltip.js

@@ -8,7 +8,7 @@ function TooltipProvider({ delayDuration = 100, ...props }) {
 }
 const TooltipRoot = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md bg-[#111827] px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-overlay bg-[hsl(var(--tooltip-background))] px-3 py-1.5 text-sm text-[hsl(var(--tooltip-foreground))] shadow-[var(--overlay-shadow)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 function Tooltip({ content, children, delayDuration = 100, side = "top", sideOffset = 4, contentClassName, open, defaultOpen, onOpenChange, }) {
     return (_jsx(TooltipProvider, { delayDuration: delayDuration, children: _jsxs(TooltipRoot, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, sideOffset: sideOffset, className: contentClassName, children: content })] }) }));

package/dist/typography.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const typographyVariants: (props?: ({
-    variant?: "title" | "heading" | "label" | "body" | "caption" | "subheading" | "bodySm" | "eyebrow" | null | undefined;
+    variant?: "caption" | "title" | "heading" | "label" | "body" | "subheading" | "bodySm" | "eyebrow" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: keyof React.JSX.IntrinsicElements;

package/dist/typography.js

@@ -9,11 +9,11 @@ const typographyVariants = cva("", {
             title: "text-2xl font-bold tracking-tight text-foreground",
             heading: "text-xl font-semibold tracking-tight text-foreground",
             subheading: "text-lg font-semibold text-foreground",
-            body: "text-base leading-6 text-foreground",
-            bodySm: "text-sm leading-6 text-foreground",
-            label: "text-sm font-medium leading-none text-foreground",
-            caption: "text-sm leading-5 text-muted-foreground",
-            eyebrow: "text-xs font-semibold uppercase tracking-wider text-muted-foreground",
+            body: "text-base text-foreground",
+            bodySm: "text-sm text-foreground",
+            label: "text-sm font-medium leading-5 text-foreground",
+            caption: "text-sm text-muted-foreground",
+            eyebrow: "text-[11px] font-semibold uppercase leading-4 tracking-normal text-muted-foreground",
         },
     },
     defaultVariants: {

package/dist/workspace-header.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface WorkspaceHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    breadcrumbs?: React.ReactNode;
+    tabs?: React.ReactNode;
+    actions?: React.ReactNode;
+    sticky?: boolean;
+    bleed?: boolean;
+}
+declare function WorkspaceHeader({ breadcrumbs, tabs, actions, sticky, bleed, className, ...props }: WorkspaceHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace WorkspaceHeader {
+    var displayName: string;
+}
+export { WorkspaceHeader };

package/dist/workspace-header.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./lib/utils";
+function WorkspaceHeader({ breadcrumbs, tabs, actions, sticky = true, bleed = true, className, ...props }) {
+    if (!breadcrumbs && !tabs && !actions) {
+        return null;
+    }
+    return (_jsxs("div", { "data-slot": "workspace-header", className: cn("shrink-0", sticky && "sticky top-0 z-20", bleed &&
+            "-mx-[var(--layout-surface-padding)] md:-mx-[var(--layout-surface-padding-md)] lg:-mx-[var(--layout-surface-padding-lg)]", className), ...props, children: [breadcrumbs || actions ? (_jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-[hsl(var(--layout-surface-border))] bg-[hsl(var(--layout-workspace-header-background))] px-[var(--layout-surface-padding)] py-2 md:px-[var(--layout-surface-padding-md)] lg:px-[var(--layout-surface-padding-lg)]", children: [breadcrumbs ? (_jsx("div", { className: "min-w-0 flex-1 overflow-hidden", children: breadcrumbs })) : null, actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })) : null] })) : null, tabs ? (_jsx("div", { className: "min-w-0 overflow-hidden bg-[hsl(var(--layout-surface-background))] [&>[data-slot=draggable-tabs]]:w-full [&>[data-slot=draggable-tabs]]:px-[var(--layout-surface-padding)] md:[&>[data-slot=draggable-tabs]]:px-[var(--layout-surface-padding-md)] lg:[&>[data-slot=draggable-tabs]]:px-[var(--layout-surface-padding-lg)]", children: tabs })) : null] }));
+}
+WorkspaceHeader.displayName = "WorkspaceHeader";
+export { WorkspaceHeader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -46,10 +46,20 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tiptap/extension-color": "^3.19.0",
+    "@tiptap/extension-highlight": "^3.19.0",
+    "@tiptap/extension-link": "^3.15.3",
+    "@tiptap/extension-placeholder": "^3.15.3",
+    "@tiptap/extension-text-style": "^3.19.0",
+    "@tiptap/extension-underline": "^3.19.0",
+    "@tiptap/pm": "^3.15.3",
+    "@tiptap/react": "^3.15.3",
+    "@tiptap/starter-kit": "^3.15.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.1",
     "input-otp": "^1.4.2",
     "libphonenumber-js": "^1.12.41",
     "lucide-react": "^0.555.0",
@@ -61,11 +71,15 @@
   },
   "devDependencies": {
     "@fontsource/inter": "^5.2.8",
+    "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-mcp": "^0.5.0",
     "@storybook/addon-themes": "10.3.5",
     "@storybook/react-vite": "10.3.5",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",