@neuralytics/alpine-ds 0.2.5 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @neuralytics/alpine-ds
 
+## 0.4.0
+
+### Minor Changes
+
+- 498adb8: AlpineIcon and AlpineButton's `icon` prop now uses Iconify names (e.g. `mdi:home`) instead of Tailwind CSS classes, rendered via `@iconify/vue`. Icons are limited to the `mdi` and `line-md` collections.
+- 498adb8: Merged `tailwind-tokens` into `tailwind-preset`: the `@neuralytics/alpine-ds/tailwind-tokens` entrypoint is removed. Import `content`/`theme` from `@neuralytics/alpine-ds/tailwind-preset` instead — it now exports them as named exports alongside the default preset. This was only kept separate to let consumers opt out of the icon plugin's memory usage, which no longer applies now that icons render via `@iconify/vue`.
+
+## 0.3.0
+
+### Minor Changes
+
+- f6e964d: Add `./tailwind-tokens` entrypoint exporting pure Tailwind `content`/`theme`/`iconClasses` (no `@egoist/tailwindcss-icons` dependency), so consumers that only need the theme don't load the full icon collections into memory. `./tailwind-preset` keeps its previous behavior unchanged.
+
 ## 0.2.5
 
 ### Patch Changes

package/README.md

@@ -45,7 +45,7 @@ export default defineConfig({
 @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:
+5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes:
 
 ```ts
 import type { Config } from "tailwindcss"
@@ -100,3 +100,9 @@ These are the only colors available: any other Tailwind color utility (e.g. `bg-
 
 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.
+
+## Icons
+
+`AlpineIcon` and `AlpineButton`'s `icon` prop accept [Iconify](https://iconify.design/) names from two collections only: `mdi:*` ([Material Design Icons](https://icon-sets.iconify.design/mdi/)) and `line-md:*` ([Material Line Icons](https://icon-sets.iconify.design/line-md/)). Any other collection logs a console warning and won't render.
+
+Icons are fetched on demand from the Iconify API and cached — no bundling or extra Tailwind configuration needed for icons.

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

@@ -1,7 +1,8 @@
+import { IconName } from '../icon';
 import { ButtonDesign as ButtonDesignType, ButtonIconPosition as ButtonIconPositionType, ButtonType as ButtonTypeType } from './Button.types';
 export interface ButtonProps {
     label?: string | null;
-    icon?: string | null;
+    icon?: IconName | null;
     design?: ButtonDesignType;
     isLoading?: boolean;
     isDisabled?: boolean;
@@ -10,7 +11,7 @@ export interface ButtonProps {
     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;
+    icon: IconName | null;
     isLoading: boolean;
     type: ButtonTypeType;
     design: ButtonDesignType;

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

@@ -1,2 +1,3 @@
 export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
 export type IconSize = typeof iconSizes[number];
+export type IconName = `mdi:${string}` | `line-md:${string}`;

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

@@ -1,12 +1,12 @@
-import { IconSize as IconSizeType } from './Icon.types';
+import { IconName, IconSize as IconSizeType } from './Icon.types';
 export interface IconProps {
-    icon: string;
-    hoverIcon?: string;
+    icon: IconName;
+    hoverIcon?: IconName;
     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>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,2 +1,2 @@
-export { type IconSize, iconSizes } from './Icon.types';
+export { type IconName, type IconSize, iconSizes } from './Icon.types';
 export { default as AlpineIcon, type IconProps as AlpineIconProps, } from './Icon.vue';

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

@@ -0,0 +1,2 @@
+import { IconName } from './Icon.types';
+export declare function warnIfNotAllowed(icons: (IconName | undefined)[]): void;

package/dist/constants/iconOptions.d.ts

@@ -1,15 +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";
+    readonly home: "mdi:home";
+    readonly account: "mdi:account";
+    readonly bell: "mdi:bell";
+    readonly cog: "mdi:cog";
+    readonly email: "mdi:email";
+    readonly file: "mdi:file";
+    readonly folder: "mdi:folder";
+    readonly gear: "mdi:gear";
+    readonly heart: "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";
+    value: "mdi:home" | "mdi:account" | "mdi:bell" | "mdi:cog" | "mdi:email" | "mdi:file" | "mdi:folder" | "mdi:gear" | "mdi:heart";
 }[];

package/dist/icons.d.ts

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