@neuralytics/alpine-ds 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @neuralytics/alpine-ds
 
+## 0.6.0
+
+### Minor Changes
+
+- df0d828: Add theme.css, a native Tailwind v4 CSS theme (deprecates the JS preset, which remains supported).
+
+## 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

package/README.md

@@ -38,28 +38,28 @@ export default defineConfig({
 })
 ```
 
-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):
+4. Import the design system's CSS theme in your main style file:
+
+**Without a `tailwind.config` (recommended)** — `theme.css` already handles detection of the package's classes, no `content` entry needed:
 
 ```css
 @import "tailwindcss";
-@config "./tailwind.config.ts";
+@import "@neuralytics/alpine-ds/theme.css";
 ```
 
-5. Configure Tailwind (`tailwind.config.ts`) using the design system's preset, which already handles detection of the package's classes:
+**With a `tailwind.config`** — if your project already has a `tailwind.config.ts`/`.js` (custom `theme.extend`, plugins, `content`...), keep it alongside the CSS import:
 
-```ts
-import type { Config } from "tailwindcss"
-import alpineDsPreset from "@neuralytics/alpine-ds/tailwind-preset"
-
-export default {
-  presets: [alpineDsPreset],
-  content: [
-    // ... your source files ...
-  ],
-} as Config
+```css
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+@import "@neuralytics/alpine-ds/theme.css";
 ```
 
-6. Set the accent color in your project's `main.ts`:
+Nothing needs to change in `tailwind.config.ts` itself — keep your own `theme.extend`, plugins, `content`, etc. as they are, the DS's classes and colors come entirely from `theme.css`.
+
+> Migrating from the old JS preset? Remove the `presets: [alpineDsPreset]` entry (or wherever you imported `@neuralytics/alpine-ds/tailwind-preset`) and any `content` glob you'd added just to scan `@neuralytics/alpine-ds`'s own files — both are now handled by `theme.css`. `tailwind-preset` is still published but deprecated.
+
+5. Set the accent color in your project's `main.ts`:
 
 ```js
 import { setAccentColorTheme } from "@neuralytics/alpine-ds"
@@ -69,7 +69,7 @@ setAccentColorTheme("#fe4e29")
 
 Note that this function can be called at any time. Calling it in your `main.ts` gives you a default value.
 
-7. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
+6. (Optional) Set the text color of the primary `AlpineButton` if `white` doesn't fit your accent color:
 
 ```js
 import { setButtonTextColor } from "@neuralytics/alpine-ds"
@@ -79,7 +79,7 @@ setButtonTextColor("#000000")
 
 This only affects the primary button's text (not disabled or loading states) and defaults to `white` if never called.
 
-8. Import a component in a `.vue` file
+7. Import a component in a `.vue` file
 
 ```js
 import { AlpineButton } from "@neuralytics/alpine-ds"
@@ -99,7 +99,7 @@ The Design System uses the following Tailwind colors:
 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.
+`accent` must be provided by the consumer via `setAccentColorTheme` (see step 5 of [Integration](#integration)); the other colors already have a default value.
 
 ## Icons
 

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

@@ -1,4 +1,5 @@
 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;
@@ -9,14 +10,18 @@ export interface ButtonProps {
     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<{}>, {
+    type: ButtonTypeType;
+    isDisabled: boolean;
     icon: IconName | null;
     isLoading: boolean;
-    type: ButtonTypeType;
+    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.vue.d.ts

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

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

@@ -4,6 +4,8 @@ export declare const iconMap: {
     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";
@@ -11,5 +13,5 @@ export declare const iconMap: {
 };
 export declare const iconOptions: {
     label: string;
-    value: "mdi:home" | "mdi:account" | "mdi:bell" | "mdi:cog" | "mdi:email" | "mdi:file" | "mdi:folder" | "mdi:gear" | "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/index.d.ts

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