cetec-design-system 1.1.0 → 1.2.0

package/dist/{cetec-preset-BCioTXu9.js → cetec-preset-kUkA_FyU.js}

@@ -42,22 +42,22 @@ const conditions$1 = {
   focus: "&:is(:focus, [data-focus=true])",
   focusWithin: "&:focus-within",
   focusVisible: "&:is(:focus-visible, [data-focus-visible=true])",
-  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true])",
   deleted: "&:is(:deleted, [deleted], [data-deleted=true])",
   active: "&:is(:active, [data-active=true])",
   visited: "&:visited",
   target: "&:target",
-  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+  readOnly: "&:is(:read-only, [readonly], [data-read-only=true], [aria-readonly=true])",
   readWrite: "&:read-write",
-  empty: "&:is(:empty, [data-empty])",
-  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+  empty: "&:is(:empty, [data-empty=true])",
+  checked: '&:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"])',
   enabled: "&:enabled",
-  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
-  collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
-  highlighted: "&[data-highlighted]",
-  complete: "&[data-complete]",
-  incomplete: "&[data-incomplete]",
-  dragging: "&[data-dragging]",
+  expanded: '&:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"])',
+  collapsed: '&:is([aria-collapsed=true], [data-collapsed=true], [data-state="collapsed"])',
+  highlighted: "&[data-highlighted=true]",
+  complete: "&[data-complete=true]",
+  incomplete: "&[data-incomplete=true]",
+  dragging: "&[data-dragging=true]",
   utility: "&[data-utility=true]",
   before: "&::before",
   after: "&::after",
@@ -75,65 +75,65 @@ const conditions$1 = {
   firstOfType: "&:first-of-type",
   lastOfType: "&:last-of-type",
   onlyOfType: "&:only-of-type",
-  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
-  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
-  peerActive: ".peer:is(:active, [data-active]) ~ &",
+  peerFocus: ".peer:is(:focus, [data-focus=true]) ~ &",
+  peerHover: ".peer:is(:hover, [data-hover=true]) ~ &",
+  peerActive: ".peer:is(:active, [data-active=true]) ~ &",
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
-  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
-  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
-  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) ~ &",
+  peerChecked: '.peer:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid: ".peer:is(:invalid, [data-invalid=true], [aria-invalid=true]) ~ &",
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) ~ &',
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
-  groupFocus: ".group:is(:focus, [data-focus]) &",
-  groupHover: ".group:is(:hover, [data-hover]) &",
-  groupActive: ".group:is(:active, [data-active]) &",
+  groupFocus: ".group:is(:focus, [data-focus=true]) &",
+  groupHover: ".group:is(:hover, [data-hover=true]) &",
+  groupActive: ".group:is(:active, [data-active=true]) &",
   groupFocusWithin: ".group:focus-within &",
-  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
-  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
-  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
-  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
-  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
-  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
-  required: "&:is(:required, [data-required], [aria-required=true])",
-  valid: "&:is(:valid, [data-valid])",
-  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
-  error: "&:is([data-error], [data-error=true])",
+  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible=true]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) &",
+  groupChecked: '.group:is(:checked, [data-checked=true], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded=true], [data-state="expanded"]) &',
+  groupInvalid: ".group:is(:invalid, [data-invalid=true], [aria-invalid=true]) &",
+  indeterminate: '&:is(:indeterminate, [data-indeterminate=true], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: "&:is(:required, [data-required=true], [aria-required=true])",
+  valid: "&:is(:valid, [data-valid=true])",
+  invalid: "&:is(:invalid, [data-invalid=true], [aria-invalid=true])",
+  error: "&:is([data-error=true])",
   autofill: "&:autofill",
-  inRange: "&:is(:in-range, [data-in-range])",
-  outOfRange: "&:is(:out-of-range, [data-outside-range])",
-  placeholder: "&::placeholder, &[data-placeholder]",
-  placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
-  pressed: "&:is([aria-pressed=true], [data-pressed])",
+  inRange: "&:is(:in-range, [data-in-range=true])",
+  outOfRange: "&:is(:out-of-range, [data-outside-range=true])",
+  placeholder: "&::placeholder, &[data-placeholder=true]",
+  placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown=true])",
+  pressed: "&:is([aria-pressed=true], [data-pressed=true])",
   selected: "&:is([aria-selected=true], [data-selected=true])",
