@neuralytics/alpine-ds 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @neuralytics/alpine-ds
 
+## 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
+
+- 34c4f8a: Clean up the package README: add prerequisites, move the Colors section here, and remove the dead Histoire playground link.
+
 ## 0.2.3
 
 ### Patch Changes

package/README.md

@@ -4,15 +4,22 @@
 
 ## Documentation
 
-Component playground (Histoire): -
-
 Changelog: [CHANGELOG.md](./CHANGELOG.md)
 
+Component playground (Histoire): not published yet.
+
+For monorepo-level docs (setup, architecture, contribution workflow), see the [repository README](https://github.com/neuralytics/alpine-design-system#readme).
+
 ## Components already available
 
 - `AlpineButton`
 - `AlpineIcon`
 
+## Prerequisites
+
+- `vue` ^3.5.25
+- `tailwindcss` ^4.1.17
+
 ## Integration
 
 1. Install the package: `pnpm add @neuralytics/alpine-ds`
@@ -78,4 +85,18 @@ This only affects the primary button's text (not disabled or loading states) and
 import { AlpineButton } from "@neuralytics/alpine-ds"
 ```
 
-For monorepo-level docs, see the [repository README](https://github.com/neuralytics/alpine-design-system#readme).
+## Colors
+
+The Design System uses the following Tailwind colors:
+
+- `gray` (aliased to Tailwind's `neutral` scale)
+- `red`
+- `yellow` (aliased to Tailwind's `amber` scale)
+- `green`
+- `blue`
+- `accent` (required)
+
+These are the only colors available: any other Tailwind color utility (e.g. `bg-purple-500`) will not generate any CSS.
+
+Note that all colors use 10 shades: `50`, `100`, `200`, ..., `900`.
+`accent` must be provided by the consumer via `setAccentColorTheme` (see step 6 of [Integration](#integration)); the other colors already have a default value.

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/index.mjs

@@ -1,6 +1,7 @@
-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 { 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 H = ["xs", "sm", "md", "lg", "xl", "2xl"], P = /* @__PURE__ */ w({
+const q = ["xs", "sm", "md", "lg", "xl", "2xl"], S = /* @__PURE__ */ w({
+  name: "AlpineIcon",
   __name: "Icon",
   props: {
     icon: {},
@@ -9,7 +10,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 = D({
       variants: {
         size: {
           xs: "size-3",
@@ -20,145 +21,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 = _(!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", {
+      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 = {
+}), T = D({
+  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"], C = ["button", "submit", "reset"], R = ["type", "aria-label", "disabled"], O = {
   key: 1,
-  class: "flex-1 text-left truncate"
-}, V = /* @__PURE__ */ w({
+  class: "min-w-0 truncate"
+}, G = /* @__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: C[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 = 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", {
+      type: e.type,
       "aria-label": e.label ?? e.icon ?? "Button without label or icon",
-      class: L(f(o)({
+      class: L(m(T)({
         design: e.design,
         iconPosition: e.iconPosition,
         isLoading: e.isLoading,
@@ -168,17 +172,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(), k(m(S), {
         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(), y("span", O, A(s.value), 1)) : f("", !0)
+    ], 10, R));
   }
 });
-function R(t) {
+function N(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,10 +194,10 @@ 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 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);
   let h = Math.atan2(b, u) * 180 / Math.PI;
-  return h < 0 && (h += 360), { lightness: M, chroma: _, hue: h };
+  return h < 0 && (h += 360), { lightness: B, chroma: M, hue: h };
 }
 const x = {
   50: 1.4208,
@@ -206,7 +210,7 @@ const x = {
   700: 0.754,
   800: 0.6501,
   900: 0.5749
-}, N = {
+}, j = {
   50: 0.0549,
   100: 0.135,
   200: 0.262,
@@ -218,27 +222,27 @@ const x = {
   800: 0.747,
   900: 0.595
 };
-function E(t) {
-  const { lightness: e, chroma: o, hue: n } = O(t), s = {};
+function F(t) {
+  const { lightness: e, chroma: a, hue: s } = E(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 * j[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 J(t) {
+  const e = F(t), a = document.documentElement;
+  for (const [s, n] of Object.entries(e))
+    a.style.setProperty(s, n);
 }
-function G(t) {
+function K(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
+  G as AlpineButton,
+  S as AlpineIcon,
+  F as generateAccentScale,
+  q as iconSizes,
+  J as setAccentColorTheme,
+  K as setButtonTextColor
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neuralytics/alpine-ds",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "publishConfig": {
     "access": "public"
   },
@@ -29,12 +29,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 +52,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"
   }
-}
+}