@moderneinc/neo-styled-components 5.0.0-next.e7f738 → 5.0.0

package/dist/index.js

@@ -602,11 +602,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$m = [
+const __iconNode$p = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$m);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$p);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -616,11 +616,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$m);
  */
 
 
-const __iconNode$l = [
+const __iconNode$o = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$l);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$o);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -630,7 +630,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$n = [
   [
     "path",
     {
@@ -641,7 +641,7 @@ const __iconNode$k = [
   ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
   ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
 ];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$k);
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$n);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -651,7 +651,7 @@ const BadgeInfo = createLucideIcon("badge-info", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$m = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -663,7 +663,7 @@ const __iconNode$j = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$j);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$m);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -673,8 +673,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -684,8 +684,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
+const __iconNode$k = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$k);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -695,8 +695,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$h);
  */
 
 
-const __iconNode$g = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
+const __iconNode$j = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -706,8 +706,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$f);
+const __iconNode$i = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -717,11 +717,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$h = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$e);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -731,12 +731,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$d);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -746,11 +746,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$f = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -760,12 +760,12 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$b);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$e);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -775,12 +775,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$b
  */
 
 
-const __iconNode$a = [
+const __iconNode$d = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$a);
+const Columns3 = createLucideIcon("columns-3", __iconNode$d);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -790,12 +790,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$c = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$9);
+const ListFilter = createLucideIcon("list-filter", __iconNode$c);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -805,8 +805,8 @@ const ListFilter = createLucideIcon("list-filter", __iconNode$9);
  */
 
 
-const __iconNode$8 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$8);
+const __iconNode$b = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$b);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -816,12 +816,12 @@ const Minus = createLucideIcon("minus", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$a = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
 ];
-const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$7);
+const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$a);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -831,12 +831,12 @@ const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$9 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
 ];
