cetec-design-system 2.0.2-next.0 → 2.2.0-next.0

package/README.md

@@ -104,6 +104,8 @@ This design system is built on **Panda CSS** with a strict tokens-first approach
 - Type props with TypeScript strict mode
 - Style with Panda recipes (no inline styles or hard-coded values)
 - Follow accessibility guidelines (semantic HTML, keyboard support, ARIA when needed)
+- Native form controls support both controlled and uncontrolled usage where it fits the element semantics. Use `checked` / `value` when React owns the state, and `defaultChecked` / `defaultValue` / `defaultOpen` when the browser or widget should own the initial state.
+- Binary and group-based controls (`Checkbox`, `Radio`, `Toggle`, `Select`, `DatePicker`, `TimePicker`, `ChipGroup`) now expose explicit uncontrolled entrypoints so static pages can avoid hydration when they do not need React state.
 
 Also see [Component Standards](./src/storybook/docs/componentStandards.mdx)
 

package/dist/{cetec-preset-DRK1vtb1.js → cetec-preset-CyN7J0WL.js}

@@ -588,6 +588,7 @@ const textStyles = defineTextStyles({
     }
   }
 });
+const filterAutoValue = "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )";
 const filtersProperty = defineUtility({
   className: "filters",
   values: "filters"
@@ -1003,54 +1004,14 @@ const colors$1 = defineTokens.colors({
     "90": { value: "#432134" }
   },
   shadow: {
-    raised: {
-      1: {
-        light: { value: "rgba(30, 31, 33, 0.25)" },
-        dark: { value: "rgba(1, 4, 4, 0.5)" }
-      },
-      2: {
-        light: { value: "rgba(30, 31, 33, 0.31)" },
-        dark: { value: "rgba(1, 4, 4, 0.5)" }
-      }
-    },
-    elevated: {
-      1: {
-        light: { value: "rgba(0, 0, 0, 0)" },
-        dark: { value: "rgba(95, 95, 95, 0.06)" }
-      },
-      2: {
-        light: { value: "rgba(30, 31, 33, 0.2)" },
-        dark: { value: "rgba(1, 4, 4, 0.43)" }
-      },
-      3: {
-        light: { value: "rgba(30, 31, 33, 0.31)" },
-        dark: { value: "rgba(1, 4, 4, 0.5)" }
-      }
-    },
-    overlay: {
-      1: {
-        light: { value: "rgba(0, 0, 0, 0)" },
-        dark: { value: "rgba(189, 189, 189, 0.12)" }
-      },
-      2: {
-        light: { value: "rgba(30, 31, 33, 0.15)" },
-        dark: { value: "rgba(1, 4, 4, 0.36)" }
-      },
-      3: {
-        light: { value: "rgba(30, 31, 33, 0.31)" },
-        dark: { value: "rgba(1, 4, 4, 0.5)" }
-      }
-    },
-    overflow: {
-      1: {
-        light: { value: "rgba(30, 31, 33, 0.16)" },
-        dark: { value: "rgba(1, 4, 4, 0.56)" }
-      },
-      2: {
-        light: { value: "rgba(30, 31, 33, 0.12)" },
-        dark: { value: "rgba(1, 4, 4, 0.5)" }
-      }
-    }
+    "8": { value: "hsl(0deg 0% 0% / 0.08)" },
+    "16": { value: "hsl(0deg 0% 0% / 0.16)" },
+    "24": { value: "hsl(0deg 0% 0% / 0.24)" },
+    "32": { value: "hsl(0deg 0% 0% / 0.32)" },
+    "40": { value: "hsl(0deg 0% 0% / 0.40)" },
+    "48": { value: "hsl(0deg 0% 0% / 0.48)" },
+    "56": { value: "hsl(0deg 0% 0% / 0.56)" },
+    "64": { value: "hsl(0deg 0% 0% / 0.64)" }
   }
 });
 const durations = defineTokens.durations({
@@ -1267,58 +1228,60 @@ const radii = defineTokens.radii({
   "100": { value: utilitySizes["full"].value },
   "999": { value: "999px" }
 });
+const sizeToken = (value) => `{sizes.${value}}`;
+const colorToken = (value) => `{${value}}`;
+const formatBoxShadowLayer = (layer) => [
+  sizeToken(layer.x),
+  sizeToken(layer.y),
+  sizeToken(layer.blur),
+  layer.spread ? sizeToken(layer.spread) : void 0,
+  colorToken(layer.color)
+].filter(Boolean).join(" ");
+const elevationShadowDefinitions = {
+  zero: [{ x: "0", y: "0", blur: "0", color: "colors.transparent" }],
+  raised: [
+    { x: "0", y: "0", blur: "1", color: "colors.shadow.raised.1" },
+    { x: "0", y: "1", blur: "1", color: "colors.shadow.raised.2" }
+  ],
+  elevated: [
+    { x: "0", y: "0", blur: "1", color: "colors.shadow.elevated.1" },
+    { x: "0", y: "1", blur: "2", color: "colors.shadow.elevated.2" },
+    { x: "0", y: "4", blur: "6", color: "colors.shadow.elevated.3" }
+  ],
+  overlay: [
+    { x: "0", y: "0", blur: "1", color: "colors.shadow.overlay.1" },
+    { x: "0", y: "1", blur: "2", color: "colors.shadow.overlay.2" },
+    { x: "0", y: "6", blur: "12", color: "colors.shadow.overlay.3" },
+    { x: "0", y: "8", blur: "12", color: "colors.shadow.overlay.4" },
+    { x: "0", y: "8", blur: "16", color: "colors.shadow.overlay.5" }
+  ],
+  overflow: [
+    { x: "0", y: "0", blur: "1", color: "colors.shadow.overflow.1" },
+    { x: "0", y: "1", blur: "2", color: "colors.shadow.overflow.2" },
+    { x: "0", y: "2", blur: "6", color: "colors.shadow.overflow.3" }
+  ]
+};
+const joinShadowLayers = (layers, formatter, separator) => layers.map(formatter).join(separator);
+const getBoxShadowPrimitive = (name) => joinShadowLayers(
+  elevationShadowDefinitions[name],
+  formatBoxShadowLayer,
+  ", "
+);
 const shadows$1 = defineTokens.shadows({
-  zeroShadow: {
-    value: "{sizes.0} {sizes.0} {sizes.0} {colors.transparent}, {sizes.0} {sizes.0} {sizes.0} {colors.transparent}"
-  },
-  raisedLight: {
-    value: "{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.light}"
-  },
-  raisedDark: {
-    value: "{sizes.0} {sizes.1} {sizes.1} {colors.shadow.raised.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.raised.2.dark}"
-  },
-  elevatedLight: {
-    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.light}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.light}"
-  },
-  elevatedDark: {
-    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.elevated.1.dark}, {sizes.0} {sizes.4} {sizes.7} {colors.shadow.elevated.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.elevated.3.dark}"
-  },
-  overlayLight: {
-    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.light}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.light}"
-  },
-  overlayDark: {
-    value: "{sizes.0} {sizes.0} {sizes.0} {colors.shadow.overlay.1.dark}, {sizes.0} {sizes.8} {sizes.12} {colors.shadow.overlay.2.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overlay.3.dark}"
-  },
-  overflowLight: {
-    value: "{sizes.0} {sizes.0} {sizes.8} {colors.shadow.overflow.1.light}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.light}"
+  zeroBase: {
+    value: getBoxShadowPrimitive("zero")
   },
-  overflowDark: {
-    value: "{sizes.0} {sizes.0} {sizes.12} {colors.shadow.overflow.1.dark}, {sizes.0} {sizes.0} {sizes.1} {colors.shadow.overflow.2.dark}"
+  raisedBase: {
+    value: getBoxShadowPrimitive("raised")
   },
-  // TODO: delete below once migration is complete
-  lowLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)"
+  elevatedBase: {
+    value: getBoxShadowPrimitive("elevated")
   },
-  lowDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)"
+  overlayBase: {
+    value: getBoxShadowPrimitive("overlay")
   },
