@cerberus-design/react 0.15.0-next-7a184be → 0.15.0-next-47ecb2e

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Select.server.tsx"],"sourcesContent":["import { Select as ArkSelect, type SelectRootProps } from '@ark-ui/react/select'\nimport type { SelectCollectionItem } from './Select'\n\n/**\n * Select Primitive: The context provider for the Select family\n */\nexport function SelectRoot(props: SelectRootProps<SelectCollectionItem>) {\n  const { children, ...rootProps } = props\n  return (\n    <ArkSelect.Root {...rootProps}>\n      {children}\n      <ArkSelect.HiddenSelect />\n    </ArkSelect.Root>\n  )\n}\n\n/**\n * Select Primitive: The label that appears above the select input\n */\nexport const SelectLabel = ArkSelect.Label\n\n/**\n * Select Primitive: The wrapper to the select trigger that opens the dropdown\n */\nexport const SelectControl = ArkSelect.Control\n\n/**\n * Select Primitive: The trigger that opens the dropdown\n */\nexport const SelectTrigger = ArkSelect.Trigger\n\n/**\n * Select Primitive: The text that appears in the trigger\n */\nexport const SelectValueText = ArkSelect.ValueText\n\n/**\n * Select Primitive: The indicator that appears in the trigger\n */\nexport const SelectIndicator = ArkSelect.Indicator\n\n/**\n * Select Primitive: The trigger that clears the selected value\n */\nexport const SelectClearTrigger = ArkSelect.ClearTrigger\n\n/**\n * Select Primitive: The positioner that contains the dropdown\n */\nexport const SelectPositioner = ArkSelect.Positioner\n\n/**\n * Select Primitive: The content of the dropdown (i.e. the container itself)\n */\nexport const SelectContent = ArkSelect.Content\n\n/**\n * Select Primitive: The container for a group of item options\n */\nexport const SelectItemGroup = ArkSelect.ItemGroup\n\n/**\n * Select Primitive: The label for a group of item options\n */\nexport const SelectItemGroupLabel = ArkSelect.ItemGroupLabel\n\n/**\n * Select Primitive: The container for an item option\n */\nexport const SelectItem = ArkSelect.Item\n\n/**\n * Select Primitive: The text for an item option\n */\nexport const SelectItemText = ArkSelect.ItemText\n\n/**\n * Select Primitive: The indicator for an item option\n */\nexport const SelectItemIndicator = ArkSelect.ItemIndicator\n"],"mappings":";AAAA,SAAS,UAAU,iBAAuC;AAStD,SAEE,KAFF;AAHG,SAAS,WAAW,OAA8C;AACvE,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,SACE,qBAAC,UAAU,MAAV,EAAgB,GAAG,WACjB;AAAA;AAAA,IACD,oBAAC,UAAU,cAAV,EAAuB;AAAA,KAC1B;AAEJ;AAKO,IAAM,cAAc,UAAU;AAK9B,IAAM,gBAAgB,UAAU;AAKhC,IAAM,gBAAgB,UAAU;AAKhC,IAAM,kBAAkB,UAAU;AAKlC,IAAM,kBAAkB,UAAU;AAKlC,IAAM,qBAAqB,UAAU;AAKrC,IAAM,mBAAmB,UAAU;AAKnC,IAAM,gBAAgB,UAAU;AAKhC,IAAM,kBAAkB,UAAU;AAKlC,IAAM,uBAAuB,UAAU;AAKvC,IAAM,aAAa,UAAU;AAK7B,IAAM,iBAAiB,UAAU;AAKjC,IAAM,sBAAsB,UAAU;","names":[]}

package/build/modern/components/Select.js

@@ -1,20 +0,0 @@
-"use client";
-import {
-  Option,
-  OptionGroup,
-  OptionGroupLabel,
-  Select,
-  createSelectCollection
-} from "../chunk-S2X5OEPK.js";
-import "../chunk-YWMPB2JR.js";
-import "../chunk-IQJDVFPP.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Option,
-  OptionGroup,
-  OptionGroupLabel,
-  Select,
-  createSelectCollection
-};
-//# sourceMappingURL=Select.js.map

package/build/modern/components/Toggle.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  Toggle
-} from "../chunk-GENS32QO.js";
-import "../chunk-GITT5645.js";
-export {
-  Toggle
-};
-//# sourceMappingURL=Toggle.js.map

package/src/components/Select.server.tsx

