iryx-ui 0.18.0 → 0.18.2

package/dist/theme/select.js

@@ -3,7 +3,7 @@ import { tv as t } from "tailwind-variants";
 //#region src/theme/select.ts
 var n = t({
 	slots: {
-		trigger: `flex items-center justify-between gap-2 ${e} cursor-pointer data-[placeholder]:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
+		trigger: `flex items-center justify-between gap-2 overflow-hidden ${e} cursor-pointer data-[placeholder]:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:opacity-60`,
 		content: "z-50 min-w-32 overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-md",
 		viewport: "p-1",
 		item: "relative flex cursor-pointer items-center rounded-lg py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",

package/dist/theme/separator.d.ts

@@ -28,7 +28,7 @@ export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     line: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
@@ -43,5 +43,5 @@ export declare const separatorTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     line: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SeparatorSlots = keyof ReturnType<typeof separatorTheme>;

package/dist/theme/sidebar.d.ts

@@ -72,7 +72,7 @@ export declare const sidebarTheme: import("tailwind-variants").TVReturnType<{
     groupIcon: string;
     groupContent: string;
     groupInner: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     side: {
         left: {
             root: string;
@@ -109,5 +109,5 @@ export declare const sidebarTheme: import("tailwind-variants").TVReturnType<{
     groupIcon: string;
     groupContent: string;
     groupInner: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SidebarSlots = keyof ReturnType<typeof sidebarTheme>;

package/dist/theme/signature-pad.d.ts

@@ -30,7 +30,7 @@ export declare const signaturePadTheme: import("tailwind-variants").TVReturnType
     canvas: string;
     actions: string;
     action: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     invalid: {
         true: {
             root: string;
@@ -46,5 +46,5 @@ export declare const signaturePadTheme: import("tailwind-variants").TVReturnType
     canvas: string;
     actions: string;
     action: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SignaturePadSlots = keyof ReturnType<typeof signaturePadTheme>;

package/dist/theme/skeleton.d.ts

@@ -1,20 +1,20 @@
 export declare const skeletonTheme: import("tailwind-variants").TVReturnType<{
     variant: {
-        text: string;
-        rect: string;
-        circle: string;
+        text: "h-lh w-full rounded";
+        rect: "rounded-xl";
+        circle: "aspect-square rounded-full";
     };
 }, undefined, "animate-pulse bg-muted", {
     variant: {
-        text: string;
-        rect: string;
-        circle: string;
+        text: "h-lh w-full rounded";
+        rect: "rounded-xl";
+        circle: "aspect-square rounded-full";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        text: string;
-        rect: string;
-        circle: string;
+        text: "h-lh w-full rounded";
+        rect: "rounded-xl";
+        circle: "aspect-square rounded-full";
     };
-}, undefined, "animate-pulse bg-muted", unknown, unknown, undefined>>;
+}, undefined>>;
 export type SkeletonVariants = Parameters<typeof skeletonTheme>[0];

package/dist/theme/slider.d.ts

@@ -78,7 +78,7 @@ export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
     range: string;
     thumb: string;
     scale: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
@@ -118,5 +118,5 @@ export declare const sliderTheme: import("tailwind-variants").TVReturnType<{
     range: string;
     thumb: string;
     scale: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SliderSlots = keyof ReturnType<typeof sliderTheme>;

package/dist/theme/sparkline.d.ts

@@ -24,7 +24,7 @@ export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
     area: string;
     dot: string;
     ring: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     muted: {
         true: {
             root: string;
@@ -37,5 +37,5 @@ export declare const sparklineTheme: import("tailwind-variants").TVReturnType<{
     area: string;
     dot: string;
     ring: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SparklineSlots = keyof ReturnType<typeof sparklineTheme>;

package/dist/theme/splitter.d.ts

@@ -34,7 +34,7 @@ export declare const splitterTheme: import("tailwind-variants").TVReturnType<{
     panel: string;
     handle: string;
     rule: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     direction: {
         horizontal: {
             root: string;
@@ -52,5 +52,5 @@ export declare const splitterTheme: import("tailwind-variants").TVReturnType<{
     panel: string;
     handle: string;
     rule: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SplitterSlots = keyof ReturnType<typeof splitterTheme>;

package/dist/theme/stat.d.ts

@@ -58,7 +58,7 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     delta: string;
     hint: string;
     row: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             value: string;
@@ -88,5 +88,5 @@ export declare const statTheme: import("tailwind-variants").TVReturnType<{
     delta: string;
     hint: string;
     row: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type StatSlots = keyof ReturnType<typeof statTheme>;

package/dist/theme/stepper.d.ts

@@ -34,7 +34,7 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
     title: string;
     description: string;
     separator: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {};
         vertical: {
@@ -52,5 +52,5 @@ export declare const stepperTheme: import("tailwind-variants").TVReturnType<{
     title: string;
     description: string;
     separator: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type StepperSlots = keyof ReturnType<typeof stepperTheme>;

package/dist/theme/switch.d.ts

@@ -48,7 +48,7 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     description: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             root: string;
@@ -73,5 +73,5 @@ export declare const switchTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     label: string;
     description: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type SwitchSlots = keyof ReturnType<typeof switchTheme>;

package/dist/theme/switch.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus:ring-2 focus:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
 		thumb: "pointer-events-none block rounded-full bg-background shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/table.d.ts

@@ -156,7 +156,7 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     expandedCell: string;
     empty: string;
     caption: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     striped: {
         true: {
             tr: string;
@@ -235,5 +235,5 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     expandedCell: string;
     empty: string;
     caption: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TableSlots = keyof ReturnType<typeof tableTheme>;

package/dist/theme/tabs.d.ts

@@ -56,7 +56,7 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     indicator: string;
     trigger: string;
     content: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         solid: {
             list: string;
@@ -85,5 +85,5 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     indicator: string;
     trigger: string;
     content: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TabsSlots = keyof ReturnType<typeof tabsTheme>;

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

@@ -70,7 +70,7 @@ export declare const tagsInputTheme: import("tailwind-variants").TVReturnType<{
     tagDelete: string;
     input: string;
     clear: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             root: string;
@@ -106,5 +106,5 @@ export declare const tagsInputTheme: import("tailwind-variants").TVReturnType<{
     tagDelete: string;
     input: string;
     clear: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TagsInputSlots = keyof ReturnType<typeof tagsInputTheme>;

package/dist/theme/time-field.d.ts

@@ -40,7 +40,7 @@ export declare const timeFieldTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     segment: string;
     literal: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             root: string;
@@ -61,5 +61,5 @@ export declare const timeFieldTheme: import("tailwind-variants").TVReturnType<{
     root: string;
     segment: string;
     literal: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TimeFieldSlots = keyof ReturnType<typeof timeFieldTheme>;

package/dist/theme/time-field.js

@@ -4,7 +4,7 @@ import { tv as t } from "tailwind-variants";
 var n = t({
 	slots: {
 		root: `inline-flex items-center gap-0.5 ${e} w-auto focus-within:ring-2 focus-within:ring-primary/50`,
-		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus:bg-primary focus:text-primary-foreground data-[disabled]:cursor-not-allowed",
+		segment: "rounded px-0.5 text-foreground tabular-nums outline-none focus-visible:bg-primary focus-visible:text-primary-foreground data-[disabled]:cursor-not-allowed",
 		literal: "text-muted-foreground"
 	},
 	variants: {

package/dist/theme/timeline.d.ts

@@ -106,7 +106,7 @@ export declare const timelineTheme: import("tailwind-variants").TVReturnType<{
     title: string;
     time: string;
     description: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             marker: string;
@@ -160,5 +160,5 @@ export declare const timelineTheme: import("tailwind-variants").TVReturnType<{
     title: string;
     time: string;
     description: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TimelineSlots = keyof ReturnType<typeof timelineTheme>;

package/dist/theme/toast.d.ts

@@ -102,7 +102,7 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     description: string;
     action: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         neutral: {
             icon: string;
@@ -154,5 +154,5 @@ export declare const toastTheme: import("tailwind-variants").TVReturnType<{
     description: string;
     action: string;
     close: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type ToastSlots = keyof ReturnType<typeof toastTheme>;

package/dist/theme/toggle.d.ts

@@ -1,49 +1,49 @@
 export declare const toggleTheme: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "h-7 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5";
+        sm: "h-8 px-3 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4";
+        md: "h-9 px-4 text-sm has-[[data-icon=inline-end]]:pr-3 has-[[data-icon=inline-start]]:pl-3 [&_svg]:size-4";
+        lg: "h-10 px-5 text-base has-[[data-icon=inline-end]]:pr-4 has-[[data-icon=inline-start]]:pl-4 [&_svg]:size-5";
+        xl: "h-12 px-6 text-base has-[[data-icon=inline-end]]:pr-5 has-[[data-icon=inline-start]]:pl-5 [&_svg]:size-5";
     };
     square: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     block: {
-        true: string;
+        true: "w-full";
     };
 }, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-border bg-input font-medium whitespace-nowrap text-foreground transition-[color,background-color,border-color,box-shadow,opacity] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "h-7 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5";
+        sm: "h-8 px-3 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4";
+        md: "h-9 px-4 text-sm has-[[data-icon=inline-end]]:pr-3 has-[[data-icon=inline-start]]:pl-3 [&_svg]:size-4";
+        lg: "h-10 px-5 text-base has-[[data-icon=inline-end]]:pr-4 has-[[data-icon=inline-start]]:pl-4 [&_svg]:size-5";
+        xl: "h-12 px-6 text-base has-[[data-icon=inline-end]]:pr-5 has-[[data-icon=inline-start]]:pl-5 [&_svg]:size-5";
     };
     square: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     block: {
-        true: string;
+        true: "w-full";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
+        xs: "h-7 gap-1.5 px-2 text-xs has-[[data-icon=inline-end]]:pr-1.5 has-[[data-icon=inline-start]]:pl-1.5 [&_svg]:size-3.5";
+        sm: "h-8 px-3 text-sm has-[[data-icon=inline-end]]:pr-2 has-[[data-icon=inline-start]]:pl-2 [&_svg]:size-4";
+        md: "h-9 px-4 text-sm has-[[data-icon=inline-end]]:pr-3 has-[[data-icon=inline-start]]:pl-3 [&_svg]:size-4";
+        lg: "h-10 px-5 text-base has-[[data-icon=inline-end]]:pr-4 has-[[data-icon=inline-start]]:pl-4 [&_svg]:size-5";
+        xl: "h-12 px-6 text-base has-[[data-icon=inline-end]]:pr-5 has-[[data-icon=inline-start]]:pl-5 [&_svg]:size-5";
     };
     square: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     block: {
-        true: string;
+        true: "w-full";
     };
-}, undefined, "inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-border bg-input font-medium whitespace-nowrap text-foreground transition-[color,background-color,border-color,box-shadow,opacity] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ToggleVariants = Parameters<typeof toggleTheme>[0];
 export declare const toggleGroupTheme: import("tailwind-variants").TVReturnType<{
     variant: {
@@ -93,7 +93,7 @@ export declare const toggleGroupTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     item: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         joined: {
             item: string;
@@ -117,6 +117,6 @@ export declare const toggleGroupTheme: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     item: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type ToggleGroupSlots = keyof ReturnType<typeof toggleGroupTheme>;
 export type ToggleGroupVariant = 'joined' | 'plain';

package/dist/theme/toolbar.d.ts

@@ -34,7 +34,7 @@ export declare const toolbarTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     separator: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             separator: string;
@@ -52,5 +52,5 @@ export declare const toolbarTheme: import("tailwind-variants").TVReturnType<{
 }, {
     root: string;
     separator: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type ToolbarSlots = keyof ReturnType<typeof toolbarTheme>;

package/dist/theme/tooltip.d.ts

@@ -25,8 +25,8 @@ export declare const tooltipTheme: import("tailwind-variants").TVReturnType<{
 } | {}, {
     content: string;
     arrow: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     content: string;
     arrow: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TooltipSlots = keyof ReturnType<typeof tooltipTheme>;

package/dist/theme/tree.d.ts

@@ -40,7 +40,7 @@ export declare const treeTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     label: string;
     count: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: {
             item: string;
@@ -61,5 +61,5 @@ export declare const treeTheme: import("tailwind-variants").TVReturnType<{
     icon: string;
     label: string;
     count: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type TreeSlots = keyof ReturnType<typeof treeTheme>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "@nuxt/kit": "^4.4.8",
     "reka-ui": "~2.10.3",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
@@ -67,7 +67,7 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
     "vitest": "^4.1.8",
-    "vue": "^3.5.41",
+    "vue": "^3.5.42",
     "vue-tsc": "^3.3.4"
   }
 }

package/theme.css

@@ -19,6 +19,8 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 :root {
+  color-scheme: light;
+
   /*
    * Typeface. The library ships no webfont — that would put font files, a
    * licence and a network request in every consumer's bundle whether they
@@ -104,6 +106,8 @@
 }
 
 .dark {
+  color-scheme: dark;
+
   /* Neutral surfaces — shadcn/ui "zinc" palette. */
   --iryx-background: oklch(0.145 0 0);
   --iryx-foreground: oklch(0.985 0 0);