@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/select/option-group.d.ts

@@ -0,0 +1,31 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { CerberusPrimitiveProps } from '../..';
+import { SelectItemGroupProps, SelectItemGroupLabelProps } from '@ark-ui/react';
+/**
+ * This module contains the named abstractions OptionGroup and OptionGroupLabel
+ * components for API consistency with the Select component.
+ * @module 'react/select/option-group'
+ */
+/**
+ * The OptionGroup component is a group of options in the dropdown list.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ * @example
+ * ```tsx
+ * <OptionGroup>
+ *  <OptionGroupLabel>Greek gods</OptionGroupLabel>
+ *  ...
+ * </OptionGroup>
+ * ```
+ */
+export declare const OptionGroup: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps< SelectItemGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * The OptionGroupLabel component is the label of the OptionGroup.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ * @example
+ * ```tsx
+ * <OptionGroupLabel>Greek gods</OptionGroupLabel>
+ * ```
+ */
+export declare const OptionGroupLabel: ForwardRefExoticComponent<Omit< CerberusPrimitiveProps< SelectItemGroupLabelProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/select/option-group.js

@@ -0,0 +1,33 @@
+"use client";
+import { SelectItemGroup, SelectItemGroupLabel } from "./primitives.js";
+//#region src/components/select/option-group.tsx
+/**
+* This module contains the named abstractions OptionGroup and OptionGroupLabel
+* components for API consistency with the Select component.
+* @module 'react/select/option-group'
+*/
+/**
+* The OptionGroup component is a group of options in the dropdown list.
+* @definition [Select docs](https://cerberus.digitalu.design/react/select)
+* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+* @example
+* ```tsx
+* <OptionGroup>
+*  <OptionGroupLabel>Greek gods</OptionGroupLabel>
+*  ...
+* </OptionGroup>
+* ```
+*/
+var OptionGroup = SelectItemGroup;
+/**
+* The OptionGroupLabel component is the label of the OptionGroup.
+* @definition [Select docs](https://cerberus.digitalu.design/react/select)
+* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+* @example
+* ```tsx
+* <OptionGroupLabel>Greek gods</OptionGroupLabel>
+* ```
+*/
+var OptionGroupLabel = SelectItemGroupLabel;
+//#endregion
+export { OptionGroup, OptionGroupLabel };

package/dist/components/select/option.cjs

@@ -0,0 +1,27 @@
+"use client";
+"use client";
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_parts = require("./parts.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/select/option.tsx
+/**
+* The Option component is used to render an individual item in the Select
+* dropdown. It is an abstraction of the Select Item, ItemText, and
+* ItemIndicator primitives that also displays a Checked icon when the item is
+* selected.
+*
+* @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
+* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+*/
+function Option(props) {
+	const { item, ...itemProps } = props;
+	const { icons } = require_cerberus.useCerberusContext();
+	const { selectChecked: CheckedIcon } = icons;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.SelectParts.Item, {
+		...itemProps,
+		item,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.ItemText, { children: item?.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {}) })]
+	});
+}
+//#endregion
+exports.Option = Option;

package/dist/components/select/option.d.cts

@@ -0,0 +1,22 @@
+import { SelectItemProps } from './primitives';
+import { SelectCollectionItem } from './select';
+/**
+ * This module contains the Option component for the Select dropdown.
+ * @module 'react/select/option'
+ */
+export interface OptionProps extends SelectItemProps {
+    /**
+     * The CollectionListItem to be displayed in the dropdown list.
+     */
+    item: SelectCollectionItem;
+}
+/**
+ * The Option component is used to render an individual item in the Select
+ * dropdown. It is an abstraction of the Select Item, ItemText, and
+ * ItemIndicator primitives that also displays a Checked icon when the item is
+ * selected.
+ *
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ */
+export declare function Option(props: OptionProps): import("react").JSX.Element;

package/dist/components/select/option.d.ts

