@neasg/design-system 0.4.33 → 0.4.95

package/dist/textarea.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 declare const TextareaControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export interface TextareaProps extends Omit<React.ComponentProps<typeof TextareaControl>, "className"> {
     label: React.ReactNode;
+    size?: "default" | "comfortable";
     description?: React.ReactNode;
     error?: React.ReactNode;
     invalid?: boolean;

package/dist/textarea.js

@@ -5,7 +5,7 @@ import { inputControlPaddingClassName } from "./input-control";
 import { cn } from "./lib/utils";
 const TextareaControl = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "textarea", className: cn("flex min-h-16 w-full rounded-control border border-input bg-background text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20", inputControlPaddingClassName, className), ...props })));
 TextareaControl.displayName = "TextareaControl";
-const Textarea = React.forwardRef(({ label, description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+const Textarea = React.forwardRef(({ label, size = "default", description, error, invalid = false, hideLabel = false, className, textareaClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
     const generatedId = React.useId();
     const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
     const errorId = error ? `${textareaId}-error` : undefined;
@@ -18,7 +18,8 @@ const Textarea = React.forwardRef(({ label, description, error, invalid = false,
     const describedBy = [ariaDescribedBy, descriptionId, errorId]
         .filter(Boolean)
         .join(" ") || undefined;
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: textareaId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsx(TextareaControl, { ref: ref, id: textareaId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: textareaClassName, ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+    return (_jsxs(Field, { className: cn(size === "comfortable" && "gap-[8px]", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: textareaId, className: cn(size === "comfortable" && "text-[16px] leading-[24px]", hideLabel && "sr-only", labelClassName), children: label }), _jsx(TextareaControl, { ref: ref, id: textareaId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn(size === "comfortable" &&
+                    "min-h-[76px] px-[16px] py-[12px] text-[16px] leading-[24px]", textareaClassName), ...props }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: cn(size === "comfortable" && "text-[14px] leading-[20px]", descriptionClassName), children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 Textarea.displayName = "Textarea";
 export { Textarea };

package/dist/theme-switcher.d.ts

@@ -9,6 +9,8 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
     onCheckedChange?: (checked: boolean) => void;
     /** Icon-only mode for collapsed sidebars. */
     isCollapsed?: boolean;
+    /** Animates between expanded and icon-only presentations. */
+    animateModeChange?: boolean;
     /** Text shown before the switch. Defaults to the active theme label. */
     label?: React.ReactNode;
     /** Label shown when light theme is active and no `label` is provided. */
@@ -21,7 +23,7 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
     useLightLabel?: string;
     className?: string;
 }
-declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, animateModeChange, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ThemeSwitcher {
     var displayName: string;
 }

package/dist/theme-switcher.js

@@ -5,7 +5,7 @@ import { Moon, Sun } from "lucide-react";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Switch } from "./switch";
-function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, tabIndex, ...props }) {
+function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCollapsed = false, animateModeChange = true, label, lightLabel = "Light theme", darkLabel = "Dark theme", useDarkLabel = "Use dark theme", useLightLabel = "Use light theme", className, disabled, tabIndex, ...props }) {
     const isControlled = checked !== undefined;
     const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
     const isDark = isControlled ? checked : uncontrolledChecked;
@@ -17,7 +17,13 @@ function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCol
         }
         onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
     }, [isControlled, onCheckedChange]);
-    return (_jsxs("div", { "data-slot": "theme-switcher", className: cn("relative w-full overflow-hidden py-1 transition-[padding] duration-300 ease-in-out", isCollapsed ? "px-0" : "px-1.5", className), children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-hidden": isCollapsed ? undefined : true, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, tabIndex: isCollapsed ? tabIndex : -1, className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-150", isCollapsed ? "opacity-100" : "pointer-events-none opacity-0"), onClick: () => handleCheckedChange(!isDark), children: _jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }), _jsx("div", { "aria-hidden": isCollapsed ? true : undefined, className: cn("transition-[opacity,transform] duration-150", isCollapsed
+    return (_jsxs("div", { "data-slot": "theme-switcher", className: cn("relative w-full overflow-hidden py-1", animateModeChange
+            ? "transition-[padding] duration-300 ease-in-out"
+            : "transition-none", isCollapsed ? "px-0" : "px-1.5", className), children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", disabled: disabled, "aria-hidden": isCollapsed ? undefined : true, "aria-label": isDark ? useLightLabel : useDarkLabel, "aria-pressed": isDark, tabIndex: isCollapsed ? tabIndex : -1, className: cn("absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", animateModeChange
+                    ? "transition-opacity duration-150"
+                    : "transition-none", isCollapsed ? "opacity-100" : "pointer-events-none opacity-0"), onClick: () => handleCheckedChange(!isDark), children: _jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4" }) }), _jsx("div", { "aria-hidden": isCollapsed ? true : undefined, className: cn(animateModeChange
+                    ? "transition-[opacity,transform] duration-150"
+                    : "transition-none", isCollapsed
                     ? "pointer-events-none translate-x-1 opacity-0"
                     : "translate-x-0 opacity-100"), children: _jsx(Switch, { checked: isDark, onCheckedChange: handleCheckedChange, disabled: disabled, tabIndex: isCollapsed ? -1 : tabIndex, label: _jsxs("span", { className: "inline-flex min-w-0 items-center gap-2", children: [_jsx(ActiveIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: activeLabel })] }), wrapperClassName: "w-full flex-row-reverse justify-between rounded-control px-3 py-2 text-muted-foreground transition-colors hover:bg-card hover:text-foreground", ...props }) })] }));
 }

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.33",
+  "version": "0.4.95",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sandbox-nea/design-system.git"
+  },
   "license": "UNLICENSED",
   "type": "module",
   "engines": {