@neuralytics/alpine-ds 0.1.5 → 0.2.1

package/README.md

@@ -1,153 +1,79 @@
-# Alpine
+# @neuralytics/alpine-ds
 
-## Neuralytics - Design System
+⚠️ **Work in progress** — this design system is under active development. Expect breaking changes between minor versions until `1.0.0`.
 
-To use it correctly, you have to install some dependencies:
+## Documentation
 
-```bash
-pnpm i -D @neuralytics/alpine-ds tailwindcss autoprefixer @egoist/tailwindcss-icons
-pnpm i class-variance-authority @iconify-json/mdi
-```
+Component playground (Histoire): -
 
----
+## Components already available
 
-After that, you have to init your tailwindcss configuration:
+- `AlpineButton`
+- `AlpineIcon`
 
-```bash
-npx tailwindcss init
-```
+## Integration
 
-And add the following lines to your `tailwind.config.js`:
-***TO DO** : Export tailwind config*
+1. Install the package: `pnpm add @neuralytics/alpine-ds`
+2. Install the dependencies: `pnpm add -D tailwindcss @tailwindcss/vite`
+3. Register the Tailwind Vite plugin in your `vite.config.ts` (required for Tailwind to actually process anything — without it your styles silently stay empty):
 
-```js
-const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,ts,mdx}"],
-  theme: {
-    fontSize: {
-      sm: ["12px", "16px"],
-      base: ["14px", "20px"],
-      lg: ["16px", "24px"],
-      xl: ["18px", "28px"],
-    },
-    colors: {
-      black: "#000000",
-      white: "#ffffff",
-      transparent: "transparent",
-      inherit: "inherit",
-      // brand
-      brand: {
-        100: "color-mix(in srgb, var(--color-brand) 10%, white)",
-        200: "color-mix(in srgb, var(--color-brand) 30%, white)",
-        300: "color-mix(in srgb, var(--color-brand) 50%, white)",
-        400: "color-mix(in srgb, var(--color-brand) 70%, white)",
-        500: "var(--color-brand)",
-        600: "color-mix(in srgb, var(--color-brand), black 10%)",
-        700: "color-mix(in srgb, var(--color-brand), black 30%)",
-        800: "color-mix(in srgb, var(--color-brand), black 50%)",
-        900: "color-mix(in srgb, var(--color-brand), black 70%)",
-      },
-      // neutral
-      gray: {
-        50: "#fafafa",
-        100: "#f5f5f5",
-        200: "#e5e5e5",
-        300: "#d4d4d4",
-        400: "#a3a3a3",
-        500: "#737373",
-        600: "#525252",
-        700: "#404040",
-        800: "#262626",
-        900: "#171717",
-      },
-      // red
-      red: {
-        100: "#fee2e2",
-        200: "#fecaca",
-        300: "#fca5a5",
-        400: "#f87171",
-        500: "#ef4444",
-        600: "#dc2626",
-        700: "#b91c1c",
-        800: "#991b1b",
-        900: "#7f1d1d",
-      },// amber
-      yellow: {
-        100: "#fef3c7",
-        200: "#fde68a",
-        300: "#fcd34d",
-        400: "#fbbf24",
-        500: "#f59e0b",
-        600: "#d97706",
-        700: "#b45309",
-        800: "#92400e",
-        900: "#78350f",
-      },
-      // blue
-      blue: {
-        100: "#dbeafe",
-        200: "#bfdbfe",
-        300: "#93c5fd",
-        400: "#60a5fa",
-        500: "#3b82f6",
-        600: "#2563eb",
-        700: "#1d4ed8",
-        800: "#1e40af",
-        900: "#1e3a8a",
-      },
-      // green
-      green: {
-        100: "#dcfce7",
-        200: "#bbf7d0",
-        300: "#86efac",
-        400: "#4ade80",
-        500: "#22c55e",
-        600: "#16a34a",
-        700: "#15803d",
-        800: "#166534",
-        900: "#14532d",
-      }
-    },
-    extend: { boxShadow: { "inner-md": "inset 0px 4px 6px rgba(0, 0, 0, 0.1)", }, }
-  },
+```ts
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
   plugins: [
-    iconsPlugin({
-      // Collections: https://icones.js.org/
-      collections: getIconCollections(["mdi"]),
-    })
+    // ... your other plugins ...
+    tailwindcss(),
   ],