@@ -0,0 +1,22 @@
+import { SelectItemProps } from './primitives';
+import { SelectCollectionItem } from './select';
+/**
+ * This module contains the Option component for the Select dropdown.
+ * @module 'react/select/option'
+ */
+export interface OptionProps extends SelectItemProps {
+    /**
+     * The CollectionListItem to be displayed in the dropdown list.
+     */
+    item: SelectCollectionItem;
+}
+/**
+ * The Option component is used to render an individual item in the Select
+ * dropdown. It is an abstraction of the Select Item, ItemText, and
+ * ItemIndicator primitives that also displays a Checked icon when the item is
+ * selected.
+ *
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ */
+export declare function Option(props: OptionProps): import("react").JSX.Element;

package/dist/components/select/option.js

@@ -0,0 +1,27 @@
+"use client";
+"use client";
+import { useCerberusContext } from "../../context/cerberus.js";
+import { SelectParts } from "./parts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/option.tsx
+/**
+* The Option component is used to render an individual item in the Select
+* dropdown. It is an abstraction of the Select Item, ItemText, and
+* ItemIndicator primitives that also displays a Checked icon when the item is
+* selected.
+*
+* @definition [Select docs](https://cerberus.digitalu.design/react/select/dev)
+* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+*/
+function Option(props) {
+	const { item, ...itemProps } = props;
+	const { icons } = useCerberusContext();
+	const { selectChecked: CheckedIcon } = icons;
+	return /* @__PURE__ */ jsxs(SelectParts.Item, {
+		...itemProps,
+		item,
+		children: [/* @__PURE__ */ jsx(SelectParts.ItemText, { children: item?.label }), /* @__PURE__ */ jsx(SelectParts.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckedIcon, {}) })]
+	});
+}
+//#endregion
+export { Option };

package/dist/components/select/parts.cjs

@@ -0,0 +1,30 @@
+const require_primitives = require("./primitives.cjs");
+//#region src/components/select/parts.ts
+/**
+* An Object containing the parts of the Radio component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the SelectParts object and
+* the entire family of components vs. only what you use.
+*/
+var SelectParts = {
+	Root: require_primitives.SelectRoot,
+	Label: require_primitives.SelectLabel,
+	Control: require_primitives.SelectControl,
+	Trigger: require_primitives.SelectTrigger,
+	ClearTrigger: require_primitives.SelectClearTrigger,
+	ValueText: require_primitives.SelectValueText,
+	Indicator: require_primitives.SelectIndicator,
+	Positioner: require_primitives.SelectPositioner,
+	Content: require_primitives.SelectContent,
+	ItemGroup: require_primitives.SelectItemGroup,
+	ItemGroupLabel: require_primitives.SelectItemGroupLabel,
+	Item: require_primitives.SelectItem,
+	ItemText: require_primitives.SelectItemText,
+	ItemIndicator: require_primitives.SelectItemIndicator,
+	HiddenSelect: require_primitives.SelectHiddenSelect
+};
+//#endregion
+exports.SelectParts = SelectParts;

package/dist/components/select/parts.d.cts

@@ -0,0 +1,78 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Select parts.
+ * @module 'select/parts'
+ */
+interface SelectPartsValue {
+    /**
+     * The context provider for the Select component.
+     */
+    Root: ElementType;
+    /**
+     * The label that appears above the select input.
+     */
+    Label: ElementType;
+    /**
+     * The control that wraps the select trigger.
+     */
+    Control: ElementType;
+    /**
+     * The trigger that opens the dropdown.
+     */
+    Trigger: ElementType;
+    /**
+     * The trigger to clear the select input.
+     */
+    ClearTrigger: ElementType;
+    /**
+     * The text that appears in the trigger.
+     */
+    ValueText: ElementType;
+    /**
+     * The indicator that appears in the trigger.
+     */
+    Indicator: ElementType;
+    /**
+     * The positioner that wraps the content.
+     */
+    Positioner: ElementType;
+    /**
+     * The content of the select component.
+     */
+    Content: ElementType;
+    /**
+     * A group of items in the select component.
+     */
+    ItemGroup: ElementType;
+    /**
+     * The label for a group of items in the select component.
+     */
+    ItemGroupLabel: ElementType;
+    /**
+     * An individual item in the select component.
+     */
+    Item: ElementType;
+    /**
+     * The text that labels a single radio of the field.
+     */
+    ItemText: ElementType;
+    /**
+     * The indicator that appears when the item has been selected.
+     */
+    ItemIndicator: ElementType;
+    /**
+     * The native select for use within a field.
+     */
+    HiddenSelect: ElementType;
+}
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the SelectParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const SelectParts: SelectPartsValue;
+export {};

