@spark-ui/components
Version:
Spark (Leboncoin design system) components.
1 lines • 11.3 kB
Source Map (JSON)
{"version":3,"sources":["../../src/accordion/Accordion.tsx","../../src/accordion/useRenderSlot.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<\n ComponentProps<typeof BaseAccordion.Root>,\n 'openMultiple' | 'render'\n>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n openMultiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":";;;;;;;;;AAAA,SAAS,aAAa,qBAAqB;AAC3C,SAAS,UAAU;AACnB,SAAyB,eAAoB,kBAAkB;;;ACG1B;AAH9B,SAAS,cAAc,SAAkB,YAAoB;AAClE,QAAM,YAAY,UAAU,OAAO;AAEnC,SAAO,UAAU,CAAC,EAAE,GAAG,MAAM,MAAM,oBAAC,aAAW,GAAG,OAAO,IAAK;AAChE;;;ADwCM,gBAAAA,YAAA;AAlBN,IAAM,mBAAmB,cAEf,IAAI;AAEP,IAAM,YAAY,CAAC;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,gBAAAA,KAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,OAAO,GACzC,0BAAAA;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,wBAAqB;AAAA,MACrB;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACtD,QAAQ;AAAA,MACP,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,UAAU,cAAc;AAEjB,IAAM,sBAAsB,MAAM;AACvC,QAAM,UAAU,WAAW,gBAAgB;AAE3C,MAAI,CAAC,SAAS;AACZ,UAAM,MAAM,8DAA8D;AAAA,EAC5E;AAEA,SAAO;AACT;;;AEvEA,SAAS,aAAaC,sBAAqB;AAC3C,SAAS,MAAAC,WAAU;AAyBf,gBAAAC,YAAA;AAZG,IAAM,OAAO,CAAC;AAAA,EACnB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,YAAY,oBAAoB;AAEtC,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,gBAAAA;AAAA,IAACC,eAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,wBAAqB;AAAA,MACrB,QAAQ;AAAA,MACR,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA,EAAE,4BAA4B,UAAU,WAAW,WAAW;AAAA,QAC9D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,KAAK,cAAc;;;AC3CnB,SAAS,aAAaC,sBAAqB;AAC3C,SAAS,MAAAC,WAAU;AAsBf,gBAAAC,YAAA;AAVG,IAAM,cAAc,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,aAAa,cAAc,SAAS,KAAK;AAE/C,SACE,gBAAAA;AAAA,IAACC,eAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,wBAAqB;AAAA,MACrB,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,MACP,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,YAAY,cAAc;;;ACxC1B,SAAS,MAAAC,WAAU;AAmBf,gBAAAC,YAAA;AATG,IAAM,aAAa,CAAC;AAAA,EACzB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,wBAAqB;AAAA,MACrB,WAAWC,IAAG,qBAAqB,SAAS;AAAA,MAE3C;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;;;AC7BzB,SAAS,aAAaC,sBAAqB;AAC3C,SAAS,2BAA2B;AACpC,SAAS,MAAAC,WAAU;AAuBf,SAeE,OAAAC,MAfF;AAVG,IAAM,cAAc,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,aAAa,cAAc,SAAS,QAAQ;AAElD,SACE;AAAA,IAACC,eAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,wBAAqB;AAAA,MACrB,QAAQ;AAAA,MACR,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,wBAAAF,KAAC,SAAI,WAAU,iCAAiC,UAAS;AAAA,QACzD,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,WAAWE;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YAEL,0BAAAF,KAAC,uBAAoB;AAAA;AAAA,QACvB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;;;ACjDnB,IAAMG,aAKT,OAAO,OAAO,WAAM;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEDA,WAAU,cAAc;AACxB,KAAK,cAAc;AACnB,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,YAAY,cAAc;","names":["jsx","BaseAccordion","cx","jsx","BaseAccordion","cx","BaseAccordion","cx","jsx","BaseAccordion","cx","cx","jsx","cx","BaseAccordion","cx","jsx","BaseAccordion","cx","Accordion"]}