@cerberus-design/react 0.18.3 → 0.19.0

package/src/system/factory.ts

@@ -0,0 +1,37 @@
+import { ark } from '@ark-ui/react/factory'
+import { createCerberusPrimitive } from './index'
+import type { ComponentType } from 'react'
+
+function cerberusFactory<T extends Record<string, unknown>>(
+  component: keyof typeof ark,
+  defaultProps?: T,
+) {
+  const { withNoRecipe } = createCerberusPrimitive()
+  const arkComponent = ark[component] as ComponentType
+
+  if (arkComponent) {
+    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })
+  }
+
+  throw new Error(
+    `Component "${String(component)}" is not a valid Cerberus component. Please check the component name.`,
+  )
+}
+
+const cache = new Map()
+
+// Create a proxy that handles both function calls and property access
+export const cerberusFactoryProxy = new Proxy(cerberusFactory, {
+  apply(target, thisArg, argArray) {
+    // Handle function calls like cerberus('button')
+    // @ts-expect-error: Ignore type error for dynamic property access
+    return target.apply(thisArg, argArray)
+  },
+  get(_target, el: keyof typeof ark) {
+    // Handle property access like cerberus.button
+    if (!cache.has(el)) {
+      cache.set(el, cerberusFactory(el))
+    }
+    return cache.get(el) as ReturnType<typeof cerberusFactory>
+  },
+})

package/src/system/index.ts

@@ -0,0 +1,47 @@
+import { CerberusPrimitive } from './primitive-factory'
+import type { CerberusFactory, CerberusPrimitiveRecipe } from './types'
+import { cerberusFactoryProxy } from './factory'
+
+/**
+ * This module contains the user interface for creating Cerberus primitives.
+ * @module @cerberus/core/system/create-cerb-primitive
+ */
+
+/**
+ * A factory function that creates a Cerberus primitive instance with the given
+ * recipe.
+ * @param recipe
+ * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that
+ * apply the recipes and special Cerberus helpers like `css`.
+ *
+ * @example
+ * ```tsx
+ * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);
+ * export const Button = withRecipe(MyCustomButton)
+ * ```
+ */
+export function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(
+  recipe?: T,
+) {
+  return new CerberusPrimitive(recipe)
+}
+
+/**
+ * A utility function to access Cerberus components by their name.
+ * @param component - The name of the Cerberus component to access.
+ * @returns The Cerberus component corresponding to the provided name.
+ * @throws An error if the component name is not valid.
+ *
+ * @example
+ * ```tsx
+ * import { cerberus } from '@cerberus/react'
+ * const Button = cerberus('button')
+ *
+ * <Button css={{ color: 'blue' }} asChild>
+ *  <Link href="/some-page">Click me</Link>
+ * </Button>
+ * ```
+ */
+export const cerberus = cerberusFactoryProxy as CerberusFactory
+
+export * from './types'

package/src/system/primitive-factory.tsx