package/dist/components/select/parts.d.ts

@@ -0,0 +1,78 @@
+import { ElementType } from 'react';
+/**
+ * This module contains the parts of the Select parts.
+ * @module 'select/parts'
+ */
+interface SelectPartsValue {
+    /**
+     * The context provider for the Select component.
+     */
+    Root: ElementType;
+    /**
+     * The label that appears above the select input.
+     */
+    Label: ElementType;
+    /**
+     * The control that wraps the select trigger.
+     */
+    Control: ElementType;
+    /**
+     * The trigger that opens the dropdown.
+     */
+    Trigger: ElementType;
+    /**
+     * The trigger to clear the select input.
+     */
+    ClearTrigger: ElementType;
+    /**
+     * The text that appears in the trigger.
+     */
+    ValueText: ElementType;
+    /**
+     * The indicator that appears in the trigger.
+     */
+    Indicator: ElementType;
+    /**
+     * The positioner that wraps the content.
+     */
+    Positioner: ElementType;
+    /**
+     * The content of the select component.
+     */
+    Content: ElementType;
+    /**
+     * A group of items in the select component.
+     */
+    ItemGroup: ElementType;
+    /**
+     * The label for a group of items in the select component.
+     */
+    ItemGroupLabel: ElementType;
+    /**
+     * An individual item in the select component.
+     */
+    Item: ElementType;
+    /**
+     * The text that labels a single radio of the field.
+     */
+    ItemText: ElementType;
+    /**
+     * The indicator that appears when the item has been selected.
+     */
+    ItemIndicator: ElementType;
+    /**
+     * The native select for use within a field.
+     */
+    HiddenSelect: ElementType;
+}
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the SelectParts object and
+ * the entire family of components vs. only what you use.
+ */
+export declare const SelectParts: SelectPartsValue;
+export {};

package/dist/components/select/parts.js

@@ -0,0 +1,30 @@
+import { SelectClearTrigger, SelectContent, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText } from "./primitives.js";
+//#region src/components/select/parts.ts
+/**
+* An Object containing the parts of the Radio component. For users that
+* prefer Object component syntax.
+*
+* @remarks
+*
+* When using object component syntax, you import the SelectParts object and
+* the entire family of components vs. only what you use.
+*/
+var SelectParts = {
+	Root: SelectRoot,
+	Label: SelectLabel,
+	Control: SelectControl,
+	Trigger: SelectTrigger,
+	ClearTrigger: SelectClearTrigger,
+	ValueText: SelectValueText,
+	Indicator: SelectIndicator,
+	Positioner: SelectPositioner,
+	Content: SelectContent,
+	ItemGroup: SelectItemGroup,
+	ItemGroupLabel: SelectItemGroupLabel,
+	Item: SelectItem,
+	ItemText: SelectItemText,
+	ItemIndicator: SelectItemIndicator,
+	HiddenSelect: SelectHiddenSelect
+};
+//#endregion
+export { SelectParts };

package/dist/components/select/primitives.cjs

