mm

packages/ui-web-tw/src/styles/recipe/IinlineSize.recipe.ts

@@ -0,0 +1,91 @@
+import { tv } from "tailwind-variants";
+
+export const inlineSizeRecipe = tv({
+  base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
+  variants: {
+    size: {
+      xs: "text-xs h-inline-xs",
+      sm: "text-sm h-inline-sm",
+      md: "text-md h-inline-md",
+      lg: "text-lg h-inline-lg",
+      xl: "text-xl h-inline-xl",
+      "2xl": "text-2xl h-inline-2xl",
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "",
+      circle: "rounded-full",
+    },
+    iconOnly: {
+      true: "",
+      false: "",
+    },
+    disabled: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      shape: "rounded",
+      size: "xs",
+      class: "rounded-xs",
+    },
+    {
+      shape: "rounded",
+      size: "sm",
+      class: "rounded-sm",
+    },
+    {
+      shape: "rounded",
+      size: "md",
+      class: "rounded-md",
+    },
+    {
+      shape: "rounded",
+      size: "lg",
+      class: "rounded-lg",
+    },
+    {
+      shape: "rounded",
+      size: "xl",
+      class: "rounded-xl",
+    },
+    {
+      shape: "rounded",
+      size: "2xl",
+      class: "rounded-2xl",
+    },
+    // --------------------------------------------------
+    {
+      iconOnly: true,
+      size: "xs",
+      class: "w-inline-xs",
+    },
+    {
+      iconOnly: true,
+      size: "sm",
+      class: "w-inline-sm",
+    },
+    {
+      iconOnly: true,
+      size: "md",
+      class: "w-inline-md",
+    },
+    {
+      iconOnly: true,
+      size: "lg",
+      class: "w-inline-lg",
+    },
+    {
+      iconOnly: true,
+      size: "xl",
+      class: "w-inline-xl",
+    },
+    {
+      iconOnly: true,
+      size: "2xl",
+      class: "w-inline-2xl",
+    },
+  ],
+});