iryx-ui 0.6.0 → 0.7.0

package/dist/theme/date-picker.d.ts

@@ -0,0 +1,254 @@
+export declare const datePickerTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+    /**
+     * A single date is the whole selection, so it takes the solid fill. In a
+     * range only the two endpoints do, and the days between get a flat tint —
+     * emphasising all of them equally turns a long span into one solid block
+     * that no longer shows where it starts and stops.
+     *
+     * The middle style excludes the endpoints with `not-*` rather than relying
+     * on class order, so the two rules never compete for the background.
+     */
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        /**
+         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
+         * a band that follows the cursor has to reshape its rounded ends on
+         * every move, and no combination of transitioning or not transitioning
+         * the radius looks right while it does. Only the committed range is
+         * drawn, so nothing under the pointer changes shape.
+         *
+         * The band goes on the cell and the endpoint pills on the trigger, so
+         * a single element never has to be both. Only the run's outer edges are
+         * rounded, so the days between meet flush.
+         */
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    /** Shown in place of the value, so it reads as absent rather than chosen. */
+    placeholder: string;
+    content: string;
+    header: string;
+    heading: string;
+    nav: string;
+    /**
+     * `items-start`: flex would otherwise stretch a short month to match a
+     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
+     * on the calendar, which keeps every month six rows tall so the popover
+     * does not resize as you page through it.
+     */
+    months: string;
+    grid: string;
+    headCell: string;
+    /**
+     * The range bands are painted here, not on the trigger — see `range`.
+     *
+     * `transition-colors` fades the band in and out but deliberately leaves
+     * `border-radius` untransitioned: animating the radius morphs the band's
+     * shape as the preview moves, which reads as the corners wobbling.
+     */
+    cell: string;
+    /**
+     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
+     * fixed-width pill leaves a gap between consecutive days and a run renders
+     * as a chain of lozenges with pinched corners instead of one band.
+     *
+     * Hover is suppressed on already-selected days so it cannot paint a
+     * competing pill over the solid endpoint fill.
+     *
+     * Selection colour is added by the `range` variant, which differs per mode.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, undefined, {
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+    /**
+     * A single date is the whole selection, so it takes the solid fill. In a
+     * range only the two endpoints do, and the days between get a flat tint —
+     * emphasising all of them equally turns a long span into one solid block
+     * that no longer shows where it starts and stops.
+     *
+     * The middle style excludes the endpoints with `not-*` rather than relying
+     * on class order, so the two rules never compete for the background.
+     */
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        /**
+         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
+         * a band that follows the cursor has to reshape its rounded ends on
+         * every move, and no combination of transitioning or not transitioning
+         * the radius looks right while it does. Only the committed range is
+         * drawn, so nothing under the pointer changes shape.
+         *
+         * The band goes on the cell and the endpoint pills on the trigger, so
+         * a single element never has to be both. Only the run's outer edges are
+         * rounded, so the days between meet flush.
+         */
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    /** Shown in place of the value, so it reads as absent rather than chosen. */
+    placeholder: string;
+    content: string;
+    header: string;
+    heading: string;
+    nav: string;
+    /**
+     * `items-start`: flex would otherwise stretch a short month to match a
+     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
+     * on the calendar, which keeps every month six rows tall so the popover
+     * does not resize as you page through it.
+     */
+    months: string;
+    grid: string;
+    headCell: string;
+    /**
+     * The range bands are painted here, not on the trigger — see `range`.
+     *
+     * `transition-colors` fades the band in and out but deliberately leaves
+     * `border-radius` untransitioned: animating the radius morphs the band's
+     * shape as the preview moves, which reads as the corners wobbling.
+     */
+    cell: string;
+    /**
+     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
+     * fixed-width pill leaves a gap between consecutive days and a run renders
+     * as a chain of lozenges with pinched corners instead of one band.
+     *
+     * Hover is suppressed on already-selected days so it cannot paint a
+     * competing pill over the solid endpoint fill.
+     *
+     * Selection colour is added by the `range` variant, which differs per mode.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    invalid: {
+        true: {
+            trigger: string;
+        };
+    };
+    /**
+     * A single date is the whole selection, so it takes the solid fill. In a
+     * range only the two endpoints do, and the days between get a flat tint —
+     * emphasising all of them equally turns a long span into one solid block
+     * that no longer shows where it starts and stops.
+     *
+     * The middle style excludes the endpoints with `not-*` rather than relying
+     * on class order, so the two rules never compete for the background.
+     */
+    range: {
+        false: {
+            cellTrigger: string;
+        };
+        /**
+         * Reka's `data-highlighted` hover preview is deliberately left unstyled:
+         * a band that follows the cursor has to reshape its rounded ends on
+         * every move, and no combination of transitioning or not transitioning
+         * the radius looks right while it does. Only the committed range is
+         * drawn, so nothing under the pointer changes shape.
+         *
+         * The band goes on the cell and the endpoint pills on the trigger, so
+         * a single element never has to be both. Only the run's outer edges are
+         * rounded, so the days between meet flush.
+         */
+        true: {
+            cell: string;
+            cellTrigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    /** Shown in place of the value, so it reads as absent rather than chosen. */
+    placeholder: string;
+    content: string;
+    header: string;
+    heading: string;
+    nav: string;
+    /**
+     * `items-start`: flex would otherwise stretch a short month to match a
+     * taller neighbour, spreading its rows apart. Paired with `fixed-weeks`
+     * on the calendar, which keeps every month six rows tall so the popover
+     * does not resize as you page through it.
+     */
+    months: string;
+    grid: string;
+    headCell: string;
+    /**
+     * The range bands are painted here, not on the trigger — see `range`.
+     *
+     * `transition-colors` fades the band in and out but deliberately leaves
+     * `border-radius` untransitioned: animating the radius morphs the band's
+     * shape as the preview moves, which reads as the corners wobbling.
+     */
+    cell: string;
+    /**
+     * `w-full`, not a fixed `size-8`: the table cell is wider than 32px, so a
+     * fixed-width pill leaves a gap between consecutive days and a run renders
+     * as a chain of lozenges with pinched corners instead of one band.
+     *
+     * Hover is suppressed on already-selected days so it cannot paint a
+     * competing pill over the solid endpoint fill.
+     *
+     * Selection colour is added by the `range` variant, which differs per mode.
+     */
+    cellTrigger: string;
+    footer: string;
+    action: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DatePickerSlots = keyof ReturnType<typeof datePickerTheme>;

package/dist/theme/index.d.ts

@@ -7,6 +7,7 @@ export * from './button-group';
 export * from './card';
 export * from './checkbox';
 export * from './combobox';
+export * from './date-picker';
 export * from './dialog';
 export * from './dropdown-menu';
 export * from './empty-state';
@@ -14,6 +15,7 @@ export * from './input';
 export * from './label';
 export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './presets';
 export * from './progress';
 export * from './radio-group';

package/dist/theme/input.d.ts

@@ -1,33 +1,90 @@
 /** Shared field chrome for Input, Textarea and the Select trigger. */
 export declare const fieldBase = "w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50";
+/**
+ * The chrome lives on `root`, not on the `<input>`, so leading and trailing
+ * content can take real space in a flex row. Reserving room with padding
+ * instead would mean guessing the width of arbitrary slot content, and long
+ * values would slide underneath it.
+ */
 export declare const inputTheme: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
     };
     invalid: {
-        true: string;
+        true: {
+            root: string;
+        };
     };
-}, undefined, "flex w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
+}, {
+    root: string;
+    input: string;
+    leading: string;
+    trailing: string;
+    clear: string;
+}, undefined, {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
     };
     invalid: {
-        true: string;
+        true: {
+            root: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    root: string;
+    input: string;
+    leading: string;
+    trailing: string;
+    clear: string;
+}, import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: {
+            root: string;
+            input: string;
+        };
+        md: {
+            root: string;
+            input: string;
+        };
+        lg: {
+            root: string;
+            input: string;
+        };
     };
     invalid: {
-        true: string;
+        true: {
+            root: string;
+        };
     };
