iryx-ui 0.5.0 → 0.7.0

package/dist/theme/badge.d.ts

@@ -6,10 +6,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {
@@ -36,10 +37,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {
@@ -66,10 +68,11 @@ export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
         danger: {};
         info: {};
     };
-    /** `soft` is a tinted background; `solid` is a filled block of colour. */
-    tone: {
-        soft: {};
-        solid: {};
+    withDot: {
+        true: {
+            root: string;
+        };
+        false: {};
     };
     size: {
         sm: {

package/dist/theme/banner.d.ts

@@ -0,0 +1,185 @@
+export declare const bannerTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, undefined, {
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {
+            root: string;
+            icon: string;
+        };
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+        /** Brand-coloured, for announcements rather than status. */
+        primary: {
+            root: string;
+            icon: string;
+        };
+    };
+    position: {
+        static: {};
+        /** Sticks under the top of the scroll container. */
+        top: {
+            root: string;
+        };
+        /** Pinned to the bottom of the viewport; the rule moves to the top edge. */
+        bottom: {
+            root: string;
+        };
+    };
+    /** Constrains the text while the fill still spans the viewport. */
+    contained: {
+        true: {
+            container: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {};
+        center: {
+            content: string;
+        };
+    };
+}, {
+    root: string;
+    /** Keeps the text off the viewport edge without constraining the fill. */
+    container: string;
+    icon: string;
+    content: string;
+    title: string;
+    actions: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BannerSlots = keyof ReturnType<typeof bannerTheme>;

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

@@ -1,11 +1,13 @@
 export * from './alert';
 export * from './badge';
+export * from './banner';
 export * from './breadcrumb';
 export * from './button';
 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';
@@ -13,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';
@@ -22,6 +25,7 @@ export * from './skeleton';
 export * from './stat';
 export * from './stepper';
 export * from './switch';
+export * from './table';
 export * from './tabs';
 export * from './toast';
 export * from './tooltip';

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];