-}
+})
 ```
 
-Add those lines to your main css file:
+4. Import the Tailwind configuration in your main style file. The path in `@config` is relative to this CSS file — adjust it if your `tailwind.config.ts` isn't next to it (e.g. `../tailwind.config.ts` if your CSS lives in `src/` and the config is at your project root):
 
 ```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+```
+
+5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes and the icon plugin:
+
+```ts
+import type { Config } from "tailwindcss"
+import alpineDsPreset from "@neuralytics/alpine-ds/tailwind-preset"
+
+export default {
+  presets: [alpineDsPreset],
+  content: [
+    // ... your source files ...
+  ],
+} as Config
 ```
 
-and import the `@neuralytics/alpine-ds` style to your main file:
+6. Set the accent color in your project's `main.ts`:
 
 ```js
-import "@neuralytics/alpine-ds/css"
+import { setAccentColorTheme } from "@neuralytics/alpine-ds"
+
+setAccentColorTheme("#fe4e29")
 ```
 
----
+Note that this function can be called at any time. Calling it in your `main.ts` gives you a default value.
 
-To use @neuralytics/alpine-ds components, follow the examples below:
+7. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
 
 ```js
-import { AlpineButton } from "@neuralytics/alpine-ds"
+import { setButtonTextColor } from "@neuralytics/alpine-ds"
+
+setButtonTextColor("#000000")
 ```
 
-### You want more ?
+This only affects the primary button's text (not disabled or loading states) and defaults to `white` if never called.
 
-Do not worry, it's a V0 ! We are working on it to provide you more components and features.
-Thank you for your patience and your interest in our design system.
+8. Import a component in a `.vue` file
+
+```js
+import { AlpineButton } from "@neuralytics/alpine-ds"
+```
 
-Love.
-P-a ❤️
+For monorepo-level docs, see the [repository README](https://github.com/neuralytics/alpine-design-system#readme).

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

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

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

@@ -0,0 +1,19 @@
+import { ButtonDesign as ButtonDesignType, ButtonIconPosition as ButtonIconPositionType } from './Button.types';
+export interface ButtonProps {
+    label?: string | null;
+    icon?: string | null;
+    design?: ButtonDesignType;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    isDanger?: boolean;
+    iconPosition?: ButtonIconPositionType;
+}
+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;
+    design: ButtonDesignType;
+    isDisabled: boolean;
+    isDanger: boolean;
+    iconPosition: ButtonIconPositionType;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

package/dist/components/button/index.d.ts

@@ -1,9 +1,2 @@
-import { default as AlpineButton } from './AlpineButton.vue';
-import { VariantProps } from 'class-variance-authority';
-
-export declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "invisible" | null | undefined;
-    status?: "default" | "loading" | "disabled" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
-export default AlpineButton;
+export type { ButtonDesign as ButtonDesignType, ButtonIconPosition as ButtonIconPositionType } from './Button.types';
+export { default as AlpineButton, type ButtonProps as AlpineButtonProps, } from './Button.vue';

package/dist/components/icon/Icon.types.d.ts

@@ -0,0 +1,2 @@
+export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
+export type IconSize = typeof iconSizes[number];

package/dist/components/icon/Icon.vue.d.ts

@@ -0,0 +1,12 @@
+import { IconSize as IconSizeType } from './Icon.types';
+export interface IconProps {
+    icon: string;
+    hoverIcon?: string;
+    size?: IconSizeType;
+    isLoading?: boolean;
+}
+declare const _default: import('vue').DefineComponent<IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<IconProps> & Readonly<{}>, {
+    size: IconSizeType;
+    isLoading: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/icon/index.d.ts

@@ -1,8 +1,2 @@
-import { default as AlpineIcon } from './AlpineIcon.vue';
-import { VariantProps } from 'class-variance-authority';
-
-export declare const iconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export type IconVariants = VariantProps<typeof iconVariants>;
-export default AlpineIcon;
+export { type IconSize, iconSizes } from './Icon.types';
+export { default as AlpineIcon, type IconProps as AlpineIconProps, } from './Icon.vue';

package/dist/constants/iconOptions.d.ts

@@ -0,0 +1,15 @@
+export declare const iconMap: {
+    readonly home: "i-mdi-home";
+    readonly account: "i-mdi-account";
+    readonly bell: "i-mdi-bell";
+    readonly cog: "i-mdi-cog";
+    readonly email: "i-mdi-email";
+    readonly file: "i-mdi-file";
+    readonly folder: "i-mdi-folder";
+    readonly gear: "i-mdi-gear";
+    readonly heart: "i-mdi-heart";
+};
+export declare const iconOptions: {
+    label: string;
+    value: "i-mdi-home" | "i-mdi-account" | "i-mdi-bell" | "i-mdi-cog" | "i-mdi-email" | "i-mdi-file" | "i-mdi-folder" | "i-mdi-gear" | "i-mdi-heart";
+}[];

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { default as AlpineIcon } from './components/icon/AlpineIcon.vue';
-import { default as AlpineButton } from './components/button/AlpineButton.vue';
-
-export { AlpineButton, AlpineIcon };
+export * from './components/button';
+export * from './components/icon';
+export * from './utils/colors';

package/dist/index.mjs

@@ -0,0 +1,244 @@
+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({
+  __name: "Icon",
+  props: {
+    icon: {},
+    hoverIcon: {},
+    size: { default: "md" },
+    isLoading: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, o = D({
+      variants: {
+        size: {
+          xs: "size-3",
+          sm: "size-4",
+          md: "size-5",
+          lg: "size-6",
+          xl: "size-7",
+          "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)
+    }, null, 34));
+  }
+}), T = ["primary", "secondary", "invisible"], $ = ["left", "right"], A = ["aria-label", "disabled"], C = {
+  key: 1,
+  class: "flex-1 text-left truncate"
+}, V = /* @__PURE__ */ w({
+  __name: "Button",
+  props: {
+    label: {},
+    icon: { default: null },
+    design: { default: T[0] },
+    isLoading: { type: Boolean, default: !1 },
+    isDisabled: { type: Boolean, default: !1 },
+    isDanger: { type: Boolean, default: !1 },
+    iconPosition: { default: $[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", {
+      "aria-label": e.label ?? e.icon ?? "Button without label or icon",
+      class: L(f(o)({
+        design: e.design,
+        iconPosition: e.iconPosition,
+        isLoading: e.isLoading,
+        isDisabled: e.isDisabled,
+        isDanger: e.isDanger,
+        hasLabel: !!s.value
+      })),
+      disabled: e.isDisabled || e.isLoading
+    }, [
+      n.value ? (l(), k(f(P), {
+        key: 0,
+        "aria-hidden": !0,
+        icon: n.value,
+        class: "shrink-0"
+      }, null, 8, ["icon"])) : m("", !0),
+      s.value ? (l(), p("span", C, S(s.value), 1)) : m("", !0)
+    ], 10, A));
+  }
+});
+function R(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),
+    g: Number.parseInt(e[2], 16),
+    b: Number.parseInt(e[3], 16)
+  } : { r: 0, g: 0, b: 0 };
+}
+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);
+  let h = Math.atan2(b, u) * 180 / Math.PI;
+  return h < 0 && (h += 360), { lightness: M, chroma: _, hue: h };
+}
+const x = {
+  50: 1.4208,
+  100: 1.3779,
+  200: 1.314,
+  300: 1.2235,
+  400: 1.1014,
+  500: 1,
+  600: 0.8779,
+  700: 0.754,
+  800: 0.6501,
+  900: 0.5749
+}, N = {
+  50: 0.0549,
+  100: 0.135,
+  200: 0.262,
+  300: 0.481,
+  400: 0.806,
+  500: 1,
+  600: 1.034,
+  700: 0.899,
+  800: 0.747,
+  900: 0.595
+};
+function E(t) {
+  const { lightness: e, chroma: o, hue: n } = O(t), s = {};
+  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)})`;
+  }
+  return s;
+}
+function q(t) {
+  const e = E(t), o = document.documentElement;
+  for (const [n, s] of Object.entries(e))
+    o.style.setProperty(n, s);
+}
+function G(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
+};

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,89 @@
+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;

