@neuralytics/alpine-ds 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @neuralytics/alpine-ds
 
+## 0.5.0
+
+### Minor Changes
+
+- afbad30: Add AlpineTooltip component: hover/focus-triggered tooltip built on the internal FloatingLayer primitive, with placement, openDelay and isDisabled props.
+
+### Patch Changes
+
+- 4dcf040: Add internal FloatingLayer positioning primitive (Teleport + floating-ui/dom, with an optional arrow slot and configurable z-index) used to build upcoming floating components — no public API change.
+- 9d5a342: Add tooltip and tooltip-position props to AlpineIcon, and disabled-tooltip and tooltip-position props to AlpineButton, built on the AlpineTooltip component.
+
+## 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,21 +1,27 @@
+import { IconName } from '../icon';
+import { TooltipPlacement } from '../tooltip/Tooltip.types';
 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;
     isDanger?: boolean;
     iconPosition?: ButtonIconPositionType;
     type?: ButtonTypeType;
+    disabledTooltip?: string;
+    tooltipPosition?: TooltipPlacement;
 }
 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;
+    isDisabled: boolean;
+    icon: IconName | null;
+    isLoading: boolean;
+    tooltipPosition: TooltipPlacement;
     design: ButtonDesignType;
     isDanger: boolean;
-    isDisabled: boolean;
     iconPosition: ButtonIconPositionType;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+    disabledTooltip: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/floating-layer/FloatingLayer.types.d.ts

@@ -0,0 +1,18 @@
+import { VirtualElement } from '@floating-ui/dom';
+export declare const Placement: {
+    readonly Top: "top";
+    readonly Right: "right";
+    readonly Bottom: "bottom";
+    readonly Left: "left";
+};
+export type FloatingLayerPlacement = typeof Placement[keyof typeof Placement];
+export declare const floatingLayerPlacements: ("left" | "right" | "top" | "bottom")[];
+export interface FloatingLayerProps {
+    referenceElement: HTMLElement | VirtualElement | null;
+    isOpen: boolean;
+    placement?: FloatingLayerPlacement;
+    zIndex?: number;
+}
+export interface FloatingLayerSlotProps {
+    placement: FloatingLayerPlacement;
+}

package/dist/components/floating-layer/FloatingLayer.vue.d.ts

@@ -0,0 +1,30 @@
+import { FloatingLayerPlacement, FloatingLayerProps } from './FloatingLayer.types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            placement: FloatingLayerPlacement;
+        }): any;
+        arrow?(_: {}): any;
+    };
+    refs: {
+        floatingElement: HTMLDivElement;
+        arrowElement: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<FloatingLayerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FloatingLayerProps> & Readonly<{}>, {
+    placement: FloatingLayerPlacement;
+    zIndex: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    floatingElement: HTMLDivElement;
+    arrowElement: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/floating-layer/index.d.ts

@@ -0,0 +1,2 @@
+export type { FloatingLayerPlacement, FloatingLayerProps, FloatingLayerSlotProps, } from './FloatingLayer.types';
+export { default as FloatingLayer } from './FloatingLayer.vue';

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,16 @@
-import { IconSize as IconSizeType } from './Icon.types';
+import { TooltipPlacement } from '../tooltip/Tooltip.types';
+import { IconName, IconSize as IconSizeType } from './Icon.types';
 export interface IconProps {
-    icon: string;
-    hoverIcon?: string;
+    icon: IconName;
+    hoverIcon?: IconName;
     size?: IconSizeType;
     isLoading?: boolean;
+    tooltip?: string;
+    tooltipPosition?: TooltipPlacement;
 }
 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>;
+    tooltipPosition: TooltipPlacement;
+}, {}, {}, {}, 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/components/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,9 @@
+import { FloatingLayerPlacement, Placement } from '../floating-layer/FloatingLayer.types';
+export type { FloatingLayerPlacement as TooltipPlacement };
+export { Placement };
+export interface TooltipProps {
+    label?: string;
+    placement?: FloatingLayerPlacement;
+    openDelay?: number;
+    isDisabled?: boolean;
+}

package/dist/components/tooltip/Tooltip.vue.d.ts

@@ -0,0 +1,26 @@
+import { TooltipProps } from './Tooltip.types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        triggerWrapper: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    placement: import('./Tooltip.types').TooltipPlacement;
+    openDelay: number;
+    isDisabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    triggerWrapper: HTMLDivElement;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,2 @@
+export type { TooltipProps as AlpineTooltipProps, TooltipPlacement } from './Tooltip.types';
+export { default as AlpineTooltip } from './Tooltip.vue';

package/dist/constants/iconOptions.d.ts

@@ -1,15 +1,17 @@
 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 eyeClosed: "mdi:eye-off";
+    readonly eyeOpen: "mdi:eye";
+    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:eye-off" | "mdi:eye" | "mdi:file" | "mdi:folder" | "mdi:gear" | "mdi:heart";
 }[];

package/dist/constants/zIndex.d.ts

@@ -0,0 +1,4 @@
+export declare const Z_INDEX: {
+    readonly default: 1000;
+    readonly tooltip: 5000;
+};

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";
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components/button';
 export * from './components/icon';
+export * from './components/tooltip';
 export * from './utils/colors';