@neasg/design-system 0.1.3

package/README.md

@@ -0,0 +1,77 @@
+# NEA Design System
+
+Shared NEA UI primitives, theme tokens, and Storybook documentation.
+
+## Local Development
+
+```bash
+npm install
+npm test
+npm run build
+npm run storybook
+```
+
+## Package Usage
+
+```ts
+import "@neasg/design-system/styles.css";
+import { Button, Badge } from "@neasg/design-system";
+```
+
+For Tailwind-based apps, include the package build output in your content globs so the component utility classes are not purged:
+
+```ts
+// tailwind.config.ts
+content: [
+  "./app/**/*.{ts,tsx}",
+  "./components/**/*.{ts,tsx}",
+  "./node_modules/@neasg/design-system/dist/**/*.js"
+]
+```
+
+Theme tokens are provided through the exported stylesheet. Import `@neasg/design-system/styles.css` once at your app root before rendering package components.
+
+## Available Exports
+
+- `@neasg/design-system`
+- `@neasg/design-system/button`
+- `@neasg/design-system/badge`
+- `@neasg/design-system/table`
+- `@neasg/design-system/tabs`
+- `@neasg/design-system/tooltip`
+- `@neasg/design-system/theme`
+- `@neasg/design-system/styles.css`
+
+## Publishing
+
+This package is built to `dist/` before publish. The public package entry points are the compiled files in `dist`, not the raw `src` files.
+
+One-time setup:
+
+1. Create the npm scope/package you want to publish to. This repo is currently configured for `@neasg/design-system`, so the `@neasg` scope must exist in npm.
+2. Add a GitHub Actions secret named `NPM_TOKEN` with publish access to that scope.
+
+Release flow:
+
+```bash
+npm version patch
+git push origin main --follow-tags
+```
+
+Pushing a `v*` tag triggers `.github/workflows/publish.yml`, which runs tests, builds the package, and publishes it to npm.
+
+## Storybook Deployment
+
+`vercel.json` is configured to deploy the built Storybook static site:
+
+- Install command: `npm ci`
+- Build command: `npm run build-storybook`
+- Output directory: `storybook-static`
+
+One-time Vercel setup:
+
+1. Import this GitHub repo into Vercel.
+2. Let Vercel use the repo root as the project root.
+3. Keep the build settings from `vercel.json`.
+
+After that, every push to the tracked branch deploys Storybook automatically in Vercel.

package/dist/badge.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "muted" | "destructive" | "outline" | "success" | "warning" | "info" | "actionRead" | "actionCreate" | "actionUpdate" | "actionDelete" | "actionExport" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Visual status label used for short categorical values like case state, action type,
+ * or approval result. Badges truncate long text and surface the full label via `title`.
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-1.5 py-1 text-[11px] font-semibold leading-none uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 max-w-[200px] truncate", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            muted: "border-transparent bg-muted text-muted-foreground",
+            destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+            outline: "text-foreground",
+            success: "border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+            warning: "border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+            info: "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+            actionRead: "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+            actionCreate: "border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
+            actionUpdate: "border-transparent bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
+            actionDelete: "border-transparent bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+            actionExport: "border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, children, ...props }) {
+    const textContent = typeof children === "string"
+        ? children
+        : React.Children.toArray(children)
+            .filter((child) => typeof child === "string")
+            .join("");
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), title: textContent || undefined, ...props, children: children }));
+}
+export { Badge, badgeVariants };