package/dist/tailwind-preset.mjs

@@ -0,0 +1,93 @@
+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)"
+    }
+  },
+  plugins: [
+    c({
+      collections: o(["mdi", "line-md"])
+    })
+  ]
+};
+export {
+  a as default
+};

package/dist/utils/colors.d.ts

@@ -0,0 +1,3 @@
+export declare function generateAccentScale(hex: string): Record<string, string>;
+export declare function setAccentColorTheme(hex: string): void;
+export declare function setButtonTextColor(hex: string): void;

package/package.json

@@ -1,55 +1,56 @@
 {
   "name": "@neuralytics/alpine-ds",
-  "description": "Neuralytics Design System, also called Alpine.",
-  "private": false,
-  "version": "0.1.5",
   "type": "module",
-  "files": [
-    "dist",
-    "src/components/"
-  ],
-  "license": "ISC",
-  "keywords": [
-    "neuralytics",
-    "alpine",
-    "design-system",
-    "vue3",
-    "vue",
-    "vuejs",
-    "tailwindcss"
-  ],
-  "main": "./dist/neuralytics-alpine-ds.umd.cjs",
-  "module": "./dist/neuralytics-alpine-ds.js",
+  "version": "0.2.1",
+  "publishConfig": {
+    "access": "public"
+  },
   "exports": {
     ".": {
-      "import": "./dist/neuralytics-alpine-ds.js",
-      "require": "./dist/neuralytics-alpine-ds.umd.cjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
     },
-    "./css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.mjs"
     }
   },
