iryx-ui 0.10.2 → 0.12.0

package/dist/index.js

@@ -35,60 +35,61 @@ import { resolveConfirm as oe, useConfirm as se, useConfirmState as ce } from ".
 import { dialogTheme as le } from "./theme/dialog.js";
 import ue from "./components/Dialog.js";
 import de from "./components/ConfirmDialog.js";
-import { $2aaf608024c21ca1$export$99faa760c7908e4f as fe } from "./node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/CalendarDate.js";
-import { formatIsoDate as pe, isoToday as me, toCalendarDate as he, toIsoDate as ge } from "./composables/date.js";
+import { CalendarDate as fe, formatIsoDate as pe, isoToday as me, toCalendarDate as he, toIsoDate as ge } from "./composables/date.js";
 import { datePickerTheme as _e } from "./theme/date-picker.js";
 import ve from "./components/DatePicker.js";
 import ye from "./components/DateRangePicker.js";
-import { dropdownMenuTheme as be } from "./theme/dropdown-menu.js";
-import { isSeparator as xe, isSubmenu as Se } from "./composables/dropdown-menu.js";
-import Ce from "./components/DropdownMenu.js";
-import { emptyStateTheme as we } from "./theme/empty-state.js";
-import Te from "./components/EmptyState.js";
-import { fileUploadTheme as Ee } from "./theme/file-upload.js";
-import De from "./components/FileUpload.js";
-import Oe from "./components/Form.js";
-import { labelTheme as ke } from "./theme/label.js";
-import Ae from "./components/Label.js";
-import je from "./components/FormField.js";
-import Me from "./components/Input.js";
-import { lineChartTheme as Ne } from "./theme/line-chart.js";
-import Pe from "./components/LineChart.js";
-import { addDecimals as Fe, clampDecimal as Ie, compareDecimals as Le, formatDecimal as Re, formatForLocale as ze, isDecimal as Be, localeSeparators as Ve, parseDecimal as He, parseFromLocale as Ue, roundDecimal as We, toEditable as Ge } from "./composables/decimal.js";
-import { numberInputTheme as Ke } from "./theme/number-input.js";
-import qe from "./components/NumberInput.js";
-import { paginationTheme as Je } from "./theme/pagination.js";
-import Ye from "./components/Pagination.js";
-import { passwordInputTheme as Xe } from "./theme/password-input.js";
-import Ze from "./components/PasswordInput.js";
-import { progressTheme as Qe } from "./theme/progress.js";
-import $e from "./components/Progress.js";
-import { radioGroupTheme as et } from "./theme/radio-group.js";
-import tt from "./components/RadioGroup.js";
-import { selectTheme as nt } from "./theme/select.js";
-import rt from "./components/Select.js";
-import { separatorTheme as it } from "./theme/separator.js";
-import at from "./components/Separator.js";
-import { skeletonTheme as ot } from "./theme/skeleton.js";
-import st from "./components/Skeleton.js";
-import { sparklineTheme as ct } from "./theme/sparkline.js";
-import lt from "./components/Sparkline.js";
-import { statTheme as ut } from "./theme/stat.js";
-import dt from "./components/Stat.js";
-import { stepperTheme as ft } from "./theme/stepper.js";
-import pt from "./components/Stepper.js";
-import { switchTheme as mt } from "./theme/switch.js";
-import ht from "./components/Switch.js";
-import { getRowValue as gt, useDataTable as _t } from "./composables/data-table.js";
-import { tableTheme as vt } from "./theme/table.js";
-import yt from "./components/Table.js";
-import { tabsTheme as bt } from "./theme/tabs.js";
-import xt from "./components/Tabs.js";
-import St from "./components/Textarea.js";
-import { useToast as Ct, useToastState as wt } from "./composables/toast.js";
-import { toastTheme as Tt } from "./theme/toast.js";
-import Et from "./components/Toaster.js";
-import { tooltipTheme as Dt } from "./theme/tooltip.js";
-import Ot from "./components/Tooltip.js";
-import { IryxUi as kt, createIryxUi as At } from "./plugin.js";
-export { b as AXIS_GAP, a as Alert, d as App, p as Badge, h as Banner, F as BarChart, L as Breadcrumb, V as Button, U as ButtonGroup, x as CATEGORY_HEIGHT, S as CHAR_WIDTH, fe as CalendarDate, G as Card, P as ChartLegend, q as Checkbox, ae as Combobox, de as ConfirmDialog, ve as DatePicker, ye as DateRangePicker, ue as Dialog, Ce as DropdownMenu, Te as EmptyState, De as FileUpload, Oe as Form, je as FormField, Me as Input, kt as IryxUi, Ae as Label, Pe as LineChart, qe as NumberInput, Ye as Pagination, Ze as PasswordInput, $e as Progress, tt as RadioGroup, C as SERIES_SLOTS, rt as Select, at as Separator, st as Skeleton, lt as Sparkline, dt as Stat, pt as Stepper, ht as Switch, w as TOP_PAD, yt as Table, xt as Tabs, St as Textarea, Et as Toaster, Ot as Tooltip, Fe as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, M as barChartTheme, I as breadcrumbTheme, R as buttonGroupContextKey, H as buttonGroupTheme, B as buttonTheme, W as cardTheme, T as cartesianLayout, N as chartLegendTheme, K as checkboxTheme, Ie as clampDecimal, E as clampTooltip, l as clearTheme, ie as comboboxTheme, Le as compareDecimals, e as componentNames, At as createIryxUi, _e as datePickerTheme, t as defaultConfig, le as dialogTheme, be as dropdownMenuTheme, we as emptyStateTheme, g as extent, te as fieldBase, Ee as fileUploadTheme, _ as finiteValues, J as formContextKey, Y as formFieldContextKey, Re as formatDecimal, ze as formatForLocale, pe as formatIsoDate, X as getByPath, gt as getRowValue, o as initAppearance, ne as inputTheme, n as iryxUiConfigKey, Be as isDecimal, xe as isSeparator, Z as isStandardSchema, Se as isSubmenu, me as isoToday, Q as issuePath, ke as labelTheme, Ne as lineChartTheme, v as linearScale, Ve as localeSeparators, y as niceTicks, Ke as numberInputTheme, Je as paginationTheme, He as parseDecimal, Ue as parseFromLocale, Xe as passwordInputTheme, Qe as progressTheme, et as radioGroupTheme, oe as resolveConfirm, We as roundDecimal, nt as selectTheme, it as separatorTheme, D as seriesColor, ot as skeletonTheme, O as slotOf, ct as sparklineTheme, ut as statTheme, ft as stepperTheme, mt as switchTheme, vt as tableTheme, bt as tabsTheme, re as textareaTheme, u as themes, he as toCalendarDate, Ge as toEditable, ge as toIsoDate, Tt as toastTheme, k as tooltipHalfWidth, Dt as tooltipTheme, s as useAppearance, z as useButtonGroup, se as useConfirm, ce as useConfirmState, _t as useDataTable, j as useElementSize, $ as useForm, ee as useFormField, r as useIryxUiConfig, Ct as useToast, wt as useToastState, A as warnOnSlotOverflow };
+import { drawerTheme as be } from "./theme/drawer.js";
+import xe from "./components/Drawer.js";
+import { dropdownMenuTheme as Se } from "./theme/dropdown-menu.js";
+import { isSeparator as Ce, isSubmenu as we } from "./composables/dropdown-menu.js";
+import Te from "./components/DropdownMenu.js";
+import { emptyStateTheme as Ee } from "./theme/empty-state.js";
+import De from "./components/EmptyState.js";
+import { fileUploadTheme as Oe } from "./theme/file-upload.js";
+import ke from "./components/FileUpload.js";
+import Ae from "./components/Form.js";
+import { labelTheme as je } from "./theme/label.js";
+import Me from "./components/Label.js";
+import Ne from "./components/FormField.js";
+import Pe from "./components/Input.js";
+import { lineChartTheme as Fe } from "./theme/line-chart.js";
+import Ie from "./components/LineChart.js";
+import { addDecimals as Le, clampDecimal as Re, compareDecimals as ze, formatDecimal as Be, formatForLocale as Ve, isDecimal as He, localeSeparators as Ue, parseDecimal as We, parseFromLocale as Ge, roundDecimal as Ke, toEditable as qe } from "./composables/decimal.js";
+import { numberInputTheme as Je } from "./theme/number-input.js";
+import Ye from "./components/NumberInput.js";
+import { paginationTheme as Xe } from "./theme/pagination.js";
+import Ze from "./components/Pagination.js";
+import { passwordInputTheme as Qe } from "./theme/password-input.js";
+import $e from "./components/PasswordInput.js";
+import { progressTheme as et } from "./theme/progress.js";
+import tt from "./components/Progress.js";
+import { radioGroupTheme as nt } from "./theme/radio-group.js";
+import rt from "./components/RadioGroup.js";
+import { selectTheme as it } from "./theme/select.js";
+import at from "./components/Select.js";
+import { separatorTheme as ot } from "./theme/separator.js";
+import st from "./components/Separator.js";
+import { skeletonTheme as ct } from "./theme/skeleton.js";
+import lt from "./components/Skeleton.js";
+import { sparklineTheme as ut } from "./theme/sparkline.js";
+import dt from "./components/Sparkline.js";
+import { statTheme as ft } from "./theme/stat.js";
+import pt from "./components/Stat.js";
+import { stepperTheme as mt } from "./theme/stepper.js";
+import ht from "./components/Stepper.js";
+import { switchTheme as gt } from "./theme/switch.js";
+import _t from "./components/Switch.js";
+import { getRowValue as vt, useDataTable as yt } from "./composables/data-table.js";
+import { tableTheme as bt } from "./theme/table.js";
+import xt from "./components/Table.js";
+import { tabsTheme as St } from "./theme/tabs.js";
+import Ct from "./components/Tabs.js";
+import wt from "./components/Textarea.js";
+import { useToast as Tt, useToastState as Et } from "./composables/toast.js";
+import { toastTheme as Dt } from "./theme/toast.js";
+import Ot from "./components/Toaster.js";
+import { tooltipTheme as kt } from "./theme/tooltip.js";
+import At from "./components/Tooltip.js";
+import { IryxUi as jt, createIryxUi as Mt } from "./plugin.js";
+export { b as AXIS_GAP, a as Alert, d as App, p as Badge, h as Banner, F as BarChart, L as Breadcrumb, V as Button, U as ButtonGroup, x as CATEGORY_HEIGHT, S as CHAR_WIDTH, fe as CalendarDate, G as Card, P as ChartLegend, q as Checkbox, ae as Combobox, de as ConfirmDialog, ve as DatePicker, ye as DateRangePicker, ue as Dialog, xe as Drawer, Te as DropdownMenu, De as EmptyState, ke as FileUpload, Ae as Form, Ne as FormField, Pe as Input, jt as IryxUi, Me as Label, Ie as LineChart, Ye as NumberInput, Ze as Pagination, $e as PasswordInput, tt as Progress, rt as RadioGroup, C as SERIES_SLOTS, at as Select, st as Separator, lt as Skeleton, dt as Sparkline, pt as Stat, ht as Stepper, _t as Switch, w as TOP_PAD, xt as Table, Ct as Tabs, wt as Textarea, Ot as Toaster, At as Tooltip, Le as addDecimals, i as alertTheme, c as applyTheme, f as badgeTheme, m as bannerTheme, M as barChartTheme, I as breadcrumbTheme, R as buttonGroupContextKey, H as buttonGroupTheme, B as buttonTheme, W as cardTheme, T as cartesianLayout, N as chartLegendTheme, K as checkboxTheme, Re as clampDecimal, E as clampTooltip, l as clearTheme, ie as comboboxTheme, ze as compareDecimals, e as componentNames, Mt as createIryxUi, _e as datePickerTheme, t as defaultConfig, le as dialogTheme, be as drawerTheme, Se as dropdownMenuTheme, Ee as emptyStateTheme, g as extent, te as fieldBase, Oe as fileUploadTheme, _ as finiteValues, J as formContextKey, Y as formFieldContextKey, Be as formatDecimal, Ve as formatForLocale, pe as formatIsoDate, X as getByPath, vt as getRowValue, o as initAppearance, ne as inputTheme, n as iryxUiConfigKey, He as isDecimal, Ce as isSeparator, Z as isStandardSchema, we as isSubmenu, me as isoToday, Q as issuePath, je as labelTheme, Fe as lineChartTheme, v as linearScale, Ue as localeSeparators, y as niceTicks, Je as numberInputTheme, Xe as paginationTheme, We as parseDecimal, Ge as parseFromLocale, Qe as passwordInputTheme, et as progressTheme, nt as radioGroupTheme, oe as resolveConfirm, Ke as roundDecimal, it as selectTheme, ot as separatorTheme, D as seriesColor, ct as skeletonTheme, O as slotOf, ut as sparklineTheme, ft as statTheme, mt as stepperTheme, gt as switchTheme, bt as tableTheme, St as tabsTheme, re as textareaTheme, u as themes, he as toCalendarDate, qe as toEditable, ge as toIsoDate, Dt as toastTheme, k as tooltipHalfWidth, kt as tooltipTheme, s as useAppearance, z as useButtonGroup, se as useConfirm, ce as useConfirmState, yt as useDataTable, j as useElementSize, $ as useForm, ee as useFormField, r as useIryxUiConfig, Tt as useToast, Et as useToastState, A as warnOnSlotOverflow };

