@neuralytics/alpine-ds 0.2.5 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @neuralytics/alpine-ds
 
+## 0.3.0
+
+### Minor Changes
+
+- f6e964d: Add `./tailwind-tokens` entrypoint exporting pure Tailwind `content`/`theme`/`iconClasses` (no `@egoist/tailwindcss-icons` dependency), so consumers that only need the theme don't load the full icon collections into memory. `./tailwind-preset` keeps its previous behavior unchanged.
+
 ## 0.2.5
 
 ### Patch Changes

package/README.md

@@ -59,6 +59,26 @@ export default {
 } as Config
 ```
 
+> **Note:** `./tailwind-preset` always loads this package's full icon collections (`mdi`, `line-md`) into memory via `@egoist/tailwindcss-icons`, even if you only need `content`/`theme`. If that's too heavy for your setup (e.g. it causes memory issues during your build), import those from `@neuralytics/alpine-ds/tailwind-tokens` instead — this entrypoint has zero dependency on the icon plugin:
+>
+> ```ts
+> import type { Config } from "tailwindcss"
+> import { content, theme } from "@neuralytics/alpine-ds/tailwind-tokens"
+>
+> export default {
+>   content: [
+>     ...content,
+>     // ... your source files ...
+>   ],
+>   theme,
+>   // No `plugins` here: configure your own icon plugin instead (e.g. `iconsPlugin`
+>   // from `@egoist/tailwindcss-icons`), with only the icon collections you actually
+>   // need. `tailwind-tokens` also exports `iconClasses`: the icon classes this
+>   // package's own components render internally, which your icon plugin setup must
+>   // still be able to generate.
+> } as Config
+> ```
+
 6. Set the accent color in your project's `main.ts`:
 
 ```js

package/dist/icons-DedUTX68.js

@@ -0,0 +1,6 @@
+const o = {
+  loader: "i-line-md-loading-twotone-loop"
+};
+export {
+  o as I
+};

package/dist/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const ICONS: {
+    readonly loader: "i-line-md-loading-twotone-loop";
+};

package/dist/index.mjs

