@spark-ui/components 10.2.8 → 10.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +4 -4
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +7 -7
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +6 -6
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +4 -4
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +4 -4
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +6 -6
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +3 -3
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +3 -3
- package/dist/{chunk-FGOZHKBT.mjs → chunk-3LEFXZNI.mjs} +2 -2
- package/dist/{chunk-QS2FHLSL.mjs → chunk-4BLDSUXN.mjs} +3 -3
- package/dist/{chunk-ERC5QJAK.mjs → chunk-6HHB3DJU.mjs} +3 -3
- package/dist/{chunk-4F5DOL57.mjs → chunk-6QCEPQ3U.mjs} +1 -1
- package/dist/chunk-6QCEPQ3U.mjs.map +1 -0
- package/dist/{chunk-USSL4UZ5.mjs → chunk-FWJ7K6FT.mjs} +3 -3
- package/dist/{chunk-MUNDKRAE.mjs → chunk-GAK4SC2F.mjs} +2 -2
- package/dist/{chunk-NBZKMCHF.mjs → chunk-KEGAAGJW.mjs} +2 -2
- package/dist/{chunk-STJ7NDWM.mjs → chunk-TOKVRWXL.mjs} +2 -2
- package/dist/{chunk-LHZ2JOXC.mjs → chunk-U4AEUWBN.mjs} +3 -3
- package/dist/{chunk-AESXFMCC.mjs → chunk-UMUMFMFB.mjs} +2 -2
- package/dist/{chunk-QLOIAU3C.mjs → chunk-YINJJQE6.mjs} +2 -2
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +2 -2
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +7 -7
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +7 -7
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +6 -6
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +7 -7
- package/dist/form-field/index.js.map +1 -1
- package/dist/form-field/index.mjs +3 -3
- package/dist/icon/index.js.map +1 -1
- package/dist/icon/index.mjs +3 -3
- package/dist/icon-button/index.js.map +1 -1
- package/dist/icon-button/index.mjs +5 -5
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +4 -4
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +6 -6
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +7 -7
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +3 -3
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs +3 -3
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs +6 -6
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +3 -3
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +2 -2
- package/dist/slot/index.d.mts +2 -3
- package/dist/slot/index.d.ts +2 -3
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs +1 -1
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +6 -6
- package/dist/spinner/index.js.map +1 -1
- package/dist/spinner/index.mjs +3 -3
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs +7 -7
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +5 -5
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs +2 -2
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +4 -4
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs +2 -2
- package/package.json +14 -14
- package/dist/chunk-4F5DOL57.mjs.map +0 -1
- /package/dist/{chunk-FGOZHKBT.mjs.map → chunk-3LEFXZNI.mjs.map} +0 -0
- /package/dist/{chunk-QS2FHLSL.mjs.map → chunk-4BLDSUXN.mjs.map} +0 -0
- /package/dist/{chunk-ERC5QJAK.mjs.map → chunk-6HHB3DJU.mjs.map} +0 -0
- /package/dist/{chunk-USSL4UZ5.mjs.map → chunk-FWJ7K6FT.mjs.map} +0 -0
- /package/dist/{chunk-MUNDKRAE.mjs.map → chunk-GAK4SC2F.mjs.map} +0 -0
- /package/dist/{chunk-NBZKMCHF.mjs.map → chunk-KEGAAGJW.mjs.map} +0 -0
- /package/dist/{chunk-STJ7NDWM.mjs.map → chunk-TOKVRWXL.mjs.map} +0 -0
- /package/dist/{chunk-LHZ2JOXC.mjs.map → chunk-U4AEUWBN.mjs.map} +0 -0
- /package/dist/{chunk-AESXFMCC.mjs.map → chunk-UMUMFMFB.mjs.map} +0 -0
- /package/dist/{chunk-QLOIAU3C.mjs.map → chunk-YINJJQE6.mjs.map} +0 -0
package/dist/select/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/select/index.ts","../../src/select/SelectContext.tsx","../../src/select/utils.ts","../../src/select/Select.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectValue.tsx"],"sourcesContent":["import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n Group: typeof Group\n Item: typeof Item\n Items: typeof Items\n Placeholder: typeof Placeholder\n Label: typeof Label\n Trigger: typeof Trigger\n Value: typeof Value\n LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n Group,\n Item,\n Items,\n Placeholder,\n Label,\n Trigger,\n Value,\n LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n createContext,\n Dispatch,\n PropsWithChildren,\n ReactElement,\n SetStateAction,\n useContext,\n useEffect,\n useId,\n useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n itemsMap: ItemsMap\n disabled: boolean\n readOnly: boolean\n state?: 'error' | 'alert' | 'success'\n itemsComponent: ReactElement | undefined\n selectedItem: SelectItem | undefined\n setValue: (value: string) => void\n isControlled: boolean\n onValueChange?: (value: string) => void\n ariaLabel: string | undefined\n setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n fieldId: string\n fieldLabelId: string | undefined\n name: string | undefined\n required: boolean\n placeholder: string | undefined\n setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n /**\n * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n */\n state?: 'error' | 'alert' | 'success'\n /**\n * When true, prevents the user from interacting with the select.\n */\n disabled?: boolean\n /**\n * Sets the select as interactive or not.\n */\n readOnly?: boolean\n /**\n * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n */\n defaultValue?: string\n /**\n * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: string) => void\n\n itemsComponent: ReactElement | undefined\n /**\n * This attribute is used to specify the name of the control.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n */\n required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n children,\n defaultValue,\n value: valueProp,\n onValueChange,\n disabled: disabledProp = false,\n readOnly: readOnlyProp = false,\n state: stateProp,\n itemsComponent,\n name: nameProp,\n required: requiredProp,\n}: SelectContextProps) => {\n const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n const [ariaLabel, setAriaLabel] = useState<string>()\n\n // Computed state\n const firstItem = itemsMap.entries().next()?.value?.[1]\n const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n const isControlled = valueProp != null\n\n // Derivated from FormField context\n const field = useFormFieldControl()\n const state = field.state || stateProp\n\n const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n const fieldId = field.id || internalFieldID\n const fieldLabelId = field.labelId\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n const required = !!(field.isRequired ?? requiredProp)\n\n /**\n * Indices in a Map are set when an element is added to the Map.\n * If for some reason, in the Select:\n * - items order changes\n * - items are added\n * - items are removed\n *\n * The Map must be rebuilt from the new children in order to preserve logical indices.\n *\n */\n useEffect(() => {\n const newMap = getItemsFromChildren(itemsComponent)\n\n const previousItems = [...itemsMap.values()]\n const newItems = [...newMap.values()]\n\n const hasItemsChanges =\n previousItems.length !== newItems.length ||\n previousItems.some((item, index) => {\n const hasUpdatedValue = item.value !== newItems[index]?.value\n const hasUpdatedText = item.text !== newItems[index]?.text\n\n return hasUpdatedValue || hasUpdatedText\n })\n\n if (hasItemsChanges) {\n setItemsMap(newMap)\n }\n }, [children])\n\n return (\n <SelectContext.Provider\n value={{\n disabled,\n readOnly,\n itemsMap,\n state,\n itemsComponent,\n selectedItem,\n setValue,\n isControlled,\n onValueChange,\n ariaLabel,\n setAriaLabel,\n fieldId,\n fieldLabelId,\n name,\n required,\n placeholder,\n setPlaceholder,\n }}\n >\n {children}\n </SelectContext.Provider>\n )\n}\n\nexport const useSelectContext = () => {\n const context = useContext(SelectContext)\n\n if (!context) {\n throw Error('useSelectContext must be used within a Select provider')\n }\n\n return context\n}\n","import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n const validChildren = Children.toArray(children).filter(isValidElement)\n\n return validChildren.find(child => {\n return getElementDisplayName(child)?.includes(name)\n })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n Children.forEach(children, child => {\n if (!isValidElement(child)) return\n\n if (\n getElementDisplayName(child) === 'Select.Item' ||\n getElementDisplayName(child) === 'Select.Placeholder'\n ) {\n const childProps = child.props as ItemProps\n result.push({\n value: childProps.value,\n disabled: !!childProps.disabled,\n text: childProps.children,\n })\n }\n\n if ((child.props as { children: ReactNode }).children) {\n getOrderedItems((child.props as { children: ReactNode }).children, result)\n }\n })\n\n return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n const newMap: ItemsMap = new Map()\n\n getOrderedItems(children).forEach(itemData => {\n newMap.set(itemData.value, itemData)\n })\n\n return newMap\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n const finder = findElement(children)\n const trigger = finder('Trigger')\n const items = finder('Items')\n\n return (\n <SelectProvider {...props} itemsComponent={items}>\n {trigger}\n </SelectProvider>\n )\n}\n\nSelect.displayName = 'Select'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n return (\n <SelectGroupProvider>\n <GroupContent ref={forwardedRef} {...props}>\n {children}\n </GroupContent>\n </SelectGroupProvider>\n )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n const { groupLabel } = useSelectGroupContext()\n\n return (\n <optgroup\n data-spark-component=\"select-group\"\n ref={forwardedRef}\n className={cx(className)}\n label={groupLabel}\n >\n {children}\n </optgroup>\n )\n}\n\nGroup.displayName = 'Select.Group'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n groupLabel: string\n setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n const [groupLabel, setGroupLabel] = useState('')\n\n return (\n <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n {children}\n </SelectGroupContext.Provider>\n )\n}\n\nexport const useSelectGroupContext = () => {\n const context = useContext(SelectGroupContext)\n\n if (!context) {\n throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n }\n\n return context\n}\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n disabled?: boolean\n value: string\n children: string\n ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n return (\n <option\n data-spark-component=\"select-item\"\n ref={forwardedRef}\n key={value}\n value={value}\n disabled={disabled}\n // label\n >\n {children}\n </option>\n )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n [\n 'absolute left-0 top-0 size-full rounded-lg opacity-0',\n 'min-h-sz-44',\n // outline styles\n 'ring-1 outline-hidden ring-inset focus:ring-2',\n ],\n {\n variants: {\n state: {\n undefined: 'ring-outline focus:ring-outline-high',\n error: 'ring-error',\n alert: 'ring-alert',\n success: 'ring-success',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n readOnly: {\n true: 'cursor-default',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n state: undefined,\n class: 'hover:ring-outline-high',\n },\n ],\n }\n)\n\nexport const Items = ({\n children,\n className,\n ref,\n ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n const {\n state,\n disabled,\n readOnly,\n ariaLabel,\n fieldLabelId,\n isControlled,\n onValueChange,\n selectedItem,\n setValue,\n name,\n required,\n fieldId,\n } = useSelectContext()\n\n const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n if (isControlled) {\n event.preventDefault()\n onValueChange?.(event.target.value)\n } else {\n setValue(event.target.value)\n }\n }\n\n return (\n <select\n data-spark-component=\"select-items\"\n ref={ref}\n disabled={disabled || readOnly}\n name={name}\n required={required}\n aria-labelledby={fieldLabelId}\n {...(ariaLabel && { 'aria-label': ariaLabel })}\n className={styles({ className, state, disabled, readOnly })}\n value={selectedItem?.value}\n onChange={handleChange}\n id={fieldId}\n {...rest}\n >\n {children}\n </select>\n )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n const { setGroupLabel } = useSelectGroupContext()\n\n useEffect(() => {\n setGroupLabel(children)\n }, [children])\n\n return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /**\n * The svg icon that will be wrapped\n */\n children: ReactNode\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /**\n * Color scheme of the icon.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n return (\n <Icon size={'sm'} className=\"shrink-0\">\n {children}\n </Icon>\n )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n disabled?: boolean\n children: string\n ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n disabled = false,\n children,\n ref: forwardedRef,\n}: PlaceholderProps) => {\n const { setPlaceholder } = useSelectContext()\n\n useEffect(() => {\n setPlaceholder(children)\n }, [children])\n\n return (\n <option\n data-spark-component=\"select-placeholder\"\n ref={forwardedRef}\n key=\"placeholder\"\n value=\"\"\n disabled={disabled}\n >\n {children}\n </option>\n )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n 'aria-label'?: string\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n 'aria-label': ariaLabel,\n children,\n className,\n ref: forwardedRef,\n}: TriggerProps) => {\n const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n useEffect(() => {\n if (ariaLabel) {\n setAriaLabel(ariaLabel)\n }\n }, [ariaLabel])\n\n return (\n <div\n data-spark-component=\"select-trigger\"\n ref={forwardedRef}\n className={styles({ className, state, disabled, readOnly })}\n >\n <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n <Icon className=\"ml-md shrink-0\" size=\"sm\">\n <ArrowHorizontalDown />\n </Icon>\n\n {itemsComponent}\n </div>\n )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'relative flex w-full items-center justify-between',\n 'min-h-sz-44 rounded-lg px-lg',\n 'text-body-1',\n // outline styles\n 'ring-1 outline-hidden ring-inset',\n ],\n {\n variants: {\n state: {\n undefined: 'ring-outline',\n error: 'ring-error',\n alert: 'ring-alert',\n success: 'ring-success',\n },\n disabled: {\n false: 'focus-within:ring-2',\n },\n readOnly: {\n true: '',\n },\n },\n compoundVariants: [\n {\n readOnly: false,\n disabled: false,\n class: 'bg-surface text-on-surface',\n },\n {\n readOnly: true,\n class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n },\n {\n disabled: true,\n class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n },\n {\n disabled: false,\n state: undefined,\n class: 'hover:ring-outline-high focus-within:ring-outline-high',\n },\n ],\n }\n)\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n children?: ReactNode\n className?: string\n /**\n * Optional placeholder value for the trigger.\n * If not specified, the value inside `Select.Placeholder` item will be used.\n */\n placeholder?: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n children,\n className,\n placeholder: customPlaceholder,\n ref: forwardedRef,\n}: ValueProps) => {\n const { selectedItem, placeholder, disabled } = useSelectContext()\n\n const isPlaceholderSelected = selectedItem?.value == null\n const valuePlaceholder = customPlaceholder || placeholder\n\n return (\n <span\n role=\"presentation\"\n data-spark-component=\"select-value\"\n ref={forwardedRef}\n className={cx('flex shrink items-center text-left', className)}\n >\n <span\n className={cx(\n 'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n )}\n >\n {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n </span>\n </span>\n )\n}\n\nValue.displayName = 'Select.Value'\n"],"mappings":"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","names":["Select","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_react","import_react","import_react","import_jsx_runtime","RadixSlot","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_class_variance_authority","styles","import_jsx_runtime","styles","import_class_variance_authority","import_jsx_runtime","Select"]}
|
|
1
|
+
{"version":3,"sources":["../../src/select/index.ts","../../src/select/SelectContext.tsx","../../src/select/utils.ts","../../src/select/Select.tsx","../../src/select/SelectGroup.tsx","../../src/select/SelectItemsGroupContext.tsx","../../src/select/SelectItem.tsx","../../src/select/SelectItems.tsx","../../src/select/SelectLabel.tsx","../../src/icon/Icon.tsx","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx","../../src/select/SelectLeadingIcon.tsx","../../src/select/SelectPlaceholder.tsx","../../src/select/SelectTrigger.tsx","../../src/select/SelectTrigger.styles.tsx","../../src/select/SelectValue.tsx"],"sourcesContent":["import { Select as Root } from './Select'\nimport { SelectProvider, useSelectContext } from './SelectContext'\nimport { Group } from './SelectGroup'\nimport { Item } from './SelectItem'\nimport { Items } from './SelectItems'\nimport { Label } from './SelectLabel'\nimport { LeadingIcon } from './SelectLeadingIcon'\nimport { Placeholder } from './SelectPlaceholder'\nimport { Trigger } from './SelectTrigger'\nimport { Value } from './SelectValue'\n\nexport { useSelectContext, SelectProvider }\n\nexport const Select: typeof Root & {\n Group: typeof Group\n Item: typeof Item\n Items: typeof Items\n Placeholder: typeof Placeholder\n Label: typeof Label\n Trigger: typeof Trigger\n Value: typeof Value\n LeadingIcon: typeof LeadingIcon\n} = Object.assign(Root, {\n Group,\n Item,\n Items,\n Placeholder,\n Label,\n Trigger,\n Value,\n LeadingIcon,\n})\n\nSelect.displayName = 'Select'\nGroup.displayName = 'Select.Group'\nItems.displayName = 'Select.Items'\nItem.displayName = 'Select.Item'\nPlaceholder.displayName = 'Select.Placeholder'\nLabel.displayName = 'Select.Label'\nTrigger.displayName = 'Select.Trigger'\nValue.displayName = 'Select.Value'\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport {\n createContext,\n Dispatch,\n PropsWithChildren,\n ReactElement,\n SetStateAction,\n useContext,\n useEffect,\n useId,\n useState,\n} from 'react'\n\nimport { type ItemsMap, SelectItem } from './types'\nimport { getItemsFromChildren } from './utils'\n\nexport interface SelectContextState {\n itemsMap: ItemsMap\n disabled: boolean\n readOnly: boolean\n state?: 'error' | 'alert' | 'success'\n itemsComponent: ReactElement | undefined\n selectedItem: SelectItem | undefined\n setValue: (value: string) => void\n isControlled: boolean\n onValueChange?: (value: string) => void\n ariaLabel: string | undefined\n setAriaLabel: Dispatch<SetStateAction<string | undefined>>\n fieldId: string\n fieldLabelId: string | undefined\n name: string | undefined\n required: boolean\n placeholder: string | undefined\n setPlaceholder: Dispatch<SetStateAction<string | undefined>>\n}\n\nexport type SelectContextProps = PropsWithChildren<{\n /**\n * Use `state` prop to assign a specific state to the select, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n */\n state?: 'error' | 'alert' | 'success'\n /**\n * When true, prevents the user from interacting with the select.\n */\n disabled?: boolean\n /**\n * Sets the select as interactive or not.\n */\n readOnly?: boolean\n /**\n * The value of the select when initially rendered. Use when you do not need to control the state of the select.\n */\n defaultValue?: string\n /**\n * The controlled value of the select. Should be used in conjunction with `onValueChange`.\n */\n value?: string\n /**\n * Event handler called when the value changes.\n */\n onValueChange?: (value: string) => void\n\n itemsComponent: ReactElement | undefined\n /**\n * This attribute is used to specify the name of the control.\n * If wrapped with a FormField with a name, will be inherited from it.\n */\n name?: string\n /**\n * A Boolean attribute indicating that an option with a non-empty string value must be selected.\n */\n required?: boolean\n}>\n\nconst SelectContext = createContext<SelectContextState | null>(null)\n\nconst ID_PREFIX = ':select'\n\nexport const SelectProvider = ({\n children,\n defaultValue,\n value: valueProp,\n onValueChange,\n disabled: disabledProp = false,\n readOnly: readOnlyProp = false,\n state: stateProp,\n itemsComponent,\n name: nameProp,\n required: requiredProp,\n}: SelectContextProps) => {\n const [value, setValue] = useCombinedState(valueProp, defaultValue, onValueChange)\n const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)\n const [itemsMap, setItemsMap] = useState<ItemsMap>(getItemsFromChildren(itemsComponent))\n const [ariaLabel, setAriaLabel] = useState<string>()\n\n // Computed state\n const firstItem = itemsMap.entries().next()?.value?.[1]\n const selectedItem = typeof value === 'string' ? itemsMap.get(value) : firstItem\n const isControlled = valueProp != null\n\n // Derivated from FormField context\n const field = useFormFieldControl()\n const state = field.state || stateProp\n\n const internalFieldID = `${ID_PREFIX}-field-${useId()}`\n const fieldId = field.id || internalFieldID\n const fieldLabelId = field.labelId\n const disabled = field.disabled ?? disabledProp\n const readOnly = field.readOnly ?? readOnlyProp\n const name = field.name ?? nameProp\n const required = !!(field.isRequired ?? requiredProp)\n\n /**\n * Indices in a Map are set when an element is added to the Map.\n * If for some reason, in the Select:\n * - items order changes\n * - items are added\n * - items are removed\n *\n * The Map must be rebuilt from the new children in order to preserve logical indices.\n *\n */\n useEffect(() => {\n const newMap = getItemsFromChildren(itemsComponent)\n\n const previousItems = [...itemsMap.values()]\n const newItems = [...newMap.values()]\n\n const hasItemsChanges =\n previousItems.length !== newItems.length ||\n previousItems.some((item, index) => {\n const hasUpdatedValue = item.value !== newItems[index]?.value\n const hasUpdatedText = item.text !== newItems[index]?.text\n\n return hasUpdatedValue || hasUpdatedText\n })\n\n if (hasItemsChanges) {\n setItemsMap(newMap)\n }\n }, [children])\n\n return (\n <SelectContext.Provider\n value={{\n disabled,\n readOnly,\n itemsMap,\n state,\n itemsComponent,\n selectedItem,\n setValue,\n isControlled,\n onValueChange,\n ariaLabel,\n setAriaLabel,\n fieldId,\n fieldLabelId,\n name,\n required,\n placeholder,\n setPlaceholder,\n }}\n >\n {children}\n </SelectContext.Provider>\n )\n}\n\nexport const useSelectContext = () => {\n const context = useContext(SelectContext)\n\n if (!context) {\n throw Error('useSelectContext must be used within a Select provider')\n }\n\n return context\n}\n","import { Children, type FC, isValidElement, type ReactElement, type ReactNode } from 'react'\n\nimport { type ItemProps } from './SelectItem'\nimport { type ItemsMap, type SelectItem } from './types'\n\nexport const findElement = (children: ReactNode) => (name: string) => {\n const validChildren = Children.toArray(children).filter(isValidElement)\n\n return validChildren.find(child => {\n return getElementDisplayName(child)?.includes(name)\n })\n}\n\nconst getElementDisplayName = (element?: ReactElement) => {\n return element ? (element.type as FC & { displayName?: string }).displayName : ''\n}\n\nconst getOrderedItems = (children: ReactNode, result: SelectItem[] = []): SelectItem[] => {\n Children.forEach(children, child => {\n if (!isValidElement(child)) return\n\n if (\n getElementDisplayName(child) === 'Select.Item' ||\n getElementDisplayName(child) === 'Select.Placeholder'\n ) {\n const childProps = child.props as ItemProps\n result.push({\n value: childProps.value,\n disabled: !!childProps.disabled,\n text: childProps.children,\n })\n }\n\n if ((child.props as { children: ReactNode }).children) {\n getOrderedItems((child.props as { children: ReactNode }).children, result)\n }\n })\n\n return result\n}\n\nexport const getItemsFromChildren = (children: ReactNode): ItemsMap => {\n const newMap: ItemsMap = new Map()\n\n getOrderedItems(children).forEach(itemData => {\n newMap.set(itemData.value, itemData)\n })\n\n return newMap\n}\n","import { type SelectContextProps, SelectProvider } from './SelectContext'\nimport { findElement } from './utils'\n\nexport type SelectProps = Omit<SelectContextProps, 'itemsComponent'>\n\nexport const Select = ({ children, ...props }: SelectProps) => {\n const finder = findElement(children)\n const trigger = finder('Trigger')\n const items = finder('Items')\n\n return (\n <SelectProvider {...props} itemsComponent={items}>\n {trigger}\n </SelectProvider>\n )\n}\n\nSelect.displayName = 'Select'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { SelectGroupProvider, useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface GroupProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLOptGroupElement>\n}\n\nexport const Group = ({ children, ref: forwardedRef, ...props }: GroupProps) => {\n return (\n <SelectGroupProvider>\n <GroupContent ref={forwardedRef} {...props}>\n {children}\n </GroupContent>\n </SelectGroupProvider>\n )\n}\n\nconst GroupContent = ({ children, className, ref: forwardedRef }: GroupProps) => {\n const { groupLabel } = useSelectGroupContext()\n\n return (\n <optgroup\n data-spark-component=\"select-group\"\n ref={forwardedRef}\n className={cx(className)}\n label={groupLabel}\n >\n {children}\n </optgroup>\n )\n}\n\nGroup.displayName = 'Select.Group'\n","import { createContext, type PropsWithChildren, useContext, useState } from 'react'\n\nexport interface SelectContextState {\n groupLabel: string\n setGroupLabel: (label: string) => void\n}\n\ntype SelectContextProps = PropsWithChildren\n\nconst SelectGroupContext = createContext<SelectContextState | null>(null)\n\nexport const SelectGroupProvider = ({ children }: SelectContextProps) => {\n const [groupLabel, setGroupLabel] = useState('')\n\n return (\n <SelectGroupContext.Provider value={{ groupLabel, setGroupLabel }}>\n {children}\n </SelectGroupContext.Provider>\n )\n}\n\nexport const useSelectGroupContext = () => {\n const context = useContext(SelectGroupContext)\n\n if (!context) {\n throw Error('useSelectGroupContext must be used within a SelectGroup provider')\n }\n\n return context\n}\n","import { type Ref } from 'react'\n\nexport interface ItemProps {\n disabled?: boolean\n value: string\n children: string\n ref?: Ref<HTMLOptionElement>\n}\n\nexport const Item = ({ disabled = false, value, children, ref: forwardedRef }: ItemProps) => {\n return (\n <option\n data-spark-component=\"select-item\"\n ref={forwardedRef}\n key={value}\n value={value}\n disabled={disabled}\n // label\n >\n {children}\n </option>\n )\n}\n\nItem.displayName = 'Select.Item'\n","import { cva } from 'class-variance-authority'\nimport { ChangeEvent, ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport const styles = cva(\n [\n 'absolute left-0 top-0 size-full rounded-lg opacity-0',\n 'min-h-sz-44',\n // outline styles\n 'ring-1 outline-hidden ring-inset focus:ring-2',\n ],\n {\n variants: {\n state: {\n undefined: 'ring-outline focus:ring-outline-high',\n error: 'ring-error',\n alert: 'ring-alert',\n success: 'ring-success',\n },\n disabled: {\n true: 'cursor-not-allowed',\n },\n readOnly: {\n true: 'cursor-default',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n state: undefined,\n class: 'hover:ring-outline-high',\n },\n ],\n }\n)\n\nexport const Items = ({\n children,\n className,\n ref,\n ...rest\n}: PropsWithChildren<ComponentPropsWithRef<'select'>>) => {\n const {\n state,\n disabled,\n readOnly,\n ariaLabel,\n fieldLabelId,\n isControlled,\n onValueChange,\n selectedItem,\n setValue,\n name,\n required,\n fieldId,\n } = useSelectContext()\n\n const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {\n if (isControlled) {\n event.preventDefault()\n onValueChange?.(event.target.value)\n } else {\n setValue(event.target.value)\n }\n }\n\n return (\n <select\n data-spark-component=\"select-items\"\n ref={ref}\n disabled={disabled || readOnly}\n name={name}\n required={required}\n aria-labelledby={fieldLabelId}\n {...(ariaLabel && { 'aria-label': ariaLabel })}\n className={styles({ className, state, disabled, readOnly })}\n value={selectedItem?.value}\n onChange={handleChange}\n id={fieldId}\n {...rest}\n >\n {children}\n </select>\n )\n}\n\nItems.displayName = 'Select.Items'\n","import { useEffect } from 'react'\n\nimport { useSelectGroupContext } from './SelectItemsGroupContext'\n\ninterface LabelProps {\n children: string\n}\n\nexport const Label = ({ children }: LabelProps) => {\n const { setGroupLabel } = useSelectGroupContext()\n\n useEffect(() => {\n setGroupLabel(children)\n }, [children])\n\n return null\n}\n\nLabel.displayName = 'Select.Label'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /**\n * The svg icon that will be wrapped\n */\n children: ReactNode\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /**\n * Color scheme of the icon.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n","import { ReactElement } from 'react'\n\nimport { Icon } from '../icon'\n\nexport const LeadingIcon = ({ children }: { children: ReactElement }) => {\n return (\n <Icon size={'sm'} className=\"shrink-0\">\n {children}\n </Icon>\n )\n}\n\nLeadingIcon.displayName = 'Select.LeadingIcon'\n","import { type Ref, useEffect } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface PlaceholderProps {\n disabled?: boolean\n children: string\n ref?: Ref<HTMLOptionElement>\n}\n\nexport const Placeholder = ({\n disabled = false,\n children,\n ref: forwardedRef,\n}: PlaceholderProps) => {\n const { setPlaceholder } = useSelectContext()\n\n useEffect(() => {\n setPlaceholder(children)\n }, [children])\n\n return (\n <option\n data-spark-component=\"select-placeholder\"\n ref={forwardedRef}\n key=\"placeholder\"\n value=\"\"\n disabled={disabled}\n >\n {children}\n </option>\n )\n}\n\nPlaceholder.displayName = 'Select.Placeholder'\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { ReactNode, type Ref, useEffect } from 'react'\n\nimport { Icon } from '../icon'\nimport { useSelectContext } from './SelectContext'\nimport { styles } from './SelectTrigger.styles'\n\ninterface TriggerProps {\n 'aria-label'?: string\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * This trigger acts as a fake button for the `select` tag.\n * It is not interactive.\n */\nexport const Trigger = ({\n 'aria-label': ariaLabel,\n children,\n className,\n ref: forwardedRef,\n}: TriggerProps) => {\n const { disabled, readOnly, state, setAriaLabel, itemsComponent } = useSelectContext()\n\n useEffect(() => {\n if (ariaLabel) {\n setAriaLabel(ariaLabel)\n }\n }, [ariaLabel])\n\n return (\n <div\n data-spark-component=\"select-trigger\"\n ref={forwardedRef}\n className={styles({ className, state, disabled, readOnly })}\n >\n <span className=\"gap-md flex items-center justify-start\">{children}</span>\n\n <Icon className=\"ml-md shrink-0\" size=\"sm\">\n <ArrowHorizontalDown />\n </Icon>\n\n {itemsComponent}\n </div>\n )\n}\n\nTrigger.displayName = 'Select.Trigger'\n","import { cva } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'relative flex w-full items-center justify-between',\n 'min-h-sz-44 rounded-lg px-lg',\n 'text-body-1',\n // outline styles\n 'ring-1 outline-hidden ring-inset',\n ],\n {\n variants: {\n state: {\n undefined: 'ring-outline',\n error: 'ring-error',\n alert: 'ring-alert',\n success: 'ring-success',\n },\n disabled: {\n false: 'focus-within:ring-2',\n },\n readOnly: {\n true: '',\n },\n },\n compoundVariants: [\n {\n readOnly: false,\n disabled: false,\n class: 'bg-surface text-on-surface',\n },\n {\n readOnly: true,\n class: 'bg-on-surface/dim-5 text-on-surface cursor-default',\n },\n {\n disabled: true,\n class: ['bg-on-surface/dim-5 text-on-surface/dim-3', 'cursor-not-allowed'],\n },\n {\n disabled: false,\n state: undefined,\n class: 'hover:ring-outline-high focus-within:ring-outline-high',\n },\n ],\n }\n)\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, type Ref } from 'react'\n\nimport { useSelectContext } from './SelectContext'\n\nexport interface ValueProps {\n children?: ReactNode\n className?: string\n /**\n * Optional placeholder value for the trigger.\n * If not specified, the value inside `Select.Placeholder` item will be used.\n */\n placeholder?: string\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const Value = ({\n children,\n className,\n placeholder: customPlaceholder,\n ref: forwardedRef,\n}: ValueProps) => {\n const { selectedItem, placeholder, disabled } = useSelectContext()\n\n const isPlaceholderSelected = selectedItem?.value == null\n const valuePlaceholder = customPlaceholder || placeholder\n\n return (\n <span\n role=\"presentation\"\n data-spark-component=\"select-value\"\n ref={forwardedRef}\n className={cx('flex shrink items-center text-left', className)}\n >\n <span\n className={cx(\n 'line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis',\n isPlaceholderSelected && !disabled && 'text-on-surface/dim-1'\n )}\n >\n {isPlaceholderSelected ? valuePlaceholder : children || selectedItem?.text}\n </span>\n </span>\n )\n}\n\nValue.displayName = 'Select.Value'\n"],"mappings":"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","names":["Select","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_react","import_react","import_react","import_jsx_runtime","RadixSlot","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_class_variance_authority","styles","import_jsx_runtime","styles","import_class_variance_authority","import_jsx_runtime","Select"]}
|
package/dist/select/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Icon
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-
|
|
5
|
-
import "../chunk-
|
|
3
|
+
} from "../chunk-UMUMFMFB.mjs";
|
|
4
|
+
import "../chunk-KEGAAGJW.mjs";
|
|
5
|
+
import "../chunk-6QCEPQ3U.mjs";
|
|
6
6
|
|
|
7
7
|
// src/select/SelectContext.tsx
|
|
8
8
|
import { useFormFieldControl } from "@spark-ui/components/form-field";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/skeleton/index.ts","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx"],"sourcesContent":["import { Skeleton as Root } from './Skeleton'\nimport {\n SkeletonCircle as Circle,\n SkeletonLine as Line,\n SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n Circle: typeof Circle\n Line: typeof Line\n Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n Circle,\n Line,\n Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n variants: {\n isAnimated: {\n true: [\n '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n '[mask-size:200%_100%]',\n 'animate-standalone-shimmer motion-reduce:animate-none!',\n ],\n false: [],\n },\n },\n defaultVariants: {\n isAnimated: true,\n },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n /**\n * Displays an animated light effect.\n * @default true\n */\n isAnimated?: boolean\n /**\n * Adds an accessible fallback label.\n */\n label?: string\n}\n\nexport const Skeleton = ({\n isAnimated = true,\n label,\n className,\n children,\n ref: forwardedRef,\n ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n <div\n ref={forwardedRef}\n data-spark-component=\"skeleton\"\n role=\"presentation\"\n className={skeletonStyles({ isAnimated, className })}\n {...rest}\n >\n {children}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n variants: {\n shape: {\n line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n rectangle: ['rounded-sm'],\n circle: ['flex-none', 'rounded-full'],\n },\n },\n defaultVariants: {\n shape: 'rectangle',\n },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n variants: {\n gap: {\n sm: 'gap-sm',\n md: 'gap-md',\n lg: 'gap-lg',\n xl: 'gap-xl',\n '2xl': 'gap-2xl',\n '3xl': 'gap-3xl',\n },\n },\n defaultVariants: {\n gap: 'md',\n },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n type SkeletonItemStyleProps,\n skeletonItemStyles,\n skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n width?: string | number\n height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n lines?: number\n /**\n * Sets the gaps between group items.\n */\n gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n if (typeof size === 'number') return `${size}px`\n\n return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n return (\n <div\n ref={forwardedRef}\n aria-hidden=\"true\"\n className={skeletonItemStyles({ shape, className })}\n {...rest}\n />\n )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n return (\n <SkeletonItem\n style={\n {\n '--skeleton-rect-width': getSizeValue(width),\n '--skeleton-rect-height': getSizeValue(height),\n } as CSSProperties\n }\n className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n {...rest}\n shape=\"rectangle\"\n data-shape=\"rectangle\"\n />\n )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n <SkeletonItem\n style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n className=\"size-(--skeleton-circle-size)\"\n {...rest}\n shape=\"circle\"\n data-shape=\"circle\"\n />\n)\n\nexport const SkeletonLine = ({\n lines = 1,\n gap: gapProp,\n className,\n ...rest\n}: SkeletonLineProps) => {\n const gap = gapProp || 'md'\n\n return (\n <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n {[...new Array(lines)].map((_, index) => (\n <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n ))}\n </div>\n )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n"],"mappings":"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","names":["Skeleton","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","Skeleton"]}
|
|
1
|
+
{"version":3,"sources":["../../src/skeleton/index.ts","../../src/slot/Slot.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/skeleton/Skeleton.styles.ts","../../src/skeleton/Skeleton.tsx","../../src/skeleton/SkeletonItem.styles.ts","../../src/skeleton/SkeletonItem.tsx"],"sourcesContent":["import { Skeleton as Root } from './Skeleton'\nimport {\n SkeletonCircle as Circle,\n SkeletonLine as Line,\n SkeletonRectangle as Rectangle,\n} from './SkeletonItem'\n\nexport const Skeleton: typeof Root & {\n Circle: typeof Circle\n Line: typeof Line\n Rectangle: typeof Rectangle\n} = Object.assign(Root, {\n Circle,\n Line,\n Rectangle,\n})\n\nSkeleton.displayName = 'Skeleton'\nLine.displayName = 'Skeleton.Line'\nCircle.displayName = 'Skeleton.Circle'\nRectangle.displayName = 'Skeleton.Rectangle'\n\nexport type { SkeletonProps } from './Skeleton'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonStyles = cva([], {\n variants: {\n isAnimated: {\n true: [\n '[mask-image:linear-gradient(90deg,#000_40%,rgba(0,0,0,.3)_60%,#000_100%)]',\n '[mask-size:200%_100%]',\n 'animate-standalone-shimmer motion-reduce:animate-none!',\n ],\n false: [],\n },\n },\n defaultVariants: {\n isAnimated: true,\n },\n})\n\nexport type SkeletonStyleProps = ExcludeNull<VariantProps<typeof skeletonStyles>>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'\n\nexport interface SkeletonProps extends ComponentPropsWithRef<'div'>, SkeletonStyleProps {\n /**\n * Displays an animated light effect.\n * @default true\n */\n isAnimated?: boolean\n /**\n * Adds an accessible fallback label.\n */\n label?: string\n}\n\nexport const Skeleton = ({\n isAnimated = true,\n label,\n className,\n children,\n ref: forwardedRef,\n ...rest\n}: PropsWithChildren<SkeletonProps>) => (\n <div\n ref={forwardedRef}\n data-spark-component=\"skeleton\"\n role=\"presentation\"\n className={skeletonStyles({ isAnimated, className })}\n {...rest}\n >\n {children}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </div>\n)\n\nSkeleton.displayName = 'Skeleton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {\n variants: {\n shape: {\n line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],\n rectangle: ['rounded-sm'],\n circle: ['flex-none', 'rounded-full'],\n },\n },\n defaultVariants: {\n shape: 'rectangle',\n },\n})\n\nexport const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {\n variants: {\n gap: {\n sm: 'gap-sm',\n md: 'gap-md',\n lg: 'gap-lg',\n xl: 'gap-xl',\n '2xl': 'gap-2xl',\n '3xl': 'gap-3xl',\n },\n },\n defaultVariants: {\n gap: 'md',\n },\n})\n\nexport type SkeletonItemStyleProps = ExcludeNull<VariantProps<typeof skeletonItemStyles>>\n","import { ComponentPropsWithRef, CSSProperties } from 'react'\n\nimport {\n type SkeletonItemStyleProps,\n skeletonItemStyles,\n skeletonLineStyles,\n} from './SkeletonItem.styles'\n\ninterface SkeletonItemProps extends ComponentPropsWithRef<'div'>, SkeletonItemStyleProps {}\n\nexport type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {\n width?: string | number\n height?: string | number\n}\nexport type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }\nexport type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {\n lines?: number\n /**\n * Sets the gaps between group items.\n */\n gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n}\n\nconst getSizeValue = (size?: number | string): string | undefined => {\n if (typeof size === 'number') return `${size}px`\n\n return size\n}\n\nconst SkeletonItem = ({ shape, className, ref: forwardedRef, ...rest }: SkeletonItemProps) => {\n return (\n <div\n ref={forwardedRef}\n aria-hidden=\"true\"\n className={skeletonItemStyles({ shape, className })}\n {...rest}\n />\n )\n}\n\nexport const SkeletonRectangle = ({ width = '100%', height, ...rest }: SkeletonRectangleProps) => {\n return (\n <SkeletonItem\n style={\n {\n '--skeleton-rect-width': getSizeValue(width),\n '--skeleton-rect-height': getSizeValue(height),\n } as CSSProperties\n }\n className=\"h-(--skeleton-rect-height) w-(--skeleton-rect-width)\"\n {...rest}\n shape=\"rectangle\"\n data-shape=\"rectangle\"\n />\n )\n}\n\nexport const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (\n <SkeletonItem\n style={{ '--skeleton-circle-size': getSizeValue(size) } as CSSProperties}\n className=\"size-(--skeleton-circle-size)\"\n {...rest}\n shape=\"circle\"\n data-shape=\"circle\"\n />\n)\n\nexport const SkeletonLine = ({\n lines = 1,\n gap: gapProp,\n className,\n ...rest\n}: SkeletonLineProps) => {\n const gap = gapProp || 'md'\n\n return (\n <div className={skeletonLineStyles({ gap, className })} aria-hidden=\"true\">\n {[...new Array(lines)].map((_, index) => (\n <SkeletonItem key={`line_${index}`} {...rest} shape=\"line\" data-shape=\"line\" />\n ))}\n </div>\n )\n}\n\nSkeletonRectangle.displayName = 'Skeleton.Rectangle'\nSkeletonCircle.displayName = 'Skeleton.Circle'\nSkeletonLine.displayName = 'Skeleton.Line'\n"],"mappings":"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","names":["Skeleton","RadixSlot","import_jsx_runtime","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","Skeleton"]}
|
package/dist/skeleton/index.mjs
CHANGED
package/dist/slot/index.d.mts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Slot as Slot$1 } from 'radix-ui';
|
|
2
3
|
import { PropsWithChildren, HTMLAttributes, Ref, ReactNode } from 'react';
|
|
3
4
|
|
|
4
|
-
declare const Slottable:
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
5
|
+
declare const Slottable: typeof Slot$1.Slottable;
|
|
7
6
|
type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
|
|
8
7
|
ref?: Ref<HTMLElement>;
|
|
9
8
|
};
|
package/dist/slot/index.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Slot as Slot$1 } from 'radix-ui';
|
|
2
3
|
import { PropsWithChildren, HTMLAttributes, Ref, ReactNode } from 'react';
|
|
3
4
|
|
|
4
|
-
declare const Slottable:
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
5
|
+
declare const Slottable: typeof Slot$1.Slottable;
|
|
7
6
|
type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
|
|
8
7
|
ref?: Ref<HTMLElement>;
|
|
9
8
|
};
|
package/dist/slot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/slot/index.ts","../../src/slot/Slot.tsx"],"sourcesContent":["export * from './Slot'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,
|
|
1
|
+
{"version":3,"sources":["../../src/slot/index.ts","../../src/slot/Slot.tsx"],"sourcesContent":["export * from './Slot'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAAkC;AAClC,mBAOO;AASE;AAPF,IAAM,YAAwC,gBAAAA,KAAU;AAMxD,IAAM,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,MAAiB;AACpD,SAAO,4CAAC,gBAAAA,KAAU,MAAV,EAAe,KAAW,GAAG,OAAO;AAC9C;AAMO,IAAM,sBAAsB,CACjC,SACA,UACA,aACG;AACH,MAAI,CAAC,QAAS,QAAO,SAAS,QAAQ;AAEtC,aAAO,6BAAe,QAAQ,QAC1B;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAU,SAAS,MAAkC,QAAQ;AAAA,EAC/D,IACA;AACN;","names":["RadixSlot"]}
|