-  mediumLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)"
-  },
-  mediumDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)"
-  },
-  highLight: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)"
-  },
-  highDark: {
-    value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)"
-  },
-  insetLight: {
-    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)"
-  },
-  insetDark: {
-    value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)"
+  overflowBase: {
+    value: getBoxShadowPrimitive("overflow")
   }
 });
 const spacing$1 = defineTokens.spacing({
@@ -1437,6 +1400,33 @@ const transitionProperty = defineUtility({
   className: "transition-property",
   values: "transitions"
 });
+const dropShadowValues = {
+  zero: "zero",
+  raised: "raised",
+  elevated: "elevated",
+  overlay: "overlay"
+};
+const resolveDropShadowValue = (value, token) => elevationShadowDefinitions[value].map((layer) => {
+  const x = token(`sizes.${layer.x}`);
+  const y = token(`sizes.${layer.y}`);
+  const blur = token(`sizes.${layer.blur}`);
+  const color = token(layer.color);
+  if (!x || !y || !blur || !color) {
+    throw new Error(`Unable to resolve dropShadow token for ${value}`);
+  }
+  return `drop-shadow(${x} ${y} ${blur} ${color})`;
+}).join(" ");
+const dropShadowProperty = defineUtility({
+  className: "drop-shadow",
+  group: "Effect",
+  values: dropShadowValues,
+  transform(value, ctx) {
+    return {
+      filter: filterAutoValue,
+      "--drop-shadow": resolveDropShadowValue(value, ctx.token)
+    };
+  }
+});
 const globalBaseStyles = {
   boxSizing: "border-box",
   margin: 0,
@@ -2761,9 +2751,9 @@ var flexGrid = {
   flexBasis: {
     className: "flex-b",
     group: "Flex Layout",
-    values(theme2) {
+    values(theme) {
       return {
-        ...theme2("sizes"),
+        ...theme("sizes"),
         "1/2": "50%",
         "1/3": "33.333333%",
         "2/3": "66.666667%",
@@ -3015,9 +3005,9 @@ var linearGradientDirectionMap = /* @__PURE__ */ new Map([
   ["to-tl", "to top left"]
 ]);
 var isGradientShortcut = (value) => linearGradientDirectionMap.has(value);
-var linearGradientValues = (theme2) => {
+var linearGradientValues = (theme) => {
   return {
-    ...theme2("gradients"),
+    ...theme("gradients"),
     ...Object.fromEntries(linearGradientDirectionMap.entries())
   };
 };
@@ -3622,9 +3612,9 @@ var layout = {
   inset: {
     className: "inset",
     group: "Position",
-    values: (theme2) => ({
+    values: (theme) => ({
       auto: "auto",
-      ...theme2("spacing")
+      ...theme("spacing")
     })
   },
   insetInline: {
@@ -3813,9 +3803,9 @@ var polyfill = {
     }
   }
 };
-var widthValues = (theme2) => ({
+var widthValues = (theme) => ({
   auto: "auto",
-  ...theme2("sizes"),
+  ...theme("sizes"),
   "1/2": "50%",
   "1/3": "33.333333%",
   "2/3": "66.666667%",
@@ -3844,9 +3834,9 @@ var widthValues = (theme2) => ({
   "11/12": "91.666667%",
   screen: "100vw"
 });
-var heightValues = (theme2) => ({
+var heightValues = (theme) => ({
   auto: "auto",
-  ...theme2("sizes"),
+  ...theme("sizes"),
   svh: "100svh",
   lvh: "100lvh",
   dvh: "100dvh",
@@ -3946,9 +3936,9 @@ var sizing = {
     }
   }
 };
-var marginValues = (theme2) => ({
+var marginValues = (theme) => ({
   auto: "auto",
-  ...theme2("spacing")
+  ...theme("spacing")
 });
 var spacing = {
   padding: {
@@ -4159,9 +4149,9 @@ var tables = {
   borderSpacing: {
     className: "bd-sp",
     group: "Table",
-    values(theme2) {
+    values(theme) {
       return {
-        ...theme2("spacing"),
+        ...theme("spacing"),
         auto: "var(--border-spacing-x) var(--border-spacing-y)"
       };
     }
@@ -4299,9 +4289,9 @@ var transforms = {
     shorthand: "x",
     className: "translate-x",
     group: "Transform",
-    values(theme2) {
+    values(theme) {
       return {
-        ...theme2("spacing"),
+        ...theme("spacing"),
         ...fractions
       };
     },
@@ -4315,9 +4305,9 @@ var transforms = {
     shorthand: "y",
     className: "translate-y",
     group: "Transform",
-    values(theme2) {
+    values(theme) {
       return {
-        ...theme2("spacing"),
+        ...theme("spacing"),
         ...fractions
       };
     },
@@ -4331,9 +4321,9 @@ var transforms = {
     shorthand: "z",
     className: "translate-z",
     group: "Transform",
-    values(theme2) {
+    values(theme) {
       return {
-        ...theme2("spacing"),
+        ...theme("spacing"),
         ...fractions
       };
     },
@@ -5544,7 +5534,6 @@ const tagRecipe = defineRecipe({
     hue: "slate"
   },
   // validate-ignore: avoid-compound-variants-in-recipes — tag color pairing is a fixed token matrix and clearer as declarative compound variants
-  // eslint-disable-next-line cetec/avoid-compound-variants-in-recipes
   compoundVariants: [
     {
       hue: "slate",
@@ -6346,6 +6335,12 @@ const checkboxRecipe = defineSlotRecipe({
         display: "inline-grid",
         zIndex: "3"
       },
+      "& ~ [name='checkbox-checked']": {
+        display: "none"
+      },
+      "& ~ [name='checkbox-indeterminate']": {
+        display: "none"
+      },
       _checked: {
         "& ~ [name='checkbox-checked']": {
           display: "inline-grid",
@@ -6354,17 +6349,22 @@ const checkboxRecipe = defineSlotRecipe({
         },
         "& ~ [name='checkbox']": {
           display: "none"
+        },
+        "& ~ [name='checkbox-indeterminate']": {
+          display: "none"
         }
       },
-      _indeterminate: {
+      "&[data-indeterminate]": {
         "& ~ [name='checkbox-indeterminate']": {
           display: "inline-grid",
           fill: "icon",
-          zIndex: "3",
-          _disabled: {}
+          zIndex: "3"
         },
         "& ~ [name='checkbox']": {
           display: "none"
+        },
+        "& ~ [name='checkbox-checked']": {
+          display: "none"
         }
       },
       _error: {
@@ -6434,6 +6434,9 @@ const radioRecipe = defineSlotRecipe({
         display: "inline-grid",
         zIndex: "zIndex.3"
       },
+      "& ~ [name='radio-checked']": {
+        display: "none"
+      },
       _checked: {
         "& ~ [name='radio-checked']": {
           display: "inline-grid",
@@ -9759,6 +9762,94 @@ const colors = defineSemanticTokens.colors({
       }
     }
   },
+  shadow: {
+    raised: {
+      1: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.32}"
+        }
+      },
+      2: {
+        value: {
+          base: "{colors.shadow.32}",
+          _dark: "{colors.shadow.40}"
+        }
+      }
+    },
+    elevated: {
+      1: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.32}"
+        }
+      },
+      2: {
+        value: {
+          base: "{colors.shadow.8}",
+          _dark: "{colors.shadow.24}"
+        }
+      },
+      3: {
+        value: {
+          base: "{colors.shadow.24}",
+          _dark: "{colors.shadow.40}"
+        }
+      }
+    },
+    overlay: {
+      1: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.32}"
+        }
+      },
+      2: {
+        value: {
+          base: "{colors.shadow.8}",
+          _dark: "{colors.shadow.24}"
+        }
+      },
+      3: {
+        value: {
+          base: "{colors.shadow.24}",
+          _dark: "{colors.shadow.32}"
+        }
+      },
+      4: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.24}"
+        }
+      },
+      5: {
+        value: {
+          base: "{colors.shadow.8}",
+          _dark: "{colors.shadow.16}"
+        }
+      }
+    },
+    overflow: {
+      1: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.32}"
+        }
+      },
+      2: {
+        value: {
+          base: "{colors.shadow.8}",
+          _dark: "{colors.shadow.24}"
+        }
+      },
+      3: {
+        value: {
+          base: "{colors.shadow.16}",
+          _dark: "{colors.shadow.32}"
+        }
+      }
+    }
+  },
   utility: {
     shadowColor: {
       value: { base: "{colors.slate.90/20}", _dark: "{colors.slate.100/40}" }
@@ -9843,32 +9934,19 @@ const fontSizes = defineSemanticTokens.fontSizes({
 });
 const shadows = defineSemanticTokens.shadows({
   zero: {
-    value: { base: "{shadows.zeroShadow}", _dark: "{shadows.zeroShadow}" }
+    value: "{shadows.zeroBase}"
   },
   raised: {
-    value: { base: "{shadows.raisedLight}", _dark: "{shadows.raisedDark}" }
+    value: "{shadows.raisedBase}"
   },
   elevated: {
-    value: { base: "{shadows.elevatedLight}", _dark: "{shadows.elevatedDark}" }
+    value: "{shadows.elevatedBase}"
   },
   overlay: {
-    value: { base: "{shadows.overlayLight}", _dark: "{shadows.overlayDark}" }
+    value: "{shadows.overlayBase}"
   },
   overflow: {
-    value: { base: "{shadows.overflowLight}", _dark: "{shadows.overflowDark}" }
-  },
-  // TODO: delete below once migration is complete
-  low: {
-    value: { base: "{shadows.lowLight}", _dark: "{shadows.lowDark}" }
-  },
-  medium: {
-    value: { base: "{shadows.mediumLight}", _dark: "{shadows.mediumDark}" }
-  },
-  high: {
-    value: { base: "{shadows.highLight}", _dark: "{shadows.highDark}" }
-  },
-  inset: {
-    value: { base: "{shadows.insetLight}", _dark: "{shadows.insetDark}" }
+    value: "{shadows.overflowBase}"
   }
 });
 const zIndex = defineSemanticTokens.zIndex({
@@ -9899,29 +9977,18 @@ const {
 const pandaBasePresetConditions = index_default.conditions;
 const pandaBasePresetUtilities = index_default.utilities;
 const pandaBasePresetGlobalCss = index_default.globalCss;
-const theme = {
-  tokens: {
-    ...tokens
-  },
-  semanticTokens: {
-    colors,
-    fontSizes,
-    shadows,
-    zIndex
-  }
-};
 const cetecPreset = definePreset$1({
   name: "cetecPreset",
   theme: {
     extend: {
       tokens: {
-        ...theme.tokens
+        ...tokens
       },
       semanticTokens: {
-        colors: theme.semanticTokens.colors,
-        fontSizes: theme.semanticTokens.fontSizes,
-        shadows: theme.semanticTokens.shadows,
-        zIndex: theme.semanticTokens.zIndex
+        colors,
+        fontSizes,
+        shadows,
+        zIndex
       },
       breakpoints,
       containerSizes,
@@ -9934,6 +10001,8 @@ const cetecPreset = definePreset$1({
   },
   utilities: {
     ...pandaBasePresetUtilities,
+    // replaces (not extends) Panda's half-baked dropShadow utility
+    dropShadow: dropShadowProperty,
     // Custom utilities
     // https://panda-css.com/docs/references/config#utilities
     extend: {
@@ -9975,4 +10044,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-DRK1vtb1.js.map
+//# sourceMappingURL=cetec-preset-CyN7J0WL.js.map