@cerberus-design/react 0.23.0 → 0.24.0

package/dist/node_modules/.pnpm/@zag-js_utils@1.29.1/node_modules/@zag-js/utils/dist/index.js

@@ -0,0 +1,351 @@
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+
+// src/array.ts
+function toArray(v) {
+  if (v == null) return [];
+  return Array.isArray(v) ? v : [v];
+}
+var first = (v) => v[0];
+var last = (v) => v[v.length - 1];
+var has = (v, t) => v.indexOf(t) !== -1;
+var add = (v, ...items) => v.concat(items);
+var remove = (v, ...items) => v.filter((t) => !items.includes(t));
+var uniq = (v) => Array.from(new Set(v));
+var addOrRemove = (v, item) => has(v, item) ? remove(v, item) : add(v, item);
+function nextIndex(v, idx, opts = {}) {
+  const { step = 1, loop = true } = opts;
+  const next2 = idx + step;
+  const len = v.length;
+  const last2 = len - 1;
+  if (idx === -1) return step > 0 ? 0 : last2;
+  if (next2 < 0) return loop ? last2 : 0;
+  if (next2 >= len) return loop ? 0 : idx > len ? len : idx;
+  return next2;
+}
+function prevIndex(v, idx, opts = {}) {
+  const { step = 1, loop = true } = opts;
+  return nextIndex(v, idx, { step: -step, loop });
+}
+function chunk(v, size) {
+  return v.reduce((rows, value, index) => {
+    if (index % size === 0) rows.push([value]);
+    else last(rows)?.push(value);
+    return rows;
+  }, []);
+}
+
+// src/equal.ts
+var isArrayLike = (value) => value?.constructor.name === "Array";
+var isArrayEqual = (a, b) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!isEqual(a[i], b[i])) return false;
+  }
+  return true;
+};
+var isEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (a == null && b != null || a != null && b == null) return false;
+  if (typeof a?.isEqual === "function" && typeof b?.isEqual === "function") {
+    return a.isEqual(b);
+  }
+  if (typeof a === "function" && typeof b === "function") {
+    return a.toString() === b.toString();
+  }
+  if (isArrayLike(a) && isArrayLike(b)) {
+    return isArrayEqual(Array.from(a), Array.from(b));
+  }
+  if (!(typeof a === "object") || !(typeof b === "object")) return false;
+  const keys = Object.keys(b ?? /* @__PURE__ */ Object.create(null));
+  const length = keys.length;
+  for (let i = 0; i < length; i++) {
+    const hasKey = Reflect.has(a, keys[i]);
+    if (!hasKey) return false;
+  }
+  for (let i = 0; i < length; i++) {
+    const key = keys[i];
+    if (!isEqual(a[key], b[key])) return false;
+  }
+  return true;
+};
+var isArray = (v) => Array.isArray(v);
+var isBoolean = (v) => v === true || v === false;
+var isObjectLike = (v) => v != null && typeof v === "object";
+var isObject = (v) => isObjectLike(v) && !isArray(v);
+var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
+var isString = (v) => typeof v === "string";
+var isFunction = (v) => typeof v === "function";
+var isNull = (v) => v == null;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var baseGetTag = (v) => Object.prototype.toString.call(v);
+var fnToString = Function.prototype.toString;
+var objectCtorString = fnToString.call(Object);
+var isPlainObject = (v) => {
+  if (!isObjectLike(v) || baseGetTag(v) != "[object Object]" || isFrameworkElement(v)) return false;
+  const proto = Object.getPrototypeOf(v);
+  if (proto === null) return true;
+  const Ctor = hasProp(proto, "constructor") && proto.constructor;
+  return typeof Ctor == "function" && Ctor instanceof Ctor && fnToString.call(Ctor) == objectCtorString;
+};
+var isReactElement = (x) => typeof x === "object" && x !== null && "$$typeof" in x && "props" in x;
+var isVueElement = (x) => typeof x === "object" && x !== null && "__v_isVNode" in x;
+var isFrameworkElement = (x) => isReactElement(x) || isVueElement(x);
+
+// src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res ?? void 0;
+};
+var identity = (v) => v();
+var noop = () => {
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn?.(...a);
+  });
+};
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
+function match(key, record, ...args) {
+  if (key in record) {
+    const fn = record[key];
+    return isFunction(fn) ? fn(...args) : fn;
+  }
+  const error = new Error(`No matching key: ${JSON.stringify(key)} in ${JSON.stringify(Object.keys(record))}`);
+  Error.captureStackTrace?.(error, match);
+  throw error;
+}
+function throttle(fn, wait = 0) {
+  let lastCall = 0;
+  let timeout = null;
+  return ((...args) => {
+    const now = Date.now();
+    const timeSinceLastCall = now - lastCall;
+    if (timeSinceLastCall >= wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      fn(...args);
+      lastCall = now;
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        fn(...args);
+        lastCall = Date.now();
+        timeout = null;
+      }, wait - timeSinceLastCall);
+    }
+  });
+}
+
+// src/number.ts
+var { floor, round, min, max} = Math;
+var isNaN = (v) => Number.isNaN(v);
+var nan = (v) => isNaN(v) ? 0 : v;
+var wrap = (v, vmax) => (v % vmax + vmax) % vmax;
+var isValueAtMax = (v, vmax) => nan(v) >= vmax;
+var isValueAtMin = (v, vmin) => nan(v) <= vmin;
+var isValueWithinRange = (v, vmin, vmax) => {
+  const value = nan(v);
+  const minCheck = vmin == null || value >= vmin;
+  const maxCheck = vmax == null || value <= vmax;
+  return minCheck && maxCheck;
+};
+var clampValue = (v, vmin, vmax) => min(max(nan(v), vmin), vmax);
+var getValuePercent = (v, vmin, vmax) => (nan(v) - vmin) / (vmax - vmin);
+var roundToDpr = (v, dpr) => typeof dpr === "number" ? floor(v * dpr + 0.5) / dpr : round(v);
+var setValueAtIndex = (vs, i, v) => {
+  if (vs[i] === v) return vs;
+  return [...vs.slice(0, i), v, ...vs.slice(i + 1)];
+};
+var countDecimals = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+};
+var decimalOp = (a, op, b) => {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+};
+var incrementValue = (v, s) => decimalOp(nan(v), "+", s);
+var decrementValue = (v, s) => decimalOp(nan(v), "-", s);
+var toPx = (v) => typeof v === "number" ? `${v}px` : v;
+
+// src/object.ts
+function compact(obj) {
+  if (!isPlainObject(obj) || obj === void 0) return obj;
+  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
+  const filtered = {};
+  for (const key of keys) {
+    const value = obj[key];
+    if (value !== void 0) {
+      filtered[key] = compact(value);
+    }
+  }
+  return filtered;
+}
+
+// src/store.ts
+function createStore(initialState, compare = Object.is) {
+  let state = { ...initialState };
+  const listeners = /* @__PURE__ */ new Set();
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const publish = () => {
+    listeners.forEach((listener) => listener());
+  };
+  const get = (key) => {
+    return state[key];
+  };
+  const set = (key, value) => {
+    if (!compare(state[key], value)) {
+      state[key] = value;
+      publish();
+    }
+  };
+  const update = (updates) => {
+    let hasChanges = false;
+    for (const key in updates) {
+      const value = updates[key];
+      if (value !== void 0 && !compare(state[key], value)) {
+        state[key] = value;
+        hasChanges = true;
+      }
+    }
+    if (hasChanges) {
+      publish();
+    }
+  };
+  const snapshot = () => ({ ...state });
+  return {
+    subscribe,
+    get,
+    set,
+    update,
+    snapshot
+  };
+}
+
+// src/timers.ts
+var currentTime = () => performance.now();
+var _tick;
+var Timer = class {
+  constructor(onTick) {
+    this.onTick = onTick;
+    __publicField(this, "frameId", null);
+    __publicField(this, "pausedAtMs", null);
+    __publicField(this, "context");
+    __publicField(this, "cancelFrame", () => {
+      if (this.frameId === null) return;
+      cancelAnimationFrame(this.frameId);
+      this.frameId = null;
+    });
+    __publicField(this, "setStartMs", (startMs) => {
+      this.context.startMs = startMs;
+    });
+    __publicField(this, "start", () => {
+      if (this.frameId !== null) return;
+      const now = currentTime();
+      if (this.pausedAtMs !== null) {
+        this.context.startMs += now - this.pausedAtMs;
+        this.pausedAtMs = null;
+      } else {
+        this.context.startMs = now;
+      }
+      this.frameId = requestAnimationFrame(__privateGet(this, _tick));
+    });
+    __publicField(this, "pause", () => {
+      if (this.frameId === null) return;
+      this.cancelFrame();
+      this.pausedAtMs = currentTime();
+    });
+    __publicField(this, "stop", () => {
+      if (this.frameId === null) return;
+      this.cancelFrame();
+      this.pausedAtMs = null;
+    });
+    __privateAdd(this, _tick, (now) => {
+      this.context.now = now;
+      this.context.deltaMs = now - this.context.startMs;
+      const shouldContinue = this.onTick(this.context);
+      if (shouldContinue === false) {
+        this.stop();
+        return;
+      }
+      this.frameId = requestAnimationFrame(__privateGet(this, _tick));
+    });
+    this.context = { now: 0, startMs: currentTime(), deltaMs: 0 };
+  }
+  get elapsedMs() {
+    if (this.pausedAtMs !== null) {
+      return this.pausedAtMs - this.context.startMs;
+    }
+    return currentTime() - this.context.startMs;
+  }
+};
+_tick = new WeakMap();
+function setRafTimeout(fn, delayMs) {
+  const timer = new Timer(({ deltaMs }) => {
+    if (deltaMs >= delayMs) {
+      fn();
+      return false;
+    }
+  });
+  timer.start();
+  return () => timer.stop();
+}
+
+// src/warning.ts
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    console.warn(m);
+  }
+}
+function invariant(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && process.env.NODE_ENV !== "production") {
+    throw new Error(m);
+  }
+}
+function ensure(c, m) {
+  if (c == null) throw new Error(m());
+}
+function ensureProps(props, keys, scope) {
+  let missingKeys = [];
+  for (const key of keys) {
+    if (props[key] == null) missingKeys.push(key);
+  }
+  if (missingKeys.length > 0)
+    throw new Error(`[zag-js${scope ? ` > ${scope}` : ""}] missing required props: ${missingKeys.join(", ")}`);
+}
+
+export { Timer, add, addOrRemove, callAll, chunk, clampValue, compact, createStore, decrementValue, ensure, ensureProps, first, getValuePercent, has, hasProp, identity, incrementValue, invariant, isArray, isBoolean, isEqual, isFunction, isNaN, isNull, isNumber, isObject, isObjectLike, isPlainObject, isString, isValueAtMax, isValueAtMin, isValueWithinRange, last, match, nan, nextIndex, noop, prevIndex, remove, roundToDpr, runIfFn, setRafTimeout, setValueAtIndex, throttle, toArray, toPx, uniq, uuid, warn, wrap };

