@spark-ui/components
Version:
Spark (Leboncoin design system) components.
1 lines • 6.84 kB
Source Map (JSON)
{"version":3,"sources":["../src/collapsible/Collapsible.tsx","../src/collapsible/CollapsibleContent.tsx","../src/collapsible/CollapsibleTrigger.tsx","../src/collapsible/index.ts"],"sourcesContent":["import * as collapsible from '@zag-js/collapsible'\nimport { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { type ComponentProps, createContext, Ref, useContext, useId } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface CollapsibleProps extends ComponentProps<'div'> {\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 * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * When `true`, prevents the user from interacting with the collapsible.\n */\n disabled?: boolean\n /**\n * Event handler called when the open state of the collapsible changes.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The ids of the elements in the collapsible. Useful for composition\n */\n ids?: collapsible.Props['ids']\n ref?: Ref<HTMLDivElement>\n}\n\nconst CollapsibleContext = createContext<collapsible.Api<PropTypes> | null>(null)\n\nexport const Collapsible = ({\n asChild = false,\n children,\n defaultOpen = false,\n disabled = false,\n onOpenChange,\n open,\n ids,\n ref,\n ...props\n}: CollapsibleProps) => {\n const service = useMachine(collapsible.machine, {\n open,\n defaultOpen,\n disabled,\n id: useId(),\n ids,\n onOpenChange(details) {\n onOpenChange?.(details.open)\n },\n })\n const api = collapsible.connect(service, normalizeProps)\n const Component = asChild ? Slot : 'div'\n\n const mergedProps = mergeProps(api.getRootProps(), props)\n\n return (\n <CollapsibleContext.Provider value={api}>\n <Component data-spark-component=\"collapsible\" ref={ref} {...mergedProps}>\n {children}\n </Component>\n </CollapsibleContext.Provider>\n )\n}\n\nCollapsible.displayName = 'Collapsible'\n\nexport const useCollapsibleContext = () => {\n const context = useContext(CollapsibleContext)\n\n if (!context) {\n throw Error('useCollapsibleContext must be used within a Collapsible provider')\n }\n\n return context\n}\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: CollapsibleContentProps) => {\n const { getContentProps } = useCollapsibleContext()\n\n const Component = asChild ? Slot : 'div'\n const contentProps = getContentProps()\n const mergedProps = mergeProps(contentProps, {\n className: cx(\n 'overflow-hidden',\n 'motion-reduce:animate-none!',\n '[&[hidden]]:hidden',\n 'data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out',\n className\n ),\n ...props,\n })\n\n return (\n <Component ref={ref} data-spark-component=\"collapsible-content\" {...mergedProps}>\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Collapsible.Content'\n","import { mergeProps } from '@zag-js/react'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...props }: CollapsibleTriggerProps) => {\n const collapsibleContext = useCollapsibleContext()\n const Component = asChild ? Slot : 'button'\n const mergedProps = mergeProps(collapsibleContext.getTriggerProps(), props)\n\n return (\n <Component ref={ref} data-spark-component=\"collapsible-trigger\" {...mergedProps}>\n {children}\n </Component>\n )\n}\n\nTrigger.displayName = 'Collapsible.Trigger'\n","import { Collapsible as Root } from './Collapsible'\nimport { Content } from './CollapsibleContent'\nimport { Trigger } from './CollapsibleTrigger'\n\nexport const Collapsible: typeof Root & {\n Trigger: typeof Trigger\n Content: typeof Content\n} = Object.assign(Root, {\n Trigger,\n Content,\n})\n\nCollapsible.displayName = 'Collapsible'\nTrigger.displayName = 'Collapsible.Trigger'\nContent.displayName = 'Collapsible.Content'\n\nexport { type CollapsibleProps } from './Collapsible'\nexport { type CollapsibleContentProps } from './CollapsibleContent'\nexport { type CollapsibleTriggerProps } from './CollapsibleTrigger'\n"],"mappings":";;;;;AAAA,YAAY,iBAAiB;AAC7B,SAAS,YAAY,gBAAgC,kBAAkB;AACvE,SAA8B,eAAoB,YAAY,aAAa;AA8DrE;AA9BN,IAAM,qBAAqB,cAAiD,IAAI;AAEzE,IAAM,cAAc,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,UAAU,WAAuB,qBAAS;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,IACA,aAAa,SAAS;AACpB,qBAAe,QAAQ,IAAI;AAAA,IAC7B;AAAA,EACF,CAAC;AACD,QAAM,MAAkB,oBAAQ,SAAS,cAAc;AACvD,QAAM,YAAY,UAAU,OAAO;AAEnC,QAAM,cAAc,WAAW,IAAI,aAAa,GAAG,KAAK;AAExD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC,8BAAC,aAAU,wBAAqB,eAAc,KAAW,GAAG,aACzD,UACH,GACF;AAEJ;AAEA,YAAY,cAAc;AAEnB,IAAM,wBAAwB,MAAM;AACzC,QAAM,UAAU,WAAW,kBAAkB;AAE7C,MAAI,CAAC,SAAS;AACZ,UAAM,MAAM,kEAAkE;AAAA,EAChF;AAEA,SAAO;AACT;;;ACjFA,SAAS,cAAAA,mBAAkB;AAC3B,SAAS,UAAU;AAkCf,gBAAAC,YAAA;AAvBG,IAAM,UAAU,CAAC;AAAA,EACtB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,EAAE,gBAAgB,IAAI,sBAAsB;AAElD,QAAM,YAAY,UAAU,OAAO;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAcC,YAAW,cAAc;AAAA,IAC3C,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AAED,SACE,gBAAAD,KAAC,aAAU,KAAU,wBAAqB,uBAAuB,GAAG,aACjE,UACH;AAEJ;AAEA,QAAQ,cAAc;;;ACzCtB,SAAS,cAAAE,mBAAkB;AAiBvB,gBAAAC,YAAA;AANG,IAAM,UAAU,CAAC,EAAE,UAAU,OAAO,UAAU,KAAK,GAAG,MAAM,MAA+B;AAChG,QAAM,qBAAqB,sBAAsB;AACjD,QAAM,YAAY,UAAU,OAAO;AACnC,QAAM,cAAcC,YAAW,mBAAmB,gBAAgB,GAAG,KAAK;AAE1E,SACE,gBAAAD,KAAC,aAAU,KAAU,wBAAqB,uBAAuB,GAAG,aACjE,UACH;AAEJ;AAEA,QAAQ,cAAc;;;ACnBf,IAAME,eAGT,OAAO,OAAO,aAAM;AAAA,EACtB;AAAA,EACA;AACF,CAAC;AAEDA,aAAY,cAAc;AAC1B,QAAQ,cAAc;AACtB,QAAQ,cAAc;","names":["mergeProps","jsx","mergeProps","mergeProps","jsx","mergeProps","Collapsible"]}