@neasg/design-system 0.4.9 → 0.4.10

package/README.md

@@ -2,6 +2,8 @@
 
 Shared NEA UI primitives, theme tokens, and Storybook documentation.
 
+Package: [@neasg/design-system on npm](https://www.npmjs.com/package/@neasg/design-system)
+
 ## Local Development
 
 Use Node 22 for local development:
@@ -174,16 +176,14 @@ Release flow:
 
 ## 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`
+Storybook is published to Chromatic from GitHub Actions. CI builds Storybook
+with `npm run build-storybook`, then uploads `storybook-static` with
+`npm run chromatic`.
 
-One-time Vercel setup:
+One-time 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`.
+1. Create or connect the Chromatic project for this repo.
+2. Add a GitHub Actions secret named `CHROMATIC_PROJECT_TOKEN`.
 
-After that, every push to the tracked branch deploys Storybook automatically in Vercel.
+After that, pull requests and pushes to `main` publish a Chromatic build. The
+GitHub Actions log includes the published Storybook URL.

package/dist/checkbox.js

@@ -8,10 +8,16 @@ const sizeClasses = {
     md: "size-4",
     lg: "size-5",
 };
+const startAlignedOffsetClasses = {
+    sm: "mt-[3px]",
+    md: "mt-[3px]",
+    lg: "mt-0",
+};
 const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "md", checked, disabled, label, description, labelAlign = "center", id, ...props }, ref) => {
     const innerRef = React.useRef(null);
     const generatedId = React.useId();
     const inputId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    const alignToStart = labelAlign === "start" || Boolean(description);
     React.useImperativeHandle(ref, () => innerRef.current);
     React.useEffect(() => {
         if (innerRef.current) {
@@ -20,10 +26,10 @@ const Checkbox = React.forwardRef(({ className, indeterminate = false, size = "m
     }, [indeterminate]);
     const box = (_jsxs("span", { className: cn("relative inline-block shrink-0 rounded-sm border bg-background align-middle text-primary-foreground transition-colors", sizeClasses[size], (checked || indeterminate) && !disabled
             ? "border-primary bg-primary"
-            : "border-input", disabled && "cursor-not-allowed opacity-50", !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
+            : "border-input", disabled && "cursor-not-allowed opacity-50", label && alignToStart && startAlignedOffsetClasses[size], !label && className), children: [_jsx("input", { ref: innerRef, type: "checkbox", id: inputId, checked: checked, disabled: disabled, className: "absolute inset-0 h-full w-full cursor-pointer appearance-none opacity-0 disabled:cursor-not-allowed", ...props }), indeterminate ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })) : checked ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute inset-0 m-auto h-3 w-3", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })) : null] }));
     if (!label)
         return box;
-    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer items-center gap-2 text-sm", labelAlign === "start" && "items-start", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", className: "mt-1", children: description })) : null] })] }));
+    return (_jsxs("label", { htmlFor: inputId, className: cn("inline-flex cursor-pointer gap-2 text-sm", alignToStart ? "items-start" : "items-center", disabled && "cursor-not-allowed opacity-50", className), children: [box, _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 select-none", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: label }), description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: description })) : null] })] }));
 });
 Checkbox.displayName = "Checkbox";
 export { Checkbox };

package/dist/field.d.ts

@@ -4,6 +4,10 @@ interface FieldLabelProps extends React.ComponentProps<"label"> {
     required?: boolean;
 }
 declare function FieldLabel({ className, required, children, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
+interface FieldLegendProps extends React.ComponentProps<"legend"> {
+    required?: boolean;
+}
+declare function FieldLegend({ className, required, children, ...props }: FieldLegendProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldDescription({ className, ...props }: Omit<React.ComponentProps<"p">, "color">): import("react/jsx-runtime").JSX.Element;
 declare function FieldError({ className, ...props }: Omit<React.ComponentProps<"p">, "color">): import("react/jsx-runtime").JSX.Element | null;
-export { Field, FieldDescription, FieldError, FieldLabel };
+export { Field, FieldDescription, FieldError, FieldLabel, FieldLegend };

package/dist/field.js

@@ -7,6 +7,9 @@ function Field({ className, ...props }) {
 function FieldLabel({ className, required, children, ...props }) {
     return (_jsx(Typography, { asChild: true, variant: "label", className: cn("group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), children: _jsxs("label", { "data-slot": "field-label", ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }) }));
 }
+function FieldLegend({ className, required, children, ...props }) {
+    return (_jsx(Typography, { asChild: true, variant: "label", className: cn("group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:opacity-50 group-data-[invalid=true]/field:text-destructive", className), children: _jsxs("legend", { "data-slot": "field-legend", ...props, children: [children, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }) }));
+}
 function FieldDescription({ className, ...props }) {
     return (_jsx(Typography, { as: "p", variant: "bodySm", color: "muted", "data-slot": "field-description", className: className, ...props }));
 }
@@ -16,4 +19,4 @@ function FieldError({ className, ...props }) {
     }
     return (_jsx(Typography, { as: "p", variant: "bodySm", role: "alert", "data-slot": "field-error", className: cn("text-destructive", className), ...props }));
 }
-export { Field, FieldDescription, FieldError, FieldLabel };
+export { Field, FieldDescription, FieldError, FieldLabel, FieldLegend };

package/dist/radio-group.d.ts

@@ -14,8 +14,14 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
     label?: React.ReactNode;
     hideLabel?: boolean;
     description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    required?: boolean;
     orientation?: "horizontal" | "vertical";
     groupClassName?: string;
     optionClassName?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+    errorClassName?: string;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/radio-group.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { FieldDescription, FieldError, FieldLegend } from "./field";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
 function useControllableValue({ value, defaultValue, onValueChange, }) {
@@ -15,27 +16,35 @@ function useControllableValue({ value, defaultValue, onValueChange, }) {
     }, [isControlled, onValueChange]);
     return [currentValue, setValue];
 }
-export const RadioGroup = React.forwardRef(({ className, optionClassName, options, value, defaultValue, onValueChange, name, label, hideLabel = false, description, orientation = "horizontal", groupClassName, disabled, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+export const RadioGroup = React.forwardRef(({ className, optionClassName, options, value, defaultValue, onValueChange, name, label, hideLabel = false, description, error, invalid = false, required = false, orientation = "horizontal", groupClassName, disabled, labelClassName, descriptionClassName, errorClassName, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }, ref) => {
     const generatedId = React.useId();
     const groupName = name !== null && name !== void 0 ? name : `radio-group-${generatedId.replace(/:/g, "")}`;
     const labelId = label ? `${groupName}-label` : undefined;
-    const descriptionId = description ? `${groupName}-description` : undefined;
+    const errorId = error ? `${groupName}-error` : undefined;
+    const showDescription = Boolean(description) && !error;
+    const descriptionId = showDescription ? `${groupName}-description` : undefined;
+    const isInvalid = invalid ||
+        ariaInvalid === true ||
+        ariaInvalid === "true" ||
+        Boolean(error);
+    const describedBy = [ariaDescribedBy, descriptionId, errorId].filter(Boolean).join(" ") ||
+        undefined;
     const [currentValue, setCurrentValue] = useControllableValue({
         value,
         defaultValue,
         onValueChange,
     });
-    return (_jsxs("fieldset", { ref: ref, disabled: disabled, className: cn("min-w-0 border-0 p-0", className), ...props, children: [label ? (_jsx("legend", { id: labelId, className: cn("mb-2 text-sm font-medium text-foreground", hideLabel && "sr-only"), children: label })) : null, description ? (_jsx(Typography, { as: "p", id: descriptionId, variant: "caption", color: "muted", className: cn("mb-2", hideLabel && "sr-only"), children: description })) : null, _jsx("div", { role: "radiogroup", "aria-orientation": orientation, "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : ariaLabelledBy, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : ariaDescribedBy, className: cn(orientation === "horizontal"
+    return (_jsxs("fieldset", { ref: ref, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, className: cn("group/field flex w-full min-w-0 flex-col gap-2 border-0 p-0", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, ...props, children: [label ? (_jsx(FieldLegend, { id: labelId, required: required, className: cn("mb-2", hideLabel && "sr-only", labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-orientation": orientation, "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : ariaLabelledBy, "aria-describedby": describedBy, "aria-invalid": isInvalid ? "true" : undefined, className: cn(orientation === "horizontal"
                     ? "flex flex-wrap items-center gap-4"
                     : "grid gap-2", groupClassName), children: options.map((option, optionIndex) => {
                     const optionId = `${groupName}-option-${optionIndex}`;
                     const checked = currentValue === option.value;
                     const optionDisabled = disabled || option.disabled;
-                    return (_jsxs("label", { htmlFor: optionId, className: cn("inline-flex min-w-0 cursor-pointer items-start gap-2 text-sm text-foreground", optionDisabled && "cursor-not-allowed opacity-50", optionClassName), children: [_jsxs("span", { className: cn("relative mt-0.5 inline-flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", checked ? "border-primary" : "border-input"), children: [_jsx("span", { className: cn("size-2 rounded-full bg-primary transition-transform", checked ? "scale-100" : "scale-0") }), _jsx("input", { id: optionId, type: "radio", name: groupName, value: option.value, checked: checked, disabled: optionDisabled, onChange: (event) => {
+                    return (_jsxs("label", { htmlFor: optionId, className: cn("inline-flex min-w-0 cursor-pointer items-start gap-2 text-sm text-foreground", optionDisabled && "cursor-not-allowed opacity-50", optionClassName), children: [_jsxs("span", { className: cn("relative mt-[3px] inline-flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", checked ? "border-primary" : "border-input"), children: [_jsx("span", { className: cn("size-2 rounded-full bg-primary transition-transform", checked ? "scale-100" : "scale-0") }), _jsx("input", { id: optionId, type: "radio", name: groupName, value: option.value, checked: checked, required: required, disabled: optionDisabled, onChange: (event) => {
                                             if (event.target.checked) {
                                                 setCurrentValue(option.value);
                                             }
-                                        }, className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed" })] }), _jsxs("span", { className: "min-w-0", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: option.label }), option.description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: option.description })) : null] })] }, option.value));
-                }) })] }));
+                                        }, className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed" })] }), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: option.label }), option.description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: option.description })) : null] })] }, option.value));
+                }) }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 RadioGroup.displayName = "RadioGroup";

package/dist/styles.css

@@ -351,6 +351,14 @@
     --table-border: var(--component-border);
   }
 
+  sgds-masthead {
+    color-scheme: light;
+  }
+
+  .dark sgds-masthead {
+    color-scheme: dark;
+  }
+
   * {
     @apply border-border;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -22,7 +22,8 @@
     "storybook": "storybook dev -p 6007 -c .storybook",
     "build-storybook": "storybook build -c .storybook",
     "test": "vitest run",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm test && npm run build",
+    "chromatic": "chromatic --storybook-build-dir storybook-static --exit-once-uploaded"
   },
   "publishConfig": {
     "access": "public",
@@ -85,6 +86,7 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.16",
+    "chromatic": "^16.10.1",
     "jsdom": "^29.0.0",
     "postcss": "^8.4.31",
     "react": "^18.2.0",