@plumeria/headlessui 14.1.2 → 14.2.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/README.md +89 -0
- package/package.json +19 -8
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @plumeria/headlessui
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
Accessible UI component wrappers built on [Radix UI](https://www.radix-ui.com/) primitives, designed to work seamlessly with Plumeria's `styleName` abstraction layer.
|
|
7
|
+
|
|
8
|
+
Each component is a pure passthrough — it forwards refs and spreads props onto the underlying Radix primitive. `styleName` is compiled to `className`/`style` at the call site before the component runs, so no Plumeria-specific logic is needed inside the components.
|
|
9
|
+
|
|
10
|
+
## Documentation
|
|
11
|
+
|
|
12
|
+
Read the [documentation](https://plumeria.dev/docs/api-reference/components/headlessui) for more details.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
pnpm i @plumeria/headlessui
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
> **Note:** `@plumeria/core` and a bundler plugin are required. See the [Installation guide](https://plumeria.dev/docs/getting-started/installation).
|
|
21
|
+
|
|
22
|
+
## Example
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import * as css from '@plumeria/core';
|
|
26
|
+
import {
|
|
27
|
+
Accordion,
|
|
28
|
+
AccordionItem,
|
|
29
|
+
AccordionHeader,
|
|
30
|
+
AccordionTrigger,
|
|
31
|
+
AccordionContent,
|
|
32
|
+
} from '@plumeria/headlessui';
|
|
33
|
+
|
|
34
|
+
const styles = css.create({
|
|
35
|
+
root: {
|
|
36
|
+
width: '100%',
|
|
37
|
+
overflow: 'hidden',
|
|
38
|
+
border: '1px solid #e4e4e7',
|
|
39
|
+
borderRadius: '8px',
|
|
40
|
+
},
|
|
41
|
+
trigger: {
|
|
42
|
+
display: 'flex',
|
|
43
|
+
flex: 1,
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
justifyContent: 'space-between',
|
|
46
|
+
padding: '14px 18px',
|
|
47
|
+
fontSize: '14px',
|
|
48
|
+
fontWeight: '600',
|
|
49
|
+
cursor: 'pointer',
|
|
50
|
+
backgroundColor: 'transparent',
|
|
51
|
+
border: 'none',
|
|
52
|
+
},
|
|
53
|
+
content: {
|
|
54
|
+
padding: '14px 18px',
|
|
55
|
+
fontSize: '13.5px',
|
|
56
|
+
borderTop: '1px solid #e4e4e7',
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
export const FAQ = () => (
|
|
61
|
+
<Accordion type="single" collapsible styleName={styles.root}>
|
|
62
|
+
<AccordionItem value="item-1">
|
|
63
|
+
<AccordionHeader>
|
|
64
|
+
<AccordionTrigger styleName={styles.trigger}>
|
|
65
|
+
Is it accessible?
|
|
66
|
+
</AccordionTrigger>
|
|
67
|
+
</AccordionHeader>
|
|
68
|
+
<AccordionContent styleName={styles.content}>
|
|
69
|
+
Yes. It adheres to the WAI-ARIA design pattern.
|
|
70
|
+
</AccordionContent>
|
|
71
|
+
</AccordionItem>
|
|
72
|
+
</Accordion>
|
|
73
|
+
);
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Components
|
|
77
|
+
|
|
78
|
+
| Component group | Primitives |
|
|
79
|
+
|---|---|
|
|
80
|
+
| **Dialog** | Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose |
|
|
81
|
+
| **Popover** | Popover, PopoverTrigger, PopoverPortal, PopoverContent, PopoverClose, PopoverArrow, PopoverAnchor |
|
|
82
|
+
| **Tooltip** | TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow |
|
|
83
|
+
| **Accordion** | Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent |
|
|
84
|
+
| **Tabs** | Tabs, TabsList, TabsTrigger, TabsContent |
|
|
85
|
+
| **Collapsible** | Collapsible, CollapsibleTrigger, CollapsibleContent |
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
Plumeria is MIT licensed.
|
package/package.json
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plumeria/headlessui",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.2.0",
|
|
4
4
|
"description": "Headless UI components wrapper for Plumeria based on Radix UI",
|
|
5
5
|
"author": "Refirst 11",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"funding": "https://github.com/sponsors/refirst11",
|
|
8
|
+
"homepage": "https://plumeria.dev",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/zss-in-js/plumeria.git",
|
|
12
|
+
"directory": "packages/headlessui"
|
|
13
|
+
},
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/zss-in-js/plumeria/issues"
|
|
16
|
+
},
|
|
7
17
|
"type": "module",
|
|
8
18
|
"main": "./dist/index.js",
|
|
9
19
|
"types": "./dist/index.d.ts",
|
|
@@ -16,9 +26,6 @@
|
|
|
16
26
|
"files": [
|
|
17
27
|
"dist/"
|
|
18
28
|
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"build": "rimraf dist && tsc"
|
|
21
|
-
},
|
|
22
29
|
"dependencies": {
|
|
23
30
|
"@radix-ui/react-accordion": "^1.2.3",
|
|
24
31
|
"@radix-ui/react-collapsible": "^1.1.3",
|
|
@@ -28,11 +35,15 @@
|
|
|
28
35
|
"@radix-ui/react-tooltip": "^1.1.8"
|
|
29
36
|
},
|
|
30
37
|
"devDependencies": {
|
|
31
|
-
"@plumeria/core": "^14.1.2",
|
|
32
38
|
"@types/react": "^19.2.14",
|
|
33
|
-
"@types/react-dom": "^19.2.3"
|
|
39
|
+
"@types/react-dom": "^19.2.3",
|
|
40
|
+
"@plumeria/core": "^14.2.0"
|
|
34
41
|
},
|
|
35
42
|
"publishConfig": {
|
|
36
|
-
"access": "public"
|
|
43
|
+
"access": "public",
|
|
44
|
+
"provenance": true
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "rimraf dist && tsc"
|
|
37
48
|
}
|
|
38
|
-
}
|
|
49
|
+
}
|