orynn 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -623,7 +623,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
         },
@@ -798,7 +801,7 @@ function Calendar({
   onSelect,
   mode = "single",
   selectedDates,
-  range,
+  range: range2,
   previewRange: previewRange2,
   onHoverDate,
   minDate,
@@ -817,11 +820,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] = react.useState({ y: initial.getFullYear(), m: initial.getMonth() });
   const [focused, setFocused] = react.useState(initial);
@@ -982,9 +988,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);
@@ -1144,10 +1150,12 @@ function Calendar({
   return /* @__PURE__ */ jsxRuntime.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,
         " ",
@@ -1221,7 +1229,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
       value: valueProp,
       defaultValue,
       onChange,
-      format = "yyyy-MM-dd",
+      format = "dd-MMM-yyyy",
       minDate,
       maxDate,
       disabledDates,
@@ -1235,6 +1243,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
       precision = "day",
       fixedWeeks = true,
       numberOfMonths,
+      calendarWidth,
       showTime = false,
       timeStep = 5,
       defaultMonth,
@@ -1252,7 +1261,7 @@ var DatePicker = /* @__PURE__ */ react.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] = react.useState(() => defaultValue ?? null);
     const raw = isControlled ? valueProp : innerRaw;
@@ -1365,9 +1374,9 @@ var DatePicker = /* @__PURE__ */ react.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__ */ jsxRuntime.jsxs("div", { className: "orynn-datepicker__time", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-datepicker__time-label", children: "Time" }),
@@ -1395,11 +1404,18 @@ var DatePicker = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
       Calendar,
       {
         value: curDate,
         onSelect: select,
+        style: calendarStyle,
+        fillWidth,
         mode,
         selectedDates: mode === "multiple" ? curDates : void 0,
         range: mode === "range" ? curRange : void 0,
@@ -1574,7 +1590,7 @@ var DatePicker = /* @__PURE__ */ react.forwardRef(
                 setOpen(false);
                 setGridFocus(false);
               },
-              matchWidth: false,
+              matchWidth: fillWidth,
               id: panelId,
               role: "dialog",
               children: cal
@@ -2437,8 +2453,8 @@ var NumberField = /* @__PURE__ */ react.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);
@@ -3997,9 +4013,65 @@ function Form(props) {
     }
   );
 }
+var Accordion = /* @__PURE__ */ react.forwardRef(
+  function Accordion2({ className, variant = "bordered", size = "md", ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Accordion.Root,
+      {
+        ref,
+        "data-slot": "accordion",
+        "data-variant": variant,
+        "data-size": size,
+        className: cx("orynn-accordion", className),
+        ...props
+      }
+    );
+  }
+);
+var AccordionItem = /* @__PURE__ */ react.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Accordion.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cx("orynn-accordion__item", className),
+      ...props
+    }
+  );
+});
+var AccordionTrigger = /* @__PURE__ */ react.forwardRef(function AccordionTrigger2({ className, children, icon, iconPosition = "end", hideIcon = false, ...props }, ref) {
+  const indicator = hideIcon ? null : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-accordion__icon", "data-slot": "accordion-icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Header, { className: "orynn-accordion__header", "data-slot": "accordion-header", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Accordion.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      "data-icon-position": iconPosition,
+      className: cx("orynn-accordion__trigger", className),
+      ...props,
+      children: [
+        iconPosition === "start" && indicator,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-accordion__label", children }),
+        iconPosition === "end" && indicator
+      ]
+    }
+  ) });
+});
+var AccordionContent = /* @__PURE__ */ react.forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Accordion.Content,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: cx("orynn-accordion__content", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.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",
@@ -4021,6 +4093,10 @@ var Button = /* @__PURE__ */ react.forwardRef(function Button2({
   leftIcon,
   rightIcon,
   fullWidth = false,
+  hoverEffect,
+  focusStyle,
+  selected,
+  cursor,
   disabled,
   children,
   ...props
@@ -4031,6 +4107,11 @@ var Button = /* @__PURE__ */ react.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
   };
@@ -4053,6 +4134,596 @@ var Button = /* @__PURE__ */ react.forwardRef(function Button2({
     }
   );
 });
+var toArray2 = (v) => v == null ? void 0 : Array.isArray(v) ? v : [v];
+var Slider = /* @__PURE__ */ react.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] = react.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 = react.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__ */ jsxRuntime.jsxs(
+    radixUi.Slider.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__ */ jsxRuntime.jsxs(radixUi.Slider.Track, { "data-slot": "slider-track", className: "orynn-slider__track", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(radixUi.Slider.Range, { "data-slot": "slider-range", className: "orynn-slider__range" }),
+          ticks.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "orynn-slider__tick",
+              "aria-hidden": "true",
+              style: { insetInlineStart: `${pct(t)}%` }
+            },
+            `tick-${t}`
+          ))
+        ] }),
+        current.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.Slider.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "orynn-slider__thumb",
+            "aria-label": props["aria-label"] ?? `Value ${i + 1}`,
+            children: tooltip !== "none" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-slider__tooltip", "data-slot": "slider-tooltip", children: fmt(v) })
+          },
+          `thumb-${i}`
+        )),
+        marks && marks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "orynn-slider__marks", "aria-hidden": "true", children: marks.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "orynn-slider__mark",
+            style: { insetInlineStart: `${pct(m.value)}%` },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-slider__mark-dot" }),
+              m.label != null && /* @__PURE__ */ jsxRuntime.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__ */ react.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__ */ jsxRuntime.jsxs(
+      radixUi.Progress.Root,
+      {
+        ...shared,
+        className: cx("orynn-progress", "orynn-progress--circle", className),
+        style: { inlineSize: dim, blockSize: dim, ...style },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "orynn-progress__svg", viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "orynn-progress__ring-track",
+                cx: dim / 2,
+                cy: dim / 2,
+                r,
+                fill: "none",
+                strokeWidth: stroke
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "orynn-progress__circle-value", children: text })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-progress__wrap", children: [
+    (label != null || showValue && !indeterminate) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-progress__meta", children: [
+      label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-progress__label", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-progress__value", children: text })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.Progress.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__ */ jsxRuntime.jsx(
+          radixUi.Progress.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" || react.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__ */ jsxRuntime.jsx("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v5M12 8h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+function CircleXIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6M9 9l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+var VARIANT_ICON = {
+  default: null,
+  success: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(CircleXIcon, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(AngleIcon, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {}),
+  loading: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    radixUi.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__ */ jsxRuntime.jsx("span", { className: "orynn-toast__icon", "data-slot": "toast-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "orynn-toast__content", children: [
+          record.title != null && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Toast.Title, { className: "orynn-toast__title", children: record.title }),
+          record.description != null && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Toast.Description, { className: "orynn-toast__description", children: record.description })
+        ] }),
+        record.action && /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.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__ */ jsxRuntime.jsx(
+          radixUi.Toast.Close,
+          {
+            className: "orynn-toast__close",
+            "aria-label": "Dismiss",
+            "data-slot": "toast-close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function Toaster({
+  position = "bottom-right",
+  duration = 4e3,
+  visibleToasts = 4,
+  closeButton = true,
+  richColors = false,
+  gap = 12,
+  offset = 24,
+  className
+}) {
+  const records = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const shown = records.slice(-visibleToasts);
+  const [side] = position.split("-");
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Toast.Provider, { swipeDirection: SWIPE[position], duration, children: [
+    shown.map((record) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { record, duration, closeButton }, record.id)),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radixUi.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 = react.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__ */ react.forwardRef(
+  function PaginationContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        ref,
+        "data-slot": "pagination-content",
+        className: cx("orynn-pagination__list", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationItem = /* @__PURE__ */ react.forwardRef(
+  function PaginationItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        "data-slot": "pagination-item",
+        className: cx("orynn-pagination__item", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationLink = /* @__PURE__ */ react.forwardRef(
+  function PaginationLink2({ className, isActive, size = "md", type, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ react.forwardRef(function PaginationEllipsis2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      "data-slot": "pagination-ellipsis",
+      className: cx("orynn-pagination__ellipsis", className),
+      ...props,
+      children: children ?? "\u2026"
+    }
+  );
+});
+var Pagination = /* @__PURE__ */ react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(PaginationContent, { children: [
+          showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.first,
+              disabled: disabled || !model.hasPrev,
+              onClick: () => go(1),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { style: { marginInlineStart: "-0.65em" } })
+              ]
+            }
+          ) }),
+          showPrevNext && /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.previous,
+              disabled: disabled || !model.hasPrev,
+              className: "orynn-pagination__nav",
+              onClick: () => go(model.page - 1),
+              children: [
+                prevIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}),
+                !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-pagination__nav-label", children: L.previous })
+              ]
+            }
+          ) }),
+          model.slots.map(
+            (slot) => typeof slot === "number" ? /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              PaginationLink,
+              {
+                size,
+                isActive: slot === model.page,
+                "aria-label": L.page(slot),
+                disabled,
+                onClick: () => go(slot),
+                children: slot
+              }
+            ) }, slot) : /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(PaginationEllipsis, {}) }, slot)
+          ),
+          showPrevNext && /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.next,
+              disabled: disabled || !model.hasNext,
+              className: "orynn-pagination__nav",
+              onClick: () => go(model.page + 1),
+              children: [
+                !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "orynn-pagination__nav-label", children: L.next }),
+                nextIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+              ]
+            }
+          ) }),
+          showFirstLast && /* @__PURE__ */ jsxRuntime.jsx(PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            PaginationLink,
+            {
+              size,
+              "aria-label": L.last,
+              disabled: disabled || !model.hasNext,
+              onClick: () => go(model.pageCount),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { style: { marginInlineStart: "-0.65em" } })
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
 var Label = /* @__PURE__ */ react.forwardRef(function Label2({ className, required, optional, children, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     radixUi.Label.Root,
@@ -4796,6 +5467,10 @@ function standardSchemaResolver(schema) {
   };
 }
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
@@ -4846,16 +5521,23 @@ exports.Input = Input;
 exports.Label = Label;
 exports.NumberField = NumberField;
 exports.OrynnProvider = OrynnProvider;
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
 exports.Popover = Popover2;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverArrow = PopoverArrow;
 exports.PopoverClose = PopoverClose;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Dropdown;
 exports.Separator = Separator;
+exports.Slider = Slider;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -4870,6 +5552,7 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
@@ -4886,8 +5569,11 @@ exports.registerField = registerField;
 exports.registerRule = registerRule;
 exports.resolveThemeVars = resolveThemeVars;
 exports.standardSchemaResolver = standardSchemaResolver;
+exports.toast = toast;
 exports.useFieldsetState = useFieldsetState;
 exports.useOrynnTheme = useOrynnTheme;
+exports.usePagination = usePagination;
 exports.usePortalContainer = usePortalContainer;
+exports.useToast = useToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map