+  "main": "./dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "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"
+  },
   "dependencies": {
-    "@iconify-json/mdi": "^1.1.64",
-    "class-variance-authority": "^0.7.0",
-    "vue": "^3.4.21"
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@iconify-json/line-md": "^1.2.11",
+    "@iconify-json/mdi": "^1.2.3",
+    "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.7.4",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "autoprefixer": "^10.4.19",
-    "path": "^0.12.7",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.8.1",
-    "vue-tsc": "^2.0.6"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "jsdom": "^25.0.1",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.14",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.5"
   }
 }

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

@@ -1,48 +0,0 @@
-import { ButtonVariants } from '.';
-
-export interface Props {
-    variant?: ButtonVariants["variant"];
-    label?: string | null;
-    icon?: string | null;
-    iconPosition?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-}
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    variant: string;
-    label: null;
-    icon: null;
-    iconPosition: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clicked: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    variant: string;
-    label: null;
-    icon: null;
-    iconPosition: string;
-}>>> & {
-    onClicked?: ((...args: any[]) => any) | undefined;
-}, {
-    label: string | null;
-    variant: "primary" | "secondary" | "invisible" | null;
-    icon: string | null;
-    iconPosition: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/components/icon/AlpineIcon.vue.d.ts

@@ -1,43 +0,0 @@
-import { IconVariants } from '.';
-
-export interface Props {
-    size?: IconVariants["size"];
-    icon: string;
-    hoverIcon?: string | null;
-    color?: string;
-    hoverColor?: string | null;
-}
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    size: string;
-    hoverIcon: null;
-    color: string;
-    hoverColor: null;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    size: string;
-    hoverIcon: null;
-    color: string;
-    hoverColor: null;
-}>>>, {
-    size: "sm" | "md" | "lg" | null;
-    hoverIcon: string | null;
-    color: string;
-    hoverColor: string | null;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/main.d.ts

@@ -1 +0,0 @@
-

package/dist/neuralytics-alpine-ds.js

@@ -1,165 +0,0 @@
-import { defineComponent as x, ref as j, computed as f, openBlock as c, createElementBlock as h, normalizeClass as V, unref as z, createBlock as g, createCommentVNode as y, toDisplayString as L } from "vue";
-function A(t) {
-  var n, e, a = "";
-  if (typeof t == "string" || typeof t == "number")
-    a += t;
-  else if (typeof t == "object")
-    if (Array.isArray(t))
-      for (n = 0; n < t.length; n++)
-        t[n] && (e = A(t[n])) && (a && (a += " "), a += e);
-    else
-      for (n in t)
-        t[n] && (a && (a += " "), a += n);
-  return a;
-}
-function P() {
-  for (var t, n, e = 0, a = ""; e < arguments.length; )
-    (t = arguments[e++]) && (n = A(t)) && (a && (a += " "), a += n);
-  return a;
-}
-const C = (t) => typeof t == "boolean" ? "".concat(t) : t === 0 ? "0" : t, w = P, B = (t, n) => (e) => {
-  var a;
-  if ((n == null ? void 0 : n.variants) == null)
-    return w(t, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
-  const { variants: l, defaultVariants: s } = n, r = Object.keys(l).map((i) => {
-    const u = e == null ? void 0 : e[i], v = s == null ? void 0 : s[i];
-    if (u === null)
-      return null;
-    const d = C(u) || C(v);
-    return l[i][d];
-  }), o = e && Object.entries(e).reduce((i, u) => {
-    let [v, d] = u;
-    return d === void 0 || (i[v] = d), i;
-  }, {}), p = n == null || (a = n.compoundVariants) === null || a === void 0 ? void 0 : a.reduce((i, u) => {
-    let { class: v, className: d, ...I } = u;
-    return Object.entries(I).every((N) => {
-      let [k, m] = N;
-      return Array.isArray(m) ? m.includes({
-        ...s,
-        ...o
-      }[k]) : {
-        ...s,
-        ...o
-      }[k] === m;
-    }) ? [
-      ...i,
-      v,
-      d
-    ] : i;
-  }, []);
-  return w(t, r, p, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
-}, D = B(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-base font-medium transition-all ease-out duration-200 active:shadow-inner-md outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-500 focus-visible:outline-offset-2",
-  {
-    variants: {
-      variant: {
-        primary: "text-white bg-brand-500 hover:bg-brand-600 h-9 px-4 gap-2 hover:shadow",
-        secondary: "text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-300 h-9 px-4 gap-2 hover:shadow",
-        invisible: "text-gray-900 hover:bg-gray-200 p-2 gap-2"
-      },
-      status: {
-        default: "",
-        loading: "cursor-wait hover:shadow-none active:shadow-none",
-        disabled: "cursor-not-allowed hover:shadow-none active:shadow-none"
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "primary",
-        status: ["loading", "disabled"],
-        class: "!bg-gray-200 hover:!bg-gray-200 !text-gray-500"
-      },
-      {
-        variant: "secondary",
-        status: ["loading", "disabled"],
-        class: "!text-gray-400 hover:!bg-gray-50"
-      },
-      {
-        variant: "invisible",
-        status: ["loading", "disabled"],
-        class: "!text-gray-400 hover:!bg-gray-100"
-      }
-    ],
-    defaultVariants: {
-      variant: "primary",
-      status: "default"
-    }
-  }
-), O = B(
-  "",
-  {
-    variants: {
-      size: {
-        sm: "text-[20px]",
-        md: "text-[24px]",
-        lg: "text-[28px]"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), b = /* @__PURE__ */ x({
-  __name: "AlpineIcon",
-  props: {
-    size: { default: "md" },
-    icon: {},
-    hoverIcon: { default: null },
-    color: { default: "text-neutral-900" },
-    hoverColor: { default: null }
-  },
-  setup(t) {
-    const n = t, e = j(!1), a = f(() => e.value && n.hoverColor ? n.hoverColor : n.color), l = f(() => e.value && n.hoverIcon ? n.hoverIcon : n.icon);
-    return (s, r) => (c(), h("span", {
-      class: V([l.value, a.value, z(O)({ size: n.size })]),
-      onMouseover: r[0] || (r[0] = (o) => e.value = !0),
-      onMouseleave: r[1] || (r[1] = (o) => e.value = !1)
-    }, null, 34));
-  }
-}), S = {
-  key: 2,
-  class: "leading-none"
-}, M = /* @__PURE__ */ x({
-  __name: "AlpineButton",
-  props: {
-    variant: { default: "primary" },
-    label: { default: null },
-    icon: { default: null },
-    iconPosition: { default: "left" },
-    isLoading: { type: Boolean },
-    isDisabled: { type: Boolean }
-  },
-  emits: ["clicked"],
-  setup(t, { emit: n }) {
-    const e = t, a = n, l = f(() => e.isLoading ? "loading" : e.isDisabled ? "disabled" : "default"), s = f(() => ({
-      variant: e.variant,
-      status: l.value
-    }));
-    function r() {
-      e.isLoading || e.isDisabled || a("clicked");
-    }
-    return (o, p) => (c(), h("button", {
-      class: V(z(D)(s.value)),
-      onClick: r
-    }, [
-      o.isLoading ? (c(), g(b, {
-        key: 0,
-        icon: "i-mdi-loading",
-        class: "animate-spin",
-        size: "sm"
-      })) : o.icon && o.iconPosition === "left" ? (c(), g(b, {
-        key: 1,
-        icon: o.icon,
-        size: "sm"
-      }, null, 8, ["icon"])) : y("", !0),
-      o.label ? (c(), h("span", S, L(o.label), 1)) : y("", !0),
-      !o.isLoading && o.icon && o.iconPosition === "right" ? (c(), g(b, {
-        key: 3,
-        icon: o.icon,
-        size: "sm"
-      }, null, 8, ["icon"])) : y("", !0)
-    ], 2));
-  }
-});
-export {
-  M as AlpineButton,
-  b as AlpineIcon
-};

package/dist/neuralytics-alpine-ds.umd.cjs

@@ -1 +0,0 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.NeuralyticsAlpineDS={},r.Vue))})(this,function(r,n){"use strict";function g(o){var t,e,a="";if(typeof o=="string"||typeof o=="number")a+=o;else if(typeof o=="object")if(Array.isArray(o))for(t=0;t<o.length;t++)o[t]&&(e=g(o[t]))&&(a&&(a+=" "),a+=e);else for(t in o)o[t]&&(a&&(a+=" "),a+=t);return a}function B(){for(var o,t,e=0,a="";e<arguments.length;)(o=arguments[e++])&&(t=g(o))&&(a&&(a+=" "),a+=t);return a}const b=o=>typeof o=="boolean"?"".concat(o):o===0?"0":o,p=B,h=(o,t)=>e=>{var a;if((t==null?void 0:t.variants)==null)return p(o,e==null?void 0:e.class,e==null?void 0:e.className);const{variants:c,defaultVariants:s}=t,d=Object.keys(c).map(l=>{const u=e==null?void 0:e[l],m=s==null?void 0:s[l];if(u===null)return null;const f=b(u)||b(m);return c[l][f]}),i=e&&Object.entries(e).reduce((l,u)=>{let[m,f]=u;return f===void 0||(l[m]=f),l},{}),k=t==null||(a=t.compoundVariants)===null||a===void 0?void 0:a.reduce((l,u)=>{let{class:m,className:f,...N}=u;return Object.entries(N).every(A=>{let[C,y]=A;return Array.isArray(y)?y.includes({...s,...i}[C]):{...s,...i}[C]===y})?[...l,m,f]:l},[]);return p(o,d,k,e==null?void 0:e.class,e==null?void 0:e.className)},V=h("inline-flex items-center justify-center whitespace-nowrap rounded-lg text-base font-medium transition-all ease-out duration-200 active:shadow-inner-md outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-500 focus-visible:outline-offset-2",{variants:{variant:{primary:"text-white bg-brand-500 hover:bg-brand-600 h-9 px-4 gap-2 hover:shadow",secondary:"text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-300 h-9 px-4 gap-2 hover:shadow",invisible:"text-gray-900 hover:bg-gray-200 p-2 gap-2"},status:{default:"",loading:"cursor-wait hover:shadow-none active:shadow-none",disabled:"cursor-not-allowed hover:shadow-none active:shadow-none"}},compoundVariants:[{variant:"primary",status:["loading","disabled"],class:"!bg-gray-200 hover:!bg-gray-200 !text-gray-500"},{variant:"secondary",status:["loading","disabled"],class:"!text-gray-400 hover:!bg-gray-50"},{variant:"invisible",status:["loading","disabled"],class:"!text-gray-400 hover:!bg-gray-100"}],defaultVariants:{variant:"primary",status:"default"}}),w=h("",{variants:{size:{sm:"text-[20px]",md:"text-[24px]",lg:"text-[28px]"}},defaultVariants:{size:"md"}}),v=n.defineComponent({__name:"AlpineIcon",props:{size:{default:"md"},icon:{},hoverIcon:{default:null},color:{default:"text-neutral-900"},hoverColor:{default:null}},setup(o){const t=o,e=n.ref(!1),a=n.computed(()=>e.value&&t.hoverColor?t.hoverColor:t.color),c=n.computed(()=>e.value&&t.hoverIcon?t.hoverIcon:t.icon);return(s,d)=>(n.openBlock(),n.createElementBlock("span",{class:n.normalizeClass([c.value,a.value,n.unref(w)({size:t.size})]),onMouseover:d[0]||(d[0]=i=>e.value=!0),onMouseleave:d[1]||(d[1]=i=>e.value=!1)},null,34))}}),x={key:2,class:"leading-none"},z=n.defineComponent({__name:"AlpineButton",props:{variant:{default:"primary"},label:{default:null},icon:{default:null},iconPosition:{default:"left"},isLoading:{type:Boolean},isDisabled:{type:Boolean}},emits:["clicked"],setup(o,{emit:t}){const e=o,a=t,c=n.computed(()=>e.isLoading?"loading":e.isDisabled?"disabled":"default"),s=n.computed(()=>({variant:e.variant,status:c.value}));function d(){e.isLoading||e.isDisabled||a("clicked")}return(i,k)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass(n.unref(V)(s.value)),onClick:d},[i.isLoading?(n.openBlock(),n.createBlock(v,{key:0,icon:"i-mdi-loading",class:"animate-spin",size:"sm"})):i.icon&&i.iconPosition==="left"?(n.openBlock(),n.createBlock(v,{key:1,icon:i.icon,size:"sm"},null,8,["icon"])):n.createCommentVNode("",!0),i.label?(n.openBlock(),n.createElementBlock("span",x,n.toDisplayString(i.label),1)):n.createCommentVNode("",!0),!i.isLoading&&i.icon&&i.iconPosition==="right"?(n.openBlock(),n.createBlock(v,{key:3,icon:i.icon,size:"sm"},null,8,["icon"])):n.createCommentVNode("",!0)],2))}});r.AlpineButton=z,r.AlpineIcon=v,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +0,0 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e5e5}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#a3a3a3}input::placeholder,textarea::placeholder{opacity:1;color:#a3a3a3}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--color-brand: #fe4e29}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.i-mdi-loading{display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8'/%3E%3C/svg%3E")}.invisible{visibility:hidden}.inline-flex{display:inline-flex}.h-9{height:2.25rem}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-wait{cursor:wait}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.whitespace-nowrap{white-space:nowrap}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity))}.\!bg-gray-200{--tw-bg-opacity: 1 !important;background-color:rgb(229 229 229 / var(--tw-bg-opacity))!important}.bg-brand-500{background-color:var(--color-brand)}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-\[20px\]{font-size:20px}.text-\[24px\]{font-size:24px}.text-\[28px\]{font-size:28px}.text-base{font-size:14px;line-height:20px}.font-medium{font-weight:500}.leading-none{line-height:1}.\!text-gray-400{--tw-text-opacity: 1 !important;color:rgb(163 163 163 / var(--tw-text-opacity))!important}.\!text-gray-500{--tw-text-opacity: 1 !important;color:rgb(115 115 115 / var(--tw-text-opacity))!important}.text-gray-900{--tw-text-opacity: 1;color:rgb(23 23 23 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}html{font-size:16px}.hover\:\!bg-gray-100:hover{--tw-bg-opacity: 1 !important;background-color:rgb(245 245 245 / var(--tw-bg-opacity))!important}.hover\:\!bg-gray-200:hover{--tw-bg-opacity: 1 !important;background-color:rgb(229 229 229 / var(--tw-bg-opacity))!important}.hover\:\!bg-gray-50:hover{--tw-bg-opacity: 1 !important;background-color:rgb(250 250 250 / var(--tw-bg-opacity))!important}.hover\:bg-brand-600:hover{background-color:color-mix(in srgb,var(--color-brand),black 10%)}.hover\:bg-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity))}.hover\:shadow:hover{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-brand-500:focus-visible{outline-color:var(--color-brand)}.active\:shadow-inner-md:active{--tw-shadow: inset 0px 4px 6px rgba(0, 0, 0, .1);--tw-shadow-colored: inset 0px 4px 6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.active\:shadow-none:active{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}

