@dot-system/css-utility 0.1.0

package/es/css_utility_layer.module.css

@@ -0,0 +1 @@
+@layer dots-css-utility, dots-css-utility.core;

package/es/index.js

@@ -0,0 +1,6 @@
+import { cva } from "./js/cva";
+import { clsx } from "./js/clsx";
+import { cn } from "./js/cn";
+import { dotMerge } from "./js/dotMerge";
+import { csv } from "./js/csv";
+export { cva, clsx, cn, dotMerge, csv };

package/es/js/clsx.js

@@ -0,0 +1,4 @@
+import baseClsx from "clsx";
+export const clsx = function () {
+  return baseClsx(...arguments);
+};

package/es/js/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { dotMerge } from "./dotMerge";
+export const cn = function () {
+  return dotMerge(clsx(...arguments));
+};

package/es/js/csv.js

@@ -0,0 +1,29 @@
+// const buttonSlots = createSlotVariants({
+//   root: cva("d-inline-flex d-items-center", {
+//     variants: {
+//       size: {
+//         sm: "d-h-8 d-px-3",
+//         lg: "d-h-12 d-px-6"
+//       }
+//     }
+//   }),
+//   icon: cva("", {
+//     variants: {
+//       size: {
+//         sm: "d-w-3",
+//         lg: "d-w-5"
+//       }
+//     }
+//   })
+// })
+export const csv = function (slots) {
+  return props => {
+    const result = {};
+
+    for (const key in slots) {
+      result[key] = slots[key](props);
+    }
+
+    return result;
+  };
+};

package/es/js/cva.js

@@ -0,0 +1,4 @@
+import { cva as baseCva } from "class-variance-authority";
+export const cva = function () {
+  return baseCva(...arguments);
+};

package/es/js/dotMerge.js

@@ -0,0 +1,43 @@
+import { createTailwindMerge, getDefaultConfig } from "tailwind-merge";
+/**
+ * dotMerge is a custom tailwind-merge instance for d- prefixed utilities.
+ * 
+ * It uses the default Tailwind config but applies all conflict detection
+ * and merging rules to classes that use the d- prefix instead of the default prefix.
+ * 
+ * How it works:
+ * 1. Takes the default Tailwind class groups (position, display, padding, etc.)
+ * 2. Prefixes all class names with "d-" 
+ * 3. Applies the same conflict resolution rules
+ * 
+ * Example: cn('d-fixed', 'd-relative') → 'd-relative'
+ */
+
+export const dotMerge = createTailwindMerge(() => {
+  const config = getDefaultConfig();
+  const transformedClassGroups = Object.fromEntries(Object.entries(config.classGroups).map(_ref => {
+    let [groupId, matchers] = _ref;
+    return [groupId, matchers.map(matcher => {
+      if (typeof matcher === "string") {
+        return `d-${matcher}`;
+      }
+
+      if (matcher instanceof RegExp) {
+        const source = matcher.source.replace(/^\^/, "");
+        return new RegExp(`^d-${source}`, matcher.flags);
+      }
+
+      if (typeof matcher === "object") {
+        return Object.fromEntries(Object.entries(matcher).map(_ref2 => {
+          let [key, value] = _ref2;
+          return [`d-${key}`, value];
+        }));
+      }
+
+      return matcher;
+    })];
+  }));
+  return { ...config,
+    classGroups: transformedClassGroups
+  };
+});