@@ -1,80 +0,0 @@
-import { Select as ArkSelect, type SelectRootProps } from '@ark-ui/react/select'
-import type { SelectCollectionItem } from './Select'
-
-/**
- * Select Primitive: The context provider for the Select family
- */
-export function SelectRoot(props: SelectRootProps<SelectCollectionItem>) {
-  const { children, ...rootProps } = props
-  return (
-    <ArkSelect.Root {...rootProps}>
-      {children}
-      <ArkSelect.HiddenSelect />
-    </ArkSelect.Root>
-  )
-}
-
-/**
- * Select Primitive: The label that appears above the select input
- */
-export const SelectLabel = ArkSelect.Label
-
-/**
- * Select Primitive: The wrapper to the select trigger that opens the dropdown
- */
-export const SelectControl = ArkSelect.Control
-
-/**
- * Select Primitive: The trigger that opens the dropdown
- */
-export const SelectTrigger = ArkSelect.Trigger
-
-/**
- * Select Primitive: The text that appears in the trigger
- */
-export const SelectValueText = ArkSelect.ValueText
-
-/**
- * Select Primitive: The indicator that appears in the trigger
- */
-export const SelectIndicator = ArkSelect.Indicator
-
-/**
- * Select Primitive: The trigger that clears the selected value
- */
-export const SelectClearTrigger = ArkSelect.ClearTrigger
-
-/**
- * Select Primitive: The positioner that contains the dropdown
- */
-export const SelectPositioner = ArkSelect.Positioner
-
-/**
- * Select Primitive: The content of the dropdown (i.e. the container itself)
- */
-export const SelectContent = ArkSelect.Content
-
-/**
- * Select Primitive: The container for a group of item options
- */
-export const SelectItemGroup = ArkSelect.ItemGroup
-
-/**
- * Select Primitive: The label for a group of item options
- */
-export const SelectItemGroupLabel = ArkSelect.ItemGroupLabel
-
-/**
- * Select Primitive: The container for an item option
- */
-export const SelectItem = ArkSelect.Item
-
-/**
- * Select Primitive: The text for an item option
- */
-export const SelectItemText = ArkSelect.ItemText
-
-/**
- * Select Primitive: The indicator for an item option
- */
-export const SelectItemIndicator = ArkSelect.ItemIndicator

package/src/components/Select.tsx