package/src/components/button/AlpineButton.vue

@@ -1,66 +0,0 @@
-<template>
-  <button
-    :class="buttonVariants(cva)"
-    @click="handleClick">
-    <Icon
-      v-if="isLoading"
-      :icon="'i-mdi-loading'"
-      class="animate-spin"
-      size="sm" />
-    <Icon
-      v-else-if="icon && iconPosition === 'left'"
-      :icon="icon"
-      size="sm" />
-    <span
-      v-if="label"
-      class="leading-none">
-      {{ label }}
-    </span>
-    <Icon
-      v-if="!isLoading && (icon && iconPosition === 'right')"
-      :icon="icon"
-      size="sm" />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { buttonVariants, type ButtonVariants } from "."
-import { computed, ComputedRef } from "vue"
-import Icon from "../icon/AlpineIcon.vue"
-
-export interface Props {
-  variant?: ButtonVariants["variant"],
-  label?: string | null,
-  icon?: string | null,
-  iconPosition?: string,
-  isLoading?: boolean,
-  isDisabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: "primary",
-  label: null,
-  icon: null,
-  iconPosition: "left"
-})
-
-const emit = defineEmits(["clicked"])
-
-const currentStatus = computed(() => {
-  if (props.isLoading) return "loading"
-  if (props.isDisabled) return "disabled"
-  return "default"
-})
-
-const cva: ComputedRef<ButtonVariants> = computed(() => {
-  return {
-    variant: props.variant,
-    status: currentStatus.value
-  }
-})
-
-function handleClick() {
-  if (props.isLoading || props.isDisabled) return
-  emit("clicked")
-}
-</script>

