diff --git a/.husky/pre-commit b/.husky/pre-commit index 20d0d06..98475b5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -npm run lint +pnpm test diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 3f13245..0000000 --- a/.prettierignore +++ /dev/null @@ -1,6 +0,0 @@ -# Add files here to ignore them from prettier formatting - -/dist -/coverage -.next/ -**/*.yaml \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index f0eb61e..0000000 --- a/.prettierrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "trailingComma": "es5", - "tabWidth": 2, - "semi": true, - "singleQuote": false -} diff --git a/README.md b/README.md index 73881ca..b8fcb30 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@
-![tailwindcss v3 ready](https://img.shields.io/badge/tailwindcss-v3%20ready-0F172A?logo=tailwindcss&style=flat&labelColor=38bdf8&logoColor=ffffff) +![tailwindcss v4 ready](https://img.shields.io/badge/tailwindcss-v4%20ready-0F172A?logo=tailwindcss&style=flat&labelColor=38bdf8&logoColor=ffffff) ![npm version](https://img.shields.io/npm/v/tailwindcss-radix.svg) ![npm downloads](https://img.shields.io/npm/dm/tailwindcss-radix.svg) @@ -28,6 +28,9 @@ The main purpose of this library is adding classnames for accessing Radix data a ## Installation ```sh +# For v3 compatibility +pnpm add tailwindcss-radix@3 +# For v4 compatibility pnpm add tailwindcss-radix ``` @@ -37,38 +40,51 @@ Click on the banner to check out the demo components. You can find the code insi ## Usage -Add the plugin to your plugins array: +### With [@plugin directive](https://tailwindcss.com/docs/functions-and-directives#plugin-directive) (recommended) +**Default prefix** +```css +/* Generates `radix-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` */ +@plugin "tailwindcss-radix"; +``` + +**Custom prefix** +```css +/* Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` */ +@plugin "tailwindcss-radix" { + variantPrefix: rdx; +} +``` + +### With [@config directive](https://tailwindcss.com/docs/functions-and-directives#config-directive) + +**Default prefix** ```js module.exports = { - theme: { - // --snip-- - }, - variants: { - // --snip-- - }, + // --snip -- plugins: [ - // Initialize with default values (see options below) + // Generates `radix-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` require("tailwindcss-radix")(), ], }; ``` -### Options - -```ts -require("tailwindcss-radix")({ - // Default: `radix` - variantPrefix: "rdx", -}); +**Custom prefix** +```js +module.exports = { + // --snip -- + plugins: [ + // Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` + require("tailwindcss-radix")({ + variantPrefix: "rdx", + }), + ], +}; ``` -```ts -// Example 1: Generates `rdx-[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` -variantPrefix: "rdx", - -// Example 2: Generates `[state/side/orientation]-*` utilities for `data-[state/side/orientation]="*"` -variantPrefix: false, +**Load configuration** +```css +@config "../../tailwind.config.js"; ``` ### Styling state @@ -505,11 +521,10 @@ In case you use `content-available` utilities:

+## Migrate from v3 + +- Support for disabled `variantPrefix` has been removed. Please use a prefix instead. + ## License [MIT](LICENSE) - - diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..eece8ce --- /dev/null +++ b/biome.json @@ -0,0 +1,39 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", + "formatter": { + "enabled": true, + "formatWithErrors": false, + "indentStyle": "space", + "indentWidth": 2, + "lineEnding": "lf", + "lineWidth": 80, + "attributePosition": "auto", + "ignore": ["dist/", "coverage/", "**/.next/**", "**/*.yaml"] + }, + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "complexity": { + "noForEach": "off" + } + }, + "ignore": ["dist/", "coverage/", "**/.next/**", "**/*.yaml"] + }, + "javascript": { + "formatter": { + "jsxQuoteStyle": "double", + "quoteProperties": "asNeeded", + "trailingCommas": "es5", + "semicolons": "always", + "arrowParentheses": "always", + "bracketSpacing": true, + "bracketSameLine": false, + "quoteStyle": "double", + "attributePosition": "auto" + } + } +} diff --git a/demo/components/accordion.tsx b/demo/components/accordion.tsx index a8f4573..e85bc15 100644 --- a/demo/components/accordion.tsx +++ b/demo/components/accordion.tsx @@ -25,9 +25,7 @@ const items: AccordionItem[] = [ }, ]; -interface AccordionProps {} - -const Accordion = (props: AccordionProps) => { +const Accordion = () => { return ( { > {items.map(({ header, content }, i) => ( @@ -55,13 +52,23 @@ const Accordion = (props: AccordionProps) => { - -
+ +
{content}
diff --git a/demo/components/alert-dialog.tsx b/demo/components/alert-dialog.tsx index f24ad5f..80257f3 100644 --- a/demo/components/alert-dialog.tsx +++ b/demo/components/alert-dialog.tsx @@ -4,10 +4,8 @@ import { clsx } from "clsx"; import React, { Fragment, useState } from "react"; import Button from "./shared/button"; -interface AlertDialogProps {} - -const AlertDialog = (props: AlertDialogProps) => { - let [isOpen, setIsOpen] = useState(false); +const AlertDialog = () => { + const [isOpen, setIsOpen] = useState(false); return ( @@ -46,7 +44,7 @@ const AlertDialog = (props: AlertDialogProps) => { "w-[95vw] max-w-md rounded-lg p-4 md:w-full", "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "bg-white dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > @@ -60,9 +58,9 @@ const AlertDialog = (props: AlertDialogProps) => { Cancel @@ -72,7 +70,7 @@ const AlertDialog = (props: AlertDialogProps) => { "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium", "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600", "border border-transparent", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > Confirm diff --git a/demo/components/aspect-ratio.tsx b/demo/components/aspect-ratio.tsx index 51d3d1f..3197128 100644 --- a/demo/components/aspect-ratio.tsx +++ b/demo/components/aspect-ratio.tsx @@ -2,9 +2,7 @@ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; import { clsx } from "clsx"; import React, { Fragment } from "react"; -interface AspectRatioProps {} - -const AspectRatio = (props: AspectRatioProps) => { +const AspectRatio = () => { return ( { className="group relative h-full w-full overflow-hidden rounded-lg shadow-md" >
-

+

Vancouver

{/* eslint-disable-next-line @next/next/no-img-element */} diff --git a/demo/components/avatar.tsx b/demo/components/avatar.tsx index e333388..ab7f89c 100644 --- a/demo/components/avatar.tsx +++ b/demo/components/avatar.tsx @@ -4,8 +4,8 @@ import React, { Fragment } from "react"; import { getRandomInitials } from "../utils/random"; enum Variant { - Circle, - Rounded, + Circle = 0, + Rounded = 1, } type AvatarProps = { @@ -14,7 +14,7 @@ type AvatarProps = { isOnline?: boolean; }; -let users = [ +const users = [ "https://images.unsplash.com/photo-1573607217032-18299406d100?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80", "https://images.unsplash.com/photo-1594089426440-ab4513b4d0d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80", "https://images.unsplash.com/photo-1549237511-6b64e006ce65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80", @@ -32,9 +32,9 @@ const Avatar = ({ return ( - {urls.map((src, i) => ( + {urls.map((src) => ( {isOnline && ( @@ -55,7 +55,7 @@ const Avatar = ({ { [Variant.Circle]: "-translate-x-1/2 -translate-y-1/2", [Variant.Rounded]: "", - }[variant], + }[variant] )} > @@ -66,8 +66,8 @@ const Avatar = ({ "flex h-full w-full items-center justify-center bg-white dark:bg-gray-800", { [Variant.Circle]: "rounded-full", - [Variant.Rounded]: "rounded", - }[variant], + [Variant.Rounded]: "rounded-sm", + }[variant] )} delayMs={600} > diff --git a/demo/components/checkbox.tsx b/demo/components/checkbox.tsx index 36939e6..76992f3 100644 --- a/demo/components/checkbox.tsx +++ b/demo/components/checkbox.tsx @@ -4,18 +4,16 @@ import * as LabelPrimitive from "@radix-ui/react-label"; import { clsx } from "clsx"; import React from "react"; -interface CheckboxProps {} - -const Checkbox = (props: CheckboxProps) => { +const Checkbox = () => { return (
diff --git a/demo/components/collapsible.tsx b/demo/components/collapsible.tsx index 53e2d1b..c87c774 100644 --- a/demo/components/collapsible.tsx +++ b/demo/components/collapsible.tsx @@ -3,9 +3,7 @@ import { PlayIcon, Share2Icon, TriangleRightIcon } from "@radix-ui/react-icons"; import { clsx } from "clsx"; import React from "react"; -interface CollapsibleProps {} - -const Collapsible = (props: CollapsibleProps) => { +const Collapsible = () => { const [isOpen, setIsOpen] = React.useState(true); return ( @@ -14,31 +12,38 @@ const Collapsible = (props: CollapsibleProps) => { className={clsx( "group flex w-full select-none items-center justify-between rounded-md px-4 py-2 text-left text-sm font-medium", "bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} >
My Playlists
- - {["80s Synthwave", "Maximale Konzentration", "高人氣金曲"].map( - (title, i) => ( -
- {title} -
- - -
-
- ), + +
+ {["80s Synthwave", "Maximale Konzentration", "高人氣金曲"].map( + (title) => ( +
+ {title} +
+ + +
+
+ ) + )} +
); diff --git a/demo/components/context-menu.tsx b/demo/components/context-menu.tsx index 43f4847..36ff9cd 100644 --- a/demo/components/context-menu.tsx +++ b/demo/components/context-menu.tsx @@ -14,7 +14,7 @@ import { TransparencyGridIcon, } from "@radix-ui/react-icons"; import { clsx } from "clsx"; -import React, { ReactNode, useState } from "react"; +import React, { type ReactNode, useState } from "react"; import Button from "./shared/button"; interface RadixMenuItem { @@ -69,11 +69,9 @@ const users: User[] = [ }, ]; -interface ContextMenuProps {} - -const ContextMenu = (props: ContextMenuProps) => { - const [showGrid, setShowGrid] = useState(false); - const [showUi, setShowUi] = useState(false); +const ContextMenu = () => { + const [showGrid, setShowGrid] = useState(false); + const [showUi, setShowUi] = useState(false); return (
@@ -87,19 +85,19 @@ const ContextMenu = (props: ContextMenuProps) => { className={clsx( "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down", "w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56", - "bg-white dark:bg-gray-800", + "bg-white dark:bg-gray-800" )} > - {generalMenuItems.map(({ label, icon, shortcut }, i) => ( + {generalMenuItems.map(({ label, icon, shortcut }) => ( {icon} - + {label} {shortcut && {shortcut}} @@ -111,11 +109,13 @@ const ContextMenu = (props: ContextMenuProps) => { { - setShowGrid(state); + if (typeof state === "boolean") { + setShowGrid(state); + } }} className={clsx( - "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none", - "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900", + "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden", + "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900" )} > {showGrid ? ( @@ -123,7 +123,7 @@ const ContextMenu = (props: ContextMenuProps) => { ) : ( )} - + Show Grid @@ -134,11 +134,13 @@ const ContextMenu = (props: ContextMenuProps) => { { - setShowUi(state); + if (typeof state === "boolean") { + setShowUi(state); + } }} className={clsx( - "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none", - "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900", + "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden", + "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900" )} > {showUi ? ( @@ -146,7 +148,7 @@ const ContextMenu = (props: ContextMenuProps) => { ) : ( )} - + Show UI @@ -160,16 +162,16 @@ const ContextMenu = (props: ContextMenuProps) => { Region Tools - {regionToolMenuItems.map(({ label, icon, shortcut }, i) => ( + {regionToolMenuItems.map(({ label, icon, shortcut }) => ( {icon} - + {label} {shortcut && {shortcut}} @@ -181,12 +183,12 @@ const ContextMenu = (props: ContextMenuProps) => { - + Share @@ -196,20 +198,21 @@ const ContextMenu = (props: ContextMenuProps) => { className={clsx( "origin-radix-context-menu radix-side-right:animate-scale-in", "w-full rounded-md px-1 py-1 text-xs shadow-md", - "bg-white dark:bg-gray-800", + "bg-white dark:bg-gray-800" )} > {users.map(({ name, url }, i) => ( {url ? ( ) : ( diff --git a/demo/components/dialog.tsx b/demo/components/dialog.tsx index d842de4..9ae0633 100644 --- a/demo/components/dialog.tsx +++ b/demo/components/dialog.tsx @@ -5,10 +5,8 @@ import { clsx } from "clsx"; import React, { Fragment, useState } from "react"; import Button from "./shared/button"; -interface DialogProps {} - -const Dialog = (props: DialogProps) => { - let [isOpen, setIsOpen] = useState(false); +const Dialog = () => { + const [isOpen, setIsOpen] = useState(false); return ( @@ -47,7 +45,7 @@ const Dialog = (props: DialogProps) => { "w-[95vw] max-w-md rounded-lg p-4 md:w-full", "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", "bg-white dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > @@ -75,7 +73,7 @@ const Dialog = (props: DialogProps) => { "mt-1 block w-full rounded-md", "text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600", "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} /> @@ -95,7 +93,7 @@ const Dialog = (props: DialogProps) => { "mt-1 block w-full rounded-md", "text-sm text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600", "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} /> @@ -107,7 +105,7 @@ const Dialog = (props: DialogProps) => { "inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium", "bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-700 dark:text-gray-100 dark:hover:bg-purple-600", "border border-transparent", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > Save @@ -117,7 +115,7 @@ const Dialog = (props: DialogProps) => { diff --git a/demo/components/dropdown-menu.tsx b/demo/components/dropdown-menu.tsx index 4c36c96..5beb85e 100644 --- a/demo/components/dropdown-menu.tsx +++ b/demo/components/dropdown-menu.tsx @@ -14,7 +14,7 @@ import { TransparencyGridIcon, } from "@radix-ui/react-icons"; import { clsx } from "clsx"; -import React, { ReactNode, useState } from "react"; +import React, { type ReactNode, useState } from "react"; import Button from "./shared/button"; interface RadixMenuItem { @@ -69,9 +69,7 @@ const users: User[] = [ }, ]; -interface DropdownMenuProps {} - -const DropdownMenu = (props: DropdownMenuProps) => { +const DropdownMenu = () => { const [showGrid, setShowGrid] = useState(false); const [showUi, setShowUi] = useState(false); @@ -89,19 +87,19 @@ const DropdownMenu = (props: DropdownMenuProps) => { className={clsx( "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down", "w-48 rounded-lg px-1.5 py-1 shadow-md md:w-56", - "bg-white dark:bg-gray-800", + "bg-white dark:bg-gray-800" )} > - {generalMenuItems.map(({ label, icon, shortcut }, i) => ( + {generalMenuItems.map(({ label, icon, shortcut }) => ( {icon} - + {label} {shortcut && {shortcut}} @@ -113,11 +111,13 @@ const DropdownMenu = (props: DropdownMenuProps) => { { - setShowGrid(state); + if (typeof state === "boolean") { + setShowGrid(state); + } }} className={clsx( - "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none", - "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900", + "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden", + "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900" )} > {showGrid ? ( @@ -125,7 +125,7 @@ const DropdownMenu = (props: DropdownMenuProps) => { ) : ( )} - + Show Grid @@ -136,11 +136,13 @@ const DropdownMenu = (props: DropdownMenuProps) => { { - setShowUi(state); + if (typeof state === "boolean") { + setShowUi(state); + } }} className={clsx( - "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-none", - "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900", + "flex w-full cursor-default select-none items-center rounded-md px-2 py-2 text-xs outline-hidden", + "text-gray-400 focus:bg-gray-50 dark:text-gray-500 dark:focus:bg-gray-900" )} > {showUi ? ( @@ -148,7 +150,7 @@ const DropdownMenu = (props: DropdownMenuProps) => { ) : ( )} - + Show UI @@ -162,16 +164,16 @@ const DropdownMenu = (props: DropdownMenuProps) => { Region Tools - {regionToolMenuItems.map(({ label, icon, shortcut }, i) => ( + {regionToolMenuItems.map(({ label, icon, shortcut }) => ( {icon} - + {label} {shortcut && {shortcut}} @@ -183,12 +185,12 @@ const DropdownMenu = (props: DropdownMenuProps) => { - + Share @@ -198,19 +200,20 @@ const DropdownMenu = (props: DropdownMenuProps) => { className={clsx( "origin-radix-dropdown-menu radix-side-right:animate-scale-in", "w-full rounded-md px-1 py-1 text-xs shadow-md", - "bg-white dark:bg-gray-800", + "bg-white dark:bg-gray-800" )} > - {users.map(({ name, url }, i) => ( + {users.map(({ name, url }) => ( {url ? ( diff --git a/demo/components/hover-card.tsx b/demo/components/hover-card.tsx index 752d6f7..46ba329 100644 --- a/demo/components/hover-card.tsx +++ b/demo/components/hover-card.tsx @@ -9,6 +9,7 @@ const TailwindLogo = () => ( fill="none" xmlns="http://www.w3.org/2000/svg" > + Tailwind Logo ( ); -interface HoverCardProps {} - -const HoverCard = (props: HoverCardProps) => { +const HoverCard = () => { return (
@@ -37,7 +36,7 @@ const HoverCard = (props: HoverCardProps) => { " radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down", "max-w-md rounded-lg p-4 md:w-full", "bg-white dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > @@ -45,7 +44,7 @@ const HoverCard = (props: HoverCardProps) => {
diff --git a/demo/components/menubar.tsx b/demo/components/menubar.tsx index 59738a0..c5c980e 100644 --- a/demo/components/menubar.tsx +++ b/demo/components/menubar.tsx @@ -34,7 +34,7 @@ const MenubarTrigger = ({ children, ...rest }: MenubarTriggerProps) => ( "px-4 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} {...rest} > @@ -54,7 +54,7 @@ const MenubarSubTrigger = ({ children, ...rest }: MenubarSubTriggerProps) => ( "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} {...rest} > @@ -79,7 +79,7 @@ const MenubarItem = ({ children, shortcut, ...rest }: MenubarItemProps) => ( "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} {...rest} > @@ -111,7 +111,7 @@ const MenubarCheckboxItem = ({ "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} {...rest} > @@ -139,7 +139,7 @@ const MenubarRadioItem = ({ children, ...rest }: MenubarRadioItemProps) => ( "px-3 py-1 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} {...rest} > @@ -154,12 +154,10 @@ const MenubarRadioItem = ({ children, ...rest }: MenubarRadioItemProps) => ( ); -type MenubarProps = {}; - const RADIO_ITEMS = ["rauchg", "steventey", "0xca0a"]; const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"]; -const Menubar = (props: MenubarProps) => { +const Menubar = () => { const [checkedSelection, setCheckedSelection] = React.useState([ CHECK_ITEMS[1], ]); @@ -258,7 +256,7 @@ const Menubar = (props: MenubarProps) => { setCheckedSelection((current) => current.includes(item) ? current.filter((el) => el !== item) - : current.concat(item), + : current.concat(item) ) } > diff --git a/demo/components/navigation-menu.tsx b/demo/components/navigation-menu.tsx index 84fcac8..6603a01 100644 --- a/demo/components/navigation-menu.tsx +++ b/demo/components/navigation-menu.tsx @@ -2,9 +2,7 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; import { clsx } from "clsx"; import React from "react"; -type NavigationMenuProps = {}; - -const NavigationMenu = (props: NavigationMenuProps) => { +const NavigationMenu = () => { return ( @@ -14,7 +12,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium", "text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > Overview @@ -26,18 +24,18 @@ const NavigationMenu = (props: NavigationMenuProps) => { "radix-motion-from-start:animate-enter-from-left", "radix-motion-from-end:animate-enter-from-right", "radix-motion-to-start:animate-exit-to-left", - "radix-motion-to-end:animate-exit-to-right", + "radix-motion-to-end:animate-exit-to-right" )} >
-
+
-
-
-
-
+
+
+
+
@@ -49,7 +47,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { className={clsx( "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", "text-sm font-medium text-gray-700 dark:text-gray-100", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} > Resources @@ -61,7 +59,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { "radix-motion-from-start:animate-enter-from-left", "radix-motion-from-end:animate-enter-from-right", "radix-motion-to-start:animate-exit-to-left", - "radix-motion-to-end:animate-exit-to-right", + "radix-motion-to-end:animate-exit-to-right" )} >
@@ -69,7 +67,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { @@ -86,7 +84,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { @@ -109,7 +107,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { href="https://github.com/ecklf/tailwindcss-radix" className={clsx( "px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-900", - "text-sm font-medium text-gray-700 dark:text-gray-100", + "text-sm font-medium text-gray-700 dark:text-gray-100" )} > GitHub @@ -122,7 +120,7 @@ const NavigationMenu = (props: NavigationMenuProps) => { "top-[100%] flex items-end justify-center h-2 overflow-hidden", "radix-state-visible:animate-fade-in", "radix-state-hidden:animate-fade-out", - "transition-[width_transform] duration-[250ms] ease-[ease]", + "transition-[width_transform] duration-[250ms] ease-[ease]" )} >
@@ -132,7 +130,7 @@ const NavigationMenu = (props: NavigationMenuProps) => {
{ "h-radix-navigation-menu-viewport", "radix-state-open:animate-scale-in-content", "radix-state-closed:animate-scale-out-content", - "origin-[top_center] transition-[width_height] duration-300 ease-[ease]", + "origin-[top_center] transition-[width_height] duration-300 ease-[ease]" )} />
diff --git a/demo/components/popover.tsx b/demo/components/popover.tsx index 947a759..db70fb8 100644 --- a/demo/components/popover.tsx +++ b/demo/components/popover.tsx @@ -4,8 +4,6 @@ import { clsx } from "clsx"; import React from "react"; import Button from "./shared/button"; -interface PopoverProps {} - const items = [ { id: "width", @@ -29,7 +27,7 @@ const items = [ }, ]; -const Popover = (props: PopoverProps) => { +const Popover = () => { return (
@@ -42,7 +40,7 @@ const Popover = (props: PopoverProps) => { className={clsx( "radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down", "z-50 w-48 rounded-lg p-4 shadow-md md:w-56", - "bg-white dark:bg-gray-800", + "bg-white dark:bg-gray-800" )} > @@ -72,7 +70,7 @@ const Popover = (props: PopoverProps) => { "block w-1/2 rounded-md", "text-xs text-gray-700 placeholder:text-gray-500 dark:text-gray-400 dark:placeholder:text-gray-600", "border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-gray-800", - "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75", + "focus:outline-hidden focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75" )} /> @@ -83,7 +81,7 @@ const Popover = (props: PopoverProps) => { diff --git a/demo/components/progress.tsx b/demo/components/progress.tsx index 248e619..0a03182 100644 --- a/demo/components/progress.tsx +++ b/demo/components/progress.tsx @@ -2,9 +2,7 @@ import * as ProgressPrimitive from "@radix-ui/react-progress"; import React, { useEffect } from "react"; import { getRandomArbitrary } from "../utils/math"; -interface ProgressProps {} - -const Progress = (props: ProgressProps) => { +const Progress = () => { const [progress, setProgress] = React.useState(60); useEffect(() => { diff --git a/demo/components/radio-group.tsx b/demo/components/radio-group.tsx index b94569d..d080079 100644 --- a/demo/components/radio-group.tsx +++ b/demo/components/radio-group.tsx @@ -2,16 +2,14 @@ import { clsx } from "clsx"; import React from "react"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; -interface RadioGroupProps {} - const starters = [ { id: "red", title: "Bulbasaur" }, { id: "green", title: "Charmader" }, { id: "blue", title: "Squirtle" }, ]; -const RadioGroup = (props: RadioGroupProps) => { - const [value, setValue] = React.useState(starters[0].title); +const RadioGroup = () => { + const [_value, setValue] = React.useState(starters[0].title); return ( @@ -35,11 +33,11 @@ const RadioGroup = (props: RadioGroupProps) => { "border border-transparent text-white", "radix-state-checked:bg-purple-600", "radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900", - "focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800", + "focus:outline-hidden focus:ring-0 focus:ring-offset-0 focus-visible:ring-3 focus-visible:ring-purple-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800" )} > -
+