@cerberus-design/react 0.18.4 → 0.19.0

package/build/legacy/components/select/primitives.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/select/primitives.tsx
 var primitives_exports = {};
@@ -40,106 +42,163 @@ __export(primitives_exports, {
 module.exports = __toCommonJS(primitives_exports);
 var import_select = require("@ark-ui/react/select");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
 var import_jsx_runtime = require("react/jsx-runtime");
-function SelectRoot(props) {
-  const { size, ...rootProps } = props;
-  const styles = (0, import_recipes.select)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
-    }
-  );
-}
-function SelectLabel(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Label, { ...props, className: (0, import_css.cx)(styles.label, props.className) });
-}
-function SelectControl(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Control, { ...props });
-}
-function SelectTrigger(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.Trigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.trigger, props.className)
-    }
-  );
-}
-function SelectValueText(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.ValueText, { ...props });
-}
-function SelectIndicator(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.Indicator,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.indicator, props.className)
-    }
-  );
-}
-function SelectClearTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.ClearTrigger, { ...props });
-}
-function SelectPositioner(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.Positioner,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function SelectContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes.select)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.Content,
-    {
-      ...contentProps,
-      className: (0, import_css.cx)(styles.content, contentProps.className)
-    }
-  );
-}
-function SelectItemGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.ItemGroup, { ...props });
-}
-function SelectItemGroupLabel(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.ItemGroupLabel,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemGroupLabel, props.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * 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)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      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.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.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)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function SelectItem(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { ...props, className: (0, import_css.cx)(styles.item, props.className) });
-}
-function SelectItemText(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.ItemText, { ...props });
-}
-function SelectItemIndicator(props) {
-  const styles = (0, import_recipes.select)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_select.Select.ItemIndicator,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemIndicator, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
-}
-function SelectHiddenSelect(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.HiddenSelect, { ...props });
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
+
+// src/components/select/primitives.tsx
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes.select);
+var SelectRoot = withSlotRecipe(import_select.Select.Root, "root");
+var SelectLabel = withSlotRecipe(
+  import_select.Select.Label,
+  "label"
+);
+var SelectControl = withNoRecipe(import_select.Select.Control);
+var SelectTrigger = withSlotRecipe(
+  import_select.Select.Trigger,
+  "trigger"
+);
+var SelectValueText = withNoRecipe(
+  import_select.Select.ValueText
+);
+var SelectIndicator = withSlotRecipe(
+  import_select.Select.Indicator,
+  "indicator"
+);
+var SelectClearTrigger = withNoRecipe(
+  import_select.Select.ClearTrigger
+);
+var SelectPositioner = withSlotRecipe(
+  import_select.Select.Positioner,
+  "positioner"
+);
+var SelectContent = withSlotRecipe(
+  import_select.Select.Content,
+  "content"
+);
+var SelectItemGroup = withNoRecipe(
+  import_select.Select.ItemGroup
+);
+var SelectItemGroupLabel = withSlotRecipe(
+  import_select.Select.ItemGroupLabel,
+  "itemGroupLabel"
+);
+var SelectItem = withSlotRecipe(import_select.Select.Item, "item");
+var SelectItemText = withNoRecipe(import_select.Select.ItemText);
+var SelectItemIndicator = withSlotRecipe(
+  import_select.Select.ItemIndicator,
+  "itemIndicator"
+);
+var SelectHiddenSelect = withNoRecipe(
+  import_select.Select.HiddenSelect
+);
 function createSelectCollection(collection) {
   return (0, import_select.createListCollection)({
     items: collection

package/build/legacy/components/select/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/select/primitives.tsx"],"sourcesContent":["import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps,\n  type SelectContentProps,\n  type SelectControlProps,\n  type SelectHiddenSelectProps,\n  type SelectIndicatorProps,\n  type SelectItemGroupLabelProps,\n  type SelectItemGroupProps,\n  type SelectItemIndicatorProps,\n  type SelectItemProps,\n  type SelectItemTextProps,\n  type SelectLabelProps,\n  type SelectPositionerProps,\n  type SelectRootProps,\n  type SelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps,\n} from '@ark-ui/react/select'\nimport { select, type SelectVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\n/**\n * The SelectRoot component is the context provider for the Select component.\n */\nexport function SelectRoot(\n  props: SelectRootProps<SelectCollectionItem> & SelectVariantProps,\n) {\n  const { size, ...rootProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label that appears above the select input.\n */\nexport function SelectLabel(props: SelectLabelProps) {\n  const styles = select()\n  return (\n    <Select.Label {...props} className={cx(styles.label, props.className)} />\n  )\n}\n\n/**\n * The control that wraps the select trigger.\n */\nexport function SelectControl(props: SelectControlProps) {\n  return <Select.Control {...props} />\n}\n\n/**\n * The trigger that opens the dropdown.\n */\nexport function SelectTrigger(props: SelectTriggerProps) {\n  const styles = select()\n  return (\n    <Select.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The text that appears in the trigger.\n */\nexport function SelectValueText(props: SelectValueTextProps) {\n  return <Select.ValueText {...props} />\n}\n\n/**\n * The indicator that appears in the trigger.\n */\nexport function SelectIndicator(props: SelectIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that clears the selected value.\n */\nexport function SelectClearTrigger(props: SelectClearTriggerProps) {\n  return <Select.ClearTrigger {...props} />\n}\n\n/**\n * The positioner that contains the dropdown.\n */\nexport function SelectPositioner(props: SelectPositionerProps) {\n  const styles = select()\n  return (\n    <Select.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The content of the dropdown (i.e. the container itself).\n */\nexport function SelectContent(props: SelectContentProps & SelectVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = select({ size })\n  return (\n    <Select.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The container for a group of item options.\n */\nexport function SelectItemGroup(props: SelectItemGroupProps) {\n  return <Select.ItemGroup {...props} />\n}\n\n/**\n * The label for a group of item options.\n */\nexport function SelectItemGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <Select.ItemGroupLabel\n      {...props}\n      className={cx(styles.itemGroupLabel, props.className)}\n    />\n  )\n}\n\n/**\n * The container for an item in the select content.\n */\nexport function SelectItem(props: SelectItemProps) {\n  const styles = select()\n  return <Select.Item {...props} className={cx(styles.item, props.className)} />\n}\n\n/**\n * The text for an item option.\n */\nexport function SelectItemText(props: SelectItemTextProps) {\n  return <Select.ItemText {...props} />\n}\n\n/**\n * The indicator for an item option shown when it is selected.\n */\nexport function SelectItemIndicator(props: SelectItemIndicatorProps) {\n  const styles = select()\n  return (\n    <Select.ItemIndicator\n      {...props}\n      className={cx(styles.itemIndicator, props.className)}\n    />\n  )\n}\n\n/**\n * The native input for a select item.\n */\nexport function SelectHiddenSelect(props: SelectHiddenSelectProps) {\n  return <Select.HiddenSelect {...props} />\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/select/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps as ArkSelectClearTrigger,\n  type SelectContentProps as ArkSelectContentProps,\n  type SelectControlProps as ArkSelectControlProps,\n  type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,\n  type SelectIndicatorProps as ArkSelectIndicatorProps,\n  type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,\n  type SelectItemGroupProps as ArkSelectItemGroupProps,\n  type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,\n  type SelectItemProps as ArkSelectItemProps,\n  type SelectItemTextProps as ArkSelectItemTextProps,\n  type SelectLabelProps as ArkSelectLabelProps,\n  type SelectPositionerProps as ArkSelectPositionerProps,\n  type SelectRootProps as ArkSelectRootProps,\n  type SelectTriggerProps as ArkSelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps as ArkSelectValueTextProps,\n} from '@ark-ui/react/select'\nimport { select, type SelectVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)\n\n// Root\n\nexport type SelectRootProps = CerberusPrimitiveProps<\n  ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps\n>\n// @ts-expect-error this is a workaround for the type mismatch WIP\nexport const SelectRoot = withSlotRecipe<SelectRootProps>(Select.Root, 'root')\n\n// Label\n\nexport type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>\nexport const SelectLabel = withSlotRecipe<SelectLabelProps>(\n  Select.Label,\n  'label',\n)\n\n// Control\n\nexport type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>\nexport const SelectControl = withNoRecipe<SelectControlProps>(Select.Control)\n\n// Trigger\n\nexport type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>\nexport const SelectTrigger = withSlotRecipe<SelectTriggerProps>(\n  Select.Trigger,\n  'trigger',\n)\n\n// Value Text\n\nexport type SelectValueTextProps =\n  CerberusPrimitiveProps<ArkSelectValueTextProps>\nexport const SelectValueText = withNoRecipe<SelectValueTextProps>(\n  Select.ValueText,\n)\n\n// Indicator\n\nexport type SelectIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectIndicatorProps>\nexport const SelectIndicator = withSlotRecipe<SelectIndicatorProps>(\n  Select.Indicator,\n  'indicator',\n)\n\n// Clear Trigger\n\nexport type SelectClearTriggerProps =\n  CerberusPrimitiveProps<ArkSelectClearTrigger>\nexport const SelectClearTrigger = withNoRecipe<SelectClearTriggerProps>(\n  Select.ClearTrigger,\n)\n\n// Positioner\n\nexport type SelectPositionerProps =\n  CerberusPrimitiveProps<ArkSelectPositionerProps>\nexport const SelectPositioner = withSlotRecipe<SelectPositionerProps>(\n  Select.Positioner,\n  'positioner',\n)\n\n// Content\n\nexport type SelectContentProps = CerberusPrimitiveProps<\n  ArkSelectContentProps & SelectVariantProps\n>\nexport const SelectContent = withSlotRecipe<SelectContentProps>(\n  Select.Content,\n  'content',\n)\n\n// Item Group\n\nexport type SelectItemGroupProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupProps>\nexport const SelectItemGroup = withNoRecipe<SelectItemGroupProps>(\n  Select.ItemGroup,\n)\n\n// Item Group Label\n\nexport type SelectItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>\nexport const SelectItemGroupLabel = withSlotRecipe<SelectItemGroupLabelProps>(\n  Select.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Item\n\nexport type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>\nexport const SelectItem = withSlotRecipe<SelectItemProps>(Select.Item, 'item')\n\n// Item Text\n\nexport type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>\nexport const SelectItemText = withNoRecipe<SelectItemTextProps>(Select.ItemText)\n\n// Item Indicator\n\nexport type SelectItemIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectItemIndicatorProps>\nexport const SelectItemIndicator = withSlotRecipe<SelectItemIndicatorProps>(\n  Select.ItemIndicator,\n  'itemIndicator',\n)\n\n// Hidden Select\n\nexport type SelectHiddenSelectProps =\n  CerberusPrimitiveProps<ArkSelectHiddenSelectProps>\nexport const SelectHiddenSelect = withNoRecipe<SelectHiddenSelectProps>(\n  Select.HiddenSelect,\n)\n\n// Collection\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n"],"mappings":"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","names":[]}

package/build/legacy/components/select/primitives.d.cts

@@ -1,18 +1,33 @@
+export { createSelectCollection_alias_2 as createSelectCollection } from '../../_tsup-dts-rollup.cjs';
+export { SelectRootProps_alias_2 as SelectRootProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectRoot_alias_2 as SelectRoot } from '../../_tsup-dts-rollup.cjs';
+export { SelectLabelProps_alias_2 as SelectLabelProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectLabel_alias_2 as SelectLabel } from '../../_tsup-dts-rollup.cjs';
+export { SelectControlProps_alias_2 as SelectControlProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectControl_alias_2 as SelectControl } from '../../_tsup-dts-rollup.cjs';
+export { SelectTriggerProps_alias_2 as SelectTriggerProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectTrigger_alias_2 as SelectTrigger } from '../../_tsup-dts-rollup.cjs';
+export { SelectValueTextProps_alias_2 as SelectValueTextProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectValueText_alias_2 as SelectValueText } from '../../_tsup-dts-rollup.cjs';
+export { SelectIndicatorProps_alias_2 as SelectIndicatorProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectIndicator_alias_2 as SelectIndicator } from '../../_tsup-dts-rollup.cjs';
+export { SelectClearTriggerProps_alias_2 as SelectClearTriggerProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectClearTrigger_alias_2 as SelectClearTrigger } from '../../_tsup-dts-rollup.cjs';
+export { SelectPositionerProps_alias_2 as SelectPositionerProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectPositioner_alias_2 as SelectPositioner } from '../../_tsup-dts-rollup.cjs';
+export { SelectContentProps_alias_2 as SelectContentProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectContent_alias_2 as SelectContent } from '../../_tsup-dts-rollup.cjs';
+export { SelectItemGroupProps_alias_2 as SelectItemGroupProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectItemGroup_alias_2 as SelectItemGroup } from '../../_tsup-dts-rollup.cjs';
+export { SelectItemGroupLabelProps_alias_2 as SelectItemGroupLabelProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectItemGroupLabel_alias_2 as SelectItemGroupLabel } from '../../_tsup-dts-rollup.cjs';
+export { SelectItemProps_alias_2 as SelectItemProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectItem_alias_2 as SelectItem } from '../../_tsup-dts-rollup.cjs';
+export { SelectItemTextProps_alias_2 as SelectItemTextProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectItemText_alias_2 as SelectItemText } from '../../_tsup-dts-rollup.cjs';
+export { SelectItemIndicatorProps_alias_2 as SelectItemIndicatorProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectItemIndicator_alias_2 as SelectItemIndicator } from '../../_tsup-dts-rollup.cjs';
+export { SelectHiddenSelectProps_alias_2 as SelectHiddenSelectProps } from '../../_tsup-dts-rollup.cjs';
 export { SelectHiddenSelect_alias_2 as SelectHiddenSelect } from '../../_tsup-dts-rollup.cjs';
-export { createSelectCollection_alias_2 as createSelectCollection } from '../../_tsup-dts-rollup.cjs';
 export { SelectValueChangeDetails_alias_2 as SelectValueChangeDetails } from '../../_tsup-dts-rollup.cjs';
 export { ListCollection_alias_2 as ListCollection } from '../../_tsup-dts-rollup.cjs';