@neasg/design-system 0.4.35 → 0.4.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/activity-card.d.ts +29 -0
  2. package/dist/activity-card.js +65 -0
  3. package/dist/autocomplete.d.ts +84 -0
  4. package/dist/autocomplete.js +267 -0
  5. package/dist/avatar.d.ts +3 -1
  6. package/dist/avatar.js +27 -10
  7. package/dist/badge.js +1 -1
  8. package/dist/button.d.ts +1 -1
  9. package/dist/button.js +1 -0
  10. package/dist/calendar.js +1 -1
  11. package/dist/card.d.ts +1 -1
  12. package/dist/card.js +1 -1
  13. package/dist/compound-search-input.d.ts +8 -0
  14. package/dist/compound-search-input.js +9 -0
  15. package/dist/date-input.js +3 -3
  16. package/dist/dialog.d.ts +3 -1
  17. package/dist/dialog.js +6 -2
  18. package/dist/draggable-tabs.js +9 -8
  19. package/dist/index.d.ts +12 -4
  20. package/dist/index.js +6 -2
  21. package/dist/label-value-grid.js +6 -4
  22. package/dist/layout.d.ts +39 -6
  23. package/dist/layout.js +118 -42
  24. package/dist/lib/utils.js +1 -0
  25. package/dist/message-item.d.ts +23 -3
  26. package/dist/message-item.js +115 -16
  27. package/dist/notification.d.ts +14 -3
  28. package/dist/notification.js +32 -7
  29. package/dist/popover-menu.d.ts +4 -2
  30. package/dist/popover-menu.js +65 -5
  31. package/dist/popover.d.ts +5 -2
  32. package/dist/popover.js +3 -3
  33. package/dist/rich-text-editor.d.ts +2 -1
  34. package/dist/rich-text-editor.js +28 -3
  35. package/dist/routing-timeline.d.ts +7 -2
  36. package/dist/routing-timeline.js +67 -29
  37. package/dist/search-input.d.ts +4 -0
  38. package/dist/search-input.js +2 -2
  39. package/dist/select-primitive.js +1 -1
  40. package/dist/select.d.ts +3 -1
  41. package/dist/select.js +9 -4
  42. package/dist/status-dot.d.ts +13 -0
  43. package/dist/status-dot.js +19 -0
  44. package/dist/styles.css +0 -19
  45. package/dist/table-column-filter.js +7 -5
  46. package/dist/table.d.ts +9 -1
  47. package/dist/table.js +25 -11
  48. package/dist/tabs.d.ts +1 -1
  49. package/dist/tabs.js +6 -4
  50. package/dist/textarea.d.ts +1 -0
  51. package/dist/textarea.js +3 -2
  52. package/dist/theme-switcher.d.ts +3 -1
  53. package/dist/theme-switcher.js +8 -2
  54. package/package.json +1 -1
package/dist/textarea.js CHANGED
@@ -5,7 +5,7 @@ import { inputControlPaddingClassName } from "./input-control";
5
5
  import { cn } from "./lib/utils";
6
6
  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 })));
7
7
  TextareaControl.displayName = "TextareaControl";
8
- 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) => {
8
+ 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) => {
9
9
  const generatedId = React.useId();
10
10
  const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
11
11
  const errorId = error ? `${textareaId}-error` : undefined;
@@ -18,7 +18,8 @@ const Textarea = React.forwardRef(({ label, description, error, invalid = false,
18
18
  const describedBy = [ariaDescribedBy, descriptionId, errorId]
19
19
  .filter(Boolean)
20
20
  .join(" ") || undefined;
21
- 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 })] }));
21
+ 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" &&
22
+ "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 })] }));
22
23
  });
23
24
  Textarea.displayName = "Textarea";
24
25
  export { Textarea };
@@ -9,6 +9,8 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
9
9
  onCheckedChange?: (checked: boolean) => void;
10
10
  /** Icon-only mode for collapsed sidebars. */
11
11
  isCollapsed?: boolean;
12
+ /** Animates between expanded and icon-only presentations. */
13
+ animateModeChange?: boolean;
12
14
  /** Text shown before the switch. Defaults to the active theme label. */
13
15
  label?: React.ReactNode;
14
16
  /** Label shown when light theme is active and no `label` is provided. */
@@ -21,7 +23,7 @@ export interface ThemeSwitcherProps extends Omit<SwitchProps, "checked" | "defau
21
23
  useLightLabel?: string;
22
24
  className?: string;
23
25
  }
24
- declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
26
+ declare function ThemeSwitcher({ checked, defaultChecked, onCheckedChange, isCollapsed, animateModeChange, label, lightLabel, darkLabel, useDarkLabel, useLightLabel, className, disabled, tabIndex, ...props }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
25
27
  declare namespace ThemeSwitcher {
26
28
  var displayName: string;
27
29
  }
@@ -5,7 +5,7 @@ import { Moon, Sun } from "lucide-react";
5
5
  import { Button } from "./button";
6
6
  import { cn } from "./lib/utils";
7
7
  import { Switch } from "./switch";
8
- 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 }) {
8
+ 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 }) {
9
9
  const isControlled = checked !== undefined;
10
10
  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
11
11
  const isDark = isControlled ? checked : uncontrolledChecked;
@@ -17,7 +17,13 @@ function ThemeSwitcher({ checked, defaultChecked = false, onCheckedChange, isCol
17
17
  }
18
18
  onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
19
19
  }, [isControlled, onCheckedChange]);
20
- 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
20
+ return (_jsxs("div", { "data-slot": "theme-switcher", className: cn("relative w-full overflow-hidden py-1", animateModeChange
21
+ ? "transition-[padding] duration-300 ease-in-out"
22
+ : "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
23
+ ? "transition-opacity duration-150"
24
+ : "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
25
+ ? "transition-[opacity,transform] duration-150"
26
+ : "transition-none", isCollapsed
21
27
  ? "pointer-events-none translate-x-1 opacity-0"
22
28
  : "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 }) })] }));
23
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neasg/design-system",
3
- "version": "0.4.35",
3
+ "version": "0.4.95",
4
4
  "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
5
5
  "repository": {
6
6
  "type": "git",