@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/dist/store-Da3zSh8Z.d.ts

@@ -0,0 +1,457 @@
+import { I as Instance } from './types-BkS_raL8.js';
+import { Flip } from 'gsap/Flip';
+import { a3 as RevealHandle, a4 as DateInput } from './reveal-DRpNO4KP.js';
+
+interface ThemePickerOptions {
+    /** Theme ids to show, in order. Default: visible presets, or all with showHidden. */
+    themes?: string[];
+    showHidden?: boolean;
+    labels?: {
+        group?: string;
+    };
+    onChange?: (id: string) => void;
+}
+interface ThemePickerInstance extends Instance {
+    select(id: string): void;
+}
+declare function createThemePicker(root: HTMLElement | null, options?: ThemePickerOptions): ThemePickerInstance;
+
+interface ToasterLabels {
+    dismiss?: string;
+}
+interface ToasterOptions {
+    labels?: ToasterLabels;
+}
+type ToasterInstance = Instance;
+/** Render the toast list into `host` (a fixed layer at the top of the screen). */
+declare function createToaster(host: HTMLElement | null, options?: ToasterOptions): ToasterInstance;
+
+type ChatRole = 'user' | 'assistant' | 'system';
+interface ChatLabels {
+    thinking?: string;
+}
+interface ChatOptions {
+    /** Animate the messages already there when the chat starts (default: no, history stays still). */
+    animateExisting?: boolean;
+    /** Clear the input after sending (default). */
+    clearOnSend?: boolean;
+    labels?: ChatLabels;
+    onSend?: (text: string) => void;
+}
+interface ChatInstance extends Instance {
+    /** Append a plain-text message (vanilla convenience); it enters on its own. */
+    add(role: ChatRole, text: string): HTMLElement;
+    /** Show the thinking placeholder after 500 ms (a fast answer never shows it). */
+    pending(): void;
+    /** Add the answer: it morphs out of the placeholder if that was showing, else it enters. */
+    reply(message: HTMLElement | string): HTMLElement;
+    /** A confirmation bar flows in and its words rise. */
+    confirm(bar: HTMLElement): void;
+    setRecording(on: boolean): void;
+    scrollToLatest(): void;
+    /** Mark a message as already shown (a framework animates it itself). */
+    adopt(message: Element): void;
+    readonly messages: HTMLElement;
+}
+/** data-flip-id of the thinking placeholder; a framework's own placeholder must carry it. */
+declare const PENDING_ID = "mk-chat-pending";
+/** The thinking placeholder's geometry, taken before the DOM changes (for frameworks). */
+declare const capturePending: (placeholder: Element | null) => Flip.FlipState | null;
+/** Morph a captured placeholder into the reply (after the DOM shows the reply). */
+declare function morphPendingToReply(state: ReturnType<typeof Flip.getState> | null, reply: HTMLElement, scroller?: HTMLElement | null): gsap.core.Timeline | null;
+/** A message bubble element (plain text). */
+declare function chatMessage(role: ChatRole, text: string): HTMLDivElement;
+declare function createChat(root: HTMLElement | null, options?: ChatOptions): ChatInstance;
+
+declare const NAV_STYLES: readonly ["sidebar", "pills", "dock", "card", "rail", "wash", "magnify"];
+type NavStyle = (typeof NAV_STYLES)[number];
+/** The names before 0.15, still accepted: each turns into the style it always was. */
+declare const NAV_STYLE_ALIASES: {
+    readonly clasica: "sidebar";
+    readonly bonita: "pills";
+    readonly guapa: "card";
+    readonly tasks: "rail";
+    readonly melon: "wash";
+    readonly tunnel: "magnify";
+};
+type NavStyleAlias = keyof typeof NAV_STYLE_ALIASES;
+/** A style name (new or old) as one of NAV_STYLES, or undefined. */
+declare const toNavStyle: (value: unknown) => NavStyle | undefined;
+interface NavOptions {
+    /** Default: the saved one (storageKey), else the mk-nav--<style> class in the markup, else 'pills'. Old names (clasica…) work too. */
+    style?: NavStyle | NavStyleAlias;
+    /** The accent variant: the current page in primary-container. */
+    accent?: boolean;
+    /** Reveal the shell from the first button when the nav starts (off by default). */
+    reveal?: boolean;
+    /** Remember the chosen style in localStorage under this key. */
+    storageKey?: string;
+    labels?: {
+        nav?: string;
+    };
+    onSelect?: (index: number, value: string | undefined, item: HTMLElement) => void;
+}
+interface NavInstance extends Instance {
+    /** Mark a page as current, by index or value (silent: no event). */
+    select(target: number | string): void;
+    setStyle(style: NavStyle | NavStyleAlias): void;
+    setAccent(on: boolean): void;
+    readonly index: number;
+    readonly style: NavStyle;
+    readonly items: HTMLElement[];
+}
+interface NavigateDetail {
+    index: number;
+    value: string | undefined;
+    item: HTMLElement;
+    /** The click: call its preventDefault() to stop a link (single-page apps). */
+    originalEvent: MouseEvent;
+}
+/** nav entrance: the app shell is uncovered from the nav's first button. */
+declare function revealShell(nav: HTMLElement): RevealHandle | null;
+declare function createNav(root: HTMLElement | null, options?: NavOptions): NavInstance;
+
+type CursorVariant = 'chip' | 'dot';
+interface CursorOptions {
+    variant?: CursorVariant;
+    /** Where it works. chip: the document; dot: the host's parent. */
+    zone?: Element | null;
+    /** dot: the word when nothing under the pointer gives one. */
+    text?: string;
+    /** dot: arrows shown while pressed. */
+    arrows?: 'x' | 'y' | 'none';
+}
+interface CursorInstance extends Instance {
+    readonly visible: boolean;
+    readonly label: string;
+    readonly position: {
+        x: number;
+        y: number;
+    };
+    readonly tone: 'light' | 'dark';
+    /** One frame (dt = 1 at 60 Hz); the shared ticker calls it. */
+    update(dt?: number): void;
+}
+declare function createCursor(host: HTMLElement | null, options?: CursorOptions): CursorInstance;
+
+interface IslandOptions {
+    /** Drop in from above on load (true), wait for ready() ('manual') or not at all. */
+    entrance?: boolean | 'manual';
+    /** Close when the page scrolls after a wheel or touch. */
+    closeOnScroll?: boolean;
+    /** Close when a link inside a panel is followed. */
+    closeOnNavigate?: boolean;
+    /** Focus the first control of the panel that opens. */
+    focusOnOpen?: boolean;
+    /** The open panel's name, or null when it closes. */
+    onChange?: (active: string | null) => void;
+}
+interface IslandInstance extends Instance {
+    open(name?: string): void;
+    close(returnFocus?: boolean): void;
+    toggle(name?: string): void;
+    /** Play the entrance (entrance: 'manual'). */
+    ready(): void;
+    readonly active: string | null;
+}
+declare function createIsland(root: HTMLElement | null, options?: IslandOptions): IslandInstance;
+
+interface ToolbarOptions {
+    /** The chosen tool (its data-mk-tool, else its position); default: the first one. */
+    value?: string;
+    /** Default 'vertical'. */
+    orientation?: 'vertical' | 'horizontal';
+    /** The label beside the tool under the pointer or focus (default true). */
+    tips?: boolean;
+    onChange?: (value: string) => void;
+}
+interface ToolbarInstance extends Instance {
+    setValue(value: string, notify?: boolean): void;
+    readonly value: string;
+}
+declare function createToolbar(root: HTMLElement | null, options?: ToolbarOptions): ToolbarInstance;
+
+interface BidirectionalSliderOptions {
+    /** Default −100. */
+    min?: number;
+    /** Default 100. */
+    max?: number;
+    /** Where the fill starts (default 0, kept inside min…max). */
+    origin?: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+    name?: string;
+    /** Accessible name of the input. */
+    label?: string;
+    /** The end icons: − and + (default), the speaker, or none. */
+    icons?: 'signs' | 'volume' | false;
+    /** Text for the bubble and aria-valuetext (default: signed, "+24", "−12"). */
+    formatValue?: (value: number) => string;
+    onInput?: (value: number) => void;
+    onChange?: (value: number) => void;
+}
+interface BidirectionalSliderInstance extends Instance {
+    setValue(value: number, notify?: boolean): void;
+    /** Back to the origin. */
+    reset(notify?: boolean): void;
+    readonly value: number;
+}
+declare function createBidirectionalSlider(root: HTMLElement | null, options?: BidirectionalSliderOptions): BidirectionalSliderInstance;
+
+type VoiceState = 'idle' | 'listening' | 'thinking' | 'speaking';
+interface VoiceDotsOptions {
+    /** Default 'idle'. */
+    state?: VoiceState;
+    /** Dots (default 4, 3…6). */
+    count?: number;
+    /** The chart colours instead of the text colour. */
+    colorful?: boolean;
+    /** Dot size in px (default 12). */
+    size?: number;
+    /** The status text for each state. */
+    labels?: Partial<Record<VoiceState, string>>;
+}
+interface VoiceDotsInstance extends Instance {
+    setState(state: VoiceState): void;
+    readonly state: VoiceState;
+    /** The voice's level, 0…1: one for all dots or one per dot (from your own analysis). */
+    setLevel(level: number | number[]): void;
+    /** Follow a microphone stream or a playing <audio>/<video>; resolves to a function that stops following. */
+    listen(source: MediaStream | HTMLMediaElement): Promise<() => void>;
+    /** Stop following the audio (the state stays). */
+    stop(): void;
+}
+declare function createVoiceDots(root: HTMLElement | null, options?: VoiceDotsOptions): VoiceDotsInstance;
+
+interface PieSlice {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface PieChartOptions {
+    data?: PieSlice[];
+    /** Hole size as a share of the radius: 0 is a pie (default 0.62). */
+    donut?: number;
+    /** Degrees of surface between slices (default 1.5). */
+    gap?: number;
+    /** Diameter in px (default 240; it shrinks with its container). */
+    size?: number;
+    /** Accessible name (and table caption). */
+    label?: string;
+    /** The donut's middle when nothing is chosen (default 'Total'). */
+    totalLabel?: string;
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    onSelect?: (index: number | null) => void;
+}
+interface PieChartInstance extends Instance {
+    update(options: PieChartOptions): void;
+    select(index: number | null): void;
+    readonly selected: number | null;
+}
+declare function createPieChart(root: HTMLElement | null, initial?: PieChartOptions): PieChartInstance;
+
+interface RadarSeries {
+    name: string;
+    values: Array<number | null>;
+    color?: string;
+}
+interface RadarChartOptions {
+    /** The measures, clockwise from the top. */
+    axes?: string[];
+    series?: RadarSeries[];
+    /** The outer ring's value (default: the largest value, rounded up). */
+    max?: number;
+    /** Rings (default 4). */
+    levels?: number;
+    /** Ring shape (default 'polygon'). */
+    grid?: 'polygon' | 'circle';
+    /** Diameter in px (default 300; it shrinks with its container). */
+    size?: number;
+    label?: string;
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    onSelect?: (axis: number | null) => void;
+}
+interface RadarChartInstance extends Instance {
+    update(options: RadarChartOptions): void;
+    select(axis: number | null): void;
+    readonly selected: number | null;
+}
+declare function createRadarChart(root: HTMLElement | null, initial?: RadarChartOptions): RadarChartInstance;
+
+interface RadialDatum {
+    label: string;
+    value: number;
+    /** This ring's goal (default: the chart's max). */
+    max?: number;
+    color?: string;
+}
+interface RadialChartOptions {
+    /** Rings from the outside in. */
+    data?: RadialDatum[];
+    /** What a full ring is worth (default: the largest value). */
+    max?: number;
+    /** Degrees a full ring covers (default 360; 270 makes a gauge). */
+    sweep?: number;
+    /** Diameter in px (default 240). */
+    size?: number;
+    /** Ring thickness in px (default: what fits, up to 16). */
+    thickness?: number;
+    /** Discrete sectors per ring (0: continuous, default). */
+    segments?: number;
+    /** Show values (default) or progress toward the goals in the middle. */
+    center?: 'value' | 'percent';
+    label?: string;
+    /** The middle when nothing is chosen (default 'Total'). */
+    totalLabel?: string;
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    onSelect?: (index: number | null) => void;
+}
+interface RadialChartInstance extends Instance {
+    update(options: RadialChartOptions): void;
+    select(index: number | null): void;
+    readonly selected: number | null;
+}
+declare function createRadialChart(root: HTMLElement | null, initial?: RadialChartOptions): RadialChartInstance;
+
+interface SankeyNode {
+    id: string;
+    label?: string;
+    color?: string;
+}
+interface SankeyLink {
+    source: string;
+    target: string;
+    value: number;
+}
+interface SankeyChartOptions {
+    nodes?: SankeyNode[];
+    links?: SankeyLink[];
+    /** Plot height in px (default 320). */
+    height?: number;
+    /** Node width in px (default 12). */
+    nodeWidth?: number;
+    /** Space between nodes in a column, px (default 14). */
+    nodePadding?: number;
+    label?: string;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    /** A flow was chosen (its index in `links`), or none. */
+    onSelect?: (index: number | null) => void;
+}
+interface SankeyChartInstance extends Instance {
+    update(options: SankeyChartOptions): void;
+    select(index: number | null): void;
+    readonly selected: number | null;
+}
+declare function createSankeyChart(root: HTMLElement | null, initial?: SankeyChartOptions): SankeyChartInstance;
+
+interface HeatmapDatum {
+    date: DateInput;
+    value: number;
+}
+interface HeatmapChartOptions {
+    /** Values by day: a list or a { 'YYYY-MM-DD': value } map. */
+    data?: HeatmapDatum[] | Record<string, number>;
+    /** The last day shown (default: today). */
+    end?: DateInput;
+    /** Weeks shown (default 53). */
+    weeks?: number;
+    /** First day of the week, 0 Sunday … 6 Saturday (default 1, Monday). */
+    firstDay?: number;
+    locale?: string;
+    /** Coloured steps above zero (default 4). */
+    levels?: number;
+    /** The deepest step's colour (default the accent). */
+    color?: string;
+    /** What a value counts, for the tooltip (default 'actividades'). */
+    unit?: string;
+    label?: string;
+    /** The "less … more" scale (default true). */
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    onSelect?: (date: string | null, value: number | null) => void;
+}
+interface HeatmapChartInstance extends Instance {
+    update(options: HeatmapChartOptions): void;
+    /** Choose a day ('YYYY-MM-DD') or none. */
+    select(date: string | null): void;
+    readonly selected: string | null;
+}
+declare function createHeatmapChart(root: HTMLElement | null, initial?: HeatmapChartOptions): HeatmapChartInstance;
+
+interface OrbitMenuOptions {
+    /** Distance of the options from the middle, px (default 96). */
+    radius?: number;
+    /** Where the first option sits, degrees clockwise from the top (default 0). */
+    start?: number;
+    /** Close after an option is chosen (default true). */
+    closeOnSelect?: boolean;
+    onToggle?: (open: boolean) => void;
+    /** An option was chosen: its data-mk-value, else its position. */
+    onSelect?: (value: string) => void;
+}
+interface OrbitMenuInstance extends Instance {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    readonly isOpen: boolean;
+}
+declare function createOrbitMenu(root: HTMLElement | null, options?: OrbitMenuOptions): OrbitMenuInstance;
+
+type ToastTone = 'success' | 'error' | 'info' | 'neutral';
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastOptions {
+    /** The control the toast grows out of. */
+    origin?: HTMLElement | null;
+    /** ms on screen; 0 keeps it until dismissed. */
+    duration?: number;
+    tone?: ToastTone;
+    action?: ToastAction;
+    /** Show the tone's icon (default). */
+    icon?: boolean;
+}
+interface ToastItem {
+    id: number;
+    message: string;
+    origin: HTMLElement | null;
+    duration: number;
+    tone: ToastTone;
+    action: ToastAction | null;
+    icon: boolean;
+    closing: boolean;
+}
+/** At most this many live toasts; older ones leave to make room. */
+declare const TOAST_LIMIT = 5;
+declare const getToasts: () => ToastItem[];
+declare function subscribeToasts(listener: () => void): () => void;
+declare function show(message: string, { origin, duration, tone, action, icon }?: ToastOptions): number;
+/** Start the closing animation of a toast. */
+declare function dismissToast(id: number): void;
+/** Take a toast out of the list (after its exit animation). */
+declare function removeToast(id: number): void;
+/** Remove every toast at once (no animation). */
+declare function clearToasts(): void;
+/** Show a toast: `toast('Copiado', { origin: button })`. Returns its id. */
+declare const toast: typeof show & {
+    dismiss: typeof dismissToast;
+    clear: typeof clearToasts;
+};
+declare const toastTimers: {
+    start(id: number, duration: number): void;
+    pause(id: number): void;
+    resume(id: number): void;
+    clear(id: number): void;
+};
+
+export { chatMessage as $, type SankeyLink as A, type BidirectionalSliderInstance as B, type ChatInstance as C, type SankeyNode as D, type ThemePickerInstance as E, type ThemePickerOptions as F, type ToastAction as G, type HeatmapChartInstance as H, type IslandInstance as I, type ToastItem as J, type ToastOptions as K, type ToastTone as L, type ToasterInstance as M, NAV_STYLES as N, type OrbitMenuInstance as O, PENDING_ID as P, type ToasterLabels as Q, type RadarChartInstance as R, type SankeyChartInstance as S, TOAST_LIMIT as T, type ToasterOptions as U, type ToolbarInstance as V, type ToolbarOptions as W, type VoiceDotsInstance as X, type VoiceDotsOptions as Y, type VoiceState as Z, capturePending as _, type BidirectionalSliderOptions as a, clearToasts as a0, createBidirectionalSlider as a1, createChat as a2, createCursor as a3, createHeatmapChart as a4, createIsland as a5, createNav as a6, createOrbitMenu as a7, createPieChart as a8, createRadarChart as a9, createRadialChart as aa, createSankeyChart as ab, createThemePicker as ac, createToaster as ad, createToolbar as ae, createVoiceDots as af, dismissToast as ag, getToasts as ah, morphPendingToReply as ai, removeToast as aj, revealShell as ak, subscribeToasts as al, toNavStyle as am, toast as an, toastTimers as ao, type ChatLabels as b, type ChatOptions as c, type ChatRole as d, type CursorInstance as e, type CursorOptions as f, type CursorVariant as g, type HeatmapChartOptions as h, type HeatmapDatum as i, type IslandOptions as j, NAV_STYLE_ALIASES as k, type NavInstance as l, type NavOptions as m, type NavStyle as n, type NavStyleAlias as o, type NavigateDetail as p, type OrbitMenuOptions as q, type PieChartInstance as r, type PieChartOptions as s, type PieSlice as t, type RadarChartOptions as u, type RadarSeries as v, type RadialChartInstance as w, type RadialChartOptions as x, type RadialDatum as y, type SankeyChartOptions as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yewdiel21/motion-kit",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Motion toolkit for vanilla, Astro and React: GSAP recipes, accessible components, 19 themes, CSS controls and optional WebGL effects.",
   "type": "module",
   "license": "UNLICENSED",
@@ -8,15 +8,7 @@
   "bugs": {
     "url": "https://github.com/YewdielMartinez/motion-kit/issues"
   },
-  "keywords": [
-    "animation",
-    "gsap",
-    "react",
-    "astro",
-    "webgl",
-    "motion",
-    "ui"
-  ],
+  "keywords": ["animation", "gsap", "react", "astro", "webgl", "motion", "ui"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/YewdielMartinez/motion-kit.git",
@@ -77,6 +69,12 @@
     "NOTICE",
     "css.d.ts"
   ],
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "prepack": "pnpm run build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
   "peerDependencies": {
     "gsap": ">=3.13.0",
     "react": ">=18",
@@ -108,10 +106,5 @@
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
     "vitest": "4.1.11"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/build-css.mjs",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit"
   }
-}
+}