@@ -1,6 +1,7 @@
-import { defineComponent as w, ref as _, computed as p, createElementBlock as y, openBlock as l, normalizeClass as L, unref as m, createBlock as k, createCommentVNode as f, toDisplayString as A } from "vue";
-import { tv as D } from "tailwind-variants";
-const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
+import { defineComponent as w, ref as k, computed as y, createElementBlock as p, openBlock as l, normalizeClass as L, unref as m, createBlock as S, createCommentVNode as f, toDisplayString as A } from "vue";
+import { I as D } from "./icons-DedUTX68.js";
+import { tv as I } from "tailwind-variants";
+const J = ["xs", "sm", "md", "lg", "xl", "2xl"], T = /* @__PURE__ */ w({
   name: "AlpineIcon",
   __name: "Icon",
   props: {
@@ -10,7 +11,7 @@ const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
     isLoading: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const e = t, a = D({
+    const e = t, a = I({
       variants: {
         size: {
           xs: "size-3",
@@ -21,14 +22,14 @@ const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
           "2xl": "size-8"
         }
       }
-    }), s = _(!1), n = p(() => e.isLoading ? "i-line-md-loading-twotone-loop" : e.hoverIcon && s.value ? e.hoverIcon : e.icon);
-    return (r, o) => (l(), y("span", {
+    }), s = k(!1), n = y(() => e.isLoading ? D.loader : e.hoverIcon && s.value ? e.hoverIcon : e.icon);
+    return (r, o) => (l(), p("span", {
       class: L([n.value, m(a)({ size: t.size })]),
       onMouseover: o[0] || (o[0] = (i) => s.value = !0),
       onMouseleave: o[1] || (o[1] = (i) => s.value = !1)
     }, null, 34));
   }
-}), T = D({
+}), C = I({
   base: "rounded-lg flex items-center justify-center gap-2 font-medium transition-all max-w-full border",
   variants: {
     iconPosition: {
@@ -141,10 +142,10 @@ const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
       class: "cursor-pointer"
     }
   ]
-}), P = ["primary", "secondary", "invisible"], $ = ["left", "right"], C = ["button", "submit", "reset"], R = ["type", "aria-label", "disabled"], O = {
+}), P = ["primary", "secondary", "invisible"], $ = ["left", "right"], O = ["button", "submit", "reset"], R = ["type", "aria-label", "disabled"], N = {
   key: 1,
   class: "min-w-0 truncate"
-}, G = /* @__PURE__ */ w({
+}, K = /* @__PURE__ */ w({
   name: "AlpineButton",
   __name: "Button",
   props: {
@@ -155,14 +156,14 @@ const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
     isDisabled: { type: Boolean, default: !1 },
     isDanger: { type: Boolean, default: !1 },
     iconPosition: { default: $[0] },
-    type: { default: C[0] }
+    type: { default: O[0] }
   },
   setup(t) {
-    const e = t, a = p(() => e.isLoading ? "i-line-md-loading-twotone-loop" : e.icon), s = p(() => !e.icon && !e.label ? "-" : e.label);
-    return (n, r) => (l(), y("button", {
+    const e = t, a = y(() => e.isLoading ? D.loader : e.icon), s = y(() => !e.icon && !e.label ? "-" : e.label);
+    return (n, r) => (l(), p("button", {
       type: e.type,
       "aria-label": e.label ?? e.icon ?? "Button without label or icon",
-      class: L(m(T)({
+      class: L(m(C)({
         design: e.design,
         iconPosition: e.iconPosition,
         isLoading: e.isLoading,
@@ -172,17 +173,17 @@ const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
       })),
       disabled: e.isDisabled || e.isLoading
     }, [
-      a.value ? (l(), k(m(S), {
+      a.value ? (l(), S(m(T), {
         key: 0,
         "aria-hidden": !0,
         icon: a.value,
         class: "shrink-0"
       }, null, 8, ["icon"])) : f("", !0),
-      s.value ? (l(), y("span", O, A(s.value), 1)) : f("", !0)
+      s.value ? (l(), p("span", N, A(s.value), 1)) : f("", !0)
     ], 10, R));
   }
 });
-function N(t) {
+function E(t) {
   const e = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
   return e ? {
     r: Number.parseInt(e[1], 16),
@@ -194,10 +195,10 @@ function v(t) {
   const e = t / 255;
   return e <= 0.04045 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
 }
-function E(t) {
-  const { r: e, g: a, b: s } = N(t), n = v(e), r = v(a), o = v(s), i = 0.4122214708 * n + 0.5363325363 * r + 0.0514459929 * o, I = 0.2119034982 * n + 0.6806995451 * r + 0.1073969566 * o, z = 0.0883024619 * n + 0.2817188376 * r + 0.6299787005 * o, c = Math.cbrt(i), d = Math.cbrt(I), g = Math.cbrt(z), B = 0.2104542553 * c + 0.793617785 * d - 0.0040720468 * g, u = 1.9779984951 * c - 2.428592205 * d + 0.4505937099 * g, b = 0.0259040371 * c + 0.7827717662 * d - 0.808675766 * g, M = Math.sqrt(u * u + b * b);
+function j(t) {
+  const { r: e, g: a, b: s } = E(t), n = v(e), r = v(a), o = v(s), i = 0.4122214708 * n + 0.5363325363 * r + 0.0514459929 * o, z = 0.2119034982 * n + 0.6806995451 * r + 0.1073969566 * o, B = 0.0883024619 * n + 0.2817188376 * r + 0.6299787005 * o, c = Math.cbrt(i), d = Math.cbrt(z), g = Math.cbrt(B), M = 0.2104542553 * c + 0.793617785 * d - 0.0040720468 * g, u = 1.9779984951 * c - 2.428592205 * d + 0.4505937099 * g, b = 0.0259040371 * c + 0.7827717662 * d - 0.808675766 * g, _ = Math.sqrt(u * u + b * b);
   let h = Math.atan2(b, u) * 180 / Math.PI;
-  return h < 0 && (h += 360), { lightness: B, chroma: M, hue: h };
+  return h < 0 && (h += 360), { lightness: M, chroma: _, hue: h };
 }
 const x = {
   50: 1.4208,
@@ -210,7 +211,7 @@ const x = {
   700: 0.754,
   800: 0.6501,
   900: 0.5749
-}, j = {
+}, F = {
   50: 0.0549,
   100: 0.135,
   200: 0.262,
@@ -222,27 +223,27 @@ const x = {
   800: 0.747,
   900: 0.595
 };
-function F(t) {
-  const { lightness: e, chroma: a, hue: s } = E(t), n = {};
+function H(t) {
+  const { lightness: e, chroma: a, hue: s } = j(t), n = {};
   for (const r of Object.keys(x)) {
-    const o = Math.min(1, Math.max(0, e * x[r])), i = Math.max(0, a * j[r]);
+    const o = Math.min(1, Math.max(0, e * x[r])), i = Math.max(0, a * F[r]);
     n[`--color-accent-${r}`] = `oklch(${(o * 100).toFixed(1)}% ${i.toFixed(3)} ${s.toFixed(1)})`;
   }
   return n;
 }
-function J(t) {
-  const e = F(t), a = document.documentElement;
+function Q(t) {
+  const e = H(t), a = document.documentElement;
   for (const [s, n] of Object.entries(e))
     a.style.setProperty(s, n);
 }
-function K(t) {
+function U(t) {
   document.documentElement.style.setProperty("--button-text-color", t);
 }
 export {
-  G as AlpineButton,
-  S as AlpineIcon,
-  F as generateAccentScale,
-  q as iconSizes,
-  J as setAccentColorTheme,
-  K as setButtonTextColor
+  K as AlpineButton,
+  T as AlpineIcon,
+  H as generateAccentScale,
+  J as iconSizes,
+  Q as setAccentColorTheme,
+  U as setButtonTextColor
 };

package/dist/tailwind-preset.d.ts

@@ -1,89 +1,3 @@
-declare const _default: {
-    content: string[];
-    theme: {
-        colors: {
-            transparent: string;
-            current: string;
-            black: string;
-            white: string;
-            gray: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            red: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            yellow: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            green: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            blue: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            accent: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            "button-text-color": string;
-        };
-    };
-    plugins: {
-        handler: tailwindcss_types_config.PluginCreator;
-        config?: Partial<tailwindcss_types_config.Config>;
-    }[];
-};
-export default _default;
+import { Config } from 'tailwindcss';
+declare const preset: Config;
+export default preset;

package/dist/tailwind-preset.mjs

@@ -1,93 +1,14 @@
-import { iconsPlugin as c, getIconCollections as o } from "@egoist/tailwindcss-icons";
-const l = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), h = {
-  50: "oklch(98.5% 0 0)",
-  100: "oklch(97% 0 0)",
-  200: "oklch(92.2% 0 0)",
-  300: "oklch(87% 0 0)",
-  400: "oklch(70.8% 0 0)",
-  500: "oklch(55.6% 0 0)",
-  600: "oklch(43.9% 0 0)",
-  700: "oklch(37.1% 0 0)",
-  800: "oklch(26.9% 0 0)",
-  900: "oklch(20.5% 0 0)"
-}, k = {
-  50: "oklch(97.1% 0.013 17.38)",
-  100: "oklch(93.6% 0.032 17.717)",
-  200: "oklch(88.5% 0.062 18.334)",
-  300: "oklch(80.8% 0.114 19.571)",
-  400: "oklch(70.4% 0.191 22.216)",
-  500: "oklch(63.7% 0.237 25.331)",
-  600: "oklch(57.7% 0.245 27.325)",
-  700: "oklch(50.5% 0.213 27.518)",
-  800: "oklch(44.4% 0.177 26.899)",
-  900: "oklch(39.6% 0.141 25.723)"
-}, t = {
-  50: "oklch(98.7% 0.022 95.277)",
-  100: "oklch(96.2% 0.059 95.617)",
-  200: "oklch(92.4% 0.12 95.746)",
-  300: "oklch(87.9% 0.169 91.605)",
-  400: "oklch(82.8% 0.189 84.429)",
-  500: "oklch(76.9% 0.188 70.08)",
-  600: "oklch(66.6% 0.179 58.318)",
-  700: "oklch(55.5% 0.163 48.998)",
-  800: "oklch(47.3% 0.137 46.201)",
-  900: "oklch(41.4% 0.112 45.904)"
-}, r = {
-  50: "oklch(98.2% 0.018 155.826)",
-  100: "oklch(96.2% 0.044 156.743)",
-  200: "oklch(92.5% 0.084 155.995)",
-  300: "oklch(87.1% 0.15 154.449)",
-  400: "oklch(79.2% 0.209 151.711)",
-  500: "oklch(72.3% 0.219 149.579)",
-  600: "oklch(62.7% 0.194 149.214)",
-  700: "oklch(52.7% 0.154 150.069)",
-  800: "oklch(44.8% 0.119 151.328)",
-  900: "oklch(39.3% 0.095 152.535)"
-}, e = {
-  50: "oklch(97% 0.014 254.604)",
-  100: "oklch(93.2% 0.032 255.585)",
-  200: "oklch(88.2% 0.059 254.128)",
-  300: "oklch(80.9% 0.105 251.813)",
-  400: "oklch(70.7% 0.165 254.624)",
-  500: "oklch(62.3% 0.214 259.815)",
-  600: "oklch(54.6% 0.245 262.881)",
-  700: "oklch(48.8% 0.243 264.376)",
-  800: "oklch(42.4% 0.199 265.638)",
-  900: "oklch(37.9% 0.146 265.522)"
-}, a = {
-  content: [`${l}**/*.{js,mjs}`],
-  theme: {
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-      black: "#000000",
-      white: "#ffffff",
-      gray: h,
-      red: k,
-      yellow: t,
-      green: r,
-      blue: e,
-      accent: {
-        50: "var(--color-accent-50)",
-        100: "var(--color-accent-100)",
-        200: "var(--color-accent-200)",
-        300: "var(--color-accent-300)",
-        400: "var(--color-accent-400)",
-        500: "var(--color-accent-500)",
-        600: "var(--color-accent-600)",
-        700: "var(--color-accent-700)",
-        800: "var(--color-accent-800)",
-        900: "var(--color-accent-900)"
-      },
-      "button-text-color": "var(--button-text-color, #ffffff)"
-    }
-  },
+import { iconsPlugin as o, getIconCollections as t } from "@egoist/tailwindcss-icons";
+import { theme as e, content as n } from "./tailwind-tokens.mjs";
+const c = {
+  content: n,
+  theme: e,
   plugins: [
-    c({
-      collections: o(["mdi", "line-md"])
+    o({
+      collections: t(["mdi", "line-md"])
     })
   ]
 };
 export {
-  a as default
+  c as default
 };

package/dist/tailwind-tokens.d.ts

@@ -0,0 +1,4 @@
+import { Config } from 'tailwindcss';
+export declare const content: Config["content"];
+export declare const theme: Config["theme"];
+export declare const iconClasses: "i-line-md-loading-twotone-loop"[];

package/dist/tailwind-tokens.mjs

@@ -0,0 +1,87 @@
+import { I as c } from "./icons-DedUTX68.js";
+const o = new URL(import.meta.url).pathname.replace(/[^/]*$/, ""), l = {
+  50: "oklch(98.5% 0 0)",
+  100: "oklch(97% 0 0)",
+  200: "oklch(92.2% 0 0)",
+  300: "oklch(87% 0 0)",
+  400: "oklch(70.8% 0 0)",
+  500: "oklch(55.6% 0 0)",
+  600: "oklch(43.9% 0 0)",
+  700: "oklch(37.1% 0 0)",
+  800: "oklch(26.9% 0 0)",
+  900: "oklch(20.5% 0 0)"
+}, h = {
+  50: "oklch(97.1% 0.013 17.38)",
+  100: "oklch(93.6% 0.032 17.717)",
+  200: "oklch(88.5% 0.062 18.334)",
+  300: "oklch(80.8% 0.114 19.571)",
+  400: "oklch(70.4% 0.191 22.216)",
+  500: "oklch(63.7% 0.237 25.331)",
+  600: "oklch(57.7% 0.245 27.325)",
+  700: "oklch(50.5% 0.213 27.518)",
+  800: "oklch(44.4% 0.177 26.899)",
+  900: "oklch(39.6% 0.141 25.723)"
+}, k = {
+  50: "oklch(98.7% 0.022 95.277)",
+  100: "oklch(96.2% 0.059 95.617)",
+  200: "oklch(92.4% 0.12 95.746)",
+  300: "oklch(87.9% 0.169 91.605)",
+  400: "oklch(82.8% 0.189 84.429)",
+  500: "oklch(76.9% 0.188 70.08)",
+  600: "oklch(66.6% 0.179 58.318)",
+  700: "oklch(55.5% 0.163 48.998)",
+  800: "oklch(47.3% 0.137 46.201)",
+  900: "oklch(41.4% 0.112 45.904)"
+}, t = {
+  50: "oklch(98.2% 0.018 155.826)",
+  100: "oklch(96.2% 0.044 156.743)",
+  200: "oklch(92.5% 0.084 155.995)",
+  300: "oklch(87.1% 0.15 154.449)",
+  400: "oklch(79.2% 0.209 151.711)",
+  500: "oklch(72.3% 0.219 149.579)",
+  600: "oklch(62.7% 0.194 149.214)",
+  700: "oklch(52.7% 0.154 150.069)",
+  800: "oklch(44.8% 0.119 151.328)",
+  900: "oklch(39.3% 0.095 152.535)"
+}, r = {
+  50: "oklch(97% 0.014 254.604)",
+  100: "oklch(93.2% 0.032 255.585)",
+  200: "oklch(88.2% 0.059 254.128)",
+  300: "oklch(80.9% 0.105 251.813)",
+  400: "oklch(70.7% 0.165 254.624)",
+  500: "oklch(62.3% 0.214 259.815)",
+  600: "oklch(54.6% 0.245 262.881)",
+  700: "oklch(48.8% 0.243 264.376)",
+  800: "oklch(42.4% 0.199 265.638)",
+  900: "oklch(37.9% 0.146 265.522)"
+}, e = [`${o}**/*.{js,mjs}`], n = {
+  colors: {
+    transparent: "transparent",
+    current: "currentColor",
+    black: "#000000",
+    white: "#ffffff",
+    gray: l,
+    red: h,
+    yellow: k,
+    green: t,
+    blue: r,
+    accent: {
+      50: "var(--color-accent-50)",
+      100: "var(--color-accent-100)",
+      200: "var(--color-accent-200)",
+      300: "var(--color-accent-300)",
+      400: "var(--color-accent-400)",
+      500: "var(--color-accent-500)",
+      600: "var(--color-accent-600)",
+      700: "var(--color-accent-700)",
+      800: "var(--color-accent-800)",
+      900: "var(--color-accent-900)"
+    },
+    "button-text-color": "var(--button-text-color, #ffffff)"
+  }
+}, s = Object.values(c);
+export {
+  e as content,
+  s as iconClasses,
+  n as theme
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neuralytics/alpine-ds",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -18,6 +18,10 @@
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.mjs"
+    },
+    "./tailwind-tokens": {
+      "types": "./dist/tailwind-tokens.d.ts",
+      "import": "./dist/tailwind-tokens.mjs"
     }
   },
   "main": "./dist/index.mjs",