UNPKG

@spark-ui/components

Version:

Spark (Leboncoin design system) components.

1 lines 9.67 kB
{"version":3,"sources":["../../src/divider/Divider.tsx","../../src/divider/Divider.styles.ts","../../src/divider/variants/intents.tsx","../../src/divider/DividerContent.tsx","../../src/divider/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Separator } from 'radix-ui'\nimport { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'\n\nimport { dividerStyles, type DividerStylesProps } from './Divider.styles'\n\nexport interface DividerProps\n extends HTMLAttributes<HTMLDivElement>,\n Omit<DividerStylesProps, 'isEmpty'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n children?: ReactElement\n /**\n * The orientation of the inner content.\n */\n alignment?: 'start' | 'end' | 'center'\n /**\n * The orientation of the separator.\n */\n orientation?: 'vertical' | 'horizontal'\n /**\n * When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.\n */\n isDecorative?: boolean\n /**\n * Color scheme of the divider.\n */\n intent?: 'outline' | 'current'\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Divider = ({\n asChild,\n className,\n isDecorative = false,\n children,\n orientation = 'horizontal',\n writingMode = 'horizontal-tb',\n alignment = 'center',\n intent = 'outline',\n ref,\n ...props\n}: DividerProps) => {\n const isEmpty = asChild ? !(children?.props as { children: ReactNode })?.children : !children\n\n return (\n <Separator.Root\n data-spark-component=\"divider\"\n asChild={asChild}\n className={cx(\n dividerStyles({ isEmpty, orientation, alignment, intent, writingMode }),\n className\n )}\n orientation={orientation}\n ref={ref}\n decorative={isDecorative}\n {...props}\n data-writing-mode={writingMode}\n >\n {children}\n </Separator.Root>\n )\n}\n\nDivider.displayName = 'Divider'\n","import { tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { intentVariants } from './variants/intents'\n\nexport const dividerStyles = cva(['overflow-hidden group'], {\n variants: {\n isEmpty: {\n true: ['border-solid'],\n false: ['inline-flex items-center', 'after:border-solid before:border-solid'],\n },\n orientation: {\n vertical: ['w-fit inline-flex'],\n horizontal: ['w-full'],\n },\n writingMode: {\n 'horizontal-tb': [],\n 'vertical-lr': [],\n },\n alignment: {\n start: [],\n end: [],\n center: [],\n },\n intent: {\n current: [],\n outline: [],\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n writingMode: 'horizontal-tb',\n alignment: 'center',\n intent: 'outline',\n },\n compoundVariants: [\n {\n isEmpty: true,\n orientation: 'horizontal',\n class: tw(['my-lg border-t-sm']),\n },\n {\n isEmpty: true,\n orientation: 'vertical',\n class: tw(['mx-lg min-h-sz-24 border-l-sm']),\n },\n {\n isEmpty: false,\n orientation: 'horizontal',\n writingMode: 'horizontal-tb',\n class: tw(['flex-row my-sm grow-0', 'before:border-t-sm', 'after:border-t-sm', '*:px-lg']),\n },\n {\n isEmpty: false,\n orientation: 'vertical',\n writingMode: 'horizontal-tb',\n class: tw(['flex-col mx-sm', 'before:border-l-sm', 'after:border-l-sm', '*:py-lg']),\n },\n {\n isEmpty: false,\n orientation: 'vertical',\n writingMode: 'vertical-lr',\n class: tw(['flex-col mx-sm', 'before:border-l-sm', 'after:border-l-sm', '*:px-lg']),\n },\n {\n isEmpty: false,\n orientation: 'horizontal',\n alignment: 'end',\n class: tw(['after:w-sz-40 before:grow after:grow-0']),\n },\n {\n isEmpty: false,\n orientation: 'horizontal',\n alignment: 'start',\n class: tw(['before:w-sz-40 before:grow-0 after:grow']),\n },\n {\n isEmpty: false,\n orientation: 'horizontal',\n alignment: 'center',\n class: tw(['justify-center before:grow after:grow']),\n },\n {\n isEmpty: false,\n orientation: 'vertical',\n alignment: 'end',\n class: tw(['after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40']),\n },\n {\n isEmpty: false,\n orientation: 'vertical',\n alignment: 'start',\n class: tw(['before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40']),\n },\n {\n isEmpty: false,\n orientation: 'vertical',\n alignment: 'center',\n class: tw(['justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40']),\n },\n ...intentVariants,\n ],\n})\n\nexport type DividerStylesProps = VariantProps<typeof dividerStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const intentVariants = [\n // current\n {\n intent: 'current',\n isEmpty: true,\n class: tw(['border-current']),\n },\n {\n intent: 'current',\n isEmpty: false,\n class: tw(['before:border-current after:border-current']),\n },\n // outline\n {\n intent: 'outline',\n isEmpty: true,\n class: tw(['border-outline']),\n },\n {\n intent: 'outline',\n isEmpty: false,\n class: tw(['before:border-outline after:border-outline']),\n },\n] as const\n","import { cx } from 'class-variance-authority'\nimport { HTMLAttributes, ReactNode, Ref } from 'react'\n\nexport interface DividerContentProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n children?: ReactNode\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const DividerContent = ({ children, ref, className, ...props }: DividerContentProps) => {\n return children ? (\n <span\n ref={ref}\n {...props}\n className={cx('group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]', className)}\n >\n {children}\n </span>\n ) : null\n}\n\nDividerContent.displayName = 'Divider.Content'\n","import { Divider as Root } from './Divider'\nimport { DividerContent } from './DividerContent'\n\nexport { type DividerContentProps } from './DividerContent'\n\nexport const Divider: typeof Root & {\n Content: typeof DividerContent\n} = Object.assign(Root, {\n Content: DividerContent,\n})\n\nDivider.displayName = 'Divider'\nDivider.Content.displayName = 'Divider.Content'\n"],"mappings":"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","names":["tw","tw","cx","jsx","Divider"]}