package/dist/button.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * When `true`, renders the button styles onto the child element instead of a native `<button>`.
+     * Use this for links or custom interactive elements that should look like a button.
+     */
+    asChild?: boolean;
+    /**
+     * Shows a loading indicator, disables interaction, and sets `aria-busy`.
+     * When used with `asChild`, the component also prevents click handling and sets `aria-disabled`.
+     */
+    loading?: boolean;
+    /**
+     * Optional replacement label shown while `loading` is active.
+     * When omitted, the existing `children` content stays visible next to the spinner.
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * Optional custom loading indicator. Defaults to a small circular spinner.
+     */
+    loadingIndicator?: React.ReactNode;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/button.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "./lib/utils";
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-10 px-4 py-2 [&_svg]:h-4 [&_svg]:w-4",
+            sm: "h-9 rounded-md px-3 [&_svg]:h-4 [&_svg]:w-4",
+            lg: "h-11 rounded-md px-8 [&_svg]:h-5 [&_svg]:w-5",
+            icon: "h-10 w-10 [&_svg]:h-5 [&_svg]:w-5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function DefaultLoadingIndicator() {
+    return (_jsx("span", { "aria-hidden": "true", className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent" }));
+}
+function hasTextLikeContent(node) {
+    if (typeof node === "string") {
+        return node.trim().length > 0;
+    }
+    if (typeof node === "number") {
+        return true;
+    }
+    if (node == null || typeof node === "boolean") {
+        return false;
+    }
+    if (Array.isArray(node)) {
+        return node.some(hasTextLikeContent);
+    }
+    if (React.isValidElement(node)) {
+        if (node.type === "svg") {
+            return false;
+        }
+        return hasTextLikeContent(node.props.children);
+    }
+    return false;
+}
+const Button = React.forwardRef(({ className, variant, size, asChild = false, loading = false, loadingText, loadingIndicator, disabled, children, onClick, tabIndex, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const isDisabled = disabled || loading;
+    const loadingLabel = loadingText !== null && loadingText !== void 0 ? loadingText : children;
+    if (size === "icon" && hasTextLikeContent(children)) {
+        throw new Error('NEA Button `size="icon"` only accepts icon components or SVG content. Do not pass text or emoji.');
+    }
+    const content = loading ? (loadingLabel ? (_jsxs("span", { className: "inline-flex items-center gap-2", children: [loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}), _jsx("span", { children: loadingLabel })] })) : (loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : _jsx(DefaultLoadingIndicator, {}))) : (children);
+    const handleClick = (event) => {
+        if (isDisabled && asChild) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, "data-loading": loading ? "" : undefined, "data-disabled": isDisabled ? "" : undefined, onClick: handleClick, tabIndex: isDisabled && asChild ? -1 : tabIndex, disabled: !asChild ? isDisabled : undefined, ...props, children: content }));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Badge, badgeVariants } from "./badge";
+export type { BadgeProps } from "./badge";
+export { Button, buttonVariants } from "./button";
+export type { ButtonProps } from "./button";
+export { neaPalette, semanticColorTokens } from "./theme";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./table";
+export { Tabs, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export { cn } from "./lib/utils";

package/dist/index.js

@@ -0,0 +1,7 @@
+export { Badge, badgeVariants } from "./badge";
+export { Button, buttonVariants } from "./button";
+export { neaPalette, semanticColorTokens } from "./theme";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./table";
+export { Tabs, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip";
+export { cn } from "./lib/utils";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/styles.css

@@ -0,0 +1,102 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --nea-green-50: 140 57% 96%;
+    --nea-green-100: 141 50% 90%;
+    --nea-green-200: 142 45% 80%;
+    --nea-green-300: 143 44% 67%;
+    --nea-green-400: 144 50% 53%;
+    --nea-green-500: 144 66% 40%;
+    --nea-green-600: 144 84% 33%;
+    --nea-green-700: 144 100% 27.5%;
+    --nea-green-800: 145 100% 21%;
+    --nea-green-900: 146 100% 15%;
+
+    --nea-neutral-0: 0 0% 100%;
+    --nea-neutral-50: 210 20% 98%;
+    --nea-neutral-100: 210 18% 96%;
+    --nea-neutral-200: 214 17% 91%;
+    --nea-neutral-300: 215 16% 84%;
+    --nea-neutral-400: 215 16% 65%;
+    --nea-neutral-500: 215 16% 47%;
+    --nea-neutral-600: 217 19% 27%;
+    --nea-neutral-700: 222 20% 18%;
+    --nea-neutral-800: 222 36% 11%;
+    --nea-neutral-900: 222 84% 5%;
+
+    --background: var(--nea-neutral-0);
+    --foreground: var(--nea-neutral-900);
+
+    --card: var(--nea-neutral-0);
+    --card-foreground: var(--nea-neutral-900);
+
+    --popover: var(--nea-neutral-0);
+    --popover-foreground: var(--nea-neutral-900);
+
+    --primary: var(--nea-green-700);
+    --primary-foreground: var(--nea-neutral-0);
+
+    --secondary: var(--nea-neutral-100);
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: var(--nea-neutral-100);
+    --muted-foreground: var(--nea-neutral-500);
+
+    --accent: var(--nea-neutral-100);
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: var(--nea-neutral-200);
+    --input: var(--nea-neutral-200);
+    --ring: var(--nea-green-700);
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    font-size: 14px;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/dist/table.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    wrapperClassName?: string;
+}
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/table.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+const Table = React.forwardRef(({ className, wrapperClassName, ...props }, ref) => (_jsx("div", { className: cn("w-full overflow-x-auto", wrapperClassName), children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("bg-muted [&_tr]:border-b", className), ...props })));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props })));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
+        ...style,
+        ...(width ? { width } : {}),
+        ...(minWidth ? { minWidth } : {}),
+        ...(maxWidth ? { maxWidth } : {}),
+    }, ...props })));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
+        ...style,
+        ...(width ? { width } : {}),
+        ...(minWidth ? { minWidth } : {}),
+        ...(maxWidth ? { maxWidth } : {}),
+    }, ...props })));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/tabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type TabsContextValue = {
+    value: string;
+    setValue: (value: string) => void;
+};
+export declare function useTabsContext(): TabsContextValue | null;
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function Tabs({ defaultValue, value: valueProp, onValueChange, className, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/tabs.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+const TabsContext = React.createContext(null);
+export function useTabsContext() {
+    return React.useContext(TabsContext);
+}
+function Tabs({ defaultValue, value: valueProp, onValueChange, className, children, ...props }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const setValue = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    }, [isControlled, onValueChange]);
+    const ctx = React.useMemo(() => ({ value, setValue }), [value, setValue]);
+    return (_jsx(TabsContext.Provider, { value: ctx, children: _jsx("div", { className: cn(className), ...props, children: children }) }));
+}
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("inline-flex h-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className), ...props })));
+TabsList.displayName = "TabsList";
+const TabsTrigger = React.forwardRef(({ className, value, disabled, ...props }, ref) => {
+    const ctx = React.useContext(TabsContext);
+    if (!ctx) {
+        throw new Error("TabsTrigger must be used within Tabs");
+    }
+    const isActive = ctx.value === value;
+    return (_jsx("button", { ref: ref, type: "button", onClick: () => !disabled && ctx.setValue(value), "data-state": isActive ? "active" : "inactive", disabled: disabled, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props }));
+});
+TabsTrigger.displayName = "TabsTrigger";
+const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => {
+    const ctx = React.useContext(TabsContext);
+    if (!ctx) {
+        throw new Error("TabsContent must be used within Tabs");
+    }
+    if (ctx.value !== value)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn("focus-visible:outline-none", className), ...props }));
+});
+TabsContent.displayName = "TabsContent";
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/theme.d.ts