@@ -0,0 +1,151 @@
+import { css, cx } from 'styled-system/css'
+import type { RecipeVariantRecord } from 'styled-system/types'
+import {
+  type ComponentType,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from 'react'
+import type { WithCss } from '../types'
+import type {
+  CerberusPrimitiveEl,
+  CerberusPrimitiveRecipe,
+  CerberusRecipe,
+  CerberusSlotRecipe,
+  WithRecipeOptions,
+} from './types'
+
+/**
+ * This module contains a factory for creating Cerberus primitives.
+ * @module @cerberus/core/system/factory
+ */
+
+export class CerberusPrimitive {
+  recipe: CerberusPrimitiveRecipe | null
+
+  constructor(recipe?: CerberusPrimitiveRecipe) {
+    this.recipe = recipe ?? null
+  }
+
+  private hasStyles(styles: string | undefined): Record<string, unknown> {
+    if (styles) {
+      return {
+        className: styles,
+      }
+    }
+    return {}
+  }
+
+  private validateComponent<P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+  ) {
+    if (typeof Component !== 'function' && typeof Component !== 'object') {
+      throw new Error('Expected a React component as the first argument.')
+    }
+  }
+
+  /**
+   * Creates a Cerberus component with bare features and no recipe.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @returns A new React component that applies Cerberus features to the
+   * original component.
+   * @example
+   * ```typescript
+   * const { withNoRecipe } = createCerberusPrimitive(button)
+   * const Button = withNoRecipe(RawButton)
+   * ```
+   */
+  withNoRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    options?: WithRecipeOptions,
+  ): CerberusPrimitiveEl<P> => {
+    const { defaultProps } = options || {}
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = props
+      const styles = this.hasStyles(cx(className, css(customCss)))
+      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+
+  /**
+   * Creates a Cerberus component with the given recipe.
+   * @param Component - The React component to enhance with the recipe.
+   * @param options - Options for the recipe.
+   * @returns A new React component that applies the recipe to the original
+   * component.
+   */
+  withRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    options?: WithRecipeOptions,
+  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {
+    const { defaultProps } = options || {}
+    const recipe = this.recipe as CerberusRecipe
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = internalProps
+
+      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const recipeStyles = recipe(variantOptions)
+
+      return (
+        <Component
+          {...defaultProps}
+          {...(nativeProps as P)}
+          className={cx(className, recipeStyles, css(customCss))}
+        />
+      )
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+
+  /**
+   * Creates a Cerberus component with a slot recipe applied.
+   * @param Component - The React component to enhance with Cerberus features.
+   * @param recipe - The slot recipe to apply to the component.
+   * @returns A new React component that applies Cerberus features and the
+   * specified slot recipe to the original component.
+   * @example
+   * ```typescript
+   * const { withSlotRecipe } = createCerberusPrimitive(field)
+   * const Field = withSlotRecipe(RawField, field)
+   * ```
+   */
+  withSlotRecipe = <P extends HTMLAttributes<unknown>>(
+    Component: ComponentType<P>,
+    slot: keyof RecipeVariantRecord,
+    options?: WithRecipeOptions,
+  ) => {
+    const { defaultProps } = options || {}
+    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
+
+    this.validateComponent(Component)
+
+    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
+      const { css: customCss, className, ...nativeProps } = internalProps
+
+      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const styles = recipe(variantOptions)
+      const slotStyles = styles[slot as keyof typeof styles]
+
+      return (
+        <Component
+          {...defaultProps}
+          {...(nativeProps as P)}
+          className={cx(className, slotStyles, css(customCss))}
+        />
+      )
+    }
+
+    CerbComponent.displayName = Component.displayName || Component.name
+    return CerbComponent
+  }
+}

package/src/system/types.ts

@@ -0,0 +1,58 @@
+import type {
+  RecipeVariantFn,
+  RecipeVariantRecord,
+  SlotRecipeVariantFn,
+  SlotRecipeVariantRecord,
+} from 'styled-system/types'
+import type { WithCss } from '../types'
+import type { ElementType, PropsWithChildren } from 'react'
+import type { ark } from '@ark-ui/react/factory'
+
+// Method signatures for recipes
+
+type RecipeBase = {
+  splitVariantProps: (
+    props: Record<string, unknown>,
+  ) => [Record<string, unknown>, Record<string, unknown>]
+}
+
+export type CerberusRecipe = RecipeVariantFn<RecipeVariantRecord> & RecipeBase
+export type CerberusSlotRecipe<T extends string> = SlotRecipeVariantFn<
+  string,
+  SlotRecipeVariantRecord<T>
+> &
+  RecipeBase
+
+export type CerberusPrimitiveRecipe =
+  | CerberusRecipe
+  | CerberusSlotRecipe<string>
+
+export type WithRecipeOptions = {
+  defaultProps?: Record<string, unknown>
+}
+
+// Primitive Response
+
+export type CerberusPrimitiveProps<T> = WithCss & PropsWithChildren<T>
+export type CerberusPrimitiveEl<T = object> = ElementType<
+  CerberusPrimitiveProps<T>
+>
+
+// Factory
+
+export type ArkPropsWithRef<T extends keyof typeof ark> = {
+  [K in keyof (typeof ark)[T]]: K extends 'asChild' ? never : (typeof ark)[T][K]
+} & {
+  asChild?: boolean
+}
+
+export type CerberusFactoryFn = <T extends Record<string, unknown>>(
+  component: keyof typeof ark,
+  defaultProps?: T,
+) => CerberusPrimitiveEl
+
+export type CerberusFactoryObject = {
+  [K in keyof typeof ark]: CerberusPrimitiveEl
+}
+
+export type CerberusFactory = CerberusFactoryFn & CerberusFactoryObject

package/src/types.ts

