iryx-ui 0.4.0 → 0.6.0

package/dist/theme/table.d.ts

@@ -0,0 +1,230 @@
+export declare const tableTheme: import("tailwind-variants").TVReturnType<{
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tr: string;
+        };
+    };
+    clickable: {
+        true: {
+            tr: string;
+        };
+    };
+    stickyHeader: {
+        true: {
+            th: string;
+        };
+    };
+    selected: {
+        true: {
+            tr: string;
+        };
+    };
+    size: {
+        sm: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    /** Scroll container — the table itself never shrinks below its content. */
+    root: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    /**
+     * Header sort control. A real button so it is tabbable and announced as
+     * one; the `<th>` carries `aria-sort` for the state.
+     */
+    sortButton: string;
+    sortIcon: string;
+    td: string;
+    gutter: string;
+    headGutter: string;
+    expandButton: string;
+    expandedRow: string;
+    expandedCell: string;
+    /** Message row for "no results", spanning every column. */
+    empty: string;
+    caption: string;
+}, undefined, {
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tr: string;
+        };
+    };
+    clickable: {
+        true: {
+            tr: string;
+        };
+    };
+    stickyHeader: {
+        true: {
+            th: string;
+        };
+    };
+    selected: {
+        true: {
+            tr: string;
+        };
+    };
+    size: {
+        sm: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    /** Scroll container — the table itself never shrinks below its content. */
+    root: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    /**
+     * Header sort control. A real button so it is tabbable and announced as
+     * one; the `<th>` carries `aria-sort` for the state.
+     */
+    sortButton: string;
+    sortIcon: string;
+    td: string;
+    gutter: string;
+    headGutter: string;
+    expandButton: string;
+    expandedRow: string;
+    expandedCell: string;
+    /** Message row for "no results", spanning every column. */
+    empty: string;
+    caption: string;
+}, import("tailwind-variants").TVReturnType<{
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+    hoverable: {
+        true: {
+            tr: string;
+        };
+    };
+    clickable: {
+        true: {
+            tr: string;
+        };
+    };
+    stickyHeader: {
+        true: {
+            th: string;
+        };
+    };
+    selected: {
+        true: {
+            tr: string;
+        };
+    };
+    size: {
+        sm: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+        md: {};
+        lg: {
+            th: string;
+            td: string;
+            gutter: string;
+        };
+    };
+    align: {
+        start: {
+            th: string;
+            td: string;
+        };
+        center: {
+            th: string;
+            td: string;
+        };
+        end: {
+            th: string;
+            td: string;
+        };
+    };
+}, {
+    /** Scroll container — the table itself never shrinks below its content. */
+    root: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    /**
+     * Header sort control. A real button so it is tabbable and announced as
+     * one; the `<th>` carries `aria-sort` for the state.
+     */
+    sortButton: string;
+    sortIcon: string;
+    td: string;
+    gutter: string;
+    headGutter: string;
+    expandButton: string;
+    expandedRow: string;
+    expandedCell: string;
+    /** Message row for "no results", spanning every column. */
+    empty: string;
+    caption: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableSlots = keyof ReturnType<typeof tableTheme>;

package/dist/theme/toast.d.ts

@@ -1,23 +1,18 @@
 export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         neutral: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
         info: {
-            root: string;
             icon: string;
         };
     };
@@ -59,23 +54,18 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     variant: {
         neutral: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
         info: {
-            root: string;
             icon: string;
         };
     };
@@ -117,23 +107,18 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         neutral: {
-            root: string;
             icon: string;
         };
         success: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
         info: {
-            root: string;
             icon: string;
         };
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",

package/theme.css

@@ -19,6 +19,15 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
+  /*
+   * Typeface. The library ships no webfont — that would put font files, a
+   * licence and a network request in every consumer's bundle whether they
+   * wanted them or not. Point this at your own family instead:
+   *
+   *   :root { --iryx-font-sans: "Instrument Sans", sans-serif; }
+   */
+  --iryx-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
   /* Neutral surfaces — shadcn/ui "zinc" palette. */
   --iryx-background: oklch(1 0 0);
   --iryx-foreground: oklch(0.145 0 0);
@@ -27,6 +36,17 @@
   --iryx-muted: oklch(0.97 0 0);
   --iryx-muted-foreground: oklch(0.556 0 0);
   --iryx-border: oklch(0.922 0 0);
+  /*
+   * Fill for controls that read as recessed — the fields and the outline
+   * button. Its own token rather than `--iryx-muted`, since how raised a
+   * control looks is a separate decision from how a muted surface reads.
+   *
+   * Flat in light and raised in dark, which is where the lift is legible;
+   * shadcn does the same with `bg-transparent dark:bg-input/30`. Expressed as
+   * two token values rather than a `dark:` variant, so components never carry
+   * mode-specific classes.
+   */
+  --iryx-input: oklch(1 0 0);
   /* Brand primary — kept as a violet gradient. */
   --iryx-primary: oklch(0.59 0.2 277.19);
   --iryx-primary-foreground: oklch(0.985 0.005 248);
@@ -68,6 +88,8 @@
   --iryx-muted: oklch(0.269 0 0);
   --iryx-muted-foreground: oklch(0.708 0 0);
   --iryx-border: oklch(1 0 0 / 10%);
+  /* Lifted just off the background — `--iryx-muted` reads as a panel here. */
+  --iryx-input: oklch(0.205 0 0);
   /* Brand primary — kept as a violet gradient. */
   --iryx-primary: oklch(0.62 0.22 293);
   --iryx-primary-foreground: oklch(0.985 0.005 248);
@@ -97,6 +119,7 @@
 }
 
 @theme inline {
+  --font-sans: var(--iryx-font-sans);
   --color-background: var(--iryx-background);
   --color-foreground: var(--iryx-foreground);
   --color-primary: var(--iryx-primary);
@@ -108,6 +131,7 @@
   --color-muted: var(--iryx-muted);
   --color-muted-foreground: var(--iryx-muted-foreground);
   --color-border: var(--iryx-border);
+  --color-input: var(--iryx-input);
   --color-success: var(--iryx-success);
   --color-success-foreground: var(--iryx-success-foreground);
   --color-success-muted: var(--iryx-success-muted);