orynn 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { createContext, forwardRef, useContext, useId, useRef, useEffect, useCallback, useMemo, useState, useImperativeHandle, useLayoutEffect, useReducer, memo } from 'react';
+import { createContext, forwardRef, useContext, useId, useRef, useEffect, useCallback, useMemo, useState, useImperativeHandle, useLayoutEffect, useReducer, useSyncExternalStore, memo, isValidElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Slot, Label as Label$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import { Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Accordion as Accordion$1, Slot, Slider as Slider$1, Progress as Progress$1, Toast, Label as Label$1, Separator as Separator$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from 'radix-ui';
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -621,7 +621,10 @@ function Popover({
           left: pos.left,
           top: pos.top,
           width: matchWidth ? pos.width : void 0,
-          minWidth: pos.width,
+          // Only pin the min-width to the anchor when we're matching it. With
+          // `matchWidth={false}` the panel sizes to its own content, so a wide
+          // trigger doesn't stretch it across the screen.
+          minWidth: matchWidth ? pos.width : void 0,
           maxHeight: pos.maxHeight,
           transform: pos.placement === "top" ? "translateY(-100%)" : void 0
         },
@@ -796,7 +799,7 @@ function Calendar({
   onSelect,
   mode = "single",
   selectedDates,
-  range,
+  range: range2,
   previewRange: previewRange2,
   onHoverDate,
   minDate,
@@ -815,11 +818,14 @@ function Calendar({
   precision = "day",
   fixedWeeks = true,
   defaultMonth,
-  numberOfMonths = 1
+  numberOfMonths = 1,
+  className,
+  style,
+  fillWidth
 }) {
   const panels = Math.max(1, Math.floor(numberOfMonths));
   const today = startOfDay(/* @__PURE__ */ new Date());
-  const anchor = value ?? (mode === "range" ? range?.start ?? range?.end ?? null : null) ?? (mode === "multiple" ? selectedDates?.[0] ?? null : null) ?? defaultMonth ?? null;
+  const anchor = value ?? (mode === "range" ? range2?.start ?? range2?.end ?? null : null) ?? (mode === "multiple" ? selectedDates?.[0] ?? null : null) ?? defaultMonth ?? null;
   const initial = anchor ?? clampDate(today, minDate, maxDate);
   const [nav, setNav] = useState({ y: initial.getFullYear(), m: initial.getMonth() });
   const [focused, setFocused] = useState(initial);
@@ -980,9 +986,9 @@ function Calendar({
                 if (mode === "multiple") {
                   selected = (selectedDates ?? []).some((x) => isSameDay(x, d));
                 } else if (mode === "range") {
-                  rangeStart = isRangeStart(d, range) || !!previewRange2 && isRangeStart(d, previewRange2);
-                  rangeEnd = isRangeEnd(d, range) || !!previewRange2 && isRangeEnd(d, previewRange2);
-                  inRange = isWithinRange(d, range) || !!previewRange2 && isWithinRange(d, previewRange2);
+                  rangeStart = isRangeStart(d, range2) || !!previewRange2 && isRangeStart(d, previewRange2);
+                  rangeEnd = isRangeEnd(d, range2) || !!previewRange2 && isRangeEnd(d, previewRange2);
+                  inRange = isWithinRange(d, range2) || !!previewRange2 && isWithinRange(d, previewRange2);
                   selected = rangeStart || rangeEnd;
                 } else {
                   selected = isSameDay(d, value);
@@ -1142,10 +1148,12 @@ function Calendar({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "orynn-calendar",
+      className: cx("orynn-calendar", className),
+      style,
       ref: gridRef,
       "data-view": view,
       "data-months": panels > 1 ? panels : void 0,
+      "data-fill": fillWidth || void 0,
       children: [
         header,
         " ",
@@ -1219,7 +1227,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       value: valueProp,
       defaultValue,
       onChange,
-      format = "yyyy-MM-dd",
+      format = "dd-MMM-yyyy",
       minDate,
       maxDate,
       disabledDates,
@@ -1233,6 +1241,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       precision = "day",
       fixedWeeks = true,
       numberOfMonths,
+      calendarWidth,
       showTime = false,
       timeStep = 5,
       defaultMonth,
@@ -1250,7 +1259,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
     const panelId = `${id}-cal`;
     const withTimePicker = showTime && mode === "single";
     const closeOnSelect = closeOnSelectProp ?? !withTimePicker;
-    const fmt = withTimePicker && format === "yyyy-MM-dd" ? "yyyy-MM-dd HH:mm" : format;
+    const fmt = withTimePicker && format === "dd-MMM-yyyy" ? "dd-MMM-yyyy HH:mm" : format;
     const isControlled = valueProp !== void 0;
     const [innerRaw, setInnerRaw] = useState(() => defaultValue ?? null);
     const raw = isControlled ? valueProp : innerRaw;
@@ -1363,9 +1372,9 @@ var DatePicker = /* @__PURE__ */ forwardRef(
       if (closeOnSelect && !inline) closeAndRefocus();
     };
     const setTimeField = (part, n) => {
-      const base2 = curDate ?? startOfDay(/* @__PURE__ */ new Date());
-      const t = timeParts(base2);
-      commit(withTime(base2, { ...t, [part]: n, s: 0 }));
+      const base3 = curDate ?? startOfDay(/* @__PURE__ */ new Date());
+      const t = timeParts(base3);
+      commit(withTime(base3, { ...t, [part]: n, s: 0 }));
     };
     const timeColumn = withTimePicker ? /* @__PURE__ */ jsxs("div", { className: "orynn-datepicker__time", children: [
       /* @__PURE__ */ jsx("span", { className: "orynn-datepicker__time-label", children: "Time" }),
@@ -1393,11 +1402,18 @@ var DatePicker = /* @__PURE__ */ forwardRef(
         )
       ] })
     ] }) : null;
+    const calendarStyle = calendarWidth != null ? {
+      "--orynn-calendar-min-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth
+    } : void 0;
+    const hasExtras = (numberOfMonths ?? 1) > 1 || (presets?.length ?? 0) > 0 || withTimePicker;
+    const fillWidth = inline || !hasExtras;
     const calendar = /* @__PURE__ */ jsx(
       Calendar,
       {
         value: curDate,
         onSelect: select,
+        style: calendarStyle,
+        fillWidth,
         mode,
         selectedDates: mode === "multiple" ? curDates : void 0,
         range: mode === "range" ? curRange : void 0,
@@ -1572,7 +1588,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(
                 setOpen(false);
                 setGridFocus(false);
               },
-              matchWidth: false,
+              matchWidth: fillWidth,
               id: panelId,
               role: "dialog",
               children: cal
@@ -2435,8 +2451,8 @@ var NumberField = /* @__PURE__ */ forwardRef(
     };
     const bump = (dir, mode = "n") => {
       const amount = mode === "l" ? shiftStep ?? step * 10 : mode === "s" ? smallStep ?? step / 10 : step;
-      const base2 = value ?? (dir > 0 ? effMin ?? 0 : max ?? 0);
-      let next = round(base2 + amount * dir, scale);
+      const base3 = value ?? (dir > 0 ? effMin ?? 0 : max ?? 0);
+      let next = round(base3 + amount * dir, scale);
       if (clampMode !== "none") next = clamp(next, effMin, max);
       else if (!allowNegative && next < 0) next = 0;
       setNumber(next);
@@ -3995,9 +4011,65 @@ function Form(props) {
     }
   );
 }
+var Accordion = /* @__PURE__ */ forwardRef(
+  function Accordion2({ className, variant = "bordered", size = "md", ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      Accordion$1.Root,
+      {
+        ref,
+        "data-slot": "accordion",
+        "data-variant": variant,
+        "data-size": size,
+        className: cx("orynn-accordion", className),
+        ...props
+      }
+    );
+  }
+);
+var AccordionItem = /* @__PURE__ */ forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cx("orynn-accordion__item", className),
+      ...props
+    }
+  );
+});
+var AccordionTrigger = /* @__PURE__ */ forwardRef(function AccordionTrigger2({ className, children, icon, iconPosition = "end", hideIcon = false, ...props }, ref) {
+  const indicator = hideIcon ? null : /* @__PURE__ */ jsx("span", { className: "orynn-accordion__icon", "data-slot": "accordion-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(ChevronDownIcon, {}) });
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "orynn-accordion__header", "data-slot": "accordion-header", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      "data-icon-position": iconPosition,
+      className: cx("orynn-accordion__trigger", className),
+      ...props,
+      children: [
+        iconPosition === "start" && indicator,
+        /* @__PURE__ */ jsx("span", { className: "orynn-accordion__label", children }),
+        iconPosition === "end" && indicator
+      ]
+    }
+  ) });
+});
+var AccordionContent = /* @__PURE__ */ forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Content,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: cx("orynn-accordion__content", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "orynn-accordion__body", children })
+    }
+  );
+});
 
 // src/primitives/shared/classes.ts