@@ -1 +1,22 @@
+import type { CSSProperties } from 'react'
+import type { SystemStyleObject } from 'styled-system/types'
+
+export interface WithCss {
+  /**
+   * The CSS styles to apply to the component.
+   * Can be a single style object or an array of style objects.
+   */
+  css?: SystemStyleObject | SystemStyleObject[]
+  /**
+   * The strict CSS styles to apply to the component. This will override any
+   * other styles applied to the component and is only recommended for advanced
+   * use cases.
+   *
+   * In most cases, you should use the `css` prop instead.
+   */
+  style?: CSSProperties | Record<string, number | string>
+}
+
+// types
+
 export type Positions = 'top' | 'right' | 'bottom' | 'left'

package/build/legacy/aria-helpers/nav-menu.aria.cjs

@@ -1,36 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/aria-helpers/nav-menu.aria.ts
-var nav_menu_aria_exports = {};
-__export(nav_menu_aria_exports, {
-  createNavTriggerProps: () => createNavTriggerProps
-});
-module.exports = __toCommonJS(nav_menu_aria_exports);
-function createNavTriggerProps(values) {
-  return {
-    ["aria-controls"]: values.controls,
-    ["aria-expanded"]: values.expanded ?? false
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createNavTriggerProps
-});
-//# sourceMappingURL=nav-menu.aria.cjs.map

package/build/legacy/aria-helpers/nav-menu.aria.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}

package/build/legacy/aria-helpers/nav-menu.aria.d.cts

@@ -1,2 +0,0 @@
-export { createNavTriggerProps_alias_1 as createNavTriggerProps } from '../_tsup-dts-rollup.cjs';
-export { NavTriggerAriaValues_alias_1 as NavTriggerAriaValues } from '../_tsup-dts-rollup.cjs';

package/build/legacy/aria-helpers/trap-focus.aria.cjs

