UNPKG

@spark-ui/components

Version:

Spark (Leboncoin design system) components.

1 lines 18.5 kB
{"version":3,"sources":["../../src/radio-group/Radio.tsx","../../src/radio-group/RadioGroupContext.tsx","../../src/radio-group/RadioInput.tsx","../../src/radio-group/RadioIndicator.tsx","../../src/radio-group/RadioIndicator.styles.ts","../../src/radio-group/RadioInput.styles.ts","../../src/radio-group/RadioLabel.tsx","../../src/radio-group/RadioLabel.styles.tsx","../../src/radio-group/RadioGroup.tsx","../../src/radio-group/RadioGroup.styles.ts","../../src/radio-group/RadioGroupProvider.tsx","../../src/radio-group/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref, useId } from 'react'\n\nimport { useRadioGroup } from './RadioGroupContext'\nimport { RadioInput, RadioInputProps } from './RadioInput'\nimport { RadioLabel } from './RadioLabel'\n\nexport type RadioProps = RadioInputProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nconst ID_PREFIX = ':radio'\n\nexport const Radio = ({\n className,\n children,\n id,\n disabled: disabledProp,\n ref,\n ...others\n}: RadioProps) => {\n const innerId = `${ID_PREFIX}-input-${useId()}`\n const innerLabelId = `${ID_PREFIX}-label-${useId()}`\n\n const { intent, disabled, reverse } = useRadioGroup()\n\n const radioLabel = children && (\n <RadioLabel disabled={disabledProp || disabled} htmlFor={id || innerId} id={innerLabelId}>\n {children}\n </RadioLabel>\n )\n\n const radioInput = (\n <RadioInput\n ref={ref}\n id={id || innerId}\n intent={intent}\n aria-labelledby={children ? innerLabelId : undefined}\n {...others}\n disabled={disabledProp}\n />\n )\n\n const content = reverse ? (\n <>\n {radioLabel}\n {radioInput}\n </>\n ) : (\n <>\n {radioInput}\n {radioLabel}\n </>\n )\n\n return <div className={cx('gap-md text-body-1 flex items-start', className)}>{content}</div>\n}\n\nRadio.displayName = 'RadioGroup.Radio'\n","import { createContext, useContext } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport type { RadioInputProps } from './RadioInput'\n\nexport type RadioGroupContextState = Pick<RadioInputProps, 'intent' | 'disabled'> &\n Pick<RadioGroupProps, 'reverse'>\n\nexport const RadioGroupContext = createContext<RadioGroupContextState | null>(null)\n\nexport const useRadioGroup = () => {\n const context = useContext(RadioGroupContext)\n\n if (!context) {\n throw Error('useRadioGroup must be used within a RadioGroup provider')\n }\n\n return context\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { ButtonHTMLAttributes, Ref } from 'react'\n\nimport { RadioIndicator } from './RadioIndicator'\nimport { radioInputVariants, RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioInputProps\n extends RadioInputVariantsProps,\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * The value given as data when submitted with a name.\n */\n value: string\n /**\n * When true, prevents the user from interacting with the radio item.\n */\n disabled?: boolean\n /**\n * When true, indicates that the user must check the radio item before the owning form can be submitted.\n */\n required?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const RadioInput = ({ intent: intentProp, className, ref, ...others }: RadioInputProps) => {\n const { state } = useFormFieldControl()\n\n const intent = state ?? intentProp\n\n return (\n <RadixRadioGroup.RadioGroupItem\n ref={ref}\n className={radioInputVariants({ intent, className })}\n {...others}\n >\n <RadioIndicator intent={intent} forceMount />\n </RadixRadioGroup.RadioGroupItem>\n )\n}\n\nRadioInput.displayName = 'RadioGroup.RadioInput'\n","import { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { radioIndicatorStyles, RadioIndicatorStylesProps } from './RadioIndicator.styles'\n\nexport interface RadioIndicatorProps extends RadioIndicatorStylesProps {\n className?: string\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n */\n forceMount?: true | undefined\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const RadioIndicator = ({ intent, className, ref, ...others }: RadioIndicatorProps) => {\n return (\n <RadixRadioGroup.Indicator\n ref={ref}\n className={radioIndicatorStyles({ intent, className })}\n {...others}\n />\n )\n}\n\nRadioIndicator.displayName = 'RadioGroup.RadioIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioIndicatorStyles = cva(\n [\n 'relative block',\n 'size-3/5',\n 'after:absolute',\n 'after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',\n 'after:h-0',\n 'after:w-0',\n 'after:block',\n 'after:rounded-[50%]',\n \"after:content-['']\",\n 'after:transition-all',\n 'data-[state=checked]:after:size-full',\n ],\n {\n variants: {\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n >({\n main: ['after:bg-main'],\n support: ['after:bg-support'],\n accent: ['after:bg-accent'],\n basic: ['after:bg-basic'],\n neutral: ['after:bg-neutral'],\n success: ['after:bg-success'],\n alert: ['after:bg-alert'],\n error: ['after:bg-error'],\n info: ['after:bg-info'],\n }),\n },\n defaultVariants: {\n intent: 'basic',\n },\n }\n)\n\nexport type RadioIndicatorStylesProps = VariantProps<typeof radioIndicatorStyles>\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioInputVariants = cva(\n [\n 'flex shrink-0 items-center justify-center',\n 'rounded-full',\n 'border-md',\n 'outline-hidden',\n 'hover:ring-4',\n 'focus-visible:u-outline',\n 'disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent',\n 'u-shadow-border-transition',\n 'size-sz-24',\n ],\n {\n variants: {\n /**\n * Color scheme of the radio input.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n >({\n main: ['border-outline', 'data-[state=checked]:border-main', 'hover:ring-main-container'],\n support: [\n 'border-outline',\n 'data-[state=checked]:border-support',\n 'hover:ring-support-container',\n ],\n accent: [\n 'border-outline',\n 'data-[state=checked]:border-accent',\n 'hover:ring-accent-container',\n ],\n basic: [\n 'border-outline',\n 'data-[state=checked]:border-basic',\n 'hover:ring-basic-container',\n ],\n neutral: [\n 'border-outline',\n 'data-[state=checked]:border-neutral',\n 'hover:ring-neutral-container',\n ],\n info: ['border-outline', 'data-[state=checked]:border-info', 'hover:ring-info-container'],\n success: [\n 'border-outline',\n 'data-[state=checked]:border-success',\n 'hover:ring-success-container',\n ],\n alert: [\n 'border-outline',\n 'data-[state=checked]:border-alert',\n 'hover:ring-alert-container',\n ],\n error: [\n 'border-outline',\n 'data-[state=checked]:border-error',\n 'hover:ring-error-container',\n ],\n }),\n },\n defaultVariants: {\n intent: 'basic',\n },\n }\n)\n\nexport type RadioInputVariantsProps = VariantProps<typeof radioInputVariants>\n","import { Label } from 'radix-ui'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nimport { radioLabelStyles, RadioLabelStylesProps } from './RadioLabel.styles'\n\nexport interface RadioLabelProps\n extends RadioLabelStylesProps,\n PropsWithChildren<HTMLAttributes<HTMLLabelElement>> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * The id of the element the label is associated with.\n */\n htmlFor?: string\n /**\n * When true, prevents the user from interacting with the radio item.\n */\n disabled?: boolean\n}\n\nexport const RadioLabel = ({ disabled, ...others }: RadioLabelProps) => {\n return <Label.Root className={radioLabelStyles({ disabled })} {...others} />\n}\n\nRadioLabel.displayName = 'RadioGroup.RadioLabel'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioLabelStyles = cva('grow', {\n variants: {\n disabled: {\n true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n false: ['cursor-pointer'],\n },\n },\n defaultVariants: {\n disabled: false,\n },\n})\n\nexport type RadioLabelStylesProps = VariantProps<typeof radioLabelStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { RadioGroup as RadixRadioGroup } from 'radix-ui'\nimport { HTMLAttributes, Ref } from 'react'\n\nimport { radioGroupStyles, RadioGroupVariantsProps } from './RadioGroup.styles'\nimport { RadioGroupProvider } from './RadioGroupProvider'\nimport { RadioInputVariantsProps } from './RadioInput.styles'\n\nexport interface RadioGroupProps\n extends RadioGroupVariantsProps,\n Pick<RadioInputVariantsProps, 'intent'>,\n Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'dir' | 'onChange'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.\n */\n defaultValue?: string\n /**\n * The controlled value of the radio item to check. 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 * When true, prevents the user from interacting with radio items.\n */\n disabled?: boolean\n /**\n * The name of the group. Submitted with its owning form as part of a name/value pair.\n */\n name?: string\n /**\n * When true, indicates that the user must check a radio item before the owning form can be submitted.\n */\n required?: boolean\n /**\n * The orientation of the component.\n */\n orientation?: 'horizontal' | 'vertical'\n /**\n * The reading direction of the radio group.\n */\n dir?: 'ltr' | 'rtl'\n /**\n * When true, keyboard navigation will loop from last item to first, and vice versa.\n */\n loop?: boolean\n /**\n * When true, the label will be placed on the left side of the Radio\n */\n reverse?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const RadioGroup = ({\n orientation = 'vertical',\n loop = true,\n intent = 'basic',\n disabled,\n className,\n required: requiredProp,\n reverse = false,\n ref,\n ...others\n}: RadioGroupProps) => {\n const { labelId, isInvalid, isRequired, description, name } = useFormFieldControl()\n const required = requiredProp !== undefined ? requiredProp : isRequired\n\n return (\n <RadioGroupProvider reverse={reverse} intent={intent} disabled={disabled}>\n <RadixRadioGroup.RadioGroup\n data-spark-component=\"radio-group\"\n className={radioGroupStyles({ orientation, className })}\n name={name}\n ref={ref}\n disabled={disabled}\n orientation={orientation}\n loop={loop}\n required={required}\n aria-labelledby={labelId}\n aria-invalid={isInvalid}\n aria-required={required}\n aria-describedby={description}\n {...others}\n />\n </RadioGroupProvider>\n )\n}\n\nRadioGroup.displayName = 'RadioGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const radioGroupStyles = cva(['flex'], {\n variants: {\n orientation: {\n vertical: ['flex-col', 'gap-lg'],\n horizontal: ['flex-row', 'gap-xl'],\n },\n },\n})\n\nexport type RadioGroupVariantsProps = VariantProps<typeof radioGroupStyles>\n","import { ReactNode, useMemo } from 'react'\n\nimport type { RadioGroupProps } from './RadioGroup'\nimport { RadioGroupContext } from './RadioGroupContext'\nimport type { RadioInputProps } from './RadioInput'\n\nexport interface RadioGroupProviderProps\n extends Pick<RadioInputProps, 'intent' | 'disabled'>,\n Pick<RadioGroupProps, 'reverse'> {\n children: ReactNode\n}\n\nexport const RadioGroupProvider = ({\n intent,\n disabled,\n reverse,\n children,\n}: RadioGroupProviderProps) => {\n const value = useMemo(() => ({ intent, disabled, reverse }), [intent, disabled, reverse])\n\n return <RadioGroupContext.Provider value={value}>{children}</RadioGroupContext.Provider>\n}\n","import { Radio } from './Radio'\nimport { RadioGroup as Root } from './RadioGroup'\n\nexport const RadioGroup: typeof Root & {\n Radio: typeof Radio\n} = Object.assign(Root, {\n Radio,\n})\n\nRadioGroup.displayName = 'RadioGroup'\nRadio.displayName = 'RadioGroup.Radio'\n\nexport { type RadioGroupProps } from './RadioGroup'\nexport { type RadioProps } from './Radio'\n"],"mappings":"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","names":["RadixRadioGroup","makeVariants","cva","jsx","RadixRadioGroup","cva","jsx","jsx","useFormFieldControl","RadixRadioGroup","cva","jsx","jsx","useFormFieldControl","RadixRadioGroup","RadioGroup"]}