@neuralytics/alpine-ds 0.2.4 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 8964133: Add `type` prop to `AlpineButton` (defaults to `button`) and fix content to always be centered.
+
 ## 0.2.4
 
 ### 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/components/button/Button.styles.d.ts

@@ -0,0 +1,70 @@
+export declare const buttonStyle: import('tailwind-variants').TVReturnType<{
+    iconPosition: {
+        left: string;
+        right: string;
+    };
+    design: {
+        primary: string;
+        secondary: string;
+        invisible: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isLoading: {
+        true: string;
+    };
+    isDanger: {
+        true: string;
+    };
+    hasLabel: {
+        true: string;
+        false: string;
+    };
+}, undefined, "rounded-lg flex items-center justify-center gap-2 font-medium transition-all max-w-full border", {
+    iconPosition: {
+        left: string;
+        right: string;
+    };
+    design: {
+        primary: string;
+        secondary: string;
+        invisible: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isLoading: {
+        true: string;
+    };
+    isDanger: {
+        true: string;
+    };
+    hasLabel: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    iconPosition: {
+        left: string;
+        right: string;
+    };
+    design: {
+        primary: string;
+        secondary: string;
+        invisible: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isLoading: {
+        true: string;
+    };
+    isDanger: {
+        true: string;
+    };
+    hasLabel: {
+        true: string;
+        false: string;
+    };
+}, undefined, "rounded-lg flex items-center justify-center gap-2 font-medium transition-all max-w-full border", unknown, unknown, undefined>>;

package/dist/components/button/Button.types.d.ts

@@ -1,4 +1,6 @@
 export declare const buttonDesigns: readonly ["primary", "secondary", "invisible"];
 export declare const buttonIconPositions: readonly ["left", "right"];
+export declare const buttonTypes: readonly ["button", "submit", "reset"];
 export type ButtonDesign = typeof buttonDesigns[number];
 export type ButtonIconPosition = typeof buttonIconPositions[number];
+export type ButtonType = typeof buttonTypes[number];

package/dist/components/button/Button.vue.d.ts

@@ -1,4 +1,4 @@
-import { ButtonDesign as ButtonDesignType, ButtonIconPosition as ButtonIconPositionType } from './Button.types';
+import { ButtonDesign as ButtonDesignType, ButtonIconPosition as ButtonIconPositionType, ButtonType as ButtonTypeType } from './Button.types';
 export interface ButtonProps {
     label?: string | null;
     icon?: string | null;
@@ -7,13 +7,15 @@ export interface ButtonProps {
     isDisabled?: boolean;
     isDanger?: boolean;
     iconPosition?: ButtonIconPositionType;
+    type?: ButtonTypeType;
 }
 declare const _default: import('vue').DefineComponent<ButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     icon: string | null;
     isLoading: boolean;
+    type: ButtonTypeType;
     design: ButtonDesignType;
-    isDisabled: boolean;
     isDanger: boolean;
+    isDisabled: boolean;
     iconPosition: ButtonIconPositionType;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 export default _default;

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,8 @@
-import { defineComponent as w, ref as B, computed as y, createElementBlock as p, openBlock as l, normalizeClass as L, unref as f, createBlock as k, createCommentVNode as m, toDisplayString as S } from "vue";
-import { tv as D } from "tailwind-variants";
-const H = ["xs", "sm", "md", "lg", "xl", "2xl"], P = /* @__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: {
     icon: {},
@@ -9,7 +11,7 @@ const H = ["xs", "sm", "md", "lg", "xl", "2xl"], P = /* @__PURE__ */ w({
     isLoading: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const e = t, o = D({
+    const e = t, a = I({
       variants: {
         size: {
           xs: "size-3",
@@ -20,145 +22,148 @@ const H = ["xs", "sm", "md", "lg", "xl", "2xl"], P = /* @__PURE__ */ w({
           "2xl": "size-8"
         }
       }
-    }), n = B(!1), s = y(() => e.isLoading ? "i-line-md-loading-twotone-loop" : e.hoverIcon && n.value ? e.hoverIcon : e.icon);
-    return (r, a) => (l(), p("span", {
-      class: L([s.value, f(o)({ size: t.size })]),
-      onMouseover: a[0] || (a[0] = (i) => n.value = !0),
-      onMouseleave: a[1] || (a[1] = (i) => n.value = !1)
+    }), 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 = ["primary", "secondary", "invisible"], $ = ["left", "right"], A = ["aria-label", "disabled"], C = {
+}), C = I({
+  base: "rounded-lg flex items-center justify-center gap-2 font-medium transition-all max-w-full border",
+  variants: {
+    iconPosition: {
+      left: "flex-row",
+      right: "flex-row-reverse"
+    },
+    design: {
+      primary: "h-9 bg-accent-500 border-transparent shadow-xs hover:shadow hover:brightness-110 active:bg-accent-600 active:shadow-none active:brightness-100 text-button-text-color",
+      secondary: "h-9 bg-white border-gray-200 text-gray-900 shadow-xs hover:shadow active:shadow-inner",
+      invisible: "h-7 bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-900 border-transparent underline"
+    },
+    isDisabled: {
+      true: "cursor-not-allowed hover:brightness-100 shadow-none"
+    },
+    isLoading: {
+      true: "cursor-wait hover:brightness-100 shadow-none"
+    },
+    isDanger: {
+      true: ""
+    },
+    hasLabel: {
+      true: "w-auto",
+      false: "px-0"
+    }
+  },
+  compoundVariants: [
+    // Has Label
+    {
+      hasLabel: !0,
+      design: "primary",
+      class: "px-3"
+    },
+    {
+      hasLabel: !0,
+      design: "secondary",
+      class: "px-3"
+    },
+    {
+      hasLabel: !0,
+      design: "invisible",
+      class: "px-2"
+    },
+    {
+      hasLabel: !1,
+      design: "primary",
+      class: "size-9"
+    },
+    {
+      hasLabel: !1,
+      design: "secondary",
+      class: "size-9"
+    },
+    {
+      hasLabel: !1,
+      design: "invisible",
+      class: "size-7"
+    },
+    // Danger
+    {
+      design: "primary",
+      isDanger: !0,
+      class: "bg-red-600 text-white active:bg-red-700"
+    },
+    {
+      design: "secondary",
+      isDanger: !0,
+      class: "bg-white text-red-600"
+    },
+    {
+      design: "invisible",
+      isDanger: !0,
+      class: "text-red-600 hover:bg-red-100 active:bg-red-200"
+    },
+    // Disabled
+    {
+      design: "primary",
+      isDisabled: !0,
+      class: "bg-gray-200 text-gray-500 hover:bg-gray-200 active:bg-gray-200 hover:shadow-none active:shadow-none"
+    },
+    {
+      design: "secondary",
+      isDisabled: !0,
+      class: "bg-gray-50 text-gray-500 hover:bg-gray-50 active:bg-gray-50 hover:shadow-none active:shadow-none"
+    },
+    {
+      design: "invisible",
+      isDisabled: !0,
+      class: "bg-transparent text-gray-500 hover:bg-transparent active:bg-transparent hover:text-gray-500 hover:shadow-none active:shadow-none"
+    },
+    // Loading
+    {
+      design: "primary",
+      isLoading: !0,
+      class: "bg-gray-200 text-gray-500 hover:bg-gray-200 active:bg-gray-200 hover:shadow-none active:shadow-none"
+    },
+    {
+      design: "secondary",
+      isLoading: !0,
+      class: "bg-gray-50 text-gray-500 hover:bg-gray-50 active:bg-gray-50 hover:shadow-none active:shadow-none"
+    },
+    {
+      design: "invisible",
+      isLoading: !0,
+      class: "bg-transparent text-gray-500 hover:bg-transparent active:bg-transparent hover:text-gray-500 hover:shadow-none active:shadow-none"
+    },
+    // Default
+    {
+      isLoading: !1,
+      isDisabled: !1,
+      class: "cursor-pointer"
+    }
+  ]
+}), P = ["primary", "secondary", "invisible"], $ = ["left", "right"], O = ["button", "submit", "reset"], R = ["type", "aria-label", "disabled"], N = {
   key: 1,
-  class: "flex-1 text-left truncate"
-}, V = /* @__PURE__ */ w({
+  class: "min-w-0 truncate"
+}, K = /* @__PURE__ */ w({
+  name: "AlpineButton",
   __name: "Button",
   props: {
     label: {},
     icon: { default: null },
-    design: { default: T[0] },
+    design: { default: P[0] },
     isLoading: { type: Boolean, default: !1 },
     isDisabled: { type: Boolean, default: !1 },
     isDanger: { type: Boolean, default: !1 },
-    iconPosition: { default: $[0] }
+    iconPosition: { default: $[0] },
+    type: { default: O[0] }
   },
   setup(t) {
-    const e = t, o = D({
-      base: "rounded-lg flex items-center gap-2 font-medium transition-all max-w-full border",
-      variants: {
-        iconPosition: {
-          left: "flex-row",
-          right: "flex-row-reverse"
-        },
-        design: {
-          primary: "h-9 bg-accent-500 border-transparent shadow-xs hover:shadow hover:brightness-110 active:bg-accent-600 active:shadow-none active:brightness-100 text-button-text-color",
-          secondary: "h-9 bg-white border-gray-200 text-gray-900 shadow-xs hover:shadow active:shadow-inner",
-          invisible: "h-7 bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-900 border-transparent underline"
-        },
-        isDisabled: {
-          true: "cursor-not-allowed hover:brightness-100 shadow-none"
-        },
-        isLoading: {
-          true: "cursor-wait hover:brightness-100 shadow-none"
-        },
-        isDanger: {
-          true: ""
-        },
-        hasLabel: {
-          true: "w-auto",
-          false: "px-0 justify-center"
-        }
-      },
-      compoundVariants: [
-        // Has Label
-        {
-          hasLabel: !0,
-          design: "primary",
-          class: "px-3"
-        },
-        {
-          hasLabel: !0,
-          design: "secondary",
-          class: "px-3"
-        },
-        {
-          hasLabel: !0,
-          design: "invisible",
-          class: "px-2"
-        },
-        {
-          hasLabel: !1,
-          design: "primary",
-          class: "size-9"
-        },
-        {
-          hasLabel: !1,
-          design: "secondary",
-          class: "size-9"
-        },
-        {
-          hasLabel: !1,
-          design: "invisible",
-          class: "size-7"
-        },
-        // Danger
-        {
-          design: "primary",
-          isDanger: !0,
-          class: "bg-red-600 text-white active:bg-red-700"
-        },
-        {
-          design: "secondary",
-          isDanger: !0,
-          class: "bg-white text-red-600"
-        },
-        {
-          design: "invisible",
-          isDanger: !0,
-          class: "text-red-600 hover:bg-red-100 active:bg-red-200"
-        },
-        // Disabled
-        {
-          design: "primary",
-          isDisabled: !0,
-          class: "bg-gray-200 text-gray-500 hover:bg-gray-200 active:bg-gray-200 hover:shadow-none active:shadow-none"
-        },
-        {
-          design: "secondary",
-          isDisabled: !0,
-          class: "bg-gray-50 text-gray-500 hover:bg-gray-50 active:bg-gray-50 hover:shadow-none active:shadow-none"
-        },
-        {
-          design: "invisible",
-          isDisabled: !0,
-          class: "bg-transparent text-gray-500 hover:bg-transparent active:bg-transparent hover:text-gray-500 hover:shadow-none active:shadow-none"
-        },
-        // Loading
-        {
-          design: "primary",
-          isLoading: !0,
-          class: "bg-gray-200 text-gray-500 hover:bg-gray-200 active:bg-gray-200 hover:shadow-none active:shadow-none"
-        },
-        {
-          design: "secondary",
-          isLoading: !0,
-          class: "bg-gray-50 text-gray-500 hover:bg-gray-50 active:bg-gray-50 hover:shadow-none active:shadow-none"
-        },
-        {
-          design: "invisible",
-          isLoading: !0,
-          class: "bg-transparent text-gray-500 hover:bg-transparent active:bg-transparent hover:text-gray-500 hover:shadow-none active:shadow-none"
-        },
-        // Default
-        {
-          isLoading: !1,
-          isDisabled: !1,
-          class: "cursor-pointer"
-        }
-      ]
-    }), n = y(() => e.isLoading ? "i-line-md-loading-twotone-loop" : e.icon), s = y(() => !e.icon && !e.label ? "-" : e.label);
-    return (r, a) => (l(), p("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(f(o)({
+      class: L(m(C)({
         design: e.design,
         iconPosition: e.iconPosition,
         isLoading: e.isLoading,
@@ -168,17 +173,17 @@ const H = ["xs", "sm", "md", "lg", "xl", "2xl"], P = /* @__PURE__ */ w({
       })),
       disabled: e.isDisabled || e.isLoading
     }, [
-      n.value ? (l(), k(f(P), {
+      a.value ? (l(), S(m(T), {
         key: 0,
         "aria-hidden": !0,
-        icon: n.value,
+        icon: a.value,
         class: "shrink-0"
-      }, null, 8, ["icon"])) : m("", !0),
-      s.value ? (l(), p("span", C, S(s.value), 1)) : m("", !0)
-    ], 10, A));
+      }, null, 8, ["icon"])) : f("", !0),
+      s.value ? (l(), p("span", N, A(s.value), 1)) : f("", !0)
+    ], 10, R));
   }
 });
-function R(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),
@@ -190,8 +195,8 @@ function v(t) {
   const e = t / 255;
   return e <= 0.04045 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
 }
-function O(t) {
-  const { r: e, g: o, b: n } = R(t), s = v(e), r = v(o), a = v(n), i = 0.4122214708 * s + 0.5363325363 * r + 0.0514459929 * a, z = 0.2119034982 * s + 0.6806995451 * r + 0.1073969566 * a, I = 0.0883024619 * s + 0.2817188376 * r + 0.6299787005 * a, c = Math.cbrt(i), d = Math.cbrt(z), g = Math.cbrt(I), 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);
+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: M, chroma: _, hue: h };
 }
@@ -206,7 +211,7 @@ const x = {
   700: 0.754,
   800: 0.6501,
   900: 0.5749
-}, N = {
+}, F = {
   50: 0.0549,
   100: 0.135,
   200: 0.262,
@@ -218,27 +223,27 @@ const x = {
   800: 0.747,
   900: 0.595
 };
-function E(t) {
-  const { lightness: e, chroma: o, hue: n } = O(t), s = {};
+function H(t) {
+  const { lightness: e, chroma: a, hue: s } = j(t), n = {};
   for (const r of Object.keys(x)) {
-    const a = Math.min(1, Math.max(0, e * x[r])), i = Math.max(0, o * N[r]);
-    s[`--color-accent-${r}`] = `oklch(${(a * 100).toFixed(1)}% ${i.toFixed(3)} ${n.toFixed(1)})`;
+    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 s;
+  return n;
 }
-function q(t) {
-  const e = E(t), o = document.documentElement;
-  for (const [n, s] of Object.entries(e))
-    o.style.setProperty(n, s);
+function Q(t) {
+  const e = H(t), a = document.documentElement;
+  for (const [s, n] of Object.entries(e))
+    a.style.setProperty(s, n);
 }
-function G(t) {
+function U(t) {
   document.documentElement.style.setProperty("--button-text-color", t);
 }
 export {
-  V as AlpineButton,
-  P as AlpineIcon,
-  E as generateAccentScale,
-  H as iconSizes,
-  q as setAccentColorTheme,
-  G 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.4",
+  "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",
@@ -29,12 +33,6 @@
   "engines": {
     "node": ">=24"
   },
-  "scripts": {
-    "build": "vite build",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
-  },
   "peerDependencies": {
     "tailwindcss": "^4.1.17",
     "vue": "^3.5.25"
@@ -58,5 +56,11 @@
     "vitest": "^4.0.14",
     "vue": "^3.5.25",
     "vue-tsc": "^3.1.5"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
   }
-}
+}