-var mod = (base2, key, fallback) => key === fallback ? void 0 : `${base2}--${key}`;
+var mod = (base3, key, fallback) => key === fallback ? void 0 : `${base3}--${key}`;
 function buttonClasses(variant = "default", size = "default") {
   return cx(
     "orynn-button",
@@ -4019,6 +4091,10 @@ var Button = /* @__PURE__ */ forwardRef(function Button2({
   leftIcon,
   rightIcon,
   fullWidth = false,
+  hoverEffect,
+  focusStyle,
+  selected,
+  cursor,
   disabled,
   children,
   ...props
@@ -4029,6 +4105,11 @@ var Button = /* @__PURE__ */ forwardRef(function Button2({
     "data-size": size,
     "data-loading": loading || void 0,
     "data-full-width": fullWidth || void 0,
+    "data-hover-effect": hoverEffect,
+    "data-focus-style": focusStyle,
+    "data-selected": selected || void 0,
+    "data-cursor": cursor,
+    "aria-pressed": selected,
     className: cx(buttonClasses(variant, size), className),
     ...props
   };
@@ -4051,6 +4132,596 @@ var Button = /* @__PURE__ */ forwardRef(function Button2({
     }
   );
 });
+var toArray2 = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
+var Slider = /* @__PURE__ */ forwardRef(function Slider2({
+  className,
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = "md",
+  marks,
+  showTicks = false,
+  tooltip = "none",
+  formatValue,
+  orientation = "horizontal",
+  onValueChange,
+  ...props
+}, ref) {
+  const controlled = value !== void 0;
+  const initial = toArray2(value) ?? toArray2(defaultValue) ?? [min];
+  const [internal, setInternal] = useState(initial);
+  const current = controlled ? toArray2(value) : internal;
+  const handleChange = (next) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const fmt = (n) => formatValue ? formatValue(n) : n;
+  const ticks = useMemo(() => {
+    if (!showTicks) return [];
+    const count = Math.floor((max - min) / step);
+    if (count < 1 || count > 60) return [];
+    return Array.from({ length: count + 1 }, (_, i) => min + i * step);
+  }, [showTicks, min, max, step]);
+  const pct = (n) => (n - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs(
+    Slider$1.Root,
+    {
+      ref,
+      "data-slot": "slider",
+      "data-size": size,
+      "data-orientation": orientation,
+      "data-tooltip": tooltip === "none" ? void 0 : tooltip,
+      className: cx("orynn-slider", className),
+      min,
+      max,
+      step,
+      orientation,
+      onValueChange: handleChange,
+      ...controlled ? { value: current } : { defaultValue: initial },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Slider$1.Track, { "data-slot": "slider-track", className: "orynn-slider__track", children: [
+          /* @__PURE__ */ jsx(Slider$1.Range, { "data-slot": "slider-range", className: "orynn-slider__range" }),
+          ticks.map((t) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "orynn-slider__tick",
+              "aria-hidden": "true",
+              style: { insetInlineStart: `${pct(t)}%` }
+            },
+            `tick-${t}`
+          ))
+        ] }),
+        current.map((v, i) => /* @__PURE__ */ jsx(
+          Slider$1.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "orynn-slider__thumb",
+            "aria-label": props["aria-label"] ?? `Value ${i + 1}`,
+            children: tooltip !== "none" && /* @__PURE__ */ jsx("span", { className: "orynn-slider__tooltip", "data-slot": "slider-tooltip", children: fmt(v) })
+          },
+          `thumb-${i}`
+        )),
+        marks && marks.length > 0 && /* @__PURE__ */ jsx("div", { className: "orynn-slider__marks", "aria-hidden": "true", children: marks.map((m) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "orynn-slider__mark",
+            style: { insetInlineStart: `${pct(m.value)}%` },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "orynn-slider__mark-dot" }),
+              m.label != null && /* @__PURE__ */ jsx("span", { className: "orynn-slider__mark-label", children: m.label })
+            ]
+          },
+          `mark-${m.value}`
+        )) })
+      ]
+    }
+  );
+});
+var CIRCLE_SIZE = { sm: 40, md: 56, lg: 72 };
+var CIRCLE_STROKE = { sm: 4, md: 5, lg: 6 };
+var Progress = /* @__PURE__ */ forwardRef(function Progress2({
+  className,
+  value,
+  max = 100,
+  shape = "line",
+  size = "md",
+  variant = "default",
+  showValue = false,
+  label,
+  striped = false,
+  animated = false,
+  radius,
+  circleThickness,
+  circleSize,
+  formatValue,
+  style,
+  ...props
+}, ref) {
+  const indeterminate = value == null;
+  const clamped = indeterminate ? 0 : Math.min(max, Math.max(0, value));
+  const pct = max > 0 ? clamped / max * 100 : 0;
+  const text = formatValue ? formatValue(clamped, max) : `${Math.round(pct)}%`;
+  const shared = {
+    ref,
+    "data-slot": "progress",
+    "data-shape": shape,
+    "data-size": size,
+    "data-variant": variant,
+    "data-indeterminate": indeterminate || void 0,
+    value: indeterminate ? null : clamped,
+    max,
+    ...props
+  };
+  if (shape === "circle") {
+    const dim = circleSize ?? CIRCLE_SIZE[size];
+    const stroke = circleThickness ?? CIRCLE_STROKE[size];
+    const r = (dim - stroke) / 2;
+    const circ = 2 * Math.PI * r;
+    const offset = indeterminate ? circ * 0.7 : circ * (1 - pct / 100);
+    return /* @__PURE__ */ jsxs(
+      Progress$1.Root,
+      {
+        ...shared,
+        className: cx("orynn-progress", "orynn-progress--circle", className),
+        style: { inlineSize: dim, blockSize: dim, ...style },
+        children: [
+          /* @__PURE__ */ jsxs("svg", { className: "orynn-progress__svg", viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "orynn-progress__ring-track",
+                cx: dim / 2,
+                cy: dim / 2,
+                r,
+                fill: "none",
+                strokeWidth: stroke
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "orynn-progress__ring",
+                cx: dim / 2,
+                cy: dim / 2,
+                r,
+                fill: "none",
+                strokeWidth: stroke,
+                strokeLinecap: "round",
+                strokeDasharray: circ,
+                strokeDashoffset: offset
+              }
+            )
+          ] }),
+          showValue && !indeterminate && /* @__PURE__ */ jsx("span", { className: "orynn-progress__circle-value", children: text })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "orynn-progress__wrap", children: [
+    (label != null || showValue && !indeterminate) && /* @__PURE__ */ jsxs("div", { className: "orynn-progress__meta", children: [
+      label != null && /* @__PURE__ */ jsx("span", { className: "orynn-progress__label", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsx("span", { className: "orynn-progress__value", children: text })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Progress$1.Root,
+      {
+        ...shared,
+        "data-striped": striped || animated || void 0,
+        "data-animated": animated || void 0,
+        className: cx("orynn-progress", className),
+        style: { borderRadius: radius != null ? radius : void 0, ...style },
+        children: /* @__PURE__ */ jsx(
+          Progress$1.Indicator,
+          {
+            className: "orynn-progress__bar",
+            "data-slot": "progress-bar",
+            style: {
+              transform: indeterminate ? void 0 : `translateX(-${100 - pct}%)`
+            }
+          }
+        )
+      }
+    )
+  ] });
+});
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+var counter = 0;
+var emit = () => {
+  for (const l of listeners) l(toasts);
+};
+var subscribe = (l) => {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+};
+var getSnapshot = () => toasts;
+var upsert = (record) => {
+  const i = toasts.findIndex((t) => t.id === record.id);
+  toasts = i === -1 ? [...toasts, record] : toasts.map((t) => t.id === record.id ? record : t);
+  emit();
+};
+var dismissToast = (id) => {
+  toasts = id == null ? [] : toasts.filter((t) => t.id !== id);
+  emit();
+};
+var isMessage = (v) => typeof v === "string" || typeof v === "number" || isValidElement(v);
+var normalize = (input, extra) => isMessage(input) ? { title: input, ...extra } : { ...input, ...extra };
+function base2(input, extra) {
+  const opts = normalize(input, extra);
+  const id = opts.id ?? `toast-${++counter}`;
+  upsert({ ...opts, id, createdAt: Date.now() });
+  return id;
+}
+var withVariant = (variant) => (message, opts) => base2(message, { ...opts, variant });
+var toast = base2;
+toast.success = withVariant("success");
+toast.error = withVariant("error");
+toast.warning = withVariant("warning");
+toast.info = withVariant("info");
+toast.loading = withVariant("loading");
+toast.dismiss = dismissToast;
+toast.promise = (promise, msgs, opts) => {
+  const id = base2(msgs.loading, {
+    ...opts,
+    variant: "loading",
+    duration: Number.POSITIVE_INFINITY
+  });
+  promise.then(
+    (value) => {
+      const m = typeof msgs.success === "function" ? msgs.success(value) : msgs.success;
+      base2(m, { ...opts, id, variant: "success", duration: opts?.duration });
+    },
+    (err) => {
+      const m = typeof msgs.error === "function" ? msgs.error(err) : msgs.error;
+      base2(m, { ...opts, id, variant: "error", duration: opts?.duration });
+    }
+  );
+  return promise;
+};
+function AngleIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M12 8v5M12 16h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function InfoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+function CircleXIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m15 9-6 6M9 9l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+var VARIANT_ICON = {
+  default: null,
+  success: /* @__PURE__ */ jsx(CheckIcon, {}),
+  error: /* @__PURE__ */ jsx(CircleXIcon, {}),
+  warning: /* @__PURE__ */ jsx(AngleIcon, {}),
+  info: /* @__PURE__ */ jsx(InfoIcon, {}),
+  loading: /* @__PURE__ */ jsx(SpinnerIcon, { className: "orynn-spin" })
+};
+var SWIPE = {
+  "top-left": "left",
+  "top-center": "up",
+  "top-right": "right",
+  "bottom-left": "left",
+  "bottom-center": "down",
+  "bottom-right": "right"
+};
+function ToastItem({
+  record,
+  duration,
+  closeButton
+}) {
+  const variant = record.variant ?? "default";
+  const icon = record.icon === null ? null : record.icon ?? VARIANT_ICON[variant];
+  const showClose = record.dismissible ?? closeButton;
+  const d = record.duration ?? (variant === "loading" ? Number.POSITIVE_INFINITY : duration);
+  return /* @__PURE__ */ jsxs(
+    Toast.Root,
+    {
+      "data-slot": "toast",
+      "data-variant": variant,
+      className: "orynn-toast",
+      duration: Number.isFinite(d) ? d : 1e9,
+      onOpenChange: (open) => {
+        record.onOpenChange?.(open);
+        if (!open) dismissToast(record.id);
+      },
+      children: [
+        icon != null && /* @__PURE__ */ jsx("span", { className: "orynn-toast__icon", "data-slot": "toast-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "orynn-toast__content", children: [
+          record.title != null && /* @__PURE__ */ jsx(Toast.Title, { className: "orynn-toast__title", children: record.title }),
+          record.description != null && /* @__PURE__ */ jsx(Toast.Description, { className: "orynn-toast__description", children: record.description })
+        ] }),
+        record.action && /* @__PURE__ */ jsx(
+          Toast.Action,
+          {
+            className: "orynn-toast__action",
+            altText: record.action.altText ?? (typeof record.action.label === "string" ? record.action.label : "Action"),
+            onClick: record.action.onClick,
+            children: record.action.label
+          }
+        ),
+        showClose && /* @__PURE__ */ jsx(
+          Toast.Close,
+          {
+            className: "orynn-toast__close",
+            "aria-label": "Dismiss",
+            "data-slot": "toast-close",
+            children: /* @__PURE__ */ jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function Toaster({
+  position = "bottom-right",
+  duration = 4e3,
+  visibleToasts = 4,
+  closeButton = true,
+  richColors = false,
+  gap = 12,
+  offset = 24,
+  className
+}) {
+  const records = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const shown = records.slice(-visibleToasts);
+  const [side] = position.split("-");
+  return /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: SWIPE[position], duration, children: [
+    shown.map((record) => /* @__PURE__ */ jsx(ToastItem, { record, duration, closeButton }, record.id)),
+    /* @__PURE__ */ jsx(
+      Toast.Viewport,
+      {
+        "data-slot": "toaster",
+        "data-position": position,
+        "data-rich-colors": richColors || void 0,
+        className: cx("orynn-toaster", className),
+        style: {
+          "--orynn-toaster-gap": `${gap}px`,
+          "--orynn-toaster-offset": `${offset}px`,
+          [side]: `${offset}px`
+        }
+      }
+    )
+  ] });
+}
+function useToast() {
+  const toasts2 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return { toast, dismiss: dismissToast, toasts: toasts2 };
+}
+
+// src/primitives/Pagination/use-pagination.ts
+var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
+function usePagination({
+  page,
+  count,
+  total,
+  pageSize = 10,
+  siblingCount = 1,
+  boundaryCount = 1
+}) {
+  const pageCount = Math.max(
+    1,
+    count ?? (total != null ? Math.ceil(total / Math.max(1, pageSize)) : 1)
+  );
+  const current = Math.min(Math.max(1, page), pageCount);
+  const startPages = range(1, Math.min(boundaryCount, pageCount));
+  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
+  const siblingsStart = Math.max(
+    Math.min(current - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : pageCount - 1
+  );
+  const slots = [
+    ...startPages,
+    ...siblingsStart > boundaryCount + 2 ? ["ellipsis-start"] : boundaryCount + 1 < pageCount - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < pageCount - boundaryCount - 1 ? ["ellipsis-end"] : pageCount - boundaryCount > boundaryCount ? [pageCount - boundaryCount] : [],
+    ...endPages
+  ];
+  return {
+    pageCount,
+    page: current,
+    hasPrev: current > 1,
+    hasNext: current < pageCount,
+    slots
+  };
+}
+var PaginationContent = /* @__PURE__ */ forwardRef(
+  function PaginationContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "data-slot": "pagination-content",
+        className: cx("orynn-pagination__list", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationItem = /* @__PURE__ */ forwardRef(
+  function PaginationItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        "data-slot": "pagination-item",
+        className: cx("orynn-pagination__item", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationLink = /* @__PURE__ */ forwardRef(
+  function PaginationLink2({ className, isActive, size = "md", type, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        "data-slot": "pagination-link",
+        "data-active": isActive || void 0,
+        "data-size": size,
+        "aria-current": isActive ? "page" : void 0,
+        className: cx("orynn-pagination__link", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationEllipsis = /* @__PURE__ */ forwardRef(function PaginationEllipsis2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-slot": "pagination-ellipsis",
+      className: cx("orynn-pagination__ellipsis", className),
+      ...props,
+      children: children ?? "\u2026"
+    }
+  );
+});
+var Pagination = /* @__PURE__ */ forwardRef(
+  function Pagination2({
+    className,
+    page,
+    count,
+    total,
+    pageSize,
+    siblingCount,
+    boundaryCount,
+    onPageChange,
+    showFirstLast = false,
+    showPrevNext = true,
+    iconOnly = false,
+    size = "md",
+    variant = "outline",
+    disabled = false,
+    labels,
+    prevIcon,
+    nextIcon,
+    ...props
+  }, ref) {
+    const model = usePagination({ page, count, total, pageSize, siblingCount, boundaryCount });
+    const L = {
+      previous: labels?.previous ?? "Previous",
+      next: labels?.next ?? "Next",
+      first: labels?.first ?? "First page",
+      last: labels?.last ?? "Last page",
+      ariaLabel: labels?.ariaLabel ?? "Pagination",
+      page: labels?.page ?? ((n) => `Page ${n}`)
+    };
+    const go = (p) => {
+      if (disabled) return;
+      const next = Math.min(Math.max(1, p), model.pageCount);
+      if (next !== model.page) onPageChange(next);
+    };
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": L.ariaLabel,
+        "data-slot": "pagination",
+        "data-size": size,
+        "data-variant": variant,
+        "data-disabled": disabled || void 0,
+        className: cx("orynn-pagination", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+          showFirstLast && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.first,
+              disabled: disabled || !model.hasPrev,
+              onClick: () => go(1),
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+                /* @__PURE__ */ jsx(ChevronLeftIcon, { style: { marginInlineStart: "-0.65em" } })
+              ]
+            }
+          ) }),
+          showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.previous,
+              disabled: disabled || !model.hasPrev,
+              className: "orynn-pagination__nav",
+              onClick: () => go(model.page - 1),
+              children: [
+                prevIcon ?? /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+                !iconOnly && /* @__PURE__ */ jsx("span", { className: "orynn-pagination__nav-label", children: L.previous })
+              ]
+            }
+          ) }),
+          model.slots.map(
+            (slot) => typeof slot === "number" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLink,
+              {
+                size,
+                isActive: slot === model.page,
+                "aria-label": L.page(slot),
+                disabled,
+                onClick: () => go(slot),
+                children: slot
+              }
+            ) }, slot) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, slot)
+          ),
+          showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.next,
+              disabled: disabled || !model.hasNext,
+              className: "orynn-pagination__nav",
+              onClick: () => go(model.page + 1),
+              children: [
+                !iconOnly && /* @__PURE__ */ jsx("span", { className: "orynn-pagination__nav-label", children: L.next }),
+                nextIcon ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+              ]
+            }
+          ) }),
+          showFirstLast && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.last,
+              disabled: disabled || !model.hasNext,
+              onClick: () => go(model.pageCount),
+              children: [
+                /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+                /* @__PURE__ */ jsx(ChevronRightIcon, { style: { marginInlineStart: "-0.65em" } })
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
 var Label = /* @__PURE__ */ forwardRef(function Label2({ className, required, optional, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     Label$1.Root,
@@ -4794,6 +5465,6 @@ function standardSchemaResolver(schema) {
   };
 }
 
-export { Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FORM_ERROR_KEY, Field, FieldBox, Fieldset, FieldsetView, Form, Input, Label, NumberField, OrynnProvider, Popover2 as Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Radio, RadioGroup, Dropdown as Select, Separator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeClasses, builtInRules, buttonClasses, createRegistry, createRuleResolver, defaultRegistry, defaultResolver, normalizeConfig, registerField, registerRule, resolveThemeVars, standardSchemaResolver, useFieldsetState, useOrynnTheme, usePortalContainer };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FORM_ERROR_KEY, Field, FieldBox, Fieldset, FieldsetView, Form, Input, Label, NumberField, OrynnProvider, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, Popover2 as Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Dropdown as Select, Separator, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeClasses, builtInRules, buttonClasses, createRegistry, createRuleResolver, defaultRegistry, defaultResolver, normalizeConfig, registerField, registerRule, resolveThemeVars, standardSchemaResolver, toast, useFieldsetState, useOrynnTheme, usePagination, usePortalContainer, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map