Spaces:
Build error
Build error
File size: 4,397 Bytes
0bfe2e3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
'use client';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { cva } from 'class-variance-authority';
import * as React from 'react';
import { cn, ComponentAnatomy, defineStyleAnatomy } from '../core/styling';
/* -------------------------------------------------------------------------------------------------
* Anatomy
* -----------------------------------------------------------------------------------------------*/
export const DisclosureAnatomy = defineStyleAnatomy({
item: cva(['UI-Disclosure__item']),
contentContainer: cva([
'UI-Disclosure__contentContainer',
'overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
]),
content: cva(['UI-Disclosure__content']),
});
/* -------------------------------------------------------------------------------------------------
* Disclosure
* -----------------------------------------------------------------------------------------------*/
const __DisclosureAnatomyContext = React.createContext<
ComponentAnatomy<typeof DisclosureAnatomy>
>({});
export type DisclosureProps = React.ComponentPropsWithoutRef<
typeof AccordionPrimitive.Root
> &
ComponentAnatomy<typeof DisclosureAnatomy>;
export const Disclosure = React.forwardRef<HTMLDivElement, DisclosureProps>(
(props, ref) => {
const { contentContainerClass, contentClass, itemClass, ...rest } = props;
return (
<__DisclosureAnatomyContext.Provider
value={{
itemClass,
contentContainerClass,
contentClass,
}}
>
<AccordionPrimitive.Root ref={ref} {...rest} />
</__DisclosureAnatomyContext.Provider>
);
}
);
Disclosure.displayName = 'Disclosure';
/* -------------------------------------------------------------------------------------------------
* DisclosureItem
* -----------------------------------------------------------------------------------------------*/
export type DisclosureItemProps = React.ComponentPropsWithoutRef<
typeof AccordionPrimitive.Item
> &
ComponentAnatomy<typeof DisclosureAnatomy>;
export const DisclosureItem = React.forwardRef<
HTMLDivElement,
DisclosureItemProps
>((props, ref) => {
const { className, ...rest } = props;
const { itemClass } = React.useContext(__DisclosureAnatomyContext);
return (
<AccordionPrimitive.Item
ref={ref}
className={cn(DisclosureAnatomy.item(), itemClass, className)}
{...rest}
/>
);
});
DisclosureItem.displayName = 'DisclosureItem';
/* -------------------------------------------------------------------------------------------------
* DisclosureTrigger
* -----------------------------------------------------------------------------------------------*/
export type DisclosureTriggerProps = React.ComponentPropsWithoutRef<
typeof AccordionPrimitive.Trigger
>;
export const DisclosureTrigger = React.forwardRef<
HTMLButtonElement,
DisclosureTriggerProps
>((props, ref) => {
return (
<AccordionPrimitive.Header asChild>
<AccordionPrimitive.Trigger ref={ref} asChild {...props} />
</AccordionPrimitive.Header>
);
});
DisclosureTrigger.displayName = 'DisclosureTrigger';
/* -------------------------------------------------------------------------------------------------
* DisclosureContent
* -----------------------------------------------------------------------------------------------*/
export type DisclosureContentProps = React.ComponentPropsWithoutRef<
typeof AccordionPrimitive.Content
> &
Omit<ComponentAnatomy<typeof DisclosureAnatomy>, 'contentClass'>;
export const DisclosureContent = React.forwardRef<
HTMLDivElement,
DisclosureContentProps
>((props, ref) => {
const { className, contentContainerClass, children, ...rest } = props;
const {
contentContainerClass: _contentContainerClass,
contentClass: _contentClass,
} = React.useContext(__DisclosureAnatomyContext);
return (
<AccordionPrimitive.Content
ref={ref}
className={cn(
DisclosureAnatomy.contentContainer(),
_contentContainerClass,
contentContainerClass
)}
{...rest}
>
<div
className={cn(DisclosureAnatomy.content(), _contentClass, className)}
>
{children}
</div>
</AccordionPrimitive.Content>
);
});
DisclosureContent.displayName = 'DisclosureContent';
|