package/src/components/button/index.ts

@@ -1,44 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import AlpineButton from "./AlpineButton.vue"
-
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-base font-medium transition-all ease-out duration-200 active:shadow-inner-md outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-500 focus-visible:outline-offset-2",
-  {
-    variants: {
-      variant: {
-        primary: "text-white bg-brand-500 hover:bg-brand-600 h-9 px-4 gap-2 hover:shadow",
-        secondary: "text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-300 h-9 px-4 gap-2 hover:shadow",
-        invisible: "text-gray-900 hover:bg-gray-200 p-2 gap-2",
-      },
-      status: {
-        default: "",
-        loading: "cursor-wait hover:shadow-none active:shadow-none",
-        disabled: "cursor-not-allowed hover:shadow-none active:shadow-none",
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "primary",
-        status: ["loading", "disabled"],
-        class: "!bg-gray-200 hover:!bg-gray-200 !text-gray-500"
-      },
-      {
-        variant: "secondary",
-        status: ["loading", "disabled"],
-        class: "!text-gray-400 hover:!bg-gray-50"
-      },
-      {
-        variant: "invisible",
-        status: ["loading", "disabled"],
-        class: "!text-gray-400 hover:!bg-gray-100"
-      }
-    ],
-    defaultVariants: {
-      variant: "primary",
-      status: "default"
-    },
-  },
-)
-export type ButtonVariants = VariantProps<typeof buttonVariants>
-
-export default AlpineButton

