mm

2026-05-11 05:30:03 +08:00
parent eeda1e68e8
commit 33951a649b
48 changed files with 640 additions and 1018 deletions
--- a/packages/css/src/recipe/itemSizeRecipe.ts
+++ b/packages/css/src/recipe/itemSizeRecipe.ts
@@ -0,0 +1,89 @@
+import { cvr } from "../utils/cvr";
+
+export const itemSizeRecipe = cvr({
+  base: "relative select-none flex flex-nowrap justify-center items-center",
+  variants: {
+    size: {
+      xs: "text-xs h-item-xs gap-xs px-xs",
+      sm: "text-sm h-item-sm gap-sm px-sm",
+      md: "text-md h-item-md gap-md px-md",
+      lg: "text-lg h-item-lg gap-lg px-lg",
+      xl: "text-xl h-item-xl gap-xl px-xl",
+      "2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "",
+      circle: "rounded-full",
+    },
+    iconOnly: {
+      true: "px-none",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    { iconOnly: false, size: "xs", class: "px-xs" },
+    { iconOnly: false, size: "sm", class: "px-sm" },
+    { iconOnly: false, size: "md", class: "px-md" },
+    { iconOnly: false, size: "lg", class: "px-lg" },
+    { iconOnly: false, size: "xl", class: "px-xl" },
+    { iconOnly: false, size: "2xl", class: "px-2xl" },
+    { shape: "rounded", size: "xs", class: "rounded-sm" },
+    {
+      shape: "rounded",
+      size: "sm",
+      class: "rounded-md",
+    },
+    {
+      shape: "rounded",
+      size: "md",
+      class: "rounded-lg",
+    },
+    {
+      shape: "rounded",
+      size: "lg",
+      class: "rounded-xl",
+    },
+    {
+      shape: "rounded",
+      size: "xl",
+      class: "rounded-2xl",
+    },
+    {
+      shape: "rounded",
+      size: "2xl",
+      class: "rounded-3xl",
+    },
+    // --------------------------------------------------
+    {
+      iconOnly: true,
+      size: "xs",
+      class: "w-item-xs",
+    },
+    {
+      iconOnly: true,
+      size: "sm",
+      class: "w-item-sm",
+    },
+    {
+      iconOnly: true,
+      size: "md",
+      class: "w-item-md",
+    },
+    {
+      iconOnly: true,
+      size: "lg",
+      class: "w-item-lg",
+    },
+    {
+      iconOnly: true,
+      size: "xl",
+      class: "w-item-xl",
+    },
+    {
+      iconOnly: true,
+      size: "2xl",
+      class: "w-item-2xl",
+    },
+  ],
+});