-  grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
-  underValue: "&[data-state=under-value]",
-  overValue: "&[data-state=over-value]",
-  atValue: "&[data-state=at-value]",
+  grabbed: "&:is([aria-grabbed=true], [data-grabbed=true])",
+  underValue: '&[data-state="under-value"]',
+  overValue: '&[data-state="over-value"]',
+  atValue: '&[data-state="at-value"]',
   default: "&:default",
   optional: "&:optional",
-  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
-  closed: '&:is([closed], [data-closed], [data-state="closed"])',
-  fullscreen: "&:is(:fullscreen, [data-fullscreen])",
-  loading: "&:is([data-loading], [aria-busy=true])",
-  hidden: "&:is([hidden], [data-hidden])",
-  current: "&:is([aria-current=true], [data-current])",
+  open: '&:is([open], [data-open=true], [data-state="open"], :popover-open)',
+  closed: '&:is([closed], [data-closed=true], [data-state="closed"])',
+  fullscreen: "&:is(:fullscreen, [data-fullscreen=true])",
+  loading: "&:is([data-loading=true], [aria-busy=true])",
+  hidden: "&:is([hidden], [data-hidden=true])",
+  current: "&:is([aria-current=true], [data-current=true])",
   currentPage: "&[aria-current=page]",
   currentStep: "&[aria-current=step]",
-  today: "&:is([data-today])",
-  unavailable: "&[data-unavailable]",
-  rangeStart: "&[data-range-start]",
-  rangeEnd: "&[data-range-end]",
-  now: "&[data-now]",
-  topmost: "&[data-topmost]",
+  today: "&:is([data-today=true])",
+  unavailable: "&[data-unavailable=true]",
+  rangeStart: "&[data-range-start=true]",
+  rangeEnd: "&[data-range-end=true]",
+  now: "&[data-now=true]",
+  topmost: "&[data-topmost=true]",
   motionReduce: "@media (prefers-reduced-motion: reduce)",
   motionSafe: "@media (prefers-reduced-motion: no-preference)",
   paused: "&:is([data-paused=true])",
   print: "@media print",
   landscape: "@media (orientation: landscape)",
   portrait: "@media (orientation: portrait)",
-  dark: ".dark &, &:is([data-color-mode=dark] *), [data-color-mode=dark] &",
-  light: ".light &, &:is([data-color-mode=light] *), [data-color-mode=light] &",
+  dark: '.dark &, &:is([data-color-mode="dark"] *), [data-color-mode="dark"] &',
+  light: '.light &, &:is([data-color-mode="light"] *), [data-color-mode="light"] &',
   osDark: "@media (prefers-color-scheme: dark)",
   osLight: "@media (prefers-color-scheme: light)",
   highContrast: "@media (forced-colors: active)",
@@ -4866,7 +4866,7 @@ const spinnerVariants = {
     }
   }
 };
