Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]
|
da0bfd5e22 | ||
|
Junior Garcia
|
92ed806cbd | ||
|
Junior Garcia
|
71e69deb63 | ||
|
Junior Garcia
|
ea9e0de1cc | ||
|
Junior Garcia
|
07a0158d92 | ||
|
Junior Garcia
|
64786694a7 | ||
|
Junior Garcia
|
261b0fb489 | ||
|
github-actions[bot]
|
1fc31d3107 | ||
|
Junior Garcia
|
3eeb6005cc | ||
|
Junior Garcia
|
0332a411ed | ||
|
Junior Garcia
|
8e732e51f3 | ||
|
winches
|
7ed5ba61e8 | ||
|
github-actions[bot]
|
807f0096b4 |
@@ -0,0 +1,89 @@
|
||||
---
|
||||
"@heroui/use-intersection-observer": patch
|
||||
"@heroui/use-data-scroll-overflow": patch
|
||||
"@heroui/use-aria-accordion-item": patch
|
||||
"@heroui/use-aria-modal-overlay": patch
|
||||
"@heroui/use-safe-layout-effect": patch
|
||||
"@heroui/use-aria-multiselect": patch
|
||||
"@heroui/use-infinite-scroll": patch
|
||||
"@heroui/use-scroll-position": patch
|
||||
"@heroui/react-rsc-utils": patch
|
||||
"@heroui/scroll-shadow": patch
|
||||
"@heroui/use-aria-accordion": patch
|
||||
"@heroui/autocomplete": patch
|
||||
"@heroui/number-input": patch
|
||||
"@heroui/use-update-effect": patch
|
||||
"@heroui/dom-animation": patch
|
||||
"@heroui/stories-utils": patch
|
||||
"@heroui/breadcrumbs": patch
|
||||
"@heroui/date-picker": patch
|
||||
"@heroui/use-callback-ref": patch
|
||||
"@heroui/framer-utils": patch
|
||||
"@heroui/shared-icons": patch
|
||||
"@heroui/shared-utils": patch
|
||||
"@heroui/date-input": patch
|
||||
"@heroui/pagination": patch
|
||||
"@heroui/use-aria-button": patch
|
||||
"@heroui/react-utils": patch
|
||||
"@heroui/accordion": patch
|
||||
"@heroui/input-otp": patch
|
||||
"@heroui/use-disclosure": patch
|
||||
"@heroui/use-is-mounted": patch
|
||||
"@heroui/use-pagination": patch
|
||||
"@heroui/use-real-shape": patch
|
||||
"@heroui/aria-utils": patch
|
||||
"@heroui/test-utils": patch
|
||||
"@heroui/calendar": patch
|
||||
"@heroui/checkbox": patch
|
||||
"@heroui/dropdown": patch
|
||||
"@heroui/progress": patch
|
||||
"@heroui/skeleton": patch
|
||||
"@heroui/use-aria-link": patch
|
||||
"@heroui/use-clipboard": patch
|
||||
"@heroui/use-draggable": patch
|
||||
"@heroui/use-is-mobile": patch
|
||||
"@heroui/use-ref-state": patch
|
||||
"@heroui/divider": patch
|
||||
"@heroui/listbox": patch
|
||||
"@heroui/popover": patch
|
||||
"@heroui/snippet": patch
|
||||
"@heroui/spinner": patch
|
||||
"@heroui/tooltip": patch
|
||||
"@heroui/avatar": patch
|
||||
"@heroui/button": patch
|
||||
"@heroui/drawer": patch
|
||||
"@heroui/navbar": patch
|
||||
"@heroui/ripple": patch
|
||||
"@heroui/select": patch
|
||||
"@heroui/slider": patch
|
||||
"@heroui/spacer": patch
|
||||
"@heroui/switch": patch
|
||||
"@heroui/use-measure": patch
|
||||
"@heroui/alert": patch
|
||||
"@heroui/badge": patch
|
||||
"@heroui/image": patch
|
||||
"@heroui/input": patch
|
||||
"@heroui/modal": patch
|
||||
"@heroui/radio": patch
|
||||
"@heroui/table": patch
|
||||
"@heroui/toast": patch
|
||||
"@heroui/use-resize": patch
|
||||
"@heroui/card": patch
|
||||
"@heroui/chip": patch
|
||||
"@heroui/code": patch
|
||||
"@heroui/form": patch
|
||||
"@heroui/link": patch
|
||||
"@heroui/menu": patch
|
||||
"@heroui/tabs": patch
|
||||
"@heroui/user": patch
|
||||
"@heroui/system-rsc": patch
|
||||
"@heroui/use-image": patch
|
||||
"@heroui/use-theme": patch
|
||||
"@heroui/kbd": patch
|
||||
"@heroui/use-ssr": patch
|
||||
"@heroui/system": patch
|
||||
"@heroui/react": patch
|
||||
"@heroui/theme": patch
|
||||
---
|
||||
|
||||
Fix deployment
|
||||
@@ -0,0 +1,97 @@
|
||||
{
|
||||
"mode": "pre",
|
||||
"tag": "beta",
|
||||
"initialVersions": {
|
||||
"@heroui/docs": "2.0.0",
|
||||
"@heroui/accordion": "2.2.13",
|
||||
"@heroui/alert": "2.2.16",
|
||||
"@heroui/autocomplete": "2.3.17",
|
||||
"@heroui/avatar": "2.2.12",
|
||||
"@heroui/badge": "2.2.10",
|
||||
"@heroui/breadcrumbs": "2.2.12",
|
||||
"@heroui/button": "2.2.16",
|
||||
"@heroui/calendar": "2.2.16",
|
||||
"@heroui/card": "2.2.15",
|
||||
"@heroui/checkbox": "2.3.15",
|
||||
"@heroui/chip": "2.2.12",
|
||||
"@heroui/code": "2.2.12",
|
||||
"@heroui/date-input": "2.3.15",
|
||||
"@heroui/date-picker": "2.3.16",
|
||||
"@heroui/divider": "2.2.11",
|
||||
"@heroui/drawer": "2.2.13",
|
||||
"@heroui/dropdown": "2.3.16",
|
||||
"@heroui/form": "2.1.15",
|
||||
"@heroui/image": "2.2.10",
|
||||
"@heroui/input": "2.4.16",
|
||||
"@heroui/input-otp": "2.1.15",
|
||||
"@heroui/kbd": "2.2.12",
|
||||
"@heroui/link": "2.2.13",
|
||||
"@heroui/listbox": "2.3.15",
|
||||
"@heroui/menu": "2.2.15",
|
||||
"@heroui/modal": "2.2.13",
|
||||
"@heroui/navbar": "2.2.14",
|
||||
"@heroui/number-input": "2.0.6",
|
||||
"@heroui/pagination": "2.2.14",
|
||||
"@heroui/popover": "2.3.16",
|
||||
"@heroui/progress": "2.2.12",
|
||||
"@heroui/radio": "2.3.15",
|
||||
"@heroui/ripple": "2.2.12",
|
||||
"@heroui/scroll-shadow": "2.3.10",
|
||||
"@heroui/select": "2.4.16",
|
||||
"@heroui/skeleton": "2.2.10",
|
||||
"@heroui/slider": "2.4.13",
|
||||
"@heroui/snippet": "2.2.17",
|
||||
"@heroui/spacer": "2.2.12",
|
||||
"@heroui/spinner": "2.2.13",
|
||||
"@heroui/switch": "2.2.14",
|
||||
"@heroui/table": "2.2.15",
|
||||
"@heroui/tabs": "2.2.13",
|
||||
"@heroui/toast": "2.0.6",
|
||||
"@heroui/tooltip": "2.2.13",
|
||||
"@heroui/user": "2.2.12",
|
||||
"@heroui/react": "2.7.5",
|
||||
"@heroui/system": "2.4.12",
|
||||
"@heroui/system-rsc": "2.3.11",
|
||||
"@heroui/theme": "2.4.12",
|
||||
"@heroui/use-aria-accordion": "2.2.8",
|
||||
"@heroui/use-aria-accordion-item": "2.2.8",
|
||||
"@heroui/use-aria-button": "2.2.10",
|
||||
"@heroui/use-aria-link": "2.2.11",
|
||||
"@heroui/use-aria-modal-overlay": "2.2.9",
|
||||
"@heroui/use-aria-multiselect": "2.4.9",
|
||||
"@heroui/use-callback-ref": "2.1.6",
|
||||
"@heroui/use-clipboard": "2.1.7",
|
||||
"@heroui/use-data-scroll-overflow": "2.2.7",
|
||||
"@heroui/use-disclosure": "2.2.8",
|
||||
"@heroui/use-draggable": "2.1.8",
|
||||
"@heroui/use-image": "2.1.7",
|
||||
"@heroui/use-infinite-scroll": "2.2.7",
|
||||
"@heroui/use-intersection-observer": "2.2.8",
|
||||
"@heroui/use-is-mobile": "2.2.7",
|
||||
"@heroui/use-is-mounted": "2.1.6",
|
||||
"@heroui/use-measure": "2.1.6",
|
||||
"@heroui/use-pagination": "2.2.9",
|
||||
"@heroui/use-real-shape": "2.1.8",
|
||||
"@heroui/use-ref-state": "2.1.6",
|
||||
"@heroui/use-resize": "2.1.6",
|
||||
"@heroui/use-safe-layout-effect": "2.1.6",
|
||||
"@heroui/use-scroll-position": "2.1.6",
|
||||
"@heroui/use-ssr": "2.1.6",
|
||||
"@heroui/use-theme": "2.1.6",
|
||||
"@heroui/use-update-effect": "2.1.6",
|
||||
"@heroui/storybook": "2.0.0",
|
||||
"@heroui/aria-utils": "2.2.13",
|
||||
"@heroui/dom-animation": "2.1.6",
|
||||
"@heroui/framer-utils": "2.1.12",
|
||||
"@heroui/react-rsc-utils": "2.1.6",
|
||||
"@heroui/react-utils": "2.1.8",
|
||||
"@heroui/shared-icons": "2.1.6",
|
||||
"@heroui/shared-utils": "2.1.7",
|
||||
"@heroui/stories-utils": "2.1.6",
|
||||
"@heroui/test-utils": "2.1.6"
|
||||
},
|
||||
"changesets": [
|
||||
"old-garlics-stare",
|
||||
"quiet-colts-add"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
"@heroui/autocomplete": patch
|
||||
"@heroui/date-input": patch
|
||||
"@heroui/pagination": patch
|
||||
"@heroui/dropdown": patch
|
||||
"@heroui/listbox": patch
|
||||
"@heroui/drawer": patch
|
||||
"@heroui/navbar": patch
|
||||
"@heroui/select": patch
|
||||
"@heroui/slider": patch
|
||||
"@heroui/alert": patch
|
||||
"@heroui/input": patch
|
||||
"@heroui/modal": patch
|
||||
"@heroui/menu": patch
|
||||
"@heroui/system-rsc": patch
|
||||
"@heroui/theme": patch
|
||||
"@heroui/accordion": patch
|
||||
"@heroui/avatar": patch
|
||||
"@heroui/badge": patch
|
||||
"@heroui/breadcrumbs": patch
|
||||
"@heroui/button": patch
|
||||
"@heroui/calendar": patch
|
||||
"@heroui/card": patch
|
||||
"@heroui/checkbox": patch
|
||||
"@heroui/chip": patch
|
||||
"@heroui/code": patch
|
||||
"@heroui/date-picker": patch
|
||||
"@heroui/divider": patch
|
||||
"@heroui/form": patch
|
||||
"@heroui/image": patch
|
||||
"@heroui/input-otp": patch
|
||||
"@heroui/kbd": patch
|
||||
"@heroui/link": patch
|
||||
"@heroui/number-input": patch
|
||||
"@heroui/popover": patch
|
||||
"@heroui/progress": patch
|
||||
"@heroui/radio": patch
|
||||
"@heroui/ripple": patch
|
||||
"@heroui/scroll-shadow": patch
|
||||
"@heroui/skeleton": patch
|
||||
"@heroui/snippet": patch
|
||||
"@heroui/spacer": patch
|
||||
"@heroui/spinner": patch
|
||||
"@heroui/switch": patch
|
||||
"@heroui/table": patch
|
||||
"@heroui/tabs": patch
|
||||
"@heroui/toast": patch
|
||||
"@heroui/tooltip": patch
|
||||
"@heroui/user": patch
|
||||
"@heroui/react": patch
|
||||
"@heroui/system": patch
|
||||
"@heroui/use-aria-accordion": patch
|
||||
"@heroui/use-aria-accordion-item": patch
|
||||
"@heroui/use-aria-button": patch
|
||||
"@heroui/use-aria-link": patch
|
||||
"@heroui/use-aria-modal-overlay": patch
|
||||
"@heroui/use-aria-multiselect": patch
|
||||
"@heroui/use-callback-ref": patch
|
||||
"@heroui/use-clipboard": patch
|
||||
"@heroui/use-data-scroll-overflow": patch
|
||||
"@heroui/use-disclosure": patch
|
||||
"@heroui/use-draggable": patch
|
||||
"@heroui/use-image": patch
|
||||
"@heroui/use-infinite-scroll": patch
|
||||
"@heroui/use-intersection-observer": patch
|
||||
"@heroui/use-is-mobile": patch
|
||||
"@heroui/use-is-mounted": patch
|
||||
"@heroui/use-measure": patch
|
||||
"@heroui/use-pagination": patch
|
||||
"@heroui/use-real-shape": patch
|
||||
"@heroui/use-ref-state": patch
|
||||
"@heroui/use-resize": patch
|
||||
"@heroui/use-safe-layout-effect": patch
|
||||
"@heroui/use-scroll-position": patch
|
||||
"@heroui/use-ssr": patch
|
||||
"@heroui/use-theme": patch
|
||||
"@heroui/use-update-effect": patch
|
||||
"@heroui/aria-utils": patch
|
||||
"@heroui/dom-animation": patch
|
||||
"@heroui/framer-utils": patch
|
||||
"@heroui/react-rsc-utils": patch
|
||||
"@heroui/react-utils": patch
|
||||
"@heroui/shared-icons": patch
|
||||
"@heroui/shared-utils": patch
|
||||
"@heroui/stories-utils": patch
|
||||
"@heroui/test-utils": patch
|
||||
---
|
||||
|
||||
TailwindCSS v4
|
||||
@@ -4,6 +4,7 @@ on:
|
||||
pull_request:
|
||||
branches:
|
||||
- canary
|
||||
- beta/release-next
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
Vendored
+6
-2
@@ -5,10 +5,14 @@
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"tailwindCSS.experimental.configFile": {
|
||||
"packages/storybook/tailwind.config.js": ["packages/core/theme/**/*", "packages/components/**/*"],
|
||||
"apps/docs/tailwind.config.js": "apps/docs/**/*"
|
||||
"apps/docs/styles/globals.css": "apps/docs/**/*",
|
||||
"packages/storybook/.storybook/style.css": ["packages/core/theme/**/*", "packages/components/**/*"],
|
||||
|
||||
},
|
||||
"tailwindCSS.experimental.classRegex": [
|
||||
["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
|
||||
],
|
||||
"cSpell.words": [
|
||||
"heroui"
|
||||
],
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ interface DocsLayoutProps {
|
||||
export default function DocsLayout({children}: DocsLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
|
||||
{children}
|
||||
</main>
|
||||
<div
|
||||
|
||||
@@ -11,7 +11,7 @@ interface DocsLayoutProps {
|
||||
export default function DocsLayout({children}: DocsLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
|
||||
<div className="grid grid-cols-12">
|
||||
<div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
|
||||
<DocsSidebar routes={manifest.routes} />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
const Content = () => (
|
||||
<div className="px-6 flex gap-4 flex-col pb-16 flex-grow">
|
||||
<div className="px-6 flex gap-4 flex-col pb-16 grow">
|
||||
<h1 className="mt-4 font-bold text-4xl">Lorem ipsum dolor sit amet</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
|
||||
@@ -101,7 +101,7 @@ const MyInput = extendVariants(Input, {
|
||||
inputWrapper: [
|
||||
"bg-zinc-100",
|
||||
"border",
|
||||
"shadow",
|
||||
"shadow-sm",
|
||||
"transition-colors",
|
||||
"focus-within:bg-zinc-100",
|
||||
"data-[hover=true]:border-zinc-600",
|
||||
@@ -138,7 +138,7 @@ const MyInput = extendVariants(Input, {
|
||||
},
|
||||
radius: {
|
||||
xs: {
|
||||
inputWrapper: "rounded",
|
||||
inputWrapper: "rounded-sm",
|
||||
},
|
||||
sm: {
|
||||
inputWrapper: "rounded-[4px]",
|
||||
@@ -454,7 +454,7 @@ export default function HeroUIPerf() {
|
||||
classNames: {
|
||||
base: [
|
||||
"before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
|
||||
"before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
|
||||
"before:top-0 before:left-0 before:bg-linear-to-b before:from-default-50",
|
||||
],
|
||||
},
|
||||
}}
|
||||
@@ -468,7 +468,7 @@ export default function HeroUIPerf() {
|
||||
{(item) => (
|
||||
<SelectItem key={item.id} textValue={item.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
|
||||
<Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{item.name}</span>
|
||||
<span className="text-tiny text-default-400">{item.email}</span>
|
||||
|
||||
@@ -469,7 +469,7 @@ export default function Page() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
@@ -521,13 +521,13 @@ export default function Page() {
|
||||
td: [
|
||||
// changing the rows border radius
|
||||
// first
|
||||
"group-data-[first=true]:first:before:rounded-none",
|
||||
"group-data-[first=true]:last:before:rounded-none",
|
||||
"first:group-data-[first=true]:before:rounded-none",
|
||||
"last:group-data-[first=true]:before:rounded-none",
|
||||
// middle
|
||||
"group-data-[middle=true]:before:rounded-none",
|
||||
// last
|
||||
"group-data-[last=true]:first:before:rounded-none",
|
||||
"group-data-[last=true]:last:before:rounded-none",
|
||||
"first:group-data-[last=true]:before:rounded-none",
|
||||
"last:group-data-[last=true]:before:rounded-none",
|
||||
],
|
||||
}),
|
||||
[],
|
||||
|
||||
@@ -461,7 +461,7 @@ export default function Page() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
|
||||
@@ -17,7 +17,7 @@ import {HeroUIProSection} from "@/components/marketing/heroui-pro-section";
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<main className="container mx-auto max-w-7xl px-6 flex-grow">
|
||||
<main className="container mx-auto max-w-7xl px-6 grow">
|
||||
<section className="flex flex-col items-center justify-center">
|
||||
<Hero />
|
||||
<FeaturesGrid features={landingContent.topFeatures} />
|
||||
|
||||
@@ -5,7 +5,7 @@ import PlaygroundTabs from "./playground-tabs";
|
||||
export default function FigmaPage() {
|
||||
return (
|
||||
<>
|
||||
<main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
|
||||
<main className="prose prose-neutral relative container mx-auto max-w-3xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 grow">
|
||||
<section className="w-full flex flex-col items-center mt-12 gap-6">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-2">Playground</h1>
|
||||
|
||||
@@ -60,7 +60,7 @@ const cmdk = tv({
|
||||
"h-14",
|
||||
"font-sans",
|
||||
"text-lg",
|
||||
"outline-none",
|
||||
"outline-hidden",
|
||||
"rounded-none",
|
||||
"bg-transparent",
|
||||
"text-default-700",
|
||||
@@ -78,7 +78,7 @@ const cmdk = tv({
|
||||
"justify-between",
|
||||
"items-center",
|
||||
"rounded-lg",
|
||||
"shadow",
|
||||
"shadow-xs",
|
||||
"bg-content2/50",
|
||||
"active:opacity-70",
|
||||
"cursor-pointer",
|
||||
@@ -394,10 +394,10 @@ export const Cmdk: FC<{}> = () => {
|
||||
"mt-[20vh]",
|
||||
"border-small",
|
||||
"dark:border-default-100",
|
||||
"supports-[backdrop-filter]:bg-background/80",
|
||||
"dark:supports-[backdrop-filter]:bg-background/30",
|
||||
"supports-[backdrop-filter]:backdrop-blur-md",
|
||||
"supports-[backdrop-filter]:backdrop-saturate-150",
|
||||
"supports-backdrop-filter:bg-background/80",
|
||||
"dark:supports-backdrop-filter:bg-background/30",
|
||||
"supports-backdrop-filter:backdrop-blur-md",
|
||||
"supports-backdrop-filter:backdrop-saturate-150",
|
||||
],
|
||||
backdrop: ["bg-black/80"],
|
||||
}}
|
||||
|
||||
@@ -35,8 +35,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
|
||||
return (
|
||||
<Modal
|
||||
classNames={{
|
||||
backdrop: "z-[100002]", // to appear above the navbar
|
||||
wrapper: "z-[100003]", // to appear above the backdrop
|
||||
backdrop: "z-100002", // to appear above the navbar
|
||||
wrapper: "z-100003", // to appear above the backdrop
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
motionProps={{
|
||||
@@ -69,7 +69,7 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
|
||||
<CodeWindow
|
||||
showCopy
|
||||
showWindowIcons
|
||||
className="min-h-[320px] !h-[60vh] max-h-full"
|
||||
className="min-h-[320px] h-[60vh]! max-h-full"
|
||||
language="jsx"
|
||||
title={fileName}
|
||||
value={code}
|
||||
|
||||
@@ -39,7 +39,7 @@ export const CustomButton = () => {
|
||||
<Button
|
||||
ref={buttonRef}
|
||||
disableRipple
|
||||
className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
|
||||
className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
|
||||
size="lg"
|
||||
onPress={handleConfetti}
|
||||
>
|
||||
|
||||
@@ -49,7 +49,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Like"
|
||||
className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
|
||||
className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
|
||||
radius="full"
|
||||
variant="light"
|
||||
onPress={() => setLiked((v) => !v)}
|
||||
@@ -82,7 +82,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Repeat"
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -91,7 +91,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Previous"
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -100,7 +100,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Play"
|
||||
className="w-auto h-auto data-[hover]:bg-foreground/10"
|
||||
className="w-auto h-auto data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -109,7 +109,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Next"
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -118,7 +118,7 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Shuffle"
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
|
||||
@@ -102,7 +102,7 @@ const CodeBlockHighlight = ({
|
||||
// due to display: contents on the scrollable child element, this div will also scroll
|
||||
// this causes the intersection observer to trigger if scrolled far enough horizontally
|
||||
// set the width to fit-content to prevent this div from going off screen
|
||||
width: "fit-content",
|
||||
width: "w-full",
|
||||
}}
|
||||
>
|
||||
{isVisible ? (
|
||||
@@ -152,7 +152,7 @@ const CodeBlockHighlight = ({
|
||||
"px-2": showLines,
|
||||
},
|
||||
{
|
||||
"before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
|
||||
"before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-linear-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
|
||||
shouldHighlightLine(i),
|
||||
},
|
||||
)}
|
||||
|
||||
@@ -42,7 +42,7 @@ const ButtonLink = ({
|
||||
<Button
|
||||
isExternal
|
||||
as={Link}
|
||||
className="!text-small py-4 bg-default-100 dark:bg-default-50 text-default-700"
|
||||
className="text-small! py-4 bg-default-100 dark:bg-default-50 text-default-700"
|
||||
href={href}
|
||||
size="sm"
|
||||
startContent={startContent}
|
||||
|
||||
@@ -22,6 +22,10 @@ const packageManagers: PackageManager[] = [
|
||||
label: "CLI",
|
||||
icon: <CLIBoldIcon className="text-lg text-default-600 dark:text-default-400" />,
|
||||
},
|
||||
{
|
||||
name: "pnpm",
|
||||
icon: <PnpmIcon className="text-[#F69220]" />,
|
||||
},
|
||||
{
|
||||
name: "npm",
|
||||
icon: <NpmSmallIcon className="text-[#E53E3E]" />,
|
||||
@@ -30,10 +34,6 @@ const packageManagers: PackageManager[] = [
|
||||
name: "yarn",
|
||||
icon: <YarnIcon className="text-[#2C8EBB]" />,
|
||||
},
|
||||
{
|
||||
name: "pnpm",
|
||||
icon: <PnpmIcon className="text-[#F69220]" />,
|
||||
},
|
||||
{
|
||||
name: "bun",
|
||||
icon: <BunIcon className="text-lg text-[#FBF0DF]" />,
|
||||
|
||||
@@ -18,7 +18,7 @@ export const HeroUIProCallout = () => {
|
||||
<div>
|
||||
<p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
|
||||
Ship
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-b from-[#5EA2EF] to-[#0072F5]">
|
||||
<span className="bg-clip-text text-transparent bg-linear-to-b from-[#5EA2EF] to-[#0072F5]">
|
||||
faster
|
||||
</span>
|
||||
<br />
|
||||
@@ -37,7 +37,7 @@ export const HeroUIProCallout = () => {
|
||||
</div>
|
||||
</div>
|
||||
<NextLink
|
||||
className="absolute inset-0 z-[1]"
|
||||
className="absolute inset-0 z-1"
|
||||
href="https://heroui.pro/components?utm_source=heroui.com&utm_medium=callout"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
|
||||
@@ -192,7 +192,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
|
||||
aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
|
||||
aria-selected={dataAttr(isSelected)}
|
||||
className={clsx(
|
||||
"flex flex-col outline-none w-full tap-highlight-transparent",
|
||||
"flex flex-col outline-hidden w-full tap-highlight-transparent",
|
||||
hasChildNodes ? "mb-4" : "first:mt-4",
|
||||
// focus ring
|
||||
...dataFocusVisibleClasses,
|
||||
|
||||
@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
|
||||
<div className={clsx("relative", innerClassName)}>
|
||||
Roadmap
|
||||
<Icon
|
||||
className="absolute right-[-10px] top-0 outline-none transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
|
||||
className="absolute right-[-10px] top-0 outline-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
|
||||
icon={arrowRightUpIcon}
|
||||
width={10}
|
||||
/>
|
||||
|
||||
@@ -5,14 +5,14 @@ const styles = tv({
|
||||
base: "flex relative w-full h-auto",
|
||||
variants: {
|
||||
to: {
|
||||
top: "bg-gradient-to-t",
|
||||
right: "bg-gradient-to-r",
|
||||
left: "bg-gradient-to-l",
|
||||
bottom: "bg-gradient-to-b",
|
||||
"top-right": "bg-gradient-to-tr",
|
||||
"top-left": "bg-gradient-to-tl",
|
||||
"bottom-right": "bg-gradient-to-br",
|
||||
"bottom-left": "bg-gradient-to-bl",
|
||||
top: "bg-linear-to-t",
|
||||
right: "bg-linear-to-r",
|
||||
left: "bg-linear-to-l",
|
||||
bottom: "bg-linear-to-b",
|
||||
"top-right": "bg-linear-to-tr",
|
||||
"top-left": "bg-linear-to-tl",
|
||||
"bottom-right": "bg-linear-to-br",
|
||||
"bottom-left": "bg-linear-to-bl",
|
||||
},
|
||||
color: {
|
||||
orange: "from-[#FFB457] to-[#FF705B]",
|
||||
|
||||
@@ -20,7 +20,7 @@ export const SmallLogoOutlined: React.FC<LogoProps> = ({
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
|
||||
className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
|
||||
data-auto={dataAttr(auto)}
|
||||
fill="none"
|
||||
height={height || size || 25}
|
||||
@@ -50,7 +50,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
className={cn("data-[auto=true]:sm:hidden block text-foreground", className)}
|
||||
className={cn("sm:data-[auto=true]:hidden block text-foreground", className)}
|
||||
data-auto={dataAttr(auto)}
|
||||
fill="none"
|
||||
height={height || size || 25}
|
||||
@@ -73,7 +73,7 @@ export const SmallLogo: React.FC<LogoProps> = ({
|
||||
export const LargeLogo: React.FC<LogoProps> = ({auto, className, ...props}) => (
|
||||
<svg
|
||||
className={cn(
|
||||
"data-[auto=true]:hidden data-[auto=true]:sm:block block text-foreground",
|
||||
"data-[auto=true]:hidden sm:data-[auto=true]:block block text-foreground",
|
||||
className,
|
||||
)}
|
||||
data-auto={dataAttr(auto)}
|
||||
|
||||
@@ -70,7 +70,7 @@ const a11yItems = [
|
||||
},
|
||||
];
|
||||
|
||||
const iconClasses = "text-2xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
export const A11yOtb = () => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
@@ -148,7 +148,7 @@ export const A11yOtb = () => {
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Show code"
|
||||
className="absolute top-1 right-1 text-success-50 data-[hover]:bg-foreground/10"
|
||||
className="absolute top-1 right-1 text-success-50 data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
onPress={() => setIsModalOpen(true)}
|
||||
@@ -218,7 +218,7 @@ export const A11yOtb = () => {
|
||||
description="Permanently delete the file"
|
||||
shortcut="⌘⇧D"
|
||||
startContent={
|
||||
<DeleteDocumentBulkIcon className={clsx(iconClasses, "!text-danger")} />
|
||||
<DeleteDocumentBulkIcon className={clsx(iconClasses, "text-danger!")} />
|
||||
}
|
||||
>
|
||||
Delete file
|
||||
|
||||
@@ -261,7 +261,7 @@ export const CustomThemes = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-[1]">
|
||||
<div className="h-full dark:md:block absolute hidden -bottom-[10%] -left-[15%] -z-1">
|
||||
<Image
|
||||
removeWrapper
|
||||
alt="custom themes background"
|
||||
|
||||
@@ -17,10 +17,10 @@ export const shopCartStyles = tv({
|
||||
"before:left-0",
|
||||
"before:w-full",
|
||||
"before:h-full",
|
||||
"before:bg-gradient-to-br",
|
||||
"before:bg-linear-to-br",
|
||||
"transition-all",
|
||||
"!ease-soft-spring",
|
||||
"!duration-500",
|
||||
"ease-soft-spring!",
|
||||
"duration-500!",
|
||||
"will-change-auto",
|
||||
"before:transition-all",
|
||||
],
|
||||
@@ -38,8 +38,8 @@ export const shopCartStyles = tv({
|
||||
"rounded-lg",
|
||||
"transition-all",
|
||||
"will-change-auto",
|
||||
"!ease-soft-spring",
|
||||
"!duration-300",
|
||||
"ease-soft-spring!",
|
||||
"duration-300!",
|
||||
],
|
||||
contentWrapper: "flex flex-col justify-center transition-all h-full min-h-[200px]",
|
||||
title: ["relative", "w-full", "flex-none", "text-xl", "font-semibold", "text-foreground"],
|
||||
@@ -57,7 +57,7 @@ export const shopCartStyles = tv({
|
||||
"text-sm",
|
||||
"rounded-full",
|
||||
// focus ring
|
||||
"group-data-[focus-visible=true]:outline-none",
|
||||
"group-data-[focus-visible=true]:outline-hidden",
|
||||
"group-data-[focus-visible=true]:ring-2",
|
||||
"group-data-[focus-visible=true]:ring-focus",
|
||||
"group-data-[focus-visible=true]:ring-offset-2",
|
||||
@@ -179,7 +179,7 @@ export const shopCartStyles = tv({
|
||||
"group-data-[selected=true]:text-white",
|
||||
"group-data-[focus-visible=true]:ring-[#EE457E]",
|
||||
"group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
"group-data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
|
||||
"dark:group-data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
],
|
||||
price: "text-black",
|
||||
previousPrice: "text-black/60 ml-2",
|
||||
@@ -193,7 +193,7 @@ export const shopCartStyles = tv({
|
||||
"rounded-sm",
|
||||
"data-[focus-visible=true]:ring-[#EE457E]",
|
||||
"data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
"data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
|
||||
"dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
],
|
||||
addToBagButton: [
|
||||
"border-[#FFD34E]",
|
||||
@@ -204,7 +204,7 @@ export const shopCartStyles = tv({
|
||||
"rounded-sm",
|
||||
"data-[focus-visible=true]:ring-[#EE457E]",
|
||||
"data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
"data-[focus-visible=true]:dark:ring-offset-[#F4E8D1]",
|
||||
"dark:data-[focus-visible=true]:ring-offset-[#F4E8D1]",
|
||||
],
|
||||
learnMoreButton: "bg-warning/20 text-warning",
|
||||
},
|
||||
|
||||
@@ -46,7 +46,7 @@ export const DarkMode = () => {
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Show code"
|
||||
className="text-white/70 dark:text-black/70 data-[hover]:bg-foreground/10"
|
||||
className="text-white/70 dark:text-black/70 data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
onPress={() => setIsModalOpen(true)}
|
||||
@@ -57,7 +57,7 @@ export const DarkMode = () => {
|
||||
<ThemeSwitch
|
||||
classNames={{
|
||||
base: "mt-1 bg-transparent rounded-xl",
|
||||
wrapper: "!text-white/70 dark:!text-black/70",
|
||||
wrapper: "text-white/70! dark:text-black/70!",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ export const BgLooper = () => {
|
||||
"data-[mounted=true]:opacity-100 transition-opacity",
|
||||
"bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
|
||||
"after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
|
||||
"after:bg-gradient-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
|
||||
"after:bg-linear-to-r after:from-transparent after:to-background dark:after:to-black after:z-[-1]",
|
||||
)}
|
||||
data-mounted={isMounted}
|
||||
/>
|
||||
|
||||
@@ -67,7 +67,7 @@ export const Hero = () => {
|
||||
color="primary"
|
||||
endContent={
|
||||
<ArrowRightIcon
|
||||
className="group-data-[hover=true]:translate-x-0.5 outline-none transition-transform"
|
||||
className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ export const HeroUIProSection = () => {
|
||||
<div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
|
||||
<Chip
|
||||
classNames={{
|
||||
base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
|
||||
base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
|
||||
content: "text-tiny font-semibold",
|
||||
}}
|
||||
color="primary"
|
||||
|
||||
@@ -3,7 +3,7 @@ import {Chip} from "@heroui/react";
|
||||
export const HeroUIProChip = () => (
|
||||
<Chip
|
||||
classNames={{
|
||||
base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
|
||||
base: "ml-0.5 transition-colors bg-linear-to-br from-cyan-600 to-blue-600",
|
||||
content: "text-tiny font-semibold",
|
||||
}}
|
||||
color="primary"
|
||||
|
||||
@@ -66,7 +66,7 @@ export const InstallBanner = () => {
|
||||
color="secondary"
|
||||
endContent={
|
||||
<ArrowRightIcon
|
||||
className="group-data-[hover=true]:translate-x-0.5 outline-none transition-transform"
|
||||
className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
}
|
||||
@@ -119,7 +119,7 @@ export const InstallBanner = () => {
|
||||
"data-[mounted=true]:opacity-100 transition-opacity",
|
||||
"bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
|
||||
"after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
|
||||
"after:bg-gradient-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
|
||||
"after:bg-linear-to-b after:from-transparent after:to-white/80 dark:after:to-black/20 after:z-[-1]",
|
||||
)}
|
||||
data-mounted={isMounted}
|
||||
/>
|
||||
|
||||
@@ -62,7 +62,7 @@ export const Marquee = ({
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex w-max items-stretch gap-[--gap]",
|
||||
"flex w-max items-stretch gap-(--gap)",
|
||||
{
|
||||
"flex-col": vertical,
|
||||
"h-full": vertical,
|
||||
|
||||
@@ -187,7 +187,7 @@ export const Support: FC<SupportProps> = ({sponsors = []}) => {
|
||||
<Button
|
||||
isIconOnly
|
||||
aria-label="Become a sponsor"
|
||||
className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
|
||||
className="z-50 w-auto h-auto bg-linear-to-b from-[#FF1CF7] to-[#7928CA]"
|
||||
radius="full"
|
||||
onPress={handleBecomeSponsor}
|
||||
>
|
||||
|
||||
@@ -252,7 +252,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((item, index) => (
|
||||
<TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
|
||||
<TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 first:[&>td]:pt-4">
|
||||
<TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
|
||||
<InlineCodeChip className={item.deprecated ? "line-through" : ""}>
|
||||
{item.attribute}
|
||||
@@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
|
||||
{/* Mobile popover */}
|
||||
<Components.Popover placement="top">
|
||||
<Components.PopoverTrigger>
|
||||
<button className="flex items-center gap-1 sm:hidden outline-none">
|
||||
<button className="flex items-center gap-1 sm:hidden outline-hidden">
|
||||
<InfoCircle className="text-default-400" size={16} />
|
||||
</button>
|
||||
</Components.PopoverTrigger>
|
||||
|
||||
@@ -133,7 +133,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
||||
}
|
||||
startContent={
|
||||
<SearchLinearIcon
|
||||
className="text-base text-default-400 pointer-events-none flex-shrink-0"
|
||||
className="text-base text-default-400 pointer-events-none shrink-0"
|
||||
size={16}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
@@ -190,7 +190,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
||||
<HeroUINavbar
|
||||
ref={ref}
|
||||
className={clsx({
|
||||
"z-[100001]": isMenuOpen,
|
||||
"z-100001": isMenuOpen,
|
||||
})}
|
||||
classNames={{
|
||||
base: "bg-white/[.90] dark:bg-black/[.65]",
|
||||
@@ -247,14 +247,14 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
||||
<NavbarItem className="flex h-full items-center">
|
||||
<ThemeSwitch
|
||||
classNames={{
|
||||
wrapper: "!text-default-500 dark:!text-default-500",
|
||||
wrapper: "text-default-500! dark:text-default-500!",
|
||||
}}
|
||||
/>
|
||||
</NavbarItem>
|
||||
<NavbarItem className="flex h-full items-center">
|
||||
<button
|
||||
className={clsx(
|
||||
"transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
|
||||
"transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
|
||||
// focus ring
|
||||
...dataFocusVisibleClasses,
|
||||
)}
|
||||
@@ -364,7 +364,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
|
||||
<ThemeSwitch
|
||||
className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
|
||||
classNames={{
|
||||
wrapper: "!text-default-400 dark:!text-default-500",
|
||||
wrapper: "text-default-400! dark:text-default-500!",
|
||||
}}
|
||||
/>
|
||||
</NavbarItem>
|
||||
|
||||
@@ -32,7 +32,7 @@ export const title = tv({
|
||||
compoundVariants: [
|
||||
{
|
||||
color: ["violet", "yellow", "blue", "cyan", "green", "pink", "foreground"],
|
||||
class: "bg-clip-text text-transparent bg-gradient-to-b",
|
||||
class: "bg-clip-text text-transparent bg-linear-to-b",
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -41,7 +41,7 @@ export const subtitle = tv({
|
||||
base: "w-full md:w-1/2 my-2 text-medium lg:text-large font-normal text-default-500 block max-w-full",
|
||||
variants: {
|
||||
fullWidth: {
|
||||
true: "!w-full",
|
||||
true: "w-full!",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -51,7 +51,7 @@ export const ProBanner = () => {
|
||||
className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||
>
|
||||
<div
|
||||
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
|
||||
className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-20 dark:opacity-10"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||
@@ -63,7 +63,7 @@ export const ProBanner = () => {
|
||||
className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||
>
|
||||
<div
|
||||
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-30 dark:opacity-20"
|
||||
className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] dark:from-[#F54180] dark:to-[#338EF7] opacity-30 dark:opacity-20"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||
@@ -105,7 +105,7 @@ export const ProBanner = () => {
|
||||
HeroUI Pro
|
||||
<Icon
|
||||
aria-hidden="true"
|
||||
className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
|
||||
className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
|
||||
icon={arrowRightIcon}
|
||||
width={16}
|
||||
/>
|
||||
|
||||
@@ -46,13 +46,11 @@ module.exports = {
|
||||
|
||||
export const postcssConfig = `module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
}`;
|
||||
|
||||
export const stylesConfig = `@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;`;
|
||||
export const stylesConfig = `@import "tailwindcss";
|
||||
@config "./tailwind.config.js";`;
|
||||
|
||||
export const npmrcConfig = `public-hoist-pattern[]=*@heroui/*`;
|
||||
|
||||
@@ -184,9 +184,9 @@ export const useSandpack = ({
|
||||
dependencies,
|
||||
entry: entryFile,
|
||||
devDependencies: {
|
||||
autoprefixer: "10.4.20",
|
||||
postcss: "8.4.49",
|
||||
tailwindcss: "3.4.17",
|
||||
postcss: "^8.4.21",
|
||||
tailwindcss: "^4.0.0",
|
||||
"@tailwindcss/postcss": "^4.0.0",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -74,7 +74,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
|
||||
"rounded-lg",
|
||||
"flex items-center justify-center",
|
||||
"group-data-[selected=true]:bg-transparent",
|
||||
"!text-default-600 dark:!text-default-300",
|
||||
"text-default-600! dark:text-default-300!",
|
||||
"pt-0",
|
||||
"px-0",
|
||||
"mx-0",
|
||||
|
||||
@@ -43,13 +43,20 @@
|
||||
"path": "/docs/guide/forms.mdx",
|
||||
"updated": true
|
||||
},
|
||||
{
|
||||
"key": "tailwind-v4",
|
||||
"title": "Tailwind v4",
|
||||
"keywords": "migrate, tailwind, v4, heroui",
|
||||
"path": "/docs/guide/tailwind-v4.mdx",
|
||||
"newPost": true
|
||||
},
|
||||
{
|
||||
"key": "nextui-to-heroui",
|
||||
"title": "NextUI to HeroUI",
|
||||
"keywords": "migrate, nextui, hero, heroui",
|
||||
"path": "/docs/guide/nextui-to-heroui.mdx"
|
||||
},
|
||||
{
|
||||
{
|
||||
"key": "figma",
|
||||
"title": "Figma",
|
||||
"keywords": "figma, design, ui kit",
|
||||
|
||||
@@ -343,7 +343,7 @@ Popover changes:
|
||||
backdrop="opaque"
|
||||
placement="right"
|
||||
classNames={{
|
||||
- base: "py-3 px-4 border border-default-200 bg-gradient-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
|
||||
- base: "py-3 px-4 border border-default-200 bg-linear-to-br from-white to-default-300 dark:from-default-100 dark:to-default-50",
|
||||
- arrow: "bg-default-200",
|
||||
+ base: [
|
||||
+ // the "before" pseudo element is now the popover' arrow
|
||||
@@ -351,7 +351,7 @@ Popover changes:
|
||||
+ ],
|
||||
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
|
||||
+ "py-3 px-4 border border-default-200",
|
||||
+ "bg-gradient-to-br from-white to-default-300",
|
||||
+ "bg-linear-to-br from-white to-default-300",
|
||||
+ "dark:from-default-100 dark:to-default-50",
|
||||
],
|
||||
}}
|
||||
@@ -368,7 +368,7 @@ Tooltip changes:
|
||||
placement="right"
|
||||
content="I am a tooltip"
|
||||
classNames={{
|
||||
- base: "py-2 px-4 shadow-xl text-black bg-gradient-to-br from-white to-neutral-400",
|
||||
- base: "py-2 px-4 shadow-xl text-black bg-linear-to-br from-white to-neutral-400",
|
||||
- arrow: "bg-neutral-400 dark:bg-white",
|
||||
+ base: [
|
||||
+ // the "before" pseudo element is now the popover' arrow
|
||||
@@ -376,7 +376,7 @@ Tooltip changes:
|
||||
+ ],
|
||||
+ content: [ // now we need to use the "content" slot to actually modify the popover' content styles
|
||||
+ "py-2 px-4 shadow-xl",
|
||||
+ "text-black bg-gradient-to-br from-white to-neutral-400",
|
||||
+ "text-black bg-linear-to-br from-white to-neutral-400",
|
||||
+ ],
|
||||
}}
|
||||
>
|
||||
@@ -413,9 +413,9 @@ Dropdown Changes
|
||||
<Dropdown
|
||||
showArrow
|
||||
classNames={{
|
||||
- base: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
|
||||
- base: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
|
||||
- arrow: "bg-default-200",
|
||||
+ content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black", // now instead of the "base" slot we use the "content"
|
||||
+ content: "py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black", // now instead of the "base" slot we use the "content"
|
||||
+ base: "before:bg-default-200", // the before pseudo element controls the popover's arrow
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -41,13 +41,13 @@ const styles = {
|
||||
base: [
|
||||
"bg-slate-100",
|
||||
"border",
|
||||
"shadow",
|
||||
"shadow-sm",
|
||||
"hover:bg-slate-200",
|
||||
"focus-within:!bg-slate-100",
|
||||
"focus-within:bg-slate-100!",
|
||||
"dark:bg-slate-900",
|
||||
"dark:hover:bg-slate-800",
|
||||
"dark:border-slate-800",
|
||||
"dark:focus-within:!bg-slate-900",
|
||||
"dark:focus-within:bg-slate-900!",
|
||||
"cursor-pointer",
|
||||
],
|
||||
title: ["text-base", "text-slate-500", "font-bold"],
|
||||
|
||||
@@ -216,7 +216,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<AutocompleteItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -281,7 +281,7 @@ export default function App() {
|
||||
<AutocompleteItem key={item.id} textValue={item.name}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
|
||||
<Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{item.name}</span>
|
||||
<span className="text-tiny text-default-400">{item.team}</span>
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function App() {
|
||||
<div className="flex items-center">
|
||||
<Avatar
|
||||
classNames={{
|
||||
base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
|
||||
base: "bg-linear-to-br from-[#FFB457] to-[#FF705B]",
|
||||
icon: "text-black/80",
|
||||
}}
|
||||
icon={<AvatarIcon />}
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function App() {
|
||||
return (
|
||||
<Breadcrumbs
|
||||
classNames={{
|
||||
list: "bg-gradient-to-br from-violet-500 to-fuchsia-500 shadow-small",
|
||||
list: "bg-linear-to-br from-violet-500 to-fuchsia-500 shadow-small",
|
||||
}}
|
||||
itemClasses={{
|
||||
item: "text-white/60 data-[current=true]:text-white",
|
||||
|
||||
@@ -3,7 +3,7 @@ import {Button} from "@heroui/react";
|
||||
export default function App() {
|
||||
return (
|
||||
<Button
|
||||
className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
|
||||
className="bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
|
||||
radius="full"
|
||||
>
|
||||
Button
|
||||
|
||||
@@ -185,7 +185,7 @@ export default function App() {
|
||||
</div>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
|
||||
className="text-default-900/60 data-hover:bg-foreground/10 -translate-y-2 translate-x-2"
|
||||
radius="full"
|
||||
variant="light"
|
||||
onPress={() => setLiked((v) => !v)}
|
||||
@@ -217,7 +217,7 @@ export default function App() {
|
||||
<div className="flex w-full items-center justify-center">
|
||||
<Button
|
||||
isIconOnly
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -225,7 +225,7 @@ export default function App() {
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -233,7 +233,7 @@ export default function App() {
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="w-auto h-auto data-[hover]:bg-foreground/10"
|
||||
className="w-auto h-auto data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -241,7 +241,7 @@ export default function App() {
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
@@ -249,7 +249,7 @@ export default function App() {
|
||||
</Button>
|
||||
<Button
|
||||
isIconOnly
|
||||
className="data-[hover]:bg-foreground/10"
|
||||
className="data-hover:bg-foreground/10"
|
||||
radius="full"
|
||||
variant="light"
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@ export default function App() {
|
||||
return (
|
||||
<div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
|
||||
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col items-start!">
|
||||
<p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
|
||||
<h4 className="text-white font-medium text-large">Stream the Acme event</h4>
|
||||
</CardHeader>
|
||||
@@ -16,7 +16,7 @@ export default function App() {
|
||||
/>
|
||||
</Card>
|
||||
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col items-start!">
|
||||
<p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
|
||||
<h4 className="text-white font-medium text-large">Contribute to the planet</h4>
|
||||
</CardHeader>
|
||||
@@ -28,7 +28,7 @@ export default function App() {
|
||||
/>
|
||||
</Card>
|
||||
<Card className="col-span-12 sm:col-span-4 h-[300px]">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col !items-start">
|
||||
<CardHeader className="absolute z-10 top-1 flex-col items-start!">
|
||||
<p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
|
||||
<h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
|
||||
</CardHeader>
|
||||
@@ -72,7 +72,7 @@ export default function App() {
|
||||
src="https://heroui.com/images/card-example-5.jpeg"
|
||||
/>
|
||||
<CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
|
||||
<div className="flex flex-grow gap-2 items-center">
|
||||
<div className="flex grow gap-2 items-center">
|
||||
<Image
|
||||
alt="Breathing app icon"
|
||||
className="rounded-full w-10 h-11 bg-black"
|
||||
|
||||
@@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
|
||||
},
|
||||
isFocusVisible: {
|
||||
true: {
|
||||
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
|
||||
base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function App() {
|
||||
},
|
||||
isFocusVisible: {
|
||||
true: {
|
||||
base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
|
||||
base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -4,8 +4,8 @@ export default function App() {
|
||||
return (
|
||||
<Chip
|
||||
classNames={{
|
||||
base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
|
||||
content: "drop-shadow shadow-black text-white",
|
||||
base: "bg-linear-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
|
||||
content: "drop-shadow-xs shadow-black text-white",
|
||||
}}
|
||||
variant="shadow"
|
||||
>
|
||||
|
||||
@@ -2,7 +2,7 @@ import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@heroui/react"
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
|
||||
<Card className="w-[240px] h-[240px] border-none bg-linear-to-br from-violet-500 to-fuchsia-500">
|
||||
<CardBody className="justify-center items-center pb-0">
|
||||
<CircularProgress
|
||||
classNames={{
|
||||
|
||||
@@ -37,13 +37,13 @@ export default function App() {
|
||||
labelPlacement="outside"
|
||||
placeholderValue={new CalendarDate(1995, 11, 6)}
|
||||
startContent={
|
||||
<CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
/>
|
||||
<DateInput
|
||||
defaultValue={parseDate("2024-04-04")}
|
||||
endContent={
|
||||
<CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<CalendarIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Date Input"
|
||||
labelPlacement="outside"
|
||||
|
||||
@@ -89,7 +89,7 @@ export default function App() {
|
||||
<DrawerBody>
|
||||
<Input
|
||||
endContent={
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
@@ -97,7 +97,7 @@ export default function App() {
|
||||
/>
|
||||
<Input
|
||||
endContent={
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
|
||||
@@ -38,7 +38,7 @@ export default function App() {
|
||||
hideCloseButton
|
||||
backdrop="blur"
|
||||
classNames={{
|
||||
base: "data-[placement=right]:sm:m-2 data-[placement=left]:sm:m-2 rounded-medium",
|
||||
base: "sm:data-[placement=right]:m-2 sm:data-[placement=left]:m-2 rounded-medium",
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
@@ -293,28 +293,28 @@ export default function App() {
|
||||
>
|
||||
<Tooltip content="Alex">
|
||||
<Avatar
|
||||
className="data-[hover=true]:!translate-x-0"
|
||||
className="data-[hover=true]:translate-x-0!"
|
||||
name="Alex"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026708c"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="Joe">
|
||||
<Avatar
|
||||
className="data-[hover=true]:!translate-x-0"
|
||||
className="data-[hover=true]:translate-x-0!"
|
||||
name="Joe"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e290267084"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="John">
|
||||
<Avatar
|
||||
className="data-[hover=true]:!translate-x-0"
|
||||
className="data-[hover=true]:translate-x-0!"
|
||||
name="John"
|
||||
src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip content="Jane">
|
||||
<Avatar
|
||||
className="data-[hover=true]:!translate-x-0"
|
||||
className="data-[hover=true]:translate-x-0!"
|
||||
name="Jane"
|
||||
src="https://i.pravatar.cc/150?u=a04258114e29026702d"
|
||||
/>
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function App() {
|
||||
<DrawerBody>
|
||||
<Input
|
||||
endContent={
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
@@ -79,7 +79,7 @@ export default function App() {
|
||||
/>
|
||||
<Input
|
||||
endContent={
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
|
||||
@@ -99,7 +99,7 @@ export default function App() {
|
||||
className="cursor-default"
|
||||
endContent={
|
||||
<select
|
||||
className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
|
||||
className="z-10 outline-hidden w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
|
||||
id="theme"
|
||||
name="theme"
|
||||
>
|
||||
|
||||
@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
@@ -127,7 +127,7 @@ export default function App() {
|
||||
classNames={{
|
||||
base: "before:bg-default-200", // change arrow background
|
||||
content:
|
||||
"py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
|
||||
"py-1 px-1 border border-default-200 bg-linear-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
|
||||
}}
|
||||
>
|
||||
<DropdownTrigger>
|
||||
|
||||
@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<Dropdown>
|
||||
|
||||
@@ -111,7 +111,7 @@ export const DeleteDocumentIcon = (props) => {
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<Dropdown>
|
||||
|
||||
@@ -119,7 +119,7 @@ export const DeleteDocumentIcon = (props) => {
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<Dropdown>
|
||||
|
||||
@@ -65,10 +65,10 @@ const styles = {
|
||||
"backdrop-blur-xl",
|
||||
"backdrop-saturate-200",
|
||||
"hover:bg-default-200/70",
|
||||
"focus-within:!bg-default-200/50",
|
||||
"focus-within:bg-default-200/50!",
|
||||
"dark:hover:bg-default/70",
|
||||
"dark:focus-within:!bg-default/60",
|
||||
"!cursor-text",
|
||||
"dark:focus-within:bg-default/60!",
|
||||
"cursor-text!",
|
||||
],
|
||||
};
|
||||
|
||||
@@ -100,7 +100,7 @@ const MyInput = forwardRef((props, ref) => {
|
||||
type: "search",
|
||||
placeholder: "Type to search...",
|
||||
startContent: (
|
||||
<SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
|
||||
<SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
|
||||
),
|
||||
// custom styles
|
||||
classNames: {
|
||||
@@ -133,7 +133,7 @@ const MyInput = forwardRef((props, ref) => {
|
||||
}, [startContent, end, getInputProps, getInnerWrapperProps]);
|
||||
|
||||
return (
|
||||
<div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
|
||||
<div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
|
||||
<Component {...getBaseProps()}>
|
||||
{shouldLabelBeOutside ? labelContent : null}
|
||||
<div
|
||||
|
||||
@@ -32,7 +32,7 @@ export const SearchIcon = (props) => {
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
|
||||
<div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-linear-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
|
||||
<Input
|
||||
isClearable
|
||||
classNames={{
|
||||
@@ -44,7 +44,7 @@ export default function App() {
|
||||
],
|
||||
innerWrapper: "bg-transparent",
|
||||
inputWrapper: [
|
||||
"shadow-xl",
|
||||
"shadow-sm",
|
||||
"bg-default-200/50",
|
||||
"dark:bg-default/60",
|
||||
"backdrop-blur-xl",
|
||||
@@ -53,14 +53,14 @@ export default function App() {
|
||||
"dark:hover:bg-default/70",
|
||||
"group-data-[focus=true]:bg-default-200/50",
|
||||
"dark:group-data-[focus=true]:bg-default/60",
|
||||
"!cursor-text",
|
||||
"cursor-text!",
|
||||
],
|
||||
}}
|
||||
label="Search"
|
||||
placeholder="Type to search..."
|
||||
radius="lg"
|
||||
startContent={
|
||||
<SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
|
||||
<SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function App() {
|
||||
endContent={
|
||||
<button
|
||||
aria-label="toggle password visibility"
|
||||
className="focus:outline-none"
|
||||
className="focus:outline-hidden"
|
||||
type="button"
|
||||
onClick={toggleVisibility}
|
||||
>
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function App() {
|
||||
labelPlacement="outside"
|
||||
placeholder="you@example.com"
|
||||
startContent={
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
type="email"
|
||||
/>
|
||||
@@ -59,7 +59,7 @@ export default function App() {
|
||||
<div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
|
||||
<Input
|
||||
endContent={
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Email"
|
||||
labelPlacement="outside"
|
||||
@@ -100,7 +100,7 @@ export default function App() {
|
||||
labelPlacement="outside"
|
||||
placeholder="heroui"
|
||||
startContent={
|
||||
<MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
@@ -110,7 +110,7 @@ export default function App() {
|
||||
Currency
|
||||
</label>
|
||||
<select
|
||||
className="outline-none border-0 bg-transparent text-default-400 text-small"
|
||||
className="outline-hidden border-0 bg-transparent text-default-400 text-small"
|
||||
id="currency"
|
||||
name="currency"
|
||||
>
|
||||
|
||||
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
|
||||
);
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<ListboxWrapper>
|
||||
|
||||
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
|
||||
);
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<ListboxWrapper>
|
||||
|
||||
@@ -117,7 +117,7 @@ export const ListboxWrapper = ({children}) => (
|
||||
);
|
||||
|
||||
export default function App() {
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
|
||||
const iconClasses = "text-xl text-default-500 pointer-events-none shrink-0";
|
||||
|
||||
return (
|
||||
<ListboxWrapper>
|
||||
|
||||
@@ -250,7 +250,7 @@ export default function App() {
|
||||
{(item) => (
|
||||
<ListboxItem key={item.id} textValue={item.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
|
||||
<Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{item.name}</span>
|
||||
<span className="text-tiny text-default-400">{item.email}</span>
|
||||
|
||||
@@ -253,7 +253,7 @@ export default function App() {
|
||||
{(item) => (
|
||||
<ListboxItem key={item.id} textValue={item.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
|
||||
<Avatar alt={item.name} className="shrink-0" size="sm" src={item.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{item.name}</span>
|
||||
<span className="text-tiny text-default-400">{item.email}</span>
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function App() {
|
||||
<Modal
|
||||
backdrop="opaque"
|
||||
classNames={{
|
||||
backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
|
||||
backdrop: "bg-linear-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
onOpenChange={onOpenChange}
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function App() {
|
||||
<ModalBody>
|
||||
<Input
|
||||
endContent={
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<MailIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
@@ -79,7 +79,7 @@ export default function App() {
|
||||
/>
|
||||
<Input
|
||||
endContent={
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<LockIcon className="text-2xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Password"
|
||||
placeholder="Enter your password"
|
||||
|
||||
@@ -64,7 +64,7 @@ export default function App() {
|
||||
ref={ref}
|
||||
className={cn(
|
||||
className,
|
||||
isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
|
||||
isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
|
||||
)}
|
||||
onClick={() => setPage(value)}
|
||||
>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function App() {
|
||||
ref={ref}
|
||||
className={cn(
|
||||
className,
|
||||
isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
|
||||
isActive && "text-white bg-linear-to-br from-indigo-500 to-pink-500 font-bold",
|
||||
)}
|
||||
onClick={() => setPage(value)}
|
||||
>
|
||||
|
||||
@@ -4,10 +4,10 @@ export default function App() {
|
||||
return (
|
||||
<Pagination
|
||||
classNames={{
|
||||
wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
|
||||
wrapper: "gap-0 overflow-visible h-8 rounded-sm border border-divider",
|
||||
item: "w-8 h-8 text-small rounded-none bg-transparent",
|
||||
cursor:
|
||||
"bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
|
||||
"bg-linear-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
|
||||
}}
|
||||
total={10}
|
||||
/>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function App() {
|
||||
],
|
||||
content: [
|
||||
"py-3 px-4 border border-default-200",
|
||||
"bg-gradient-to-br from-white to-default-300",
|
||||
"bg-linear-to-br from-white to-default-300",
|
||||
"dark:from-default-100 dark:to-default-50",
|
||||
],
|
||||
}}
|
||||
|
||||
@@ -6,7 +6,7 @@ export default function App() {
|
||||
classNames={{
|
||||
base: "max-w-md",
|
||||
track: "drop-shadow-md border border-default",
|
||||
indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
|
||||
indicator: "bg-linear-to-r from-pink-500 to-yellow-500",
|
||||
label: "tracking-wider font-medium text-default-600",
|
||||
value: "text-foreground/60",
|
||||
}}
|
||||
|
||||
@@ -215,7 +215,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -217,12 +217,7 @@ export default function App() {
|
||||
renderValue={(items) => {
|
||||
return items.map((item) => (
|
||||
<div key={item.key} className="flex items-center gap-2">
|
||||
<Avatar
|
||||
alt={item.data.name}
|
||||
className="flex-shrink-0"
|
||||
size="sm"
|
||||
src={item.data.avatar}
|
||||
/>
|
||||
<Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span>{item.data.name}</span>
|
||||
<span className="text-default-500 text-tiny">({item.data.email})</span>
|
||||
@@ -234,7 +229,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -229,12 +229,7 @@ export default function App() {
|
||||
renderValue={(items: SelectedItems<User>) => {
|
||||
return items.map((item) => (
|
||||
<div key={item.key} className="flex items-center gap-2">
|
||||
<Avatar
|
||||
alt={item.data?.name}
|
||||
className="flex-shrink-0"
|
||||
size="sm"
|
||||
src={item.data?.avatar}
|
||||
/>
|
||||
<Avatar alt={item.data?.name} className="shrink-0" size="sm" src={item.data?.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span>{item.data?.name}</span>
|
||||
<span className="text-default-500 text-tiny">({item.data?.email})</span>
|
||||
@@ -246,7 +241,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -238,12 +238,7 @@ export default function App() {
|
||||
renderValue={(items) => {
|
||||
return items.map((item) => (
|
||||
<div key={item.key} className="flex items-center gap-2">
|
||||
<Avatar
|
||||
alt={item.data.name}
|
||||
className="flex-shrink-0"
|
||||
size="sm"
|
||||
src={item.data.avatar}
|
||||
/>
|
||||
<Avatar alt={item.data.name} className="shrink-0" size="sm" src={item.data.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span>{item.data.name}</span>
|
||||
<span className="text-default-500 text-tiny">({item.data.email})</span>
|
||||
@@ -256,7 +251,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -230,7 +230,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -242,7 +242,7 @@ export default function App() {
|
||||
{(user) => (
|
||||
<SelectItem key={user.id} textValue={user.name}>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
|
||||
<Avatar alt={user.name} className="shrink-0" size="sm" src={user.avatar} />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-small">{user.name}</span>
|
||||
<span className="text-tiny text-default-400">{user.email}</span>
|
||||
|
||||
@@ -5,13 +5,13 @@ export default function App() {
|
||||
<Slider
|
||||
classNames={{
|
||||
base: "max-w-md",
|
||||
filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
|
||||
filler: "bg-linear-to-r from-primary-500 to-secondary-400",
|
||||
labelWrapper: "mb-2",
|
||||
label: "font-medium text-default-700 text-medium",
|
||||
value: "font-medium text-default-500 text-small",
|
||||
thumb: [
|
||||
"transition-size",
|
||||
"bg-gradient-to-r from-secondary-400 to-primary-500",
|
||||
"bg-linear-to-r from-secondary-400 to-primary-500",
|
||||
"data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
|
||||
"data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6",
|
||||
],
|
||||
@@ -33,11 +33,11 @@ export default function App() {
|
||||
classNames: {
|
||||
base: [
|
||||
// arrow color
|
||||
"before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
|
||||
"before:bg-linear-to-r before:from-secondary-400 before:to-primary-500",
|
||||
],
|
||||
content: [
|
||||
"py-2 shadow-xl",
|
||||
"text-white bg-gradient-to-r from-secondary-400 to-primary-500",
|
||||
"text-white bg-linear-to-r from-secondary-400 to-primary-500",
|
||||
],
|
||||
},
|
||||
}}
|
||||
|
||||
@@ -42,7 +42,7 @@ export default function App() {
|
||||
<Slider
|
||||
classNames={{
|
||||
base: "max-w-md gap-3",
|
||||
filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
|
||||
filler: "bg-linear-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
|
||||
}}
|
||||
defaultValue={[100, 300]}
|
||||
formatOptions={{style: "currency", currency: "USD"}}
|
||||
@@ -69,7 +69,7 @@ export default function App() {
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
|
||||
"transition-transform bg-linear-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
|
||||
index === 0
|
||||
? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
|
||||
: "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
|
||||
|
||||
@@ -5,7 +5,7 @@ export default function App() {
|
||||
<Slider
|
||||
classNames={{
|
||||
base: "max-w-md gap-3",
|
||||
filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
|
||||
filler: "bg-linear-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
|
||||
}}
|
||||
defaultValue={[100, 300]}
|
||||
formatOptions={{style: "currency", currency: "USD"}}
|
||||
@@ -18,7 +18,7 @@ export default function App() {
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
|
||||
"transition-transform bg-linear-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
|
||||
index === 0
|
||||
? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
|
||||
: "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
|
||||
|
||||
@@ -6,7 +6,7 @@ export default function App() {
|
||||
classNames={{
|
||||
base: "max-w-md gap-3",
|
||||
track: "border-s-secondary-100",
|
||||
filler: "bg-gradient-to-r from-secondary-100 to-secondary-500",
|
||||
filler: "bg-linear-to-r from-secondary-100 to-secondary-500",
|
||||
}}
|
||||
defaultValue={60}
|
||||
label="Select brightness"
|
||||
@@ -15,7 +15,7 @@ export default function App() {
|
||||
{...props}
|
||||
className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
|
||||
>
|
||||
<span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
|
||||
<span className="transition-transform bg-linear-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
|
||||
</div>
|
||||
)}
|
||||
size="sm"
|
||||
|
||||
@@ -31,7 +31,7 @@ export default function App() {
|
||||
>
|
||||
<input
|
||||
aria-label="Temperature value"
|
||||
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
|
||||
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => {
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function App() {
|
||||
>
|
||||
<input
|
||||
aria-label="Temperature value"
|
||||
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
|
||||
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
||||
@@ -17,7 +17,7 @@ export default function App() {
|
||||
"group-data-[selected=true]:ms-6",
|
||||
// pressed
|
||||
"group-data-[pressed=true]:w-7",
|
||||
"group-data-[selected]:group-data-[pressed]:ms-4",
|
||||
"group-data-pressed:group-data-selected:ms-4",
|
||||
),
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -554,7 +554,7 @@ export default function App() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
@@ -606,13 +606,13 @@ export default function App() {
|
||||
td: [
|
||||
// changing the rows border radius
|
||||
// first
|
||||
"group-data-[first=true]/tr:first:before:rounded-none",
|
||||
"group-data-[first=true]/tr:last:before:rounded-none",
|
||||
"first:group-data-[first=true]/tr:before:rounded-none",
|
||||
"last:group-data-[first=true]/tr:before:rounded-none",
|
||||
// middle
|
||||
"group-data-[middle=true]/tr:before:rounded-none",
|
||||
// last
|
||||
"group-data-[last=true]/tr:first:before:rounded-none",
|
||||
"group-data-[last=true]/tr:last:before:rounded-none",
|
||||
"first:group-data-[last=true]/tr:before:rounded-none",
|
||||
"last:group-data-[last=true]/tr:before:rounded-none",
|
||||
],
|
||||
}),
|
||||
[],
|
||||
|
||||
@@ -566,7 +566,7 @@ export default function App() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
@@ -618,13 +618,13 @@ export default function App() {
|
||||
td: [
|
||||
// changing the rows border radius
|
||||
// first
|
||||
"group-data-[first=true]/tr:first:before:rounded-none",
|
||||
"group-data-[first=true]/tr:last:before:rounded-none",
|
||||
"first:group-data-[first=true]/tr:before:rounded-none",
|
||||
"last:group-data-[first=true]/tr:before:rounded-none",
|
||||
// middle
|
||||
"group-data-[middle=true]/tr:before:rounded-none",
|
||||
// last
|
||||
"group-data-[last=true]/tr:first:before:rounded-none",
|
||||
"group-data-[last=true]/tr:last:before:rounded-none",
|
||||
"first:group-data-[last=true]/tr:before:rounded-none",
|
||||
"last:group-data-[last=true]/tr:before:rounded-none",
|
||||
],
|
||||
}),
|
||||
[],
|
||||
|
||||
@@ -550,7 +550,7 @@ export default function App() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
|
||||
@@ -563,7 +563,7 @@ export default function App() {
|
||||
<label className="flex items-center text-default-400 text-small">
|
||||
Rows per page:
|
||||
<select
|
||||
className="bg-transparent outline-none text-default-400 text-small"
|
||||
className="bg-transparent outline-hidden text-default-400 text-small"
|
||||
onChange={onRowsPerPageChange}
|
||||
>
|
||||
<option value="5">5</option>
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function App() {
|
||||
<TimeInput
|
||||
defaultValue={new Time(11, 45)}
|
||||
endContent={
|
||||
<ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
<ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none shrink-0" />
|
||||
}
|
||||
label="Event Time"
|
||||
labelPlacement="outside"
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user