-}, undefined, "flex w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
+}, {
+    root: string;
+    input: string;
+    leading: string;
+    trailing: string;
+    clear: string;
+}, undefined, unknown, unknown, undefined>>;
 export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -37,6 +94,13 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
+    /**
+     * The measured height is the whole point, so drop the size variant's
+     * `min-h` floor and the drag handle that would fight it.
+     */
+    autosize: {
+        true: string;
+    };
 }, undefined, "block resize-y w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", {
     size: {
         sm: string;
@@ -46,6 +110,13 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
+    /**
+     * The measured height is the whole point, so drop the size variant's
+     * `min-h` floor and the drag handle that would fight it.
+     */
+    autosize: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -55,6 +126,14 @@ export declare const textareaTheme: import("tailwind-variants").TVReturnType<{
     invalid: {
         true: string;
     };
+    /**
+     * The measured height is the whole point, so drop the size variant's
+     * `min-h` floor and the drag handle that would fight it.
+     */
+    autosize: {
+        true: string;
+    };
 }, undefined, "block resize-y w-full rounded-xl border border-border bg-input text-foreground transition-colors outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
 export type InputVariants = Parameters<typeof inputTheme>[0];
+export type InputSlots = keyof ReturnType<typeof inputTheme>;
 export type TextareaVariants = Parameters<typeof textareaTheme>[0];

package/dist/theme/password-input.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The meter's colour is the same deliberate exception `IProgress` makes: the
+ * coloured bar *is* the reading, not decoration on a surface. Everywhere else
+ * status colour belongs in the mark, not the chrome.
+ */
+export declare const passwordInputTheme: import("tailwind-variants").TVReturnType<{
+    score: {
+        0: {};
+        1: {
+            segment: string;
+        };
+        2: {
+            segment: string;
+        };
+        3: {
+            segment: string;
+        };
+        4: {
+            segment: string;
+        };
+    };
+}, {
+    root: string;
+    toggle: string;
+    meter: string;
+    track: string;
+    /** Unfilled by default; the `score` variant paints the ones below it. */
+    segment: string;
+    label: string;
+}, undefined, {
+    score: {
+        0: {};
+        1: {
+            segment: string;
+        };
+        2: {
+            segment: string;
+        };
+        3: {
+            segment: string;
+        };
+        4: {
+            segment: string;
+        };
+    };
+}, {
+    root: string;
+    toggle: string;
+    meter: string;
+    track: string;
+    /** Unfilled by default; the `score` variant paints the ones below it. */
+    segment: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    score: {
+        0: {};
+        1: {
+            segment: string;
+        };
+        2: {
+            segment: string;
+        };
+        3: {
+            segment: string;
+        };
+        4: {
+            segment: string;
+        };
+    };
+}, {
+    root: string;
+    toggle: string;
+    meter: string;
+    track: string;
+    /** Unfilled by default; the `score` variant paints the ones below it. */
+    segment: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PasswordInputSlots = keyof ReturnType<typeof passwordInputTheme>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -47,6 +47,7 @@
   "dependencies": {
     "@hugeicons/core-free-icons": "^4.2.3",
     "@hugeicons/vue": "^1.0.7",
+    "@internationalized/date": "^3.12.3",
     "@nuxt/kit": "^4.4.8",
     "reka-ui": "^2.9.10",
     "tailwind-merge": "^3.6.0",