@cerberus-design/react 0.15.0-next-e5dbdbd → 0.15.0-next-b2ad645

package/src/components/Select.tsx

@@ -20,6 +20,21 @@ import { useCerberusContext } from '../context/cerberus'
 import { Portal } from './Portal'
 import { Show } from './Show'
 import { Text } from './Text'
+import {
+  SelectContent,
+  SelectControl,
+  SelectIndicator,
+  SelectItem,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from './Select.server'
 
 /**
  * This module contains the Select components.
@@ -102,45 +117,41 @@ export function Select(props: SelectProps) {
   const styles = select({ size })
 
   return (
-    <ArkSelect.Root
-      className={styles.root}
-      collection={collection}
-      {...rootProps}
-    >
-      <ArkSelect.Label className={styles.label}>
+    <SelectRoot className={styles.root} collection={collection} {...rootProps}>
+      <SelectLabel className={styles.label}>
         {label}
         <Show when={props.required}>
           <Text as="span" color="page.text.100">
             (required)
           </Text>
         </Show>
-      </ArkSelect.Label>
+      </SelectLabel>
 
-      <ArkSelect.Control className={styles.control}>
-        <ArkSelect.Trigger className={styles.trigger}>
-          <ArkSelect.ValueText placeholder={placeholder} />
+      <SelectControl className={styles.control}>
+        <SelectTrigger className={styles.trigger}>
+          <SelectValueText placeholder={placeholder} />
 
           <HStack>
             <Show when={props.invalid}>
               <InvalidIcon data-part="invalid-icon" />
             </Show>
-            <ArkSelect.Indicator className={styles.indicator}>
+            <SelectIndicator className={styles.indicator}>
               <SelectArrow />
-            </ArkSelect.Indicator>
+            </SelectIndicator>
           </HStack>
-        </ArkSelect.Trigger>
-      </ArkSelect.Control>
+        </SelectTrigger>
+      </SelectControl>
 
       <Portal>
-        <ArkSelect.Positioner className={styles.positioner}>
-          <ArkSelect.Content className={styles.content}>
+        <SelectPositioner className={styles.positioner}>
+          <SelectContent className={styles.content}>
             {props.children}
-          </ArkSelect.Content>
-        </ArkSelect.Positioner>
+          </SelectContent>
+        </SelectPositioner>
       </Portal>
 
       <ArkSelect.HiddenSelect />
-    </ArkSelect.Root>
+    </SelectRoot>
   )
 }
 
@@ -160,14 +171,12 @@ export function Option(props: OptionProps) {
   const styles = select()
 
   return (
-    <ArkSelect.Item {...itemProps} item={item} className={styles.item}>
-      <ArkSelect.ItemText className={styles.itemText}>
-        {item?.label}
-      </ArkSelect.ItemText>
-      <ArkSelect.ItemIndicator className={styles.itemIndicator}>
+    <SelectItem {...itemProps} item={item} className={styles.item}>
+      <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>
+      <SelectItemIndicator className={styles.itemIndicator}>
         <CheckedIcon />
-      </ArkSelect.ItemIndicator>
-    </ArkSelect.Item>
+      </SelectItemIndicator>
+    </SelectItem>
   )
 }
 
@@ -184,7 +193,7 @@ export function Option(props: OptionProps) {
  * ```
  */
 export function OptionGroup(props: SelectItemGroupProps) {
-  return <ArkSelect.ItemGroup {...props} />
+  return <SelectItemGroup {...props} />
 }
 
 /**
@@ -199,7 +208,7 @@ export function OptionGroup(props: SelectItemGroupProps) {
 export function OptionGroupLabel(props: SelectItemGroupLabelProps) {
   const styles = select()
   return (
-    <ArkSelect.ItemGroupLabel
+    <SelectItemGroupLabel
       {...props}
       className={cx(props.className, styles.itemGroupLabel)}
     />

package/src/index.ts

@@ -58,6 +58,7 @@ export * from './components/Textarea'
 export * from './components/Toggle'
 export * from './components/Tooltip'
 export * from './components/Select'
+export * from './components/Select.server'
 export * from './components/Show'
 
 // context

package/build/modern/chunk-X6WFDKKJ.js

@@ -1,90 +0,0 @@
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
-
-// src/components/Select.tsx
-import {
-  Select as ArkSelect,
-  createListCollection
-} from "@ark-ui/react/select";
-import {
-  select
-} from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
-import { HStack } from "@cerberus/styled-system/jsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Select(props) {
-  const { collection, label, placeholder, size, ...rootProps } = props;
-  const { icons } = useCerberusContext();
-  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
-  const styles = select({ size });
-  return /* @__PURE__ */ jsxs(
-    ArkSelect.Root,
-    {
-      className: styles.root,
-      collection,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsxs(ArkSelect.Label, { className: styles.label, children: [
-          label,
-          /* @__PURE__ */ jsx(Show, { when: props.required, children: /* @__PURE__ */ jsx(Text, { as: "span", color: "page.text.100", children: "(required)" }) })
-        ] }),
-        /* @__PURE__ */ jsx(ArkSelect.Control, { className: styles.control, children: /* @__PURE__ */ jsxs(ArkSelect.Trigger, { className: styles.trigger, children: [
-          /* @__PURE__ */ jsx(ArkSelect.ValueText, { placeholder }),
-          /* @__PURE__ */ jsxs(HStack, { children: [
-            /* @__PURE__ */ jsx(Show, { when: props.invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { "data-part": "invalid-icon" }) }),
-            /* @__PURE__ */ jsx(ArkSelect.Indicator, { className: styles.indicator, children: /* @__PURE__ */ jsx(SelectArrow, {}) })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ArkSelect.Positioner, { className: styles.positioner, children: /* @__PURE__ */ jsx(ArkSelect.Content, { className: styles.content, children: props.children }) }) }),
-        /* @__PURE__ */ jsx(ArkSelect.HiddenSelect, {})
-      ]
-    }
-  );
-}
-function Option(props) {
-  const { item, ...itemProps } = props;
-  const { icons } = useCerberusContext();
-  const { selectChecked: CheckedIcon } = icons;
-  const styles = select();
-  return /* @__PURE__ */ jsxs(ArkSelect.Item, { ...itemProps, item, className: styles.item, children: [
-    /* @__PURE__ */ jsx(ArkSelect.ItemText, { className: styles.itemText, children: item?.label }),
-    /* @__PURE__ */ jsx(ArkSelect.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(CheckedIcon, {}) })
-  ] });
-}
-function OptionGroup(props) {
-  return /* @__PURE__ */ jsx(ArkSelect.ItemGroup, { ...props });
-}
-function OptionGroupLabel(props) {
-  const styles = select();
-  return /* @__PURE__ */ jsx(
-    ArkSelect.ItemGroupLabel,
-    {
-      ...props,
-      className: cx(props.className, styles.itemGroupLabel)
-    }
-  );
-}
-function createSelectCollection(collection) {
-  return createListCollection({
-    items: collection
-  });
-}
-
-export {
-  Select,
-  Option,
-  OptionGroup,
-  OptionGroupLabel,
-  createSelectCollection
-};
-//# sourceMappingURL=chunk-X6WFDKKJ.js.map

package/build/modern/chunk-X6WFDKKJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Select as ArkSelect,\n  createListCollection,\n  type SelectRootProps,\n  type SelectItemProps,\n  type SelectItemGroupProps,\n  type SelectItemGroupLabelProps,\n  type ListCollection,\n  type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport { Text } from './Text'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n  /**\n   * What is displayed in the dropdown list.\n   */\n  label: string\n  /**\n   * The value of the selected item used in the form.\n   */\n  value: string\n  /**\n   * If the item is disabled.\n   */\n  disabled?: boolean\n}\n\nexport interface SelectCollection {\n  /**\n   * The items to be displayed in the dropdown list.\n   */\n  items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n  /**\n   * The placeholder text when no option is selected.\n   */\n  placeholder?: string\n  /**\n   * The label of the select.\n   */\n  label: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n  BaseSelectProps &\n  SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n *  const collection = createListCollection({\n *   items: [\n *    { label: 'Hades', value: 'hades' },\n *    { label: 'Persephone', value: 'persephone' },\n *    { label: 'Zeus', value: 'zeus', disabled: true },\n *   ]\n *  })\n *\n *  return (\n *   <Select\n *    collection={collection}\n *    label=\"Select Relative\"\n *    placeholder=\"Choose option\"\n *   >\n *   {collection.items.map((item) => (\n *    <Option key={item.value} item={item} />\n *   ))}\n *  </Select>\n *  )\n * }\n */\nexport function Select(props: SelectProps) {\n  const { collection, label, placeholder, size, ...rootProps } = props\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n  const styles = select({ size })\n\n  return (\n    <ArkSelect.Root\n      className={styles.root}\n      collection={collection}\n      {...rootProps}\n    >\n      <ArkSelect.Label className={styles.label}>\n        {label}\n        <Show when={props.required}>\n          <Text as=\"span\" color=\"page.text.100\">\n            (required)\n          </Text>\n        </Show>\n      </ArkSelect.Label>\n\n      <ArkSelect.Control className={styles.control}>\n        <ArkSelect.Trigger className={styles.trigger}>\n          <ArkSelect.ValueText placeholder={placeholder} />\n\n          <HStack>\n            <Show when={props.invalid}>\n              <InvalidIcon data-part=\"invalid-icon\" />\n            </Show>\n            <ArkSelect.Indicator className={styles.indicator}>\n              <SelectArrow />\n            </ArkSelect.Indicator>\n          </HStack>\n        </ArkSelect.Trigger>\n      </ArkSelect.Control>\n\n      <Portal>\n        <ArkSelect.Positioner className={styles.positioner}>\n          <ArkSelect.Content className={styles.content}>\n            {props.children}\n          </ArkSelect.Content>\n        </ArkSelect.Positioner>\n      </Portal>\n\n      <ArkSelect.HiddenSelect />\n    </ArkSelect.Root>\n  )\n}\n\nexport interface OptionProps extends SelectItemProps {\n  /**\n   * The CollectionListItem to be displayed in the dropdown list.\n   */\n  item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n  const { item, ...itemProps } = props\n\n  const { icons } = useCerberusContext()\n  const { selectChecked: CheckedIcon } = icons\n\n  const styles = select()\n\n  return (\n    <ArkSelect.Item {...itemProps} item={item} className={styles.item}>\n      <ArkSelect.ItemText className={styles.itemText}>\n        {item?.label}\n      </ArkSelect.ItemText>\n      <ArkSelect.ItemIndicator className={styles.itemIndicator}>\n        <CheckedIcon />\n      </ArkSelect.ItemIndicator>\n    </ArkSelect.Item>\n  )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n *  <OptionGroupLabel>Greek gods</OptionGroupLabel>\n *  ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n  return <ArkSelect.ItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <ArkSelect.ItemGroupLabel\n      {...props}\n      className={cx(props.className, styles.itemGroupLabel)}\n    />\n  )\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":";;;;;;;;;;;;;;AAEA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,OAOK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB,SAGI,KAHJ;AAbC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,YAAY,OAAO,aAAa,MAAM,GAAG,UAAU,IAAI;AAC/D,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,SAAS,YAAY,IAAI;AAE3D,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAE9B,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC,WAAW,OAAO;AAAA,MAClB;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,UAAU,OAAV,EAAgB,WAAW,OAAO,OAChC;AAAA;AAAA,UACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,OAAM,iBAAgB,wBAEtC,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SACnC,+BAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SACnC;AAAA,8BAAC,UAAU,WAAV,EAAoB,aAA0B;AAAA,UAE/C,qBAAC,UACC;AAAA,gCAAC,QAAK,MAAM,MAAM,SAChB,8BAAC,eAAY,aAAU,gBAAe,GACxC;AAAA,YACA,oBAAC,UAAU,WAAV,EAAoB,WAAW,OAAO,WACrC,8BAAC,eAAY,GACf;AAAA,aACF;AAAA,WACF,GACF;AAAA,QAEA,oBAAC,UACC,8BAAC,UAAU,YAAV,EAAqB,WAAW,OAAO,YACtC,8BAAC,UAAU,SAAV,EAAkB,WAAW,OAAO,SAClC,gBAAM,UACT,GACF,GACF;AAAA,QAEA,oBAAC,UAAU,cAAV,EAAuB;AAAA;AAAA;AAAA,EAC1B;AAEJ;AASO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAE/B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,YAAY,IAAI;AAEvC,QAAM,SAAS,OAAO;AAEtB,SACE,qBAAC,UAAU,MAAV,EAAgB,GAAG,WAAW,MAAY,WAAW,OAAO,MAC3D;AAAA,wBAAC,UAAU,UAAV,EAAmB,WAAW,OAAO,UACnC,gBAAM,OACT;AAAA,IACA,oBAAC,UAAU,eAAV,EAAwB,WAAW,OAAO,eACzC,8BAAC,eAAY,GACf;AAAA,KACF;AAEJ;AAcO,SAAS,YAAY,OAA6B;AACvD,SAAO,oBAAC,UAAU,WAAV,EAAqB,GAAG,OAAO;AACzC;AAWO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;AAUO,SAAS,uBACd,YACsC;AACtC,SAAO,qBAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;","names":[]}