Skip to content

Commit 6157087

Browse files
ecklfecklf
authored
Merge pull request #57 from ecklf/ecklf/v4
[WIP] support v4
2 parents bbc3ba1 + 85721b9 commit 6157087

35 files changed

+503
-651
lines changed

‎README.md

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<div align="center">
1515

16-
<a href="https://tailwindcss.com">![tailwindcss v3 ready](https://img.shields.io/badge/tailwindcss-v3%20ready-0F172A?logo=tailwindcss&style=flat&labelColor=38bdf8&logoColor=ffffff)</a>
16+
<a href="https://tailwindcss.com">![tailwindcss v4 ready](https://img.shields.io/badge/tailwindcss-v4%20ready-0F172A?logo=tailwindcss&style=flat&labelColor=38bdf8&logoColor=ffffff)</a>
1717
<a href="https://www.npmjs.com/package/tailwindcss-radix">![npm version](https://img.shields.io/npm/v/tailwindcss-radix.svg)</a>
1818
<a href="https://www.npmjs.com/package/tailwindcss-radix">![npm downloads](https://img.shields.io/npm/dm/tailwindcss-radix.svg)</a>
1919

@@ -28,6 +28,9 @@ The main purpose of this library is adding classnames for accessing Radix data a
2828
## Installation
2929

3030
```sh
31+
# For v3 compatibility
32+
pnpm add tailwindcss-radix@3
33+
# For v4 compatibility
3134
pnpm add tailwindcss-radix
3235
```
3336

@@ -37,7 +40,7 @@ Click on the banner to check out the demo components. You can find the code insi
3740

3841
## Usage
3942

40-
Add the plugin to your plugins array:
43+
### Using the [config directive](https://tailwindcss.com/docs/functions-and-directives#config-directive):
4144

4245
```js
4346
module.exports = {
@@ -48,27 +51,34 @@ module.exports = {
4851
// --snip--
4952
},
5053
plugins: [
51-
// Initialize with default values (see options below)
54+
// Default prefix: `radix`
5255
require("tailwindcss-radix")(),
56+
// Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"`
57+
// require("tailwindcss-radix")({
58+
// variantPrefix: "rdx",
59+
// }),
5360
],
5461
};
5562
```
5663

57-
### Options
58-
59-
```ts
60-
require("tailwindcss-radix")({
61-
// Default: `radix`
62-
variantPrefix: "rdx",
63-
});
64+
```css
65+
@config "../../tailwind.config.js";
6466
```
6567

66-
```ts
67-
// Example 1: Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"`
68-
variantPrefix: "rdx",
68+
### Using the [plugin directive](https://tailwindcss.com/docs/functions-and-directives#plugin-directive):
69+
70+
With defaults:
71+
```css
72+
/* Default prefix: `radix` */
73+
@plugin "tailwindcss-radix";
74+
```
6975

70-
// Example 2: Generates `[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"`
71-
variantPrefix: false,
76+
With custom prefix:
77+
```css
78+
/* Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` */
79+
@plugin "tailwindcss-radix" {
80+
variantPrefix: rdx;
81+
}
7282
```
7383

7484
### Styling state
@@ -505,11 +515,10 @@ In case you use `content-available` utilities:
505515
</p>
506516
</details>
507517

518+
## Migrate from v3
519+
520+
- Support for disabled `variantPrefix` has been removed. Please use a prefix instead.
521+
508522
## License
509523

510524
[MIT](LICENSE)
511-
512-
<!-- [<img src="https://raw.githubusercontent.com/ecklf/tailwindcss-radix/main/demo/public/static/og.png" width="967">](https://tailwindcss-radix.vercel.app)
513-
[![tailwindcss v3 ready](https://img.shields.io/badge/tailwindcss-v3%20ready-0F172A?logo=tailwindcss&style=flat&labelColor=38bdf8&logoColor=ffffff)](https://tailwindcss.com)
514-
[![npm version](https://img.shields.io/npm/v/tailwindcss-radix.svg)](https://www.npmjs.com/package/tailwindcss-radix)
515-
[![npm downloads](https://img.shields.io/npm/dm/tailwindcss-radix.svg)](https://www.npmjs.com/package/tailwindcss-radix) -->

‎demo/components/accordion.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ const Accordion = () => {
3636
<AccordionPrimitive.Item
3737
key={`accordion-header-${header}`}
3838
value={`item-${i + 1}`}
39-
className="rounded-lg focus-within:ring focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:outline-none w-full"
39+
className="rounded-lg focus-within:ring-3 focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:outline-hidden w-full"
4040
>
4141
<AccordionPrimitive.Header className="w-full">
4242
<AccordionPrimitive.Trigger
4343
className={clsx(
4444
"group",
4545
"radix-state-open:rounded-t-lg radix-state-closed:rounded-lg",
46-
"focus:outline-none",
46+
"focus:outline-hidden",
4747
"inline-flex w-full items-center justify-between bg-white px-4 py-2 text-left dark:bg-gray-800"
4848
)}
4949
>

‎demo/components/alert-dialog.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const AlertDialog = () => {
4444
"w-[95vw] max-w-md rounded-lg p-4 md:w-full",
4545
"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
4646
"bg-white dark:bg-gray-800",
47-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
47+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
4848
)}
4949
>
5050
<AlertDialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
@@ -58,9 +58,9 @@ const AlertDialog = () => {
5858
<AlertDialogPrimitive.Cancel
5959
className={clsx(
6060
"inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
61-
"bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 hover:dark:bg-gray-600",
61+
"bg-white text-gray-900 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
6262
"border border-gray-300 dark:border-transparent",
63-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
63+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
6464
)}
6565
>
6666
Cancel
@@ -70,7 +70,7 @@ const AlertDialog = () => {
7070
"inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
7171
"bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600",
7272
"border border-transparent",
73-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
73+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
7474
)}
7575
>
7676
Confirm

‎demo/components/aspect-ratio.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const AspectRatio = () => {
1010
className="group relative h-full w-full overflow-hidden rounded-lg shadow-md"
1111
>
1212
<div className="absolute inset-0 z-10 flex items-center justify-center">
13-
<h3 className="select-none bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-3xl font-black uppercase text-transparent duration-300 ease-in-out group-hover:opacity-0 sm:text-4xl">
13+
<h3 className="select-none bg-linear-to-r from-green-400 to-blue-500 bg-clip-text text-3xl font-black uppercase text-transparent duration-300 ease-in-out group-hover:opacity-0 sm:text-4xl">
1414
Vancouver
1515
</h3>
1616
</div>

‎demo/components/avatar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Avatar = ({
4444
"h-full w-full object-cover",
4545
{
4646
[Variant.Circle]: "rounded-full",
47-
[Variant.Rounded]: "rounded",
47+
[Variant.Rounded]: "rounded-sm",
4848
}[variant]
4949
)}
5050
/>
@@ -66,7 +66,7 @@ const Avatar = ({
6666
"flex h-full w-full items-center justify-center bg-white dark:bg-gray-800",
6767
{
6868
[Variant.Circle]: "rounded-full",
69-
[Variant.Rounded]: "rounded",
69+
[Variant.Rounded]: "rounded-sm",
7070
}[variant]
7171
)}
7272
delayMs={600}

‎demo/components/checkbox.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const Checkbox = () => {
1111
id="c1"
1212
defaultChecked
1313
className={clsx(
14-
"flex h-5 w-5 items-center justify-center rounded",
14+
"flex h-5 w-5 items-center justify-center rounded-sm",
1515
"radix-state-checked:bg-purple-600 radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900",
16-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
16+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
1717
)}
1818
>
1919
<CheckboxPrimitive.Indicator>

‎demo/components/collapsible.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Collapsible = () => {
1212
className={clsx(
1313
"group flex w-full select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium",
1414
"bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100",
15-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
15+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
1616
)}
1717
>
1818
<div>My Playlists</div>

‎demo/components/context-menu.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,12 @@ const ContextMenu = () => {
9292
<ContextMenuPrimitive.Item
9393
key={`context-item-${label}`}
9494
className={clsx(
95-
"flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
95+
"flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden",
9696
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
9797
)}
9898
>
9999
{icon}
100-
<span className="flex-grow text-gray-700 dark:text-gray-300">
100+
<span className="grow text-gray-700 dark:text-gray-300">
101101
{label}
102102
</span>
103103
{shortcut && <span className="text-xs">{shortcut}</span>}
@@ -114,7 +114,7 @@ const ContextMenu = () => {
114114
}
115115
}}
116116
className={clsx(
117-
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
117+
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden",
118118
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
119119
)}
120120
>
@@ -123,7 +123,7 @@ const ContextMenu = () => {
123123
) : (
124124
<TransparencyGridIcon className="mr-2 h-3.5 w-3.5 text-gray-700 dark:text-gray-300" />
125125
)}
126-
<span className="flex-grow text-gray-700 dark:text-gray-300">
126+
<span className="grow text-gray-700 dark:text-gray-300">
127127
Show Grid
128128
</span>
129129
<ContextMenuPrimitive.ItemIndicator>
@@ -139,7 +139,7 @@ const ContextMenu = () => {
139139
}
140140
}}
141141
className={clsx(
142-
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
142+
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden",
143143
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
144144
)}
145145
>
@@ -148,7 +148,7 @@ const ContextMenu = () => {
148148
) : (
149149
<EyeClosedIcon className="mr-2 h-3.5 w-3.5" />
150150
)}
151-
<span className="flex-grow text-gray-700 dark:text-gray-300">
151+
<span className="grow text-gray-700 dark:text-gray-300">
152152
Show UI
153153
</span>
154154
<ContextMenuPrimitive.ItemIndicator>
@@ -166,12 +166,12 @@ const ContextMenu = () => {
166166
<ContextMenuPrimitive.Item
167167
key={`region-tool-menu-item-${label}`}
168168
className={clsx(
169-
"flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
169+
"flex cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden",
170170
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
171171
)}
172172
>
173173
{icon}
174-
<span className="flex-grow text-gray-700 dark:text-gray-300">
174+
<span className="grow text-gray-700 dark:text-gray-300">
175175
{label}
176176
</span>
177177
{shortcut && <span className="text-xs">{shortcut}</span>}
@@ -183,12 +183,12 @@ const ContextMenu = () => {
183183
<ContextMenuPrimitive.Sub>
184184
<ContextMenuPrimitive.SubTrigger
185185
className={clsx(
186-
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none",
186+
"flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden",
187187
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
188188
)}
189189
>
190190
<Link2Icon className="mr-2 h-3.5 w-3.5" />
191-
<span className="flex-grow text-gray-700 dark:text-gray-300">
191+
<span className="grow text-gray-700 dark:text-gray-300">
192192
Share
193193
</span>
194194
<CaretRightIcon className="h-3.5 w-3.5" />
@@ -205,7 +205,7 @@ const ContextMenu = () => {
205205
<ContextMenuPrimitive.Item
206206
key={`context-menu-primitive-item-${name}`}
207207
className={clsx(
208-
"flex w-28 cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none md:w-32",
208+
"flex w-28 cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden md:w-32",
209209
"text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900"
210210
)}
211211
>

‎demo/components/dialog.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Dialog = () => {
4545
"w-[95vw] max-w-md rounded-lg p-4 md:w-full",
4646
"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
4747
"bg-white dark:bg-gray-800",
48-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
48+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
4949
)}
5050
>
5151
<DialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
@@ -73,7 +73,7 @@ const Dialog = () => {
7373
"mt-1 block w-full rounded-md",
7474
"text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600",
7575
"border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800",
76-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
76+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
7777
)}
7878
/>
7979
</fieldset>
@@ -93,7 +93,7 @@ const Dialog = () => {
9393
"mt-1 block w-full rounded-md",
9494
"text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600",
9595
"border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800",
96-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
96+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
9797
)}
9898
/>
9999
</fieldset>
@@ -105,7 +105,7 @@ const Dialog = () => {
105105
"inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium",
106106
"bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600",
107107
"border border-transparent",
108-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
108+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
109109
)}
110110
>
111111
Save
@@ -115,7 +115,7 @@ const Dialog = () => {
115115
<DialogPrimitive.Close
116116
className={clsx(
117117
"absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1",
118-
"focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
118+
"focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
119119
)}
120120
>
121121
<Cross1Icon className="h-4 w-4 text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400" />

0 commit comments

Comments
 (0)