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';