nuance-ui 0.2.6 → 0.2.8

package/dist/runtime/modals/modal-manager.js

@@ -3,9 +3,9 @@ const GLOBAL_KEY = "__nui_modal_manager__";
 export class ModalManager {
   /** Reactive map of active modals */
   modals = reactive(/* @__PURE__ */ new Map());
-  /** Eagerly registered components (id → Component) */
+  /** Eagerly registered components */
   #registered = /* @__PURE__ */ new Map();
-  /** Lazily registered loaders (id → loader) */
+  /** Lazily registered loaders */
   #lazy = /* @__PURE__ */ new Map();
   constructor() {
   }
@@ -15,49 +15,29 @@ export class ModalManager {
       globalThis[GLOBAL_KEY] = new ModalManager();
     return globalThis[GLOBAL_KEY];
   }
-  /**
-   * Registers a modal component and returns a typed function to open it.
-   */
+  /** Registers a modal component and returns a typed opener function. */
   create(id, component) {
     this.#registered.set(id, component);
     return (props) => this.#show(id, props ?? {});
   }
-  /**
-   * Registers a lazy modal — the component is loaded on first open.
-   */
+  /** Registers a lazy modal. The component is loaded on first open. */
   createLazy(id, loader) {
     this.#lazy.set(id, loader);
     return (props) => this.#show(id, props ?? {});
   }
-  /**
-   * Opens a previously registered modal by its identifier.
-   */
+  /** Opens a previously registered modal by its identifier. */
   async show(id, props = {}) {
     return this.#show(id, props);
   }
-  /**
-   * Closes the modal and resolves its promise with the given result.
-   *
-   * @param id     — modal identifier
-   * @param result — value the promise resolves with
-   */
+  /** Closes the modal and resolves its promise with the given result. */
   resolve(id, result) {
     this.#resolve(id, result);
   }
-  /**
-   * Closes the modal and rejects its promise with the given reason.
-   *
-   * @param id     — modal identifier
-   * @param reason — rejection reason
-   */
+  /** Closes the modal and rejects its promise with the given reason. */
   reject(id, reason) {
     this.#reject(id, reason);
   }
-  /**
-   * Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
-   *
-   * Used inside a modal component (via {@link useModal}).
-   */
+  /** Returns the reactive state of a specific modal. */
   state(id) {
     return this.modals.get(id);
   }

package/dist/runtime/modals/modals-provider.d.vue.ts

@@ -1,9 +1,3 @@
-import type { ModalManager } from './modal-manager.js';
-type __VLS_Props = {
-    manager?: ModalManager;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    manager: import("vue").Raw<ModalManager>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/modals/modals-provider.vue

@@ -1,22 +1,16 @@
 <script setup>
 import { $modals } from "./modal-manager";
-defineProps({
-  manager: { type: Object, required: false }
-});
-defineExpose({
-  manager: $modals
-});
 </script>
 
 <template>
-	<ClientOnly>
-		<div id='nui-modals-root'>
-			<component
-				:is='entry.component'
-				v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
-				:key='id'
-				v-bind='entry.props'
-			/>
-		</div>
-	</ClientOnly>
+	<ClientOnly>
+		<div id='nui-modals-root'>
+			<component
+				:is='entry.component'
+				v-for='[id, entry] in $modals.modals'
+				:key='id'
+				v-bind='entry.props'
+			/>
+		</div>
+	</ClientOnly>
 </template>

package/dist/runtime/modals/modals-provider.vue.d.ts

@@ -1,9 +1,3 @@
-import type { ModalManager } from './modal-manager.js';
-type __VLS_Props = {
-    manager?: ModalManager;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    manager: import("vue").Raw<ModalManager>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/modals/use-modal.d.ts

@@ -1,13 +1,7 @@
 /**
- * Composable for use inside a modal component.
- * Binds the component to {@link ModalManager} by identifier.
+ * Binds a modal component to the global modal manager by identifier.
  *
- * @example
- * ```ts
- * const { opened, resolve } = useModal<MyProps, string>('my-modal')
- * // template: <ModalRoot v-model:open="opened">
- * // on confirm: resolve('ok')
- * ```
+ * The `id` must match the one passed to `$modals.create()`.
  */
 export declare function useModal<Props extends Record<string, unknown> = Record<string, unknown>, Resolve = unknown, Reject = unknown>(
 /**
@@ -16,13 +10,10 @@ export declare function useModal<Props extends Record<string, unknown> = Record<
  * must match the `id` passed to `$modals.create()`
  */
 id: string): {
-    /**
-     * Two-way binding for `v-model:open`.
-     *
-     * Setting to `true` reopens the modal, setting to `false` calls `reject`
-     */
+    /** Two-way binding for `v-model:open`. Setting to `false` rejects the promise. */
     opened: import("vue").WritableComputedRef<boolean, boolean>;
-    /** closes the modal and resolves the promise */
+    /** Closes the modal and resolves its promise with the given value. */
     resolve: (reason: Resolve) => void;
+    /** Closes the modal and rejects its promise. */
     reject: () => void;
 };

package/dist/runtime/modals/use-modal.js

@@ -9,14 +9,11 @@ export function useModal(id) {
   if (!state)
     throw new Error(`Modal ${id} is not exist`);
   return {
-    /**
-     * Two-way binding for `v-model:open`.
-     *
-     * Setting to `true` reopens the modal, setting to `false` calls `reject`
-     */
+    /** Two-way binding for `v-model:open`. Setting to `false` rejects the promise. */
     opened,
-    /** closes the modal and resolves the promise */
+    /** Closes the modal and resolves its promise with the given value. */
     resolve: (reason) => $modals.resolve(id, reason),
+    /** Closes the modal and rejects its promise. */
     reject: () => $modals.reject(id)
   };
 }

package/dist/runtime/types/index.d.ts

@@ -1,3 +1,5 @@
 export type * from './theme';
+/** Map of component part names to user-provided class names. */
 export type Classes<Key extends string, Value = string | string[]> = Partial<Record<Key, Value>>;
+/** Value that may be synchronous or wrapped in a promise. */
 export type MaybePromise<T = unknown> = T | Promise<T>;

package/dist/runtime/types/theme.d.ts

@@ -1,3 +1,4 @@
+/** Standard Nuance size token. */
 export type NuanceSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type NuanceBreakpointsValues = Record<NuanceSize | 'base', string>;
 export type NuanceFontSizesValues = Record<NuanceSize, string>;
@@ -11,15 +12,23 @@ export type NuanceRadius = keyof NuanceRadiusValues | number;
 export type NuanceSpacing = keyof NuanceSpacingValues | number;
 export type NuanceShadow = keyof NuanceShadowsValues;
 export type NuanceLineHeight = keyof NuanceLineHeightValues;
+/** Numeric shade index within a color palette, from lightest (0) to darkest (9). */
 export type NuanceColorShade = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `gray.${NuanceColorShade}` | `red.${NuanceColorShade}` | `pink.${NuanceColorShade}` | `grape.${NuanceColorShade}` | `violet.${NuanceColorShade}` | `indigo.${NuanceColorShade}` | `blue.${NuanceColorShade}` | `cyan.${NuanceColorShade}` | `green.${NuanceColorShade}` | `lime.${NuanceColorShade}` | `yellow.${NuanceColorShade}` | `orange.${NuanceColorShade}` | `teal.${NuanceColorShade}` | `primary.${NuanceColorShade}`;
 export type NuanceDefaultThemeColor = 'dark' | 'slate' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white' | 'primary';
+/** Theme color token, optionally suffixed with a shade (e.g. `blue.6`). */
 export type NuanceColor = NuanceDefaultThemeColor | ShadedColor;
+/** Resolved color scheme currently applied to the document. */
 export type NuanceTheme = 'light' | 'dark';
+/** Linear gradient definition. */
 export interface NuanceGradient {
+    /** Fallback background color rendered behind the gradient. */
     bg?: NuanceColor | string;
+    /** Start color. */
     from: NuanceColor | string;
+    /** End color. */
     to: NuanceColor | string;
+    /** Gradient angle in degrees. */
     deg?: number;
 }
 export {};

package/dist/runtime/utils/boolean/index.d.ts

@@ -0,0 +1,2 @@
+export * from './is-falsy.js';
+export * from './is-number-like.js';

package/dist/runtime/utils/boolean/index.js

@@ -0,0 +1,2 @@
+export * from "./is-falsy.js";
+export * from "./is-number-like.js";

package/dist/runtime/utils/boolean/is-falsy.d.ts

@@ -1 +1,7 @@
+/**
+ * Checks whether a value is considered falsy.
+ *
+ * Extends the JavaScript notion of falsiness so that empty arrays and empty
+ * plain objects also count as falsy.
+ */
 export declare function isFalsy(value: unknown): boolean;

package/dist/runtime/utils/boolean/is-number-like.d.ts

@@ -1 +1,9 @@
+/**
+ * Checks whether a value can be treated as a CSS length-like value.
+ *
+ * Returns `true` for numbers, strings with a known CSS unit (`px`, `rem`,
+ * `em`, viewport units, container query units, `%`, ...), `calc(...)`,
+ * `var(...)` expressions, and whitespace-separated lists where every token
+ * passes the same check.
+ */
 export declare function isNumberLike(value: unknown): boolean;

package/dist/runtime/{const/index.d.ts → utils/color/const.d.ts}

@@ -1,2 +1,3 @@
 import type { NuanceGradient } from '@nui/types';
+/** Fallback gradient used when a component does not provide its own. */
 export declare const DEFAULT_GRADIENT: NuanceGradient;

package/dist/runtime/utils/{color-functions → color}/get-color-var.d.ts

@@ -1,2 +1,5 @@
 import type { NuanceColor, NuanceColorShade } from '@nui/types';
+/**
+ * Returns the CSS `var(...)` reference for a theme color.
+ */
 export declare function getColorVar(color: NuanceColor, shade?: NuanceColorShade): string;

package/dist/runtime/utils/color/get-gradient.d.ts

@@ -0,0 +1,15 @@
+import type { NuanceGradient, NuanceTheme } from '@nui/types';
+/**
+ * Builds a `linear-gradient(...)` CSS value from a NuanceGradient descriptor.
+ *
+ * Missing fields fall back to `DEFAULT_GRADIENT`.
+ */
+export declare function getGradient(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;
+/**
+ * Builds a two-layer gradient that renders a solid background with a colored
+ * border produced by a gradient.
+ *
+ * The first layer is the solid background color, the second layer is the
+ * gradient used as a border effect.
+ */
+export declare function getGradientOutline(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;

package/dist/runtime/utils/{color-functions → color}/get-gradient.js

@@ -1,4 +1,4 @@
-import { DEFAULT_GRADIENT } from "../../const/index.js";
+import { DEFAULT_GRADIENT } from "./const.js";
 import { parseThemeColor } from "./parse-theme-color.js";
 export function getGradient(gradient, theme) {
   const merged = {

package/dist/runtime/utils/color/index.d.ts

@@ -0,0 +1,4 @@
+export * from './const.js';
+export * from './get-color-var.js';
+export * from './get-gradient.js';
+export * from './parse-theme-color.js';

package/dist/runtime/utils/color/index.js

@@ -0,0 +1,4 @@
+export * from "./const.js";
+export * from "./get-color-var.js";
+export * from "./get-gradient.js";
+export * from "./parse-theme-color.js";

package/dist/runtime/utils/color/parse-theme-color.d.ts

@@ -0,0 +1,36 @@
+import type { NuanceColorShade, NuanceTheme } from '@nui/types';
+interface ParseThemeColorResult {
+    /** Color name without its shade suffix. */
+    color: string;
+    /** Resolved CSS value, typically a `var(...)` reference. */
+    value: string;
+    /** Parsed shade index, or `undefined` when the color has no shade. */
+    shade: NuanceColorShade | undefined;
+    /** Matching CSS custom property, or `undefined` for non-theme colors. */
+    variable: `--${string}` | undefined;
+    /** `true` when the color belongs to the Nuance theme palette. */
+    isThemeColor: boolean;
+}
+/**
+ * Parses a color descriptor (`'red.5'`, `'primary'`, `'dimmed'`, a raw CSS
+ * color, ...) into its resolved CSS value plus metadata.
+ *
+ * Theme colors produce a `var(...)` reference and expose the matching
+ * custom property via `variable`.
+ *
+ * The special `dimmed` keyword picks a muted gray depending on the current theme.
+ *
+ * Arbitrary CSS colors are returned as-is with `isThemeColor: false`.
+ */
+export declare function parseThemeColor({ color, theme, }: {
+    color: unknown;
+    theme: NuanceTheme;
+}): ParseThemeColorResult;
+/**
+ * Resolves a color descriptor to a usable CSS value.
+ *
+ * Theme colors are returned as a `var(...)` reference; arbitrary CSS colors
+ * are returned unchanged.
+ */
+export declare function getThemeColor(color: string | undefined, theme: NuanceTheme): string;
+export {};

package/dist/runtime/utils/css/get-mod.d.ts

@@ -0,0 +1,9 @@
+export type Mod = Record<string, any>;
+/**
+ * Normalizes a modifier object (or an array of them) into a flat `data-*`
+ * attribute map suitable for spreading on an element.
+ *
+ * Falsy values are dropped, keys that do not start with `data-` are
+ * prefixed automatically, and arrays are merged left-to-right.
+ */
+export declare function getMod(props: Mod | Mod[]): Mod;

package/dist/runtime/utils/{get-mod.js → css/get-mod.js}

@@ -1,4 +1,4 @@
-import { isFalsy } from "./boolean/is-falsy.js";
+import { isFalsy } from "../boolean/index.js";
 const transformKey = (key) => key.startsWith("data-") ? key : `data-${key}`;
 export function getMod(props) {
   if (Array.isArray(props)) {

package/dist/runtime/utils/css/get-size.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Resolves a size token to a CSS value.
+ *
+ * Numeric or CSS-length-like values are passed through `rem` (unless
+ * `convertToRem` is `false`). String tokens are resolved to
+ * `var(--<prefix>-<token>)`.
+ */
+export declare function getSize(size: unknown, prefix?: string, convertToRem?: boolean): string | undefined;
+/** Resolves a spacing token via the `--spacing-*` CSS variables. */
+export declare const getSpacing: (size: unknown) => string | undefined;
+/**
+ * Resolves a radius token via the `--radius-*` CSS variables.
+ *
+ * `undefined` falls back to `--radius-default`, and `'full'` produces the
+ * special `100%` value used for pill-shaped elements.
+ */
+export declare function getRadius(size: unknown): string | undefined;
+/** Resolves a font-size token via the `--font-size-*` CSS variables. */
+export declare const getFontSize: (size: unknown) => string | undefined;
+/** Resolves a line-height token via the `--line-height-*` CSS variables. */
+export declare const getLineHeight: (size: unknown) => string | undefined;
+/**
+ * Resolves a shadow token via the `--shadow-*` CSS variables.
+ *
+ * Falsy input returns `undefined` so the caller can omit the style entirely.
+ */
+export declare function getShadow(size: unknown): string | undefined;

package/dist/runtime/utils/{get-size.js → css/get-size.js}

@@ -1,5 +1,5 @@
-import { isNumberLike } from "./boolean/is-number-like.js";
-import { rem } from "./converters/rem.js";
+import { isNumberLike } from "../boolean/index.js";
+import { rem } from "./rem.js";
 export function getSize(size, prefix = "size", convertToRem = true) {
   if (size === void 0) {
     return void 0;

package/dist/runtime/utils/css/index.d.ts

@@ -0,0 +1,3 @@
+export * from './get-mod.js';
+export * from './get-size.js';
+export * from './rem.js';

package/dist/runtime/utils/css/index.js

@@ -0,0 +1,3 @@
+export * from "./get-mod.js";
+export * from "./get-size.js";
+export * from "./rem.js";

package/dist/runtime/utils/css/rem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Converts a pixel or number value to a scaled `rem` string.
+ *
+ * Multi-value inputs (comma- or space-separated) are converted piece by
+ * piece, and `calc(...)` / `clamp(...)` / `rgba(...)` expressions are
+ * returned unchanged.
+ */
+export declare const rem: (value: unknown) => string;
+/** Converts a pixel or number value to an `em` string. */
+export declare const em: (value: unknown) => string;

package/dist/runtime/utils/date/create-months.d.ts

@@ -0,0 +1,12 @@
+import type { DateInput } from '@formkit/tempo';
+import type { DateConfig } from '@nui/composables';
+/**
+ * Builds the week-by-week day grid for a calendar month.
+ *
+ * Leading and trailing days from adjacent months are included so that every
+ * row has a full week.
+ *
+ * When `fixedWeeks` is `true`, the grid is padded to 6
+ * rows (42 days) so the layout height stays stable across months.
+ */
+export declare function createMonth(date: DateInput, config: DateConfig, fixedWeeks?: boolean): string[][];

package/dist/runtime/utils/date/get-days-between.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns every day between `start` (inclusive) and `end` (exclusive) as
+ * `YYYY-MM-DD` strings.
+ */
+export declare function getDaysBetween(start: Date, end: Date): string[];

package/dist/runtime/{helpers → utils}/date/is-weekend.d.ts

@@ -1,2 +1,5 @@
 import type { DateInput } from '@formkit/tempo';
+/**
+ * Returns `true` when the date falls on a weekend.
+ */
 export declare function isWeekend(date: DateInput, firstDayOfWeek: number): boolean;

package/dist/runtime/utils/date/types.d.ts

@@ -0,0 +1,10 @@
+import type { DateInput } from '@formkit/tempo';
+/** Predicate that tests a single date. */
+export type DateMatcher = (date: DateInput) => boolean;
+/** Week-by-week day grid representing a calendar month. */
+export interface CalendarGrid<T = string> {
+    /** Reference date identifying which month the grid represents. */
+    value: DateInput;
+    /** Weeks of the grid, each week is an array of day cells. */
+    rows: T[][];
+}

package/dist/runtime/utils/index.d.ts

@@ -1,8 +1,6 @@
-export { isFalsy } from './boolean/is-falsy.js';
-export { getGradient } from './color-functions/get-gradient.js';
-export { getThemeColor, parseThemeColor } from './color-functions/parse-theme-color.js';
-export { em, rem } from './converters/rem.js';
-export { createVariantColorResolver } from './create-variant-color-resolver.js';
-export * from './get-mod.js';
-export * from './get-size.js';
+export * from './boolean/index.js';
+export * from './color/index.js';
+export * from './css/index.js';
+export * from './date/index.js';
+export * from './style/index.js';
 export * from './tree.js';

package/dist/runtime/utils/index.js

@@ -1,8 +1,6 @@
-export { isFalsy } from "./boolean/is-falsy.js";
-export { getGradient } from "./color-functions/get-gradient.js";
-export { getThemeColor, parseThemeColor } from "./color-functions/parse-theme-color.js";
-export { em, rem } from "./converters/rem.js";
-export { createVariantColorResolver } from "./create-variant-color-resolver.js";
-export * from "./get-mod.js";
-export * from "./get-size.js";
+export * from "./boolean/index.js";
+export * from "./color/index.js";
+export * from "./css/index.js";
+export * from "./date/index.js";
+export * from "./style/index.js";
 export * from "./tree.js";

package/dist/runtime/utils/{create-variant-color-resolver.d.ts → style/create-variant-color-resolver.d.ts}

@@ -1,10 +1,22 @@
 import type { NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 interface VariantColorResolverResult {
+    /** Base background CSS value. */
     background: string;
+    /** Background CSS value applied on hover. */
     hover: string;
+    /** Text color CSS value. */
     text: string;
+    /** Border shorthand CSS value. */
     border: string;
 }
+/**
+ * Resolves the set of CSS values (`background`, `hover`, `text`, `border`)
+ * for a given color/variant/theme combination.
+ *
+ * Covers every Nuance variant — `filled`, `light`, `outline`, `subtle`,
+ * `default`, `gradient`, `gradient-outline`, `dot` — and falls back to the
+ * default `--color-*` tokens when no explicit shade is provided.
+ */
 export declare function createVariantColorResolver({ color, variant, gradient, theme, }: {
     color: NuanceColor | string | undefined;
     variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline' | 'dot';

package/dist/runtime/utils/{create-variant-color-resolver.js → style/create-variant-color-resolver.js}

@@ -1,6 +1,6 @@
-import { DEFAULT_GRADIENT } from "../const/index.js";
-import { getGradient, getGradientOutline } from "./color-functions/get-gradient.js";
-import { getThemeColor, parseThemeColor } from "./color-functions/parse-theme-color.js";
+import { DEFAULT_GRADIENT } from "../color/const.js";
+import { getGradient, getGradientOutline } from "../color/get-gradient.js";
+import { getThemeColor, parseThemeColor } from "../color/parse-theme-color.js";
 export function createVariantColorResolver({
   color = "primary",
   variant,

package/dist/runtime/utils/style/index.d.ts

@@ -0,0 +1 @@
+export * from './create-variant-color-resolver.js';

package/dist/runtime/utils/style/index.js

@@ -0,0 +1 @@
+export * from "./create-variant-color-resolver.js";