package/src/components/icon/AlpineIcon.vue

@@ -1,30 +0,0 @@
-<template>
-  <span
-    :class="[displayedIcon, iconColor, iconVariants({ size: props.size })]"
-    @mouseover="isHoverIcon = true"
-    @mouseleave="isHoverIcon = false" />
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue"
-import { type IconVariants, iconVariants } from "."
-
-export interface Props {
-  size?: IconVariants["size"],
-  icon: string,
-  hoverIcon?: string | null,
-  color?: string,
-  hoverColor?: string | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: "md",
-  hoverIcon: null,
-  color: "text-neutral-900",
-  hoverColor: null
-})
-
-const isHoverIcon = ref(false)
-const iconColor = computed(() => isHoverIcon.value && props.hoverColor ? props.hoverColor : props.color)
-const displayedIcon = computed(() => isHoverIcon.value && props.hoverIcon ? props.hoverIcon : props.icon)
-</script>

package/src/components/icon/index.ts

@@ -1,19 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import AlpineIcon from "./AlpineIcon.vue"
-
-export const iconVariants = cva(
-  "",
-  {
-    variants: {
-      size: {
-        sm: "text-[20px]",
-        md: "text-[24px]",
-        lg: "text-[28px]",
-      }
-    },
-    defaultVariants: { size: "md" },
-  },
-)
-
-export type IconVariants = VariantProps<typeof iconVariants>
-export default AlpineIcon