@timmbr/ui 1.5.0 → 1.6.0

package/dist/utils/gap.js

@@ -1,55 +1,315 @@
-const STANDARD_GAP_MAP = {
-  0: "gap-0",
-  1: "gap-1",
-  2: "gap-2",
-  3: "gap-3",
-  4: "gap-4",
-  5: "gap-5",
-  6: "gap-6",
-  7: "gap-7",
-  8: "gap-8",
-  9: "gap-9",
-  10: "gap-10",
-  11: "gap-11",
-  12: "gap-12",
-  14: "gap-14",
-  16: "gap-16",
-  20: "gap-20",
-  24: "gap-24",
-  28: "gap-28",
-  32: "gap-32",
-  36: "gap-36",
-  40: "gap-40",
-  44: "gap-44",
-  48: "gap-48",
-  52: "gap-52",
-  56: "gap-56",
-  60: "gap-60",
-  64: "gap-64",
-  72: "gap-72",
-  80: "gap-80",
-  96: "gap-96"
+const GAP = {
+  "0": "gap-0",
+  "0.5": "gap-0.5",
+  "1": "gap-1",
+  "1.5": "gap-1.5",
+  "2": "gap-2",
+  "2.5": "gap-2.5",
+  "3": "gap-3",
+  "4": "gap-4",
+  "5": "gap-5",
+  "6": "gap-6",
+  "7": "gap-7",
+  "8": "gap-8",
+  "9": "gap-9",
+  "10": "gap-10",
+  "11": "gap-11",
+  "12": "gap-12",
+  "14": "gap-14",
+  "16": "gap-16",
+  "20": "gap-20",
+  "24": "gap-24",
+  "28": "gap-28",
+  "32": "gap-32",
+  "36": "gap-36",
+  "40": "gap-40",
+  "44": "gap-44",
+  "48": "gap-48",
+  "52": "gap-52",
+  "56": "gap-56",
+  "60": "gap-60",
+  "64": "gap-64",
+  "72": "gap-72",
+  "80": "gap-80",
+  "96": "gap-96"
 };
-function formatGap(gap) {
+const GAP_X = {
+  "0": "gap-x-0",
+  "0.5": "gap-x-0.5",
+  "1": "gap-x-1",
+  "1.5": "gap-x-1.5",
+  "2": "gap-x-2",
+  "2.5": "gap-x-2.5",
+  "3": "gap-x-3",
+  "4": "gap-x-4",
+  "5": "gap-x-5",
+  "6": "gap-x-6",
+  "7": "gap-x-7",
+  "8": "gap-x-8",
+  "9": "gap-x-9",
+  "10": "gap-x-10",
+  "11": "gap-x-11",
+  "12": "gap-x-12",
+  "14": "gap-x-14",
+  "16": "gap-x-16",
+  "20": "gap-x-20",
+  "24": "gap-x-24"
+};
+const GAP_Y = {
+  "0": "gap-y-0",
+  "0.5": "gap-y-0.5",
+  "1": "gap-y-1",
+  "1.5": "gap-y-1.5",
+  "2": "gap-y-2",
+  "2.5": "gap-y-2.5",
+  "3": "gap-y-3",
+  "4": "gap-y-4",
+  "5": "gap-y-5",
+  "6": "gap-y-6",
+  "7": "gap-y-7",
+  "8": "gap-y-8",
+  "9": "gap-y-9",
+  "10": "gap-y-10",
+  "11": "gap-y-11",
+  "12": "gap-y-12",
+  "14": "gap-y-14",
+  "16": "gap-y-16",
+  "20": "gap-y-20",
+  "24": "gap-y-24"
+};
+const RESPONSIVE = {
+  "gap": {
+    sm: {
+      "0": "sm:gap-0",
+      "0.5": "sm:gap-0.5",
+      "1": "sm:gap-1",
+      "1.5": "sm:gap-1.5",
+      "2": "sm:gap-2",
+      "2.5": "sm:gap-2.5",
+      "3": "sm:gap-3",
+      "4": "sm:gap-4",
+      "5": "sm:gap-5",
+      "6": "sm:gap-6",
+      "8": "sm:gap-8",
+      "10": "sm:gap-10",
+      "12": "sm:gap-12",
+      "16": "sm:gap-16"
+    },
+    md: {
+      "0": "md:gap-0",
+      "0.5": "md:gap-0.5",
+      "1": "md:gap-1",
+      "1.5": "md:gap-1.5",
+      "2": "md:gap-2",
+      "2.5": "md:gap-2.5",
+      "3": "md:gap-3",
+      "4": "md:gap-4",
+      "5": "md:gap-5",
+      "6": "md:gap-6",
+      "8": "md:gap-8",
+      "10": "md:gap-10",
+      "12": "md:gap-12",
+      "16": "md:gap-16"
+    },
+    lg: {
+      "0": "lg:gap-0",
+      "0.5": "lg:gap-0.5",
+      "1": "lg:gap-1",
+      "1.5": "lg:gap-1.5",
+      "2": "lg:gap-2",
+      "2.5": "lg:gap-2.5",
+      "3": "lg:gap-3",
+      "4": "lg:gap-4",
+      "5": "lg:gap-5",
+      "6": "lg:gap-6",
+      "8": "lg:gap-8",
+      "10": "lg:gap-10",
+      "12": "lg:gap-12",
+      "16": "lg:gap-16"
+    },
+    xl: {
+      "0": "xl:gap-0",
+      "0.5": "xl:gap-0.5",
+      "1": "xl:gap-1",
+      "1.5": "xl:gap-1.5",
+      "2": "xl:gap-2",
+      "2.5": "xl:gap-2.5",
+      "3": "xl:gap-3",
+      "4": "xl:gap-4",
+      "5": "xl:gap-5",
+      "6": "xl:gap-6",
+      "8": "xl:gap-8",
+      "10": "xl:gap-10",
+      "12": "xl:gap-12",
+      "16": "xl:gap-16"
+    }
+  },
+  "gap-x": {
+    sm: {
+      "0": "sm:gap-x-0",
+      "0.5": "sm:gap-x-0.5",
+      "1": "sm:gap-x-1",
+      "1.5": "sm:gap-x-1.5",
+      "2": "sm:gap-x-2",
+      "2.5": "sm:gap-x-2.5",
+      "3": "sm:gap-x-3",
+      "4": "sm:gap-x-4",
+      "5": "sm:gap-x-5",
+      "6": "sm:gap-x-6",
+      "8": "sm:gap-x-8",
+      "10": "sm:gap-x-10",
+      "12": "sm:gap-x-12",
+      "16": "sm:gap-x-16"
+    },
+    md: {
+      "0": "md:gap-x-0",
+      "0.5": "md:gap-x-0.5",
+      "1": "md:gap-x-1",
+      "1.5": "md:gap-x-1.5",
+      "2": "md:gap-x-2",
+      "2.5": "md:gap-x-2.5",
+      "3": "md:gap-x-3",
+      "4": "md:gap-x-4",
+      "5": "md:gap-x-5",
+      "6": "md:gap-x-6",
+      "8": "md:gap-x-8",
+      "10": "md:gap-x-10",
+      "12": "md:gap-x-12",
+      "16": "md:gap-x-16"
+    },
+    lg: {
+      "0": "lg:gap-x-0",
+      "0.5": "lg:gap-x-0.5",
+      "1": "lg:gap-x-1",
+      "1.5": "lg:gap-x-1.5",
+      "2": "lg:gap-x-2",
+      "2.5": "lg:gap-x-2.5",
+      "3": "lg:gap-x-3",
+      "4": "lg:gap-x-4",
+      "5": "lg:gap-x-5",
+      "6": "lg:gap-x-6",
+      "8": "lg:gap-x-8",
+      "10": "lg:gap-x-10",
+      "12": "lg:gap-x-12",
+      "16": "lg:gap-x-16"
+    },
+    xl: {
+      "0": "xl:gap-x-0",
+      "0.5": "xl:gap-x-0.5",
+      "1": "xl:gap-x-1",
+      "1.5": "xl:gap-x-1.5",
+      "2": "xl:gap-x-2",
+      "2.5": "xl:gap-x-2.5",
+      "3": "xl:gap-x-3",
+      "4": "xl:gap-x-4",
+      "5": "xl:gap-x-5",
+      "6": "xl:gap-x-6",
+      "8": "xl:gap-x-8",
+      "10": "xl:gap-x-10",
+      "12": "xl:gap-x-12",
+      "16": "xl:gap-x-16"
+    }
+  },
+  "gap-y": {
+    sm: {
+      "0": "sm:gap-y-0",
+      "0.5": "sm:gap-y-0.5",
+      "1": "sm:gap-y-1",
+      "1.5": "sm:gap-y-1.5",
+      "2": "sm:gap-y-2",
+      "2.5": "sm:gap-y-2.5",
+      "3": "sm:gap-y-3",
+      "4": "sm:gap-y-4",
+      "5": "sm:gap-y-5",
+      "6": "sm:gap-y-6",
+      "8": "sm:gap-y-8",
+      "10": "sm:gap-y-10",
+      "12": "sm:gap-y-12",
+      "16": "sm:gap-y-16"
+    },
+    md: {
+      "0": "md:gap-y-0",
+      "0.5": "md:gap-y-0.5",
+      "1": "md:gap-y-1",
+      "1.5": "md:gap-y-1.5",
+      "2": "md:gap-y-2",
+      "2.5": "md:gap-y-2.5",
+      "3": "md:gap-y-3",
+      "4": "md:gap-y-4",
+      "5": "md:gap-y-5",
+      "6": "md:gap-y-6",
+      "8": "md:gap-y-8",
+      "10": "md:gap-y-10",
+      "12": "md:gap-y-12",
+      "16": "md:gap-y-16"
+    },
+    lg: {
+      "0": "lg:gap-y-0",
+      "0.5": "lg:gap-y-0.5",
+      "1": "lg:gap-y-1",
+      "1.5": "lg:gap-y-1.5",
+      "2": "lg:gap-y-2",
+      "2.5": "lg:gap-y-2.5",
+      "3": "lg:gap-y-3",
+      "4": "lg:gap-y-4",
+      "5": "lg:gap-y-5",
+      "6": "lg:gap-y-6",
+      "8": "lg:gap-y-8",
+      "10": "lg:gap-y-10",
+      "12": "lg:gap-y-12",
+      "16": "lg:gap-y-16"
+    },
+    xl: {
+      "0": "xl:gap-y-0",
+      "0.5": "xl:gap-y-0.5",
+      "1": "xl:gap-y-1",
+      "1.5": "xl:gap-y-1.5",
+      "2": "xl:gap-y-2",
+      "2.5": "xl:gap-y-2.5",
+      "3": "xl:gap-y-3",
+      "4": "xl:gap-y-4",
+      "5": "xl:gap-y-5",
+      "6": "xl:gap-y-6",
+      "8": "xl:gap-y-8",
+      "10": "xl:gap-y-10",
+      "12": "xl:gap-y-12",
+      "16": "xl:gap-y-16"
+    }
+  }
+};
+function stepKey(value) {
+  const num = typeof value === "number" ? value : Number(value.trim());
+  return Number.isNaN(num) ? void 0 : String(num);
+}
+function resolve(kind, gap) {
   if (gap === void 0 || gap === null) return void 0;
-  if (typeof gap === "number") {
-    if (gap in STANDARD_GAP_MAP) {
-      return STANDARD_GAP_MAP[gap];
+  const base = kind === "gap" ? GAP : kind === "gap-x" ? GAP_X : GAP_Y;
+  if (typeof gap === "object") {
+    const classes = [];
+    if (gap.base !== void 0) classes.push(base[String(gap.base)] ?? `${kind}-[${gap.base}px]`);
+    for (const bp of ["sm", "md", "lg", "xl"]) {
+      const step = gap[bp];
+      if (step !== void 0) {
+        const cls = RESPONSIVE[kind][bp][String(step)];
+        if (cls) classes.push(cls);
+      }
     }
-    return `gap-[${gap}px]`;
+    return classes.join(" ") || void 0;
   }
+  const key = stepKey(gap);
+  if (key !== void 0 && base[key]) return base[key];
   if (typeof gap === "string") {
     const trimmed = gap.trim();
-    const num = Number(trimmed);
-    if (!isNaN(num) && num in STANDARD_GAP_MAP) {
-      return STANDARD_GAP_MAP[num];
-    }
-    if (trimmed.startsWith("gap-")) {
-      return trimmed;
-    }
-    return `gap-[${trimmed}]`;
+    if (trimmed.startsWith("gap-")) return trimmed;
+    return `${kind}-[${trimmed}]`;
   }
-  return void 0;
+  return `${kind}-[${gap}px]`;
+}
+function formatGap(gap) {
+  return resolve("gap", gap);
+}
+function formatAxisGap(axis, gap) {
+  return resolve(axis === "x" ? "gap-x" : "gap-y", gap);
 }
 
-export { formatGap };
+export { formatAxisGap, formatGap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,11 +42,11 @@
     "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "input-otp": "^1.5.0",
-    "@timmbr/icons": "1.3.0",
-    "@timmbr/utils": "1.3.0",
-    "@timmbr/hooks": "1.0.0",
-    "@timmbr/motion": "1.2.1",
-    "@timmbr/theme": "1.3.0"
+    "@timmbr/icons": "1.4.0",
+    "@timmbr/theme": "1.3.0",
+    "@timmbr/utils": "1.4.0",
+    "@timmbr/motion": "1.2.2",
+    "@timmbr/hooks": "1.0.0"
   },
   "peerDependencies": {
     "next": ">=13.0.0 || >=14.0.0 || >=15.0.0 || >=16.0.0",