iryx-ui 0.6.0 → 0.8.0

package/dist/theme/file-upload.d.ts

@@ -0,0 +1,143 @@
+export declare const fileUploadTheme: import("tailwind-variants").TVReturnType<{
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, undefined, {
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, import("tailwind-variants").TVReturnType<{
+    /** Held during a drag, so the target is unmistakable while dragging. */
+    dragging: {
+        true: {
+            dropzone: string;
+        };
+    };
+    invalid: {
+        true: {
+            dropzone: string;
+        };
+    };
+    disabled: {
+        true: {
+            dropzone: string;
+        };
+    };
+}, {
+    root: string;
+    /**
+     * A label, so a click anywhere on the zone opens the picker without any
+     * script — the `<input type="file">` inside stays the real control and
+     * keeps its native keyboard and screen-reader behaviour.
+     */
+    dropzone: string;
+    /** Visually hidden rather than `display:none`, which drops it from the tab order. */
+    input: string;
+    /**
+     * A filled disc behind the glyph. A bare icon floating in the middle of a
+     * large dashed box reads as an artefact; the disc gives it enough weight
+     * to be the thing the zone is built around.
+     */
+    icon: string;
+    label: string;
+    /** Spacing only — the look comes from Button, so it tracks the theme. */
+    browse: string;
+    hint: string;
+    list: string;
+    item: string;
+    thumbnail: string;
+    /** Stand-in for anything without a preview, so rows stay the same height. */
+    placeholder: string;
+    details: string;
+    name: string;
+    meta: string;
+    remove: string;
+    error: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FileUploadSlots = keyof ReturnType<typeof fileUploadTheme>;

package/dist/theme/form.d.ts

@@ -5,8 +5,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -18,8 +18,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };
@@ -40,8 +40,8 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             description?: import("tailwind-variants").ClassValue;
             label?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
             help?: import("tailwind-variants").ClassValue;
         };

package/dist/theme/index.d.ts

@@ -7,13 +7,16 @@ 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';
+export * from './file-upload';
 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,97 @@
+/**
+ * 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;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: 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;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: 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;
+    /**
+     * Edge draws its own reveal eye on `input[type=password]`, and its own
+     * clear cross once the field is revealed to `type=text`. Both would sit
+     * beside ours, so the field shows two of each in that browser only.
+     */
+    input: 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.8.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",