-const spinnerRecipe$1 = defineSlotRecipe({
+const spinnerRecipe = defineSlotRecipe({
   className: "spinner",
   jsx: ["Spinner"],
   slots: ["container", "spinnerDiv"],
@@ -4954,7 +4954,7 @@ const boxRecipe = defineRecipe({
   variants: boxVariants,
   defaultVariants: {}
 });
-const toggleRecipe$1 = defineSlotRecipe({
+const toggleRecipe = defineSlotRecipe({
   className: "toggle",
   jsx: ["Toggle"],
   slots: ["container", "input", "indicator"],
@@ -5204,7 +5204,7 @@ const cardRecipe = defineRecipe({
     variant: "default"
   }
 });
-const listRecipe$1 = defineRecipe({
+const listRecipe = defineRecipe({
   className: "list",
   jsx: ["List"],
   base: {
@@ -5217,7 +5217,7 @@ const listRecipe$1 = defineRecipe({
   },
   variants: {}
 });
-const listItemRecipe$1 = defineSlotRecipe({
+const listItemRecipe = defineSlotRecipe({
   className: "listItem",
   jsx: ["ListItem"],
   slots: [
@@ -5520,7 +5520,7 @@ const listItemRecipe$1 = defineSlotRecipe({
     selected: false
   }
 });
-const listItemGroupRecipe$1 = defineSlotRecipe({
+const listItemGroupRecipe = defineSlotRecipe({
   className: "listItemGroup",
   jsx: ["ListItemGroup"],
   slots: ["wrapper", "groupLabel", "divider"],
@@ -5581,7 +5581,7 @@ const listItemGroupRecipe$1 = defineSlotRecipe({
     density: "compact"
   }
 });
-const highlightTextRecipe$1 = defineRecipe({
+const highlightTextRecipe = defineRecipe({
   className: "highlightText",
   jsx: ["HighlightText"],
   base: {
@@ -5982,16 +5982,48 @@ const checkboxInputRecipe = defineRecipe({
   base: checkboxInputBase,
   variants: {}
 });
-const iconBase = {
-  w: "24",
-  aspectRatio: "square",
-  fill: "icon.decorative"
-};
+const sizeVariants = Object.fromEntries(
+  Object.keys(numericSizes).map((key) => [key, { w: key }])
+);
 const iconRecipe = defineRecipe({
   className: "icon",
   jsx: ["Icon"],
-  base: iconBase
+  base: {
+    aspectRatio: "square",
+    fill: "icon.decorative"
+  },
+  variants: {
+    size: sizeVariants
+  },
+  defaultVariants: {
+    size: "24"
+  },
+  staticCss: [{ size: ["*"] }]
 });
+const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  boxRecipe,
+  cardRecipe,
+  checkboxInputRecipe,
+  codeRecipe,
+  dividerRecipe,
+  headingRecipe,
+  highlightTextRecipe,
+  iconRecipe,
+  labelRecipe,
+  linkRecipe,
+  listItemGroupRecipe,
+  listItemRecipe,
+  listRecipe,
+  preRecipe,
+  radioInputRecipe,
+  spinnerRecipe,
+  tagRecipe,
+  textRecipe,
+  textareaRecipe,
+  toggleInputRecipe,
+  toggleRecipe
+}, Symbol.toStringTag, { value: "Module" }));
 const buttonBaseStyles = {
   container: {
     ...globalBaseStyles,
@@ -6210,7 +6242,7 @@ const buttonVariants = {
     }
   }
 };
-const buttonRecipe$1 = defineSlotRecipe({
+const buttonRecipe = defineSlotRecipe({
   className: "button",
   jsx: ["Button"],
   slots: ["container", "icon"],
@@ -6333,7 +6365,7 @@ const buttonRecipe$1 = defineSlotRecipe({
     size: "md"
   }
 });
-const iconButtonRecipe$1 = defineSlotRecipe({
+const iconButtonRecipe = defineSlotRecipe({
   className: "iconButton",
   jsx: ["IconButton"],
   slots: ["container", "icon"],
@@ -6388,7 +6420,7 @@ const iconButtonRecipe$1 = defineSlotRecipe({
     size: "md"
   }
 });
-const checkboxRecipe$1 = defineSlotRecipe({
+const checkboxRecipe = defineSlotRecipe({
   className: "checkbox",
   jsx: ["Checkbox"],
   slots: ["container", "input", "indicator", "checkBg"],
@@ -6473,7 +6505,7 @@ const checkboxRecipe$1 = defineSlotRecipe({
     }
   }
 });
-const radioRecipe$1 = defineSlotRecipe({
+const radioRecipe = defineSlotRecipe({
   className: "radio",
   jsx: ["Radio"],
   slots: ["container", "input", "indicator", "radioBg"],
@@ -6552,7 +6584,7 @@ const radioRecipe$1 = defineSlotRecipe({
     }
   }
 });
-const tooltipRecipe$1 = defineSlotRecipe({
+const tooltipRecipe = defineSlotRecipe({
   className: "tooltip",
   jsx: ["Tooltip"],
   slots: ["tooltipContent", "title", "text"],
@@ -6933,7 +6965,7 @@ const menuVariants = {
     }
   }
 };
-const menuRecipe$1 = defineSlotRecipe({
+const menuRecipe = defineSlotRecipe({
   className: "menu",
   jsx: ["Menu", "MenuItem", "MenuGroup", "SubMenu"],
   slots: [
@@ -6986,6 +7018,20 @@ const textInputBase = {
         outlineColor: "border.danger"
       }
     },
+    _invalid: {
+      borderColor: "border.danger",
+      _focusWithin: {
+        borderColor: "border.danger",
+        outlineColor: "border.danger"
+      }
+    },
+    _valid: {
+      borderColor: "border.success",
+      _focusWithin: {
+        borderColor: "border.success",
+        outlineColor: "border.success"
+      }
+    },
     _disabled: {
       opacity: 0.4,
       cursor: "not-allowed",
@@ -6994,6 +7040,14 @@ const textInputBase = {
         borderColor: "border.input"
       }
     },
+    _readOnly: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      _focusWithin: {
+        outlineColor: "transparent",
+        borderColor: "border.input"
+      }
+    },
     _groupDisabled: {
       opacity: 1
       // let FormField handle disabled state opacity
@@ -7149,7 +7203,7 @@ const textInputCompoundVariants = [
     }
   }
 ];
-const textInputRecipe$1 = defineSlotRecipe({
+const textInputRecipe = defineSlotRecipe({
   className: "textInput",
   jsx: ["TextInput"],
   slots: ["container", "input", "icon"],
@@ -7223,7 +7277,7 @@ const formFieldVariants = {
     }
   }
 };
-const formFieldRecipe$1 = defineSlotRecipe({
+const formFieldRecipe = defineSlotRecipe({
   className: "formField",
   jsx: ["FormField"],
   slots: ["container", "inputs", "labelWrapper"],
@@ -7234,7 +7288,7 @@ const formFieldRecipe$1 = defineSlotRecipe({
     size: "md"
   }
 });
-const avatarRecipe$1 = defineSlotRecipe({
+const avatarRecipe = defineSlotRecipe({
   className: "avatar",
   jsx: ["Avatar"],
   slots: ["root", "image", "fallback", "presence", "status"],
@@ -7435,7 +7489,7 @@ const avatarRecipe$1 = defineSlotRecipe({
     shape: "circle"
   }
 });
-const badgeRecipe$1 = defineSlotRecipe({
+const badgeRecipe = defineSlotRecipe({
   className: "badge",
   jsx: ["Badge"],
   slots: ["root", "indicator"],
@@ -7697,7 +7751,7 @@ const chipBase = {
     }
   }
 };
-const chipRecipe$1 = defineSlotRecipe({
+const chipRecipe = defineSlotRecipe({
   className: "chip",
   jsx: ["Chip"],
   slots: ["container", "chipIcon"],
@@ -7930,7 +7984,7 @@ const modalVariants = {
     }
   }
 };
-const modalRecipe$1 = defineSlotRecipe({
+const modalRecipe = defineSlotRecipe({
   className: "modal",
   jsx: ["Modal", "ModalHeader", "ModalBody", "ModalFooter"],
   slots: [
@@ -8139,7 +8193,7 @@ const datePickerVariants = {
     }
   }
 };
-const datePickerRecipe$1 = defineSlotRecipe({
+const datePickerRecipe = defineSlotRecipe({
   className: "datePicker",
   jsx: ["DatePicker", "DateRangePicker"],
   slots: [
@@ -8331,7 +8385,7 @@ const timePickerVariants = {
     }
   }
 };
-const timePickerRecipe$1 = defineSlotRecipe({
+const timePickerRecipe = defineSlotRecipe({
   className: "timePicker",
   jsx: ["TimePicker", "TimeRangePicker"],
   slots: [
@@ -8349,7 +8403,7 @@ const timePickerRecipe$1 = defineSlotRecipe({
     size: "md"
   }
 });
-const breadcrumbsRecipe$1 = defineSlotRecipe({
+const breadcrumbsRecipe = defineSlotRecipe({
   className: "breadcrumbs",
   jsx: ["Breadcrumbs"],
   slots: ["wrapper", "slash", "linkSegment", "currentSegment"],
@@ -8394,44 +8448,23 @@ const breadcrumbsRecipe$1 = defineSlotRecipe({
     }
   }
 });
-const componentRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  avatarRecipe: avatarRecipe$1,
-  badgeRecipe: badgeRecipe$1,
-  boxRecipe,
-  breadcrumbsRecipe: breadcrumbsRecipe$1,
-  buttonRecipe: buttonRecipe$1,
-  cardRecipe,
-  checkboxInputRecipe,
-  checkboxRecipe: checkboxRecipe$1,
-  chipRecipe: chipRecipe$1,
-  codeRecipe,
-  datePickerRecipe: datePickerRecipe$1,
-  dividerRecipe,
-  formFieldRecipe: formFieldRecipe$1,
-  headingRecipe,
-  highlightTextRecipe: highlightTextRecipe$1,
-  iconButtonRecipe: iconButtonRecipe$1,
-  iconRecipe,
-  labelRecipe,
-  linkRecipe,
-  listItemGroupRecipe: listItemGroupRecipe$1,
-  listItemRecipe: listItemRecipe$1,
-  listRecipe: listRecipe$1,
-  menuRecipe: menuRecipe$1,
-  modalRecipe: modalRecipe$1,
-  preRecipe,
-  radioInputRecipe,
-  radioRecipe: radioRecipe$1,
-  spinnerRecipe: spinnerRecipe$1,
-  tagRecipe,
-  textInputRecipe: textInputRecipe$1,
-  textRecipe,
-  textareaRecipe,
-  timePickerRecipe: timePickerRecipe$1,
-  toggleInputRecipe,
-  toggleRecipe: toggleRecipe$1,
-  tooltipRecipe: tooltipRecipe$1
+  avatarRecipe,
+  badgeRecipe,
+  breadcrumbsRecipe,
+  buttonRecipe,
+  checkboxRecipe,
+  chipRecipe,
+  datePickerRecipe,
+  formFieldRecipe,
+  iconButtonRecipe,
+  menuRecipe,
+  modalRecipe,
+  radioRecipe,
+  textInputRecipe,
+  timePickerRecipe,
+  tooltipRecipe
 }, Symbol.toStringTag, { value: "Module" }));
 const colors = defineSemanticTokens.colors({
   bg: {
@@ -9596,36 +9629,18 @@ const zIndex = defineSemanticTokens.zIndex({
   modal: { value: "{zIndex.1101}" },
   tooltip: { value: "{zIndex.1200}" }
 });
-const {
-  badgeRecipe,
-  buttonRecipe,
-  iconButtonRecipe,
-  checkboxRecipe,
-  radioRecipe,
-  tooltipRecipe,
-  menuRecipe,
-  toggleRecipe,
-  chipRecipe,
-  avatarRecipe,
-  modalRecipe,
-  formFieldRecipe,
-  spinnerRecipe,
-  textInputRecipe,
-  datePickerRecipe,
-  timePickerRecipe,
-  breadcrumbsRecipe,
-  listRecipe,
-  listItemRecipe,
-  highlightTextRecipe,
-  listItemGroupRecipe,
-  ...regularRecipes
-} = componentRecipes;
-const transformedRecipes = Object.fromEntries(
+const presetRecipes = Object.fromEntries(
   Object.entries(regularRecipes).map(([key, value]) => [
     key.replace(/Recipe$/, ""),
     value
   ])
 );
+const presetSlotRecipes = Object.fromEntries(
+  Object.entries(slotRecipes).map(([key, value]) => [
+    key.replace(/Recipe$/, ""),
+    value
+  ])
+);
 const {
   box: _box,
   divider: _divider,
@@ -9661,32 +9676,8 @@ const cetecPreset = definePreset$1({
       keyframes,
       layerStyles,
       textStyles,
-      recipes: {
-        ...transformedRecipes,
-        list: listRecipe,
-        listItem: listItemRecipe,
-        highlightText: highlightTextRecipe
-      },
-      slotRecipes: {
-        badge: badgeRecipe,
-        button: buttonRecipe,
-        iconButton: iconButtonRecipe,
-        checkbox: checkboxRecipe,
-        radio: radioRecipe,
-        tooltip: tooltipRecipe,
-        menu: menuRecipe,
-        toggle: toggleRecipe,
-        chip: chipRecipe,
-        avatar: avatarRecipe,
-        modal: modalRecipe,
-        formField: formFieldRecipe,
-        spinner: spinnerRecipe,
-        textInput: textInputRecipe,
-        datePicker: datePickerRecipe,
-        timePicker: timePickerRecipe,
-        breadcrumbs: breadcrumbsRecipe,
-        listItemGroup: listItemGroupRecipe
-      }
+      recipes: presetRecipes,
+      slotRecipes: presetSlotRecipes
     }
   },
   utilities: {
@@ -9732,4 +9723,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-BCioTXu9.js.map
+//# sourceMappingURL=cetec-preset-kUkA_FyU.js.map