@neuralytics/alpine-ds 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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"
@@ -59,26 +59,6 @@ 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
@@ -120,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

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