@@ -1,54 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/aria-helpers/trap-focus.aria.ts
-var trap_focus_aria_exports = {};
-__export(trap_focus_aria_exports, {
-  trapFocus: () => trapFocus
-});
-module.exports = __toCommonJS(trap_focus_aria_exports);
-function trapFocus(modalRef) {
-  var _a;
-  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-  const focusable = Array.from(
-    ((_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(focusableElements)) ?? []
-  );
-  const firstFocusable = focusable[0];
-  const lastFocusable = focusable[focusable.length - 1];
-  return function handleKeyDown(event) {
-    if (event.key === "Tab") {
-      if (event.shiftKey) {
-        if (document.activeElement === firstFocusable) {
-          lastFocusable.focus();
-          event.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusable) {
-          firstFocusable.focus();
-          event.preventDefault();
-        }
-      }
-    }
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  trapFocus
-});
-//# sourceMappingURL=trap-focus.aria.cjs.map

package/build/legacy/aria-helpers/trap-focus.aria.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement | null>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,UACd,UACyC;AAP3C;AAQE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/legacy/aria-helpers/trap-focus.aria.d.cts

@@ -1 +0,0 @@
-export { trapFocus_alias_1 as trapFocus } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/CircularProgress.cjs

@@ -1,198 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/CircularProgress.tsx
-var CircularProgress_exports = {};
-__export(CircularProgress_exports, {
-  CircularProgress: () => CircularProgress
-});
-module.exports = __toCommonJS(CircularProgress_exports);
-var import_recipes = require("styled-system/recipes");
-
-// src/components/Show.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Show(props) {
-  const { when, children, fallback } = props;
-  if (when) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
-  }
-  if (fallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
-  }
-  return null;
-}
-
-// src/components/for.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function For(props) {
-  var _a;
-  if (!props.each || !props.each.length) {
-    return props.fallback || null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (_a = props.each) == null ? void 0 : _a.map(props.children) });
-}
-
-// src/components/CircularProgress.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function CircularProgress(props) {
-  const { size = "1.1em" } = props;
-  const sizeProps = props.size ? {
-    height: size,
-    width: size
-  } : {};
-  const strokeW = 14;
-  const radius = `calc(50% * (1 - ${strokeW}/100))`;
-  const status = props.syntax ?? "Done";
-  const now = props.now >= 100 ? 100 : props.now;
-  const bgStyle = props.bgStyle ?? "filled";
-  const styles = (0, import_recipes.circularProgress)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      id: props.id,
-      "aria-label": props.label,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": now,
-      className: styles.root,
-      role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        "svg",
-        {
-          "data-complete": now === 100,
-          className: styles.group,
-          fill: "none",
-          strokeLinecap: "round",
-          strokeWidth: strokeW,
-          viewBox: "0 0 100 100",
-          xmlns: "http://www.w3.org/2000/svg",
-          ...sizeProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "stop",
-                {
-                  offset: "0%",
-                  stopColor: "var(--cerberus-colors-data-viz-progress-start)"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "stop",
-                {
-                  offset: "100%",
-                  stopColor: "var(--cerberus-colors-data-viz-progress-end)"
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "circle",
-              {
-                className: styles.base,
-                cx: "50%",
-                cy: "50%",
-                r: `calc(50% * (1 - ${strokeW}/100))`,
-                pathLength: "100"
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "circle",
-              {
-                className: styles.track,
-                cx: "50%",
-                cy: "50%",
-                r: radius,
-                pathLength: "100"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              Show,
-              {
-                when: now > 0,
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "text",
-                  {
-                    "data-fallback": true,
-                    className: styles.description,
-                    x: "50%",
-                    y: "27%",
-                    dominantBaseline: "middle",
-                    textAnchor: "middle",
-                    textLength: "65%",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(For, { each: status.split(" "), children: (word, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tspan", { x: "50%", dy: "1.2em", children: word }, `${word}:${idx}`) })
-                  }
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "circle",
-                    {
-                      "data-complete": now === 100,
-                      className: styles.path,
-                      cx: "50%",
-                      cy: "50%",
-                      fill: "none",
-                      r: radius,
-                      pathLength: "100",
-                      strokeDasharray: "100",
-                      strokeDashoffset: 100 - now,
-                      transform: "rotate(-90 50 50)"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                      "text",
-                      {
-                        className: styles.title,
-                        x: "50%",
-                        y: "47%",
-                        dominantBaseline: "middle",
-                        textAnchor: "middle",
-                        children: [
-                          now,
-                          "%"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                      "text",
-                      {
-                        className: styles.description,
-                        x: "50%",
-                        y: "59%",
-                        dominantBaseline: "middle",
-                        textAnchor: "middle",
-                        children: status
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  CircularProgress
-});
-//# sourceMappingURL=CircularProgress.cjs.map

package/build/legacy/components/CircularProgress.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx","../../../src/components/for.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\nimport { For } from './for'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\n  /**\n   * The size of the CircularProgress\n   * @default '1.1em'\n   */\n  size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const { size = '1.1em' } = props\n  const sizeProps = props.size\n    ? {\n        height: size,\n        width: size,\n      }\n    : {}\n\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  const styles = circularProgress()\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={styles.root}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={styles.group}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...sizeProps}\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\n          <circle\n            className={styles.base}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n\n        <circle\n          className={styles.track}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n\n        <Show\n          when={now > 0}\n          fallback={\n            <text\n              data-fallback\n              className={styles.description}\n              x=\"50%\"\n              y=\"27%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n              textLength=\"65%\"\n            >\n              <For each={status.split(' ')}>\n                {(word, idx) => (\n                  <tspan key={`${word}:${idx}`} x=\"50%\" dy=\"1.2em\">\n                    {word}\n                  </tspan>\n                )}\n              </For>\n            </text>\n          }\n        >\n          <circle\n            data-complete={now === 100}\n            className={styles.path}\n            cx=\"50%\"\n            cy=\"50%\"\n            fill=\"none\"\n            r={radius}\n            pathLength=\"100\"\n            strokeDasharray=\"100\"\n            strokeDashoffset={100 - now}\n            transform=\"rotate(-90 50 50)\"\n          />\n          <g>\n            <text\n              className={styles.title}\n              x=\"50%\"\n              y=\"47%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n            >\n              {now}%\n            </text>\n            <text\n              className={styles.description}\n              x=\"50%\"\n              y=\"59%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n            >\n              {status}\n            </text>\n          </g>\n        </Show>\n      </svg>\n    </div>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n  /**\n   * The array to iterate over.\n   */\n  each: T | undefined | null | false\n  /**\n   * The fallback to render when the array is empty.\n   */\n  fallback?: JSX.Element\n  /**\n   * The children to render for each item in the array.\n   */\n  children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n *   {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n  props: ForProps<T, U>,\n) {\n  if (!props.each || !props.each.length) {\n    return props.fallback || null\n  }\n\n  return <>{props.each?.map(props.children) as ReactNode}</>\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/CircularProgress.d.cts

@@ -1,2 +0,0 @@
-export { CircularProgress_alias_1 as CircularProgress } from '../_tsup-dts-rollup.cjs';
-export { CircularProgressProps_alias_1 as CircularProgressProps } from '../_tsup-dts-rollup.cjs';