@stasho/ds 0.9.2 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stasho/ds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "stasho design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
"directory": "packages/ds"
|
|
23
23
|
},
|
|
24
24
|
"exports": {
|
|
25
|
+
"./accordion": "./src/components/accordion/accordion.tsx",
|
|
25
26
|
"./alert": "./src/components/alert/alert.tsx",
|
|
26
27
|
"./button": "./src/components/button/button.tsx",
|
|
27
28
|
"./icon-button": "./src/components/button/icon-button.tsx",
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { forwardRef, type ComponentPropsWithoutRef } from "react";
|
|
4
|
+
import { Accordion as AccordionPrimitive } from "radix-ui";
|
|
5
|
+
import { CaretDown } from "@phosphor-icons/react";
|
|
6
|
+
import { cn } from "@ac/lib/cn";
|
|
7
|
+
|
|
8
|
+
const Accordion = AccordionPrimitive.Root;
|
|
9
|
+
|
|
10
|
+
const AccordionItem = forwardRef<
|
|
11
|
+
HTMLDivElement,
|
|
12
|
+
ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
|
13
|
+
>(({ className, ...rest }, ref) => (
|
|
14
|
+
<AccordionPrimitive.Item
|
|
15
|
+
ref={ref}
|
|
16
|
+
className={cn("border-b border-edge", className)}
|
|
17
|
+
{...rest}
|
|
18
|
+
/>
|
|
19
|
+
));
|
|
20
|
+
AccordionItem.displayName = "AccordionItem";
|
|
21
|
+
|
|
22
|
+
const AccordionTrigger = forwardRef<
|
|
23
|
+
HTMLButtonElement,
|
|
24
|
+
ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
|
25
|
+
>(({ className, children, ...rest }, ref) => (
|
|
26
|
+
<AccordionPrimitive.Header className="flex">
|
|
27
|
+
<AccordionPrimitive.Trigger
|
|
28
|
+
ref={ref}
|
|
29
|
+
className={cn(
|
|
30
|
+
"group flex flex-1 items-center justify-between gap-4 py-4",
|
|
31
|
+
"text-left font-sans font-semibold text-foreground",
|
|
32
|
+
"transition-colors duration-200",
|
|
33
|
+
"hover:text-accent-500 dark:hover:text-accent",
|
|
34
|
+
"focus-visible:outline-2 focus-visible:outline-accent-500 dark:focus-visible:outline-accent focus-visible:outline-offset-2",
|
|
35
|
+
"motion-reduce:transition-none",
|
|
36
|
+
className,
|
|
37
|
+
)}
|
|
38
|
+
{...rest}
|
|
39
|
+
>
|
|
40
|
+
{children}
|
|
41
|
+
<CaretDown
|
|
42
|
+
weight="bold"
|
|
43
|
+
aria-hidden="true"
|
|
44
|
+
className={cn(
|
|
45
|
+
"size-4 shrink-0 text-accent-500 dark:text-accent",
|
|
46
|
+
"transition-transform duration-200",
|
|
47
|
+
"group-data-[state=open]:rotate-180",
|
|
48
|
+
"motion-reduce:transition-none",
|
|
49
|
+
)}
|
|
50
|
+
/>
|
|
51
|
+
</AccordionPrimitive.Trigger>
|
|
52
|
+
</AccordionPrimitive.Header>
|
|
53
|
+
));
|
|
54
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
55
|
+
|
|
56
|
+
const AccordionContent = forwardRef<
|
|
57
|
+
HTMLDivElement,
|
|
58
|
+
ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
|
59
|
+
>(({ className, children, ...rest }, ref) => (
|
|
60
|
+
<AccordionPrimitive.Content ref={ref} {...rest}>
|
|
61
|
+
<div
|
|
62
|
+
className={cn(
|
|
63
|
+
"pb-4 text-sm leading-relaxed text-muted-foreground",
|
|
64
|
+
className,
|
|
65
|
+
)}
|
|
66
|
+
>
|
|
67
|
+
{children}
|
|
68
|
+
</div>
|
|
69
|
+
</AccordionPrimitive.Content>
|
|
70
|
+
));
|
|
71
|
+
AccordionContent.displayName = "AccordionContent";
|
|
72
|
+
|
|
73
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|