package/dist/theme/drawer.d.ts

@@ -0,0 +1,110 @@
+export declare const drawerTheme: import("tailwind-variants").TVReturnType<{
+    side: {
+        right: {
+            content: string;
+            handle: string;
+        };
+        left: {
+            content: string;
+            handle: string;
+        };
+        top: {
+            content: string;
+            handle: string;
+        };
+        bottom: {
+            content: string;
+            handle: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, undefined, {
+    side: {
+        right: {
+            content: string;
+            handle: string;
+        };
+        left: {
+            content: string;
+            handle: string;
+        };
+        top: {
+            content: string;
+            handle: string;
+        };
+        bottom: {
+            content: string;
+            handle: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    side: {
+        right: {
+            content: string;
+            handle: string;
+        };
+        left: {
+            content: string;
+            handle: string;
+        };
+        top: {
+            content: string;
+            handle: string;
+        };
+        bottom: {
+            content: string;
+            handle: string;
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
+        full: {};
+    };
+}, {
+    overlay: string;
+    content: string;
+    handle: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DrawerSlots = keyof ReturnType<typeof drawerTheme>;

package/dist/theme/drawer.js

@@ -0,0 +1,100 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/drawer.ts
+var t = e({
+	slots: {
+		overlay: "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in",
+		content: "iryx-drawer fixed z-50 flex touch-none flex-col gap-4 border-border bg-background p-6 text-foreground shadow-lg outline-none",
+		handle: "shrink-0 rounded-full bg-border",
+		header: "flex flex-col gap-1",
+		title: "text-base leading-none font-semibold",
+		description: "text-sm text-muted-foreground",
+		body: "-m-1 min-h-0 flex-1 touch-auto overflow-y-auto p-1",
+		footer: "flex flex-wrap items-center justify-end gap-2",
+		close: "absolute top-4 right-4 rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+	},
+	variants: {
+		side: {
+			right: {
+				content: "inset-y-0 right-0 h-dvh w-full border-l data-[state=closed]:animate-drawer-out-right data-[state=open]:animate-drawer-in-right",
+				handle: "absolute top-1/2 left-1.5 h-10 w-1 -translate-y-1/2"
+			},
+			left: {
+				content: "inset-y-0 left-0 h-dvh w-full border-r data-[state=closed]:animate-drawer-out-left data-[state=open]:animate-drawer-in-left",
+				handle: "absolute top-1/2 right-1.5 h-10 w-1 -translate-y-1/2"
+			},
+			top: {
+				content: "inset-x-0 top-0 w-full rounded-b-2xl border-b pb-4 data-[state=closed]:animate-drawer-out-top data-[state=open]:animate-drawer-in-top",
+				handle: "order-last mx-auto h-1 w-10"
+			},
+			bottom: {
+				content: "inset-x-0 bottom-0 w-full rounded-t-2xl border-t pt-4 data-[state=closed]:animate-drawer-out-bottom data-[state=open]:animate-drawer-in-bottom",
+				handle: "mx-auto h-1 w-10"
+			}
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {},
+			xl: {},
+			full: {}
+		}
+	},
+	compoundVariants: [
+		{
+			side: ["left", "right"],
+			size: "sm",
+			class: { content: "sm:max-w-sm" }
+		},
+		{
+			side: ["left", "right"],
+			size: "md",
+			class: { content: "sm:max-w-md" }
+		},
+		{
+			side: ["left", "right"],
+			size: "lg",
+			class: { content: "sm:max-w-lg" }
+		},
+		{
+			side: ["left", "right"],
+			size: "xl",
+			class: { content: "sm:max-w-2xl" }
+		},
+		{
+			side: ["left", "right"],
+			size: "full",
+			class: { content: "max-w-none" }
+		},
+		{
+			side: ["top", "bottom"],
+			size: "sm",
+			class: { content: "max-h-[25dvh]" }
+		},
+		{
+			side: ["top", "bottom"],
+			size: "md",
+			class: { content: "max-h-[40dvh]" }
+		},
+		{
+			side: ["top", "bottom"],
+			size: "lg",
+			class: { content: "max-h-[60dvh]" }
+		},
+		{
+			side: ["top", "bottom"],
+			size: "xl",
+			class: { content: "max-h-[80dvh]" }
+		},
+		{
+			side: ["top", "bottom"],
+			size: "full",
+			class: { content: "h-dvh max-h-none rounded-none" }
+		}
+	],
+	defaultVariants: {
+		side: "right",
+		size: "md"
+	}
+});
+//#endregion
+export { t as drawerTheme };

package/dist/theme/index.d.ts

@@ -11,6 +11,7 @@ export * from './checkbox';
 export * from './combobox';
 export * from './date-picker';
 export * from './dialog';
+export * from './drawer';
 export * from './dropdown-menu';
 export * from './empty-state';
 export * from './file-upload';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -55,13 +55,14 @@
     "@hugeicons/vue": "^1.0.7",
     "@internationalized/date": "^3.12.3",
     "@nuxt/kit": "^4.4.8",
-    "reka-ui": "^2.9.10",
+    "reka-ui": "~2.10.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.11",
+    "axe-core": "^4.13.0",
     "happy-dom": "^20.10.2",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",

package/theme.css

@@ -200,6 +200,19 @@
   --animate-dialog-in: dialog-in 150ms ease-out;
   --animate-dialog-out: dialog-out 150ms ease-in;
   --animate-toast-in: toast-in 150ms ease-out;
+  /*
+   * One easing for every drawer transition, enter/exit and drag-release alike,
+   * so a panel that is let go mid-swipe finishes the way it would have opened.
+   */
+  --iryx-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-drawer-in-right: drawer-in-right 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-right: drawer-out-right 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-left: drawer-in-left 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-left: drawer-out-left 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-top: drawer-in-top 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-top: drawer-out-top 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-bottom: drawer-in-bottom 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-bottom: drawer-out-bottom 300ms var(--iryx-drawer-ease);
 }
 
 /* Indeterminate Progress: slide a short bar back and forth across the track. */
@@ -250,3 +263,104 @@
     transform: translateY(0.5rem);
   }
 }
+
+/*
+ * Drawer enter/exit, one pair per edge.
+ *
+ * These animate the independent `translate` property, NOT `transform` — the
+ * exact opposite of the dialog's constraint, and for the same underlying
+ * reason. Reka's drawer follows the finger by writing `transform` from
+ * `--drawer-swipe-movement-*` (see `.iryx-drawer` below), so a keyframe on
+ * `transform` would clobber the drag offset and the panel would refuse to
+ * move under the pointer. `translate` composes with it instead.
+ *
+ * The slide is the whole animation — fading a panel that is already moving
+ * reads as two effects fighting.
+ */
+@keyframes drawer-in-right {
+  from {
+    translate: 100% 0;
+  }
+}
+
+@keyframes drawer-out-right {
+  to {
+    translate: 100% 0;
+  }
+}
+
+@keyframes drawer-in-left {
+  from {
+    translate: -100% 0;
+  }
+}
+
+@keyframes drawer-out-left {
+  to {
+    translate: -100% 0;
+  }
+}
+
+@keyframes drawer-in-top {
+  from {
+    translate: 0 -100%;
+  }
+}
+
+@keyframes drawer-out-top {
+  to {
+    translate: 0 -100%;
+  }
+}
+
+@keyframes drawer-in-bottom {
+  from {
+    translate: 0 100%;
+  }
+}
+
+@keyframes drawer-out-bottom {
+  to {
+    translate: 0 100%;
+  }
+}
+
+/*
+ * Drawer drag plumbing.
+ *
+ * This is plain CSS rather than Tailwind utilities because it is variable
+ * arithmetic keyed on an attribute Reka sets at runtime — there is no class
+ * name to generate. Reka writes the live drag offset into
+ * `--drawer-swipe-movement-x/y` and the resting snap position into
+ * `--drawer-snap-point-offset`; both act on the swipe axis, so they add.
+ *
+ * `[data-swiping]` kills the transition while a finger is down, or the panel
+ * lags behind the pointer by a whole easing curve.
+ */
+@layer components {
+  .iryx-drawer {
+    transition: transform 300ms var(--iryx-drawer-ease);
+  }
+
+  .iryx-drawer[data-swipe-direction="up"],
+  .iryx-drawer[data-swipe-direction="down"] {
+    transform: translate3d(
+      0,
+      calc(var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)),
+      0
+    );
+  }
+
+  .iryx-drawer[data-swipe-direction="left"],
+  .iryx-drawer[data-swipe-direction="right"] {
+    transform: translate3d(
+      calc(var(--drawer-swipe-movement-x, 0px) + var(--drawer-snap-point-offset, 0px)),
+      0,
+      0
+    );
+  }
+
+  .iryx-drawer[data-swiping] {
+    transition-duration: 0ms;
+  }
+}