@@ -1,219 +0,0 @@
-'use client'
-
-import {
-  Select as ArkSelect,
-  createListCollection,
-  type SelectRootProps,
-  type SelectItemProps,
-  type SelectItemGroupProps,
-  type SelectItemGroupLabelProps,
-  type ListCollection,
-  type SelectValueChangeDetails,
-} from '@ark-ui/react/select'
-import {
-  select,
-  type SelectVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { HStack } from '@cerberus/styled-system/jsx'
-import { useCerberusContext } from '../context/cerberus'
-import { Portal } from './Portal'
-import { Show } from './Show'
-import {
-  SelectContent,
-  SelectControl,
-  SelectIndicator,
-  SelectItem,
-  SelectItemGroup,
-  SelectItemGroupLabel,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectPositioner,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
-} from './Select.server'
-
-/**
- * This module contains the Select components.
- * @module 'react/select'
- */
-
-export interface SelectCollectionItem {
-  /**
-   * What is displayed in the dropdown list.
-   */
-  label: string
-  /**
-   * The value of the selected item used in the form.
-   */
-  value: string
-  /**
-   * If the item is disabled.
-   */
-  disabled?: boolean
-}
-
-export interface SelectCollection {
-  /**
-   * The items to be displayed in the dropdown list.
-   */
-  items: SelectCollectionItem[]
-}
-
-export interface BaseSelectProps {
-  /**
-   * The placeholder text when no option is selected.
-   */
-  placeholder?: string
-}
-
-export type SelectProps = SelectRootProps<SelectCollectionItem> &
-  BaseSelectProps &
-  SelectVariantProps
-
-/**
- * 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>
- *  )
- * }
- */
-export function Select(props: SelectProps) {
-  const { collection, placeholder, size, ...rootProps } = props
-  const { icons } = useCerberusContext()
-  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
-
-  const styles = select({ size })
-
-  return (
-    <SelectRoot className={styles.root} collection={collection} {...rootProps}>
-      <SelectControl className={styles.control}>
-        <SelectTrigger className={styles.trigger}>
-          <SelectValueText placeholder={placeholder} />
-
-          <HStack>
-            <Show when={props.invalid}>
-              <InvalidIcon data-part="invalid-icon" />
-            </Show>
-            <SelectIndicator className={styles.indicator}>
-              <SelectArrow />
-            </SelectIndicator>
-          </HStack>
-        </SelectTrigger>
-      </SelectControl>
-
-      <Portal>
-        <SelectPositioner className={styles.positioner}>
-          <SelectContent className={styles.content}>
-            {props.children}
-          </SelectContent>
-        </SelectPositioner>
-      </Portal>
-
-      <ArkSelect.HiddenSelect />
-    </SelectRoot>
-  )
-}
-
-export interface OptionProps extends SelectItemProps {
-  /**
-   * The CollectionListItem to be displayed in the dropdown list.
-   */
-  item: SelectCollectionItem
-}
-
-export function Option(props: OptionProps) {
-  const { item, ...itemProps } = props
-
-  const { icons } = useCerberusContext()
-  const { selectChecked: CheckedIcon } = icons
-
-  const styles = select()
-
-  return (
-    <SelectItem {...itemProps} item={item} className={styles.item}>
-      <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>
-      <SelectItemIndicator className={styles.itemIndicator}>
-        <CheckedIcon />
-      </SelectItemIndicator>
-    </SelectItem>
-  )
-}
-
-/**
- * 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 function OptionGroup(props: SelectItemGroupProps) {
-  return <SelectItemGroup {...props} />
-}
-
-/**
- * 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 function OptionGroupLabel(props: SelectItemGroupLabelProps) {
-  const styles = select()
-  return (
-    <SelectItemGroupLabel
-      {...props}
-      className={cx(props.className, styles.itemGroupLabel)}
-    />
-  )
-}
-
-/**
- * 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 function createSelectCollection(
-  collection: SelectCollectionItem[],
-): ListCollection<SelectCollectionItem> {
-  return createListCollection({
-    items: collection,
-  })
-}
-
-export type { SelectValueChangeDetails, ListCollection }

package/src/components/Toggle.tsx

@@ -1,98 +0,0 @@
-'use client'
-
-import { useFieldContext } from '@ark-ui/react/field'
-import type { InputHTMLAttributes } from 'react'
-import { cx } from '@cerberus/styled-system/css'
-import { hstack, vstack } from '@cerberus/styled-system/patterns'
-import {
-  toggle,
-  type ToggleVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { useCerberusContext } from '../context/cerberus'
-
-/**
- * This module provides a toggle component.
- * @module
- */
-
-export type ToggleBase = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'id' | 'value'
-> & {
-  /**
-   * @deprecated
-   */
-  describedBy?: string
-  /**
-   * A unique identifier for the Toggle. Required for accessibility.
-   */
-  id: string
-  /**
-   * The value of the Toggle.
-   */
-  value: string
-}
-export type ToggleProps = ToggleBase & ToggleVariantProps
-
-/**
- * The Toggle component is used to switch between two states. Optionally
- * combine with the `useToggle` hook.
- * @see https://cerberus.digitalu.design/react/toggle
- * @example
- * ```tsx
- * const { checked, handleChange } = useToggle({ checked: 'toggle' })
- *
- * <Hstack justify="space-between" w="full">
- *  <Field>
- *    <Label htmlFor="toggle">Show notifications</Label>
- *    <Toggle
- *     checked={checked === 'toggle'}
- *     id="toggle"
- *     onChange={handleChange}
- *     value="toggle"
- *    />
- *  </Field>
- * </Hstack>
- * ```
- */
-export function Toggle(props: ToggleProps) {
-  const { size, ...nativeProps } = props
-  const styles = toggle({ size })
-
-  const { invalid, disabled, readOnly, required, ariaDescribedby } =
-    useFieldContext()
-
-  const { icons } = useCerberusContext()
-  const CheckedIcon = icons.toggleChecked
-
-  return (
-    <span
-      className={cx('group', styles.track, hstack())}
-      data-checked={props.checked || props.defaultChecked}
-    >
-      <input
-        {...nativeProps}
-        {...(disabled && { disabled: true })}
-        {...(readOnly && { readOnly: true })}
-        {...(required && { required: true })}
-        {...(ariaDescribedby && {
-          'aria-describedby': ariaDescribedby,
-        })}
-        {...(invalid && { 'aria-invalid': true })}
-        className={cx('peer', styles.input)}
-        role="switch"
-        type="checkbox"
-      />
-      <span
-        className={cx(
-          styles.thumb,
-          vstack({
-            justify: 'center',
-          }),
-        )}
-      >
-        <CheckedIcon />
-      </span>
-    </span>
-  )
-}