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

package/dist/{cetec-preset-CMHb1Xn9.js → cetec-preset-DRK1vtb1.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
   },
@@ -8318,6 +8321,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 +8653,7 @@ const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   menuRecipe,
   modalRecipe,
   radioRecipe,
+  selectRecipe,
   textInputRecipe,
   timePickerRecipe,
   tooltipRecipe
@@ -9707,4 +9975,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-CMHb1Xn9.js.map
+//# sourceMappingURL=cetec-preset-DRK1vtb1.js.map