@@ -0,0 +1,112 @@
+export declare const neaPalette: {
+    readonly green: readonly [{
+        readonly name: "Green 50";
+        readonly token: "--nea-green-50";
+    }, {
+        readonly name: "Green 100";
+        readonly token: "--nea-green-100";
+    }, {
+        readonly name: "Green 200";
+        readonly token: "--nea-green-200";
+    }, {
+        readonly name: "Green 300";
+        readonly token: "--nea-green-300";
+    }, {
+        readonly name: "Green 400";
+        readonly token: "--nea-green-400";
+    }, {
+        readonly name: "Green 500";
+        readonly token: "--nea-green-500";
+    }, {
+        readonly name: "Green 600";
+        readonly token: "--nea-green-600";
+    }, {
+        readonly name: "Green 700";
+        readonly token: "--nea-green-700";
+    }, {
+        readonly name: "Green 800";
+        readonly token: "--nea-green-800";
+    }, {
+        readonly name: "Green 900";
+        readonly token: "--nea-green-900";
+    }];
+    readonly neutral: readonly [{
+        readonly name: "Neutral 0";
+        readonly token: "--nea-neutral-0";
+    }, {
+        readonly name: "Neutral 50";
+        readonly token: "--nea-neutral-50";
+    }, {
+        readonly name: "Neutral 100";
+        readonly token: "--nea-neutral-100";
+    }, {
+        readonly name: "Neutral 200";
+        readonly token: "--nea-neutral-200";
+    }, {
+        readonly name: "Neutral 300";
+        readonly token: "--nea-neutral-300";
+    }, {
+        readonly name: "Neutral 400";
+        readonly token: "--nea-neutral-400";
+    }, {
+        readonly name: "Neutral 500";
+        readonly token: "--nea-neutral-500";
+    }, {
+        readonly name: "Neutral 600";
+        readonly token: "--nea-neutral-600";
+    }, {
+        readonly name: "Neutral 700";
+        readonly token: "--nea-neutral-700";
+    }, {
+        readonly name: "Neutral 800";
+        readonly token: "--nea-neutral-800";
+    }, {
+        readonly name: "Neutral 900";
+        readonly token: "--nea-neutral-900";
+    }];
+};
+export declare const semanticColorTokens: readonly [{
+    readonly name: "Background";
+    readonly token: "--background";
+    readonly foregroundToken: "--foreground";
+}, {
+    readonly name: "Foreground";
+    readonly token: "--foreground";
+}, {
+    readonly name: "Card";
+    readonly token: "--card";
+    readonly foregroundToken: "--card-foreground";
+}, {
+    readonly name: "Popover";
+    readonly token: "--popover";
+    readonly foregroundToken: "--popover-foreground";
+}, {
+    readonly name: "Primary";
+    readonly token: "--primary";
+    readonly foregroundToken: "--primary-foreground";
+}, {
+    readonly name: "Secondary";
+    readonly token: "--secondary";
+    readonly foregroundToken: "--secondary-foreground";
+}, {
+    readonly name: "Muted";
+    readonly token: "--muted";
+    readonly foregroundToken: "--muted-foreground";
+}, {
+    readonly name: "Accent";
+    readonly token: "--accent";
+    readonly foregroundToken: "--accent-foreground";
+}, {
+    readonly name: "Destructive";
+    readonly token: "--destructive";
+    readonly foregroundToken: "--destructive-foreground";
+}, {
+    readonly name: "Border";
+    readonly token: "--border";
+}, {
+    readonly name: "Input";
+    readonly token: "--input";
+}, {
+    readonly name: "Ring";
+    readonly token: "--ring";
+}];