@@ -0,0 +1,52 @@
+const require_index = require("../../system/index.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let _ark_ui_react_select = require("@ark-ui/react/select");
+//#region src/components/select/primitives.tsx
+/**
+* This module contains the Select primitives
+* @module 'react/select'
+*/
+var { withSlotRecipe, withNoRecipe } = require_index.createCerberusPrimitive(styled_system_recipes.select);
+var SelectRoot = withSlotRecipe(_ark_ui_react_select.Select.Root, "root");
+var SelectLabel = withSlotRecipe(_ark_ui_react_select.Select.Label, "label");
+var SelectControl = withNoRecipe(_ark_ui_react_select.Select.Control);
+var SelectTrigger = withSlotRecipe(_ark_ui_react_select.Select.Trigger, "trigger");
+var SelectValueText = withNoRecipe(_ark_ui_react_select.Select.ValueText);
+var SelectIndicator = withSlotRecipe(_ark_ui_react_select.Select.Indicator, "indicator");
+var SelectClearTrigger = withNoRecipe(_ark_ui_react_select.Select.ClearTrigger);
+var SelectPositioner = withSlotRecipe(_ark_ui_react_select.Select.Positioner, "positioner");
+var SelectContent = withSlotRecipe(_ark_ui_react_select.Select.Content, "content");
+var SelectItemGroup = withNoRecipe(_ark_ui_react_select.Select.ItemGroup);
+var SelectItemGroupLabel = withSlotRecipe(_ark_ui_react_select.Select.ItemGroupLabel, "itemGroupLabel");
+var SelectItem = withSlotRecipe(_ark_ui_react_select.Select.Item, "item");
+var SelectItemText = withNoRecipe(_ark_ui_react_select.Select.ItemText);
+var SelectItemIndicator = withSlotRecipe(_ark_ui_react_select.Select.ItemIndicator, "itemIndicator");
+var SelectHiddenSelect = withNoRecipe(_ark_ui_react_select.Select.HiddenSelect);
+/**
+* A helper function to create a SelectCollection object.
+* @param collection - An array of SelectCollectionItem objects that matches
+* the following shape:
+* ```ts
+* [{ label: 'Hades', value: 'hades', disabled?: true }]
+* ```
+*/
+function createSelectCollection(collection) {
+	return (0, _ark_ui_react_select.createListCollection)({ items: collection });
+}
+//#endregion
+exports.SelectClearTrigger = SelectClearTrigger;
+exports.SelectContent = SelectContent;
+exports.SelectControl = SelectControl;
+exports.SelectHiddenSelect = SelectHiddenSelect;
+exports.SelectIndicator = SelectIndicator;
+exports.SelectItem = SelectItem;
+exports.SelectItemGroup = SelectItemGroup;
+exports.SelectItemGroupLabel = SelectItemGroupLabel;
+exports.SelectItemIndicator = SelectItemIndicator;
+exports.SelectItemText = SelectItemText;
+exports.SelectLabel = SelectLabel;
+exports.SelectPositioner = SelectPositioner;
+exports.SelectRoot = SelectRoot;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValueText = SelectValueText;
+exports.createSelectCollection = createSelectCollection;

package/dist/components/select/primitives.d.cts

@@ -0,0 +1,45 @@
+import { Select, ListCollection, SelectClearTriggerProps as ArkSelectClearTrigger, SelectContentProps as ArkSelectContentProps, SelectControlProps as ArkSelectControlProps, SelectHiddenSelectProps as ArkSelectHiddenSelectProps, SelectIndicatorProps as ArkSelectIndicatorProps, SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps, SelectItemGroupProps as ArkSelectItemGroupProps, SelectItemIndicatorProps as ArkSelectItemIndicatorProps, SelectItemProps as ArkSelectItemProps, SelectItemTextProps as ArkSelectItemTextProps, SelectLabelProps as ArkSelectLabelProps, SelectPositionerProps as ArkSelectPositionerProps, SelectRootProps as ArkSelectRootProps, SelectTriggerProps as ArkSelectTriggerProps, SelectValueChangeDetails, SelectValueTextProps as ArkSelectValueTextProps } from '@ark-ui/react/select';
+import { SelectVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { SelectCollectionItem } from './select';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type SelectRootProps = CerberusPrimitiveProps<ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps>;
+export declare const SelectRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Omit<Select.RootProps<unknown>, never> & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>;
+export declare const SelectLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.LabelProps & RefAttributes<HTMLLabelElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>;
+export declare const SelectControl: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ControlProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>;
+export declare const SelectTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectValueTextProps = CerberusPrimitiveProps<ArkSelectValueTextProps>;
+export declare const SelectValueText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ValueTextProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectIndicatorProps = CerberusPrimitiveProps<ArkSelectIndicatorProps>;
+export declare const SelectIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.IndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectClearTriggerProps = CerberusPrimitiveProps<ArkSelectClearTrigger>;
+export declare const SelectClearTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ClearTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectPositionerProps = CerberusPrimitiveProps<ArkSelectPositionerProps>;
+export declare const SelectPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectContentProps = CerberusPrimitiveProps<ArkSelectContentProps & SelectVariantProps>;
+export declare const SelectContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemGroupProps = CerberusPrimitiveProps<ArkSelectItemGroupProps>;
+export declare const SelectItemGroup: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemGroupLabelProps = CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>;
+export declare const SelectItemGroupLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemGroupLabelProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>;
+export declare const SelectItem: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>;
+export declare const SelectItemText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemTextProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemIndicatorProps = CerberusPrimitiveProps<ArkSelectItemIndicatorProps>;
+export declare const SelectItemIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemIndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectHiddenSelectProps = CerberusPrimitiveProps<ArkSelectHiddenSelectProps>;
+export declare const SelectHiddenSelect: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.HiddenSelectProps & RefAttributes<HTMLSelectElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * A helper function to create a SelectCollection object.
+ * @param collection - An array of SelectCollectionItem objects that matches
+ * the following shape:
+ * ```ts
+ * [{ label: 'Hades', value: 'hades', disabled?: true }]
+ * ```
+ */
+export declare function createSelectCollection(collection: SelectCollectionItem[]): ListCollection<SelectCollectionItem>;
+export type { SelectValueChangeDetails, ListCollection };

package/dist/components/select/primitives.d.ts

@@ -0,0 +1,45 @@
+import { Select, ListCollection, SelectClearTriggerProps as ArkSelectClearTrigger, SelectContentProps as ArkSelectContentProps, SelectControlProps as ArkSelectControlProps, SelectHiddenSelectProps as ArkSelectHiddenSelectProps, SelectIndicatorProps as ArkSelectIndicatorProps, SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps, SelectItemGroupProps as ArkSelectItemGroupProps, SelectItemIndicatorProps as ArkSelectItemIndicatorProps, SelectItemProps as ArkSelectItemProps, SelectItemTextProps as ArkSelectItemTextProps, SelectLabelProps as ArkSelectLabelProps, SelectPositionerProps as ArkSelectPositionerProps, SelectRootProps as ArkSelectRootProps, SelectTriggerProps as ArkSelectTriggerProps, SelectValueChangeDetails, SelectValueTextProps as ArkSelectValueTextProps } from '@ark-ui/react/select';
+import { SelectVariantProps } from 'styled-system/recipes';
+import { CerberusPrimitiveProps } from '../../system/index';
+import { SelectCollectionItem } from './select';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type SelectRootProps = CerberusPrimitiveProps<ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps>;
+export declare const SelectRoot: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Omit<Select.RootProps<unknown>, never> & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>;
+export declare const SelectLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.LabelProps & RefAttributes<HTMLLabelElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>;
+export declare const SelectControl: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ControlProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>;
+export declare const SelectTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.TriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectValueTextProps = CerberusPrimitiveProps<ArkSelectValueTextProps>;
+export declare const SelectValueText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ValueTextProps & RefAttributes<HTMLSpanElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectIndicatorProps = CerberusPrimitiveProps<ArkSelectIndicatorProps>;
+export declare const SelectIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.IndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectClearTriggerProps = CerberusPrimitiveProps<ArkSelectClearTrigger>;
+export declare const SelectClearTrigger: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ClearTriggerProps & RefAttributes<HTMLButtonElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectPositionerProps = CerberusPrimitiveProps<ArkSelectPositionerProps>;
+export declare const SelectPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectContentProps = CerberusPrimitiveProps<ArkSelectContentProps & SelectVariantProps>;
+export declare const SelectContent: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ContentProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemGroupProps = CerberusPrimitiveProps<ArkSelectItemGroupProps>;
+export declare const SelectItemGroup: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemGroupProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemGroupLabelProps = CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>;
+export declare const SelectItemGroupLabel: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemGroupLabelProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>;
+export declare const SelectItem: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>;
+export declare const SelectItemText: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemTextProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectItemIndicatorProps = CerberusPrimitiveProps<ArkSelectItemIndicatorProps>;
+export declare const SelectItemIndicator: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.ItemIndicatorProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<HTMLElement>>;
+export type SelectHiddenSelectProps = CerberusPrimitiveProps<ArkSelectHiddenSelectProps>;
+export declare const SelectHiddenSelect: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<Select.HiddenSelectProps & RefAttributes<HTMLSelectElement>>, "ref"> & RefAttributes<HTMLElement>>;
+/**
+ * A helper function to create a SelectCollection object.
+ * @param collection - An array of SelectCollectionItem objects that matches
+ * the following shape:
+ * ```ts
+ * [{ label: 'Hades', value: 'hades', disabled?: true }]
+ * ```
+ */
+export declare function createSelectCollection(collection: SelectCollectionItem[]): ListCollection<SelectCollectionItem>;
+export type { SelectValueChangeDetails, ListCollection };

package/dist/components/select/primitives.js

@@ -0,0 +1,37 @@
+import { createCerberusPrimitive } from "../../system/index.js";
+import { select } from "styled-system/recipes";
+import { Select, createListCollection } from "@ark-ui/react/select";
+//#region src/components/select/primitives.tsx
+/**
+* This module contains the Select primitives
+* @module 'react/select'
+*/
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select);
+var SelectRoot = withSlotRecipe(Select.Root, "root");
+var SelectLabel = withSlotRecipe(Select.Label, "label");
+var SelectControl = withNoRecipe(Select.Control);
+var SelectTrigger = withSlotRecipe(Select.Trigger, "trigger");
+var SelectValueText = withNoRecipe(Select.ValueText);
+var SelectIndicator = withSlotRecipe(Select.Indicator, "indicator");
+var SelectClearTrigger = withNoRecipe(Select.ClearTrigger);
+var SelectPositioner = withSlotRecipe(Select.Positioner, "positioner");
+var SelectContent = withSlotRecipe(Select.Content, "content");
+var SelectItemGroup = withNoRecipe(Select.ItemGroup);
+var SelectItemGroupLabel = withSlotRecipe(Select.ItemGroupLabel, "itemGroupLabel");
+var SelectItem = withSlotRecipe(Select.Item, "item");
+var SelectItemText = withNoRecipe(Select.ItemText);
+var SelectItemIndicator = withSlotRecipe(Select.ItemIndicator, "itemIndicator");
+var SelectHiddenSelect = withNoRecipe(Select.HiddenSelect);
+/**
+* A helper function to create a SelectCollection object.
+* @param collection - An array of SelectCollectionItem objects that matches
+* the following shape:
+* ```ts
+* [{ label: 'Hades', value: 'hades', disabled?: true }]
+* ```
+*/
+function createSelectCollection(collection) {
+	return createListCollection({ items: collection });
+}
+//#endregion
+export { SelectClearTrigger, SelectContent, SelectControl, SelectHiddenSelect, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, createSelectCollection };

package/dist/components/select/select.cjs

@@ -0,0 +1,61 @@
+"use client";
+const require_index = require("../../utils/index.cjs");
+const require_show = require("../show/show.cjs");
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_parts = require("./parts.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_jsx = require("styled-system/jsx");
+//#region src/components/select/select.tsx
+/**
+* The Select component is a dropdown list that allows users to select an
+* option from a list.
+* @definition [Select docs](https://cerberus.digitalu.design/react/select)
+* @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+* @example
+* ```tsx
+* import { Select, Option, createListCollection } from '@cerberus-design/react'
+*
+* export function SelectBasicPreview() {
+*  const collection = createListCollection({
+*   items: [
+*    { label: 'Hades', value: 'hades' },
+*    { label: 'Persephone', value: 'persephone' },
+*    { label: 'Zeus', value: 'zeus', disabled: true },
+*   ]
+*  })
+*
+*  return (
+*   <Select
+*    collection={collection}
+*    label="Select Relative"
+*    placeholder="Choose option"
+*   >
+*   {collection.items.map((item) => (
+*    <Option key={item.value} item={item} />
+*   ))}
+*  </Select>
+*  )
+* }
+*/
+function Select(props) {
+	const [{ collection, placeholder }, rootProps] = require_index.splitProps(props, ["collection", "placeholder"]);
+	const { icons } = require_cerberus.useCerberusContext();
+	const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.SelectParts.Root, {
+		collection,
+		...rootProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.Control, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.SelectParts.Trigger, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.ValueText, { placeholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+				when: props.invalid,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvalidIcon, { "data-part": "invalid-icon" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.Indicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectArrow, {}) })] })] }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.Positioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.Content, {
+				size: rootProps.size,
+				children: props.children
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.SelectParts.HiddenSelect, {})
+		]
+	});
+}
+//#endregion
+exports.Select = Select;