-const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$6);
+const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$9);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -846,11 +846,11 @@ const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$5);
+const Plus = createLucideIcon("plus", __iconNode$8);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -860,11 +860,52 @@ const Plus = createLucideIcon("plus", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$7 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$7);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$6 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+const SquareCheck = createLucideIcon("square-check", __iconNode$6);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M8 12h8", key: "1wcyev" }]
+];
+const SquareMinus = createLucideIcon("square-minus", __iconNode$5);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+];
+const Square = createLucideIcon("square", __iconNode$4);
 
 /**
  * @license lucide-react v1.16.0 - ISC
@@ -1733,20 +1774,6 @@ const NeoCard = (props) => {
 };
 NeoCard.displayName = 'NeoCard';
 
-// Border radius per size (from Figma)
-const borderRadiusConfig = {
-    xs: 2,
-    small: 3,
-    medium: 4,
-};
-// Unchecked: Rounded square outline (20x20 viewBox)
-const UncheckedIcon$1 = ({ size = 'medium' }) => (jsxRuntime.jsx(SvgIcon, { viewBox: "0 0 20 20", children: jsxRuntime.jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: borderRadiusConfig[size], fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }));
-// Checked: Filled rounded square with white checkmark
-// Path scaled from Untitled UI 24x24 (M20 6L9 17L4 12) to 20x20
-const CheckedIcon$1 = ({ size = 'medium' }) => (jsxRuntime.jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsxRuntime.jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M15 6L8.5 13L5 9.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
-// Indeterminate: Filled rounded square with white minus
-// Path scaled from Untitled UI 24x24 (M5 12H19) to 20x20
-const IndeterminateIcon = ({ size = 'medium' }) => (jsxRuntime.jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsxRuntime.jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M5 10H15", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" })] }));
 const CheckboxContainer = styles.styled('label')(({ disabled }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
@@ -1779,7 +1806,7 @@ const HelperText$2 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: neoDesign.semanticColors.typography.bodySecondary,
 }));
-// Figma-exact border radius for xs checkbox — no matching design token
+// xs focus-ring radius — no matching design token (box corner comes from the icon)
 const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styles.styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
@@ -1792,11 +1819,11 @@ const StyledCheckbox = styles.styled(Checkbox, {
         },
         small: {
             size: 16,
-            borderRadius: neoDesign.borderRadius.xXS, // From Figma: 2px for small
+            borderRadius: neoDesign.borderRadius.xXS, // focus-ring radius (small)
         },
         medium: {
             size: 20,
-            borderRadius: neoDesign.borderRadius.xS, // From Figma: 4px for medium
+            borderRadius: neoDesign.borderRadius.xS, // focus-ring radius (medium)
         },
     };
     const config = sizeConfig[size];
@@ -1808,37 +1835,30 @@ const StyledCheckbox = styles.styled(Checkbox, {
         color: neoDesign.semanticColors.border.primary,
         borderRadius: config.borderRadius,
         flexShrink: 0,
-        // Root element
-        [`&.${Checkbox.checkboxClasses.root}`]: {
-            '&:hover': {
-                backgroundColor: 'transparent',
-            },
+        // Suppress MUI's grey hover background
+        '&:hover': {
+            backgroundColor: 'transparent',
         },
-        // Checkbox icon (unchecked)
-        [`& .${Checkbox.checkboxClasses.root}`]: {
-            width: config.size,
-            height: config.size,
+        // Hover on the unchecked box — subtle blue outline affordance (enabled only)
+        [`&:hover:not(.${Checkbox.checkboxClasses.checked}):not(.${Checkbox.checkboxClasses.indeterminate}):not(.${Checkbox.checkboxClasses.disabled})`]: {
+            color: neoDesign.colors.digitalBlue[300],
         },
-        // Checked state
+        // Checked / Indeterminate — primary blue outline + mark
         [`&.${Checkbox.checkboxClasses.checked}`]: {
-            color: neoDesign.semanticColors.buttons.primary.default,
+            color: neoDesign.colors.digitalBlue[600],
         },
-        // Indeterminate state
         [`&.${Checkbox.checkboxClasses.indeterminate}`]: {
-            color: neoDesign.semanticColors.buttons.primary.default,
+            color: neoDesign.colors.digitalBlue[600],
         },
-        // Disabled state
+        // Disabled — enabled colors dimmed to 40%. Checked/indeterminate keep
+        // digitalBlue[600] via the rules above; re-assert the unchecked outline
+        // token so it beats MUI's default `.Mui-disabled` color.
         [`&.${Checkbox.checkboxClasses.disabled}`]: {
-            color: neoDesign.semanticColors.border.primary,
+            opacity: 0.4,
             cursor: 'not-allowed',
-            // When checked and disabled
-            [`&.${Checkbox.checkboxClasses.checked}`]: {
-                color: neoDesign.semanticColors.border.primary,
-            },
-            // When indeterminate and disabled
-            [`&.${Checkbox.checkboxClasses.indeterminate}`]: {
-                color: neoDesign.semanticColors.border.primary,
-            },
+        },
+        [`&.${Checkbox.checkboxClasses.disabled}:not(.${Checkbox.checkboxClasses.checked}):not(.${Checkbox.checkboxClasses.indeterminate})`]: {
+            color: neoDesign.semanticColors.border.primary,
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
@@ -1846,11 +1866,10 @@ const StyledCheckbox = styles.styled(Checkbox, {
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
-        // Custom SVG icons
+        // Size the Lucide icon (color comes from `color` → currentColor → stroke)
         '& svg': {
             width: config.size,
             height: config.size,
-            fill: 'currentColor',
         },
     };
 });
@@ -1901,10 +1920,10 @@ const StyledCheckbox = styles.styled(Checkbox, {
 const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }) => {
     // Add custom class to identify NeoCheckbox instances
     const combinedClassName = className ? `neo-checkbox ${className}` : 'neo-checkbox';
-    // Create size-specific icons
-    const defaultIcon = icon || jsxRuntime.jsx(UncheckedIcon$1, { size: size });
-    const defaultCheckedIcon = checkedIcon || jsxRuntime.jsx(CheckedIcon$1, { size: size });
-    const defaultIndeterminateIcon = indeterminateIcon || jsxRuntime.jsx(IndeterminateIcon, { size: size });
+    // Default icons (sized via CSS on the SVG); overridable per instance
+    const defaultIcon = icon || jsxRuntime.jsx(Square, {});
+    const defaultCheckedIcon = checkedIcon || jsxRuntime.jsx(SquareCheck, {});
+    const defaultIndeterminateIcon = indeterminateIcon || jsxRuntime.jsx(SquareMinus, {});
     // If no label, return just the checkbox
     if (!label && !helperText) {
         return (jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
@@ -2764,11 +2783,13 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
         border: `1px solid ${neoDesign.semanticColors.border.secondary}`,
-        // Style row selection checkboxes to match header (16px, proper spacing)
+        // Style row selection checkboxes to match header (16px, proper spacing).
+        // Target `& svg` (not `.MuiSvgIcon-root`) so the rule also matches the
+        // lucide `<svg>` icons NeoCheckbox renders, mirroring the header rule.
         [`& .${xDataGrid.gridClasses.cellCheckbox}`]: {
             [`& .${Checkbox.checkboxClasses.root}`]: {
                 padding: `${neoDesign.spacing.spacing_1}px`,
-                [`& .${SvgIcon.svgIconClasses.root}`]: {
+                '& svg': {
                     width: 16,
                     height: 16,
                 },
@@ -6299,6 +6320,9 @@ const NeoRipplingDot = props => (jsxRuntime.jsx(material.Box, { "aria-hidden": "
             borderRadius: '50%',
             border: '1px solid currentColor',
             animation: `${ripple} 5.6s ease-in-out infinite`,
+            '@media (prefers-reduced-motion: reduce)': {
+                display: 'none',
+            },
         },
         ...props.sx,
     } }));
@@ -7411,6 +7435,9 @@ const NeoVibratingDot = props => (jsxRuntime.jsx(material.Box, { "aria-hidden":
         verticalAlign: 'middle',
         flexShrink: 0,
         animation: `${vibrate} 5.6s ease-in-out infinite`,
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+        },
         ...props.sx,
     } }));
 NeoVibratingDot.displayName = 'NeoVibratingDot';