package/dist/theme.js

@@ -0,0 +1,41 @@
+export const neaPalette = {
+    green: [
+        { name: "Green 50", token: "--nea-green-50" },
+        { name: "Green 100", token: "--nea-green-100" },
+        { name: "Green 200", token: "--nea-green-200" },
+        { name: "Green 300", token: "--nea-green-300" },
+        { name: "Green 400", token: "--nea-green-400" },
+        { name: "Green 500", token: "--nea-green-500" },
+        { name: "Green 600", token: "--nea-green-600" },
+        { name: "Green 700", token: "--nea-green-700" },
+        { name: "Green 800", token: "--nea-green-800" },
+        { name: "Green 900", token: "--nea-green-900" },
+    ],
+    neutral: [
+        { name: "Neutral 0", token: "--nea-neutral-0" },
+        { name: "Neutral 50", token: "--nea-neutral-50" },
+        { name: "Neutral 100", token: "--nea-neutral-100" },
+        { name: "Neutral 200", token: "--nea-neutral-200" },
+        { name: "Neutral 300", token: "--nea-neutral-300" },
+        { name: "Neutral 400", token: "--nea-neutral-400" },
+        { name: "Neutral 500", token: "--nea-neutral-500" },
+        { name: "Neutral 600", token: "--nea-neutral-600" },
+        { name: "Neutral 700", token: "--nea-neutral-700" },
+        { name: "Neutral 800", token: "--nea-neutral-800" },
+        { name: "Neutral 900", token: "--nea-neutral-900" },
+    ],
+};
+export const semanticColorTokens = [
+    { name: "Background", token: "--background", foregroundToken: "--foreground" },
+    { name: "Foreground", token: "--foreground" },
+    { name: "Card", token: "--card", foregroundToken: "--card-foreground" },
+    { name: "Popover", token: "--popover", foregroundToken: "--popover-foreground" },
+    { name: "Primary", token: "--primary", foregroundToken: "--primary-foreground" },
+    { name: "Secondary", token: "--secondary", foregroundToken: "--secondary-foreground" },
+    { name: "Muted", token: "--muted", foregroundToken: "--muted-foreground" },
+    { name: "Accent", token: "--accent", foregroundToken: "--accent-foreground" },
+    { name: "Destructive", token: "--destructive", foregroundToken: "--destructive-foreground" },
+    { name: "Border", token: "--border" },
+    { name: "Input", token: "--input" },
+    { name: "Ring", token: "--ring" },
+];

package/dist/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/tooltip.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "./lib/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = 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 }) })));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@neasg/design-system",
+  "version": "0.1.3",
+  "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "storybook": "storybook dev -p 6007 -c .storybook",
+    "build-storybook": "storybook build -c .storybook",
+    "test": "vitest run",
+    "prepublishOnly": "npm test && npm run build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.3.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "10.2.19",
+    "@storybook/addon-themes": "10.2.19",
+    "@storybook/react": "10.2.19",
+    "@storybook/react-vite": "10.2.19",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.16",
+    "jsdom": "^29.0.0",
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "10.2.19",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3",
+    "vitest": "^4.1.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./badge": {
+      "types": "./dist/badge.d.ts",
+      "import": "./dist/badge.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./table": {
+      "types": "./dist/table.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    }
+  }
+}