cetec-design-system 2.0.2-0 → 2.1.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-CMHb1Xn9.js → cetec-preset-DfIlhu92.js}

@@ -5543,6 +5543,8 @@ const tagRecipe = defineRecipe({
     variant: "default",
     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",
@@ -5874,6 +5876,7 @@ const iconRecipe = defineRecipe({
   base: {
     aspectRatio: "square",
     fill: "icon.decorative",
+    flexShrink: 0,
     w: "24"
     // Default size here does not affect the classNames, so it's safe to set
   },
@@ -6343,6 +6346,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",
@@ -6351,17 +6360,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: {
@@ -6431,6 +6445,9 @@ const radioRecipe = defineSlotRecipe({
         display: "inline-grid",
         zIndex: "zIndex.3"
       },
+      "& ~ [name='radio-checked']": {
+        display: "none"
+      },
       _checked: {
         "& ~ [name='radio-checked']": {
           display: "inline-grid",
@@ -8318,6 +8335,270 @@ const breadcrumbsRecipe = defineSlotRecipe({
     }
   }
 });
+const selectBase = {
+  root: {
+    "--icon-size": "token(sizes.24)",
+    "--icon-margin": "token(sizes.3)",
+    "--input-icon-padding": "token(sizes.10)",
+    display: "inline-flex",
+    flexDirection: "column",
+    position: "relative",
+    minWidth: "0",
+    maxW: "full",
+    width: "fit"
+  },
+  trigger: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    width: "fit",
+    minWidth: "0",
+    maxWidth: "full",
+    pe: "var(--input-icon-padding)",
+    borderWidth: "1",
+    borderStyle: "solid",
+    borderColor: "border.input",
+    borderRadius: "4",
+    outlineWidth: "2",
+    outlineOffset: "-1",
+    outlineStyle: "solid",
+    outlineColor: "transparent",
+    bg: "bg.input",
+    color: "text",
+    fontFamily: "body",
+    lineHeight: "default",
+    cursor: "pointer",
+    overflow: "hidden",
+    transitionDuration: "fast",
+    transitionProperty: "background, border-color, outline-color",
+    transitionTimingFunction: "default",
+    _hover: {
+      bg: "bg.input.hovered"
+    },
+    _focusVisible: {
+      bg: "bg.input.pressed",
+      borderColor: "border.focused",
+      outlineColor: "border.focused"
+    },
+    _open: {
+      bg: "bg.input.pressed",
+      borderColor: "border.focused",
+      outlineColor: "border.focused"
+    },
+    _disabled: {
+      bg: "bg.disabled",
+      borderColor: "border.disabled",
+      color: "text.disabled",
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    },
+    _error: {
+      borderColor: "border.danger",
+      _hover: {
+        borderColor: "border.danger"
+      },
+      _focusVisible: {
+        borderColor: "border.danger",
+        outlineColor: "border.danger"
+      },
+      _open: {
+        borderColor: "border.danger",
+        outlineColor: "border.danger"
+      }
+    }
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    minWidth: "0",
+    width: "full",
+    flex: "1"
+  },
+  value: {
+    flex: 1,
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text"
+  },
+  placeholder: {
+    flex: 1,
+    minWidth: "0",
+    textAlign: "left",
+    truncate: true,
+    color: "text.placeholder"
+  },
+  chips: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4",
+    minWidth: "0",
+    width: "full",
+    flex: "1",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "thin"
+  },
+  icon: {
+    position: "absolute",
+    top: "50%",
+    right: "1",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "var(--icon-size)",
+    height: "var(--icon-size)",
+    marginInline: "var(--icon-margin)",
+    transform: "translateY(-50%)",
+    bg: "bg.input",
+    fill: "icon.decorative",
+    pointerEvents: "none",
+    transitionDuration: "fast",
+    transitionProperty: "all",
+    transitionTimingFunction: "default",
+    _icon: {
+      width: "var(--icon-size)",
+      height: "var(--icon-size)",
+      transitionDuration: "fast",
+      transitionProperty: "all",
+      transitionTimingFunction: "default"
+    },
+    _peerHover: {
+      bg: "bg.input.hovered"
+    },
+    _open: {
+      "& > svg": {
+        transform: "rotate(-180deg)",
+        transformOrigin: "center"
+      }
+    }
+  }
+};
+const selectVariants = {
+  size: {
+    sm: {
+      root: {
+        "--icon-size": "token(sizes.22)",
+        "--icon-margin": "token(sizes.2)",
+        "--input-icon-padding": "[26px]"
+      },
+      content: {
+        py: "0",
+        ps: "8",
+        fontSize: "14"
+      },
+      chips: {
+        gap: "3",
+        py: "2"
+      }
+    },
+    md: {
+      root: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.3)",
+        "--input-icon-padding": "[31px]"
+      },
+      content: {
+        py: "3",
+        ps: "10",
+        fontSize: "16"
+      },
+      chips: {
+        gap: "4",
+        py: "5"
+      }
+    },
+    lg: {
+      root: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.5)",
+        "--input-icon-padding": "[34px]"
+      },
+      content: {
+        py: "7",
+        ps: "12",
+        fontSize: "16"
+      },
+      chips: {
+        gap: "5",
+        py: "0"
+      }
+    },
+    xl: {
+      root: {
+        "--icon-size": "token(sizes.28)",
+        "--icon-margin": "token(sizes.7)",
+        "--input-icon-padding": "[42px]"
+      },
+      content: {
+        py: "9",
+        ps: "16",
+        fontSize: "20"
+      },
+      chips: {
+        gap: "6",
+        py: "2"
+      }
+    }
+  },
+  multiple: {
+    true: {
+      trigger: {
+        alignItems: "flex-start"
+      },
+      content: {
+        alignItems: "flex-start"
+      }
+    }
+  },
+  autoSize: {
+    true: {
+      trigger: {
+        height: "auto"
+      },
+      value: {
+        whiteSpace: "normal",
+        textWrap: "wrap",
+        overflow: "visible",
+        textOverflow: "clip"
+      },
+      placeholder: {
+        whiteSpace: "normal",
+        textWrap: "wrap",
+        overflow: "visible",
+        textOverflow: "clip"
+      },
+      chips: {
+        flexWrap: "wrap",
+        overflowX: "visible",
+        overflowY: "visible"
+      }
+    },
+    false: {
+      chips: {
+        flexWrap: "nowrap"
+      }
+    }
+  }
+};
+const selectRecipe = defineSlotRecipe({
+  className: "select",
+  jsx: ["Select"],
+  slots: [
+    "root",
+    "trigger",
+    "content",
+    "value",
+    "placeholder",
+    "chips",
+    "icon"
+  ],
+  base: selectBase,
+  variants: selectVariants,
+  defaultVariants: {
+    size: "md"
+  }
+});
 const kbdRecipe = defineSlotRecipe({
   className: "kbd",
   slots: ["kbdGroup", "key"],
@@ -8386,6 +8667,7 @@ const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   menuRecipe,
   modalRecipe,
   radioRecipe,
+  selectRecipe,
   textInputRecipe,
   timePickerRecipe,
   tooltipRecipe
@@ -9707,4 +9989,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-CMHb1Xn9.js.map
+//# sourceMappingURL=cetec-preset-DfIlhu92.js.map