package/dist/system/factory.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const factory = require('../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.cjs');
+const factory = require('../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/factory.cjs');
 const factory$1 = require('styled-system/jsx/factory');
 
 function cerberusFactory(component) {

package/dist/system/factory.js

@@ -1,4 +1,4 @@
-import { ark } from '../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.js';
+import { ark } from '../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/factory.js';
 import { cerberus } from 'styled-system/jsx/factory';
 
 function cerberusFactory(component) {

package/dist/system/primitive-factory.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const factory = require('../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.cjs');
+const factory = require('../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/factory.cjs');
 const factory$1 = require('styled-system/jsx/factory');
 const css = require('styled-system/css');
 const React = require('react');

package/dist/system/primitive-factory.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { ark } from '../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.js';
+import { ark } from '../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/factory.js';
 import { cerberus } from 'styled-system/jsx/factory';
 import { cx, css } from 'styled-system/css';
 import { forwardRef } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -13,22 +13,22 @@
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.25.1",
+    "@ark-ui/react": "^5.29.1",
     "@dnd-kit/core": "^6.3.1"
   },
   "devDependencies": {
-    "@internationalized/date": "^3.8.2",
-    "@pandacss/dev": "^1.4.1",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@internationalized/date": "^3.10.0",
+    "@pandacss/dev": "^1.7.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
     "globby": "^14.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "vite": "^7.1.3",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/panda-preset": "0.23.0"
+    "@cerberus-design/panda-preset": "0.24.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/circular-progress/circular-progress.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import {
   CircularProgressCircle,
   CircularProgressCircleRange,
@@ -8,6 +9,7 @@ import {
   CircularProgressValueText,
   type CircularProgressRootProps,
 } from './primitives'
+import { Show } from '../show/show'
 
 export interface CircularProgressProps extends CircularProgressRootProps {
   /**
@@ -16,12 +18,18 @@ export interface CircularProgressProps extends CircularProgressRootProps {
   bgStyle?: 'filled' | 'transparent'
   /**
    * The label for the circular progress.
+   * @default 'Done'
    */
-  label?: string
+  label?: ReactNode
+  /**
+   * Whether to hide the value text inside the circular progress.
+   * @default false
+   */
+  hideValueText?: boolean
 }
 
 export function CircularProgress(props: CircularProgressProps) {
-  const { label, ...rootProps } = props
+  const { label, hideValueText, ...rootProps } = props
 
   return (
     <CircularProgressRoot {...rootProps}>
@@ -31,7 +39,9 @@ export function CircularProgress(props: CircularProgressProps) {
       </CircularProgressCircle>
 
       <CircularProgressInfoGroup>
-        <CircularProgressValueText />
+        <Show when={!hideValueText}>
+          <CircularProgressValueText />
+        </Show>
         <CircularProgressLabel>{label ?? 'Done'}</CircularProgressLabel>
       </CircularProgressInfoGroup>
     </CircularProgressRoot>

package/src/components/cta-dialog/provider.tsx

@@ -104,7 +104,12 @@ export function CTAModal(props: PropsWithChildren<object>) {
     <CTAModalContext.Provider value={value}>
       {props.children}
 
-      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
+      <DialogProvider
+        lazyMount
+        open={open}
+        onOpenChange={(e) => setOpen(e.open)}
+        unmountOnExit
+      >
         <Dialog
           size="sm"
           style={{

package/src/components/field/field.tsx

@@ -1,5 +1,6 @@
 import { type FieldRootProps } from '@ark-ui/react/field'
 import { HStack } from 'styled-system/jsx'
+import type { CerberusPrimitiveProps } from '../../system/types'
 import { splitProps } from '../../utils/index'
 import { Show } from '../show/index'
 import {
@@ -52,7 +53,7 @@ export interface FieldProps extends FieldRootProps {
  * </Field>
  * ```
  */
-export function Field(props: FieldProps) {
+export function Field(props: CerberusPrimitiveProps<FieldProps>) {
   const [statusProps, fieldProps, rootProps] = splitProps(
     props,
     ['disabled', 'required', 'readOnly', 'invalid'],

package/src/components/file-upload/file-status.tsx

@@ -96,7 +96,7 @@ export function FileStatus(props: FileStatusProps) {
   const palette = useMemo(() => getPalette(status), [status])
   const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])
   const styles = useMemo(() => {
-    switch (status) {
+    switch (status as processStatus) {
       case processStatus.TODO:
         return fileStatus({ status: 'todo' })
       case processStatus.PROCESSING:
@@ -190,7 +190,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
     successNotification: DoneIcon,
   } = icons
 
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
       return <TodoIcon size={props.size} />
     case processStatus.PROCESSING:
@@ -205,7 +205,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
 }
 
 function MatchFileStatusText(props: FileStatusElProps) {
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
       return 'Waiting to upload'
     case processStatus.PROCESSING:
@@ -222,7 +222,7 @@ function MatchFileStatusText(props: FileStatusElProps) {
 function MatchStatusAction(props: FileStatusElProps) {
   const { icons } = useCerberusContext()
   const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons
-  switch (props.status) {
+  switch (props.status as processStatus) {
     case processStatus.TODO:
     case processStatus.PROCESSING:
       return <CloseIcon />

package/src/components/menu/primitives.ts

@@ -48,7 +48,7 @@ export const MenuIndicator = withNoRecipe(ArkMenu.Indicator)
 // Positioner
 
 export type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>
-export const MenuPositioner = withNoRecipe(ArkMenu.Positioner)
+export const MenuPositioner = withSlotRecipe(ArkMenu.Positioner, 'positioner')
 
 // Content
 

package/src/components/notifications/center.tsx

@@ -1,10 +1,6 @@
 'use client'
 
-import {
-  createToaster,
-  Toaster,
-  type CreateToasterReturn,
-} from '@ark-ui/react/toast'
+import { Toaster, type CreateToasterReturn } from '@ark-ui/react/toast'
 import { Box } from 'styled-system/jsx'
 import { Button, type ButtonProps } from '../button/button'
 import { Show } from '../show/index'
@@ -16,29 +12,30 @@ import type {
 } from './types'
 import { MatchNotificationIcon } from './match-icon'
 import { ToastCloseTrigger } from './close-trigger'
+import { toaster } from './toaster'
 
 /**
  * This module contains an abstraction of the Notification parts.
  * @module 'notification/center'
  */
 
-export const toaster: CreateToasterReturn = createToaster({
-  gap: 16,
-  overlap: true,
-  placement: 'top-end',
-})
-
 export function getEmphasis(type: NotifyOptionsType) {
   return type.includes('subtle') ? 'low' : 'high'
 }
 
+export interface NotificationCenterProps {
+  toaster?: CreateToasterReturn
+}
+
 /**
  * The NotificationCenter component is an abstraction for the Notification
  * component. It manages displaying all the toasts in the center.
  */
-export function NotificationCenter() {
+export function NotificationCenter(props: NotificationCenterProps) {
+  const cachedToaster = props.toaster || toaster
+
   return (
-    <Toaster toaster={toaster}>
+    <Toaster toaster={cachedToaster}>
       {(toast) => (
         <NotificationParts.Root
           key={toast.id}

package/src/components/notifications/index.ts

@@ -2,3 +2,4 @@ export * from './parts'
 export * from './primitives'
 export * from './center'
 export * from './types'
+export * from './toaster'

package/src/components/notifications/toaster.ts

@@ -0,0 +1,13 @@
+'use client'
+
+import { createToaster, type CreateToasterReturn } from '@ark-ui/react/toast'
+
+export const toaster: CreateToasterReturn = createToaster({
+  gap: 16,
+  overlap: true,
+  placement: 'top-end',
+})
+
+// Re-exporting for easier customization
+
+export { createToaster, Toaster } from '@ark-ui/react/toast'

package/src/components/show/show.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, type ReactNode } from 'react'
+import { type ReactNode } from 'react'
 
 /**
  * This module contains the Show component.
@@ -6,6 +6,12 @@ import { type PropsWithChildren, type ReactNode } from 'react'
  */
 
 export interface ShowProps<T> {
+  /**
+   * The children to render when the condition is true.
+   * This can be a ReactNode or a function that returns a ReactNode. Passing a
+   * function will lazy render the children only when needed.
+   */
+  children: ReactNode | (() => ReactNode)
   /**
    * The condition to render memoized children or the fallback content.
    */
@@ -26,16 +32,17 @@ export interface ShowProps<T> {
  *   <Dashboard />
  * </Show>
  */
-export function Show<T>(props: PropsWithChildren<ShowProps<T>>) {
+export function Show<T>(props: ShowProps<T>) {
   const { when, children, fallback } = props
 
   if (when) {
+    if (typeof children === 'function') {
+      return <>{children()}</>
+    }
     return <>{children}</>
   }
 
-  if (fallback) {
-    return <>{fallback}</>
-  }
+  if (fallback) return <>{fallback}</>
 
   return null
 }