archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

v2.8.0 (#5483)

Browse Source 
* fix(date-picker): error state (#5317)

* fix(date-range-picker): fixed the error state in preset

* Update giant-sloths-shop.md

* Removed if statement

* chore(date-picker): prettier

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(theme): clear button in mobile (#5252)

* fix(toast): fixed close button hover position

* fix(input): fixed the clear button rendering on smaller devices

* Delete .changeset/soft-spoons-march.md

* Update input.ts

* Undo unrelated toast changes

* fix(toast): icons (#5246)

* feat(shared-icons): add loading icon

* fix(toast): icons

* chore(toast): revise types for icons

* chore(changeset): add changeset

* refactor: migrate eslint to v9 (#5267)

* refactor: migrate eslint to v9

* chore: lint

* chore: update eslint command

* chore: fix lint warnings

* chore: separate lint and lint:fix

* chore: exclude contentlayer generated code

* fix(scripts): add missing await

* fix(autocomplete): persist last selected item position (#5286)

* refactor(select): remove unnecessary code

* fix(autocomplete): persist last selected item position

* chore(changeset): add changeset

* chore(deps): bump framer-motion version (#5287)

* chore(deps): bump framer-motion version

* fix: typing issues

* chore(changeset): add changeset

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): supplement onAction & selectionBehavior (#5289)

* fix(autocomplete): ensure focused item matches selected item after filter, selection (#5290)

* fix(autocomplete): ensure focused item matches selected item after filter, selection

* chore: apply type and default value

* chore: add perpose coment in updated code

* test: add focuskey management testcode

* docs: add changeset

* docs: update changeset

* chore: remove comment

* fix: broken components in stories (#5291)

* chore(switch): remove xl size

* chore(docs): remove xl size

* chore(system-rsc): remove xl size

* chore(circular-progress): remove xl size

* chore: undo

* chore(deps): bump RA versions (#5310)

* chore(deps): ra version bump

* chore(changeset): add changeset

* fix(scripts): incorrect docs path

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): update meta data (#5311)

* docs(layout.tsx): added text-foreground (#5316)

* feat(tabs): add click handling for tab items in tests and implementation (#3917)

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix issues in tabs examples (#2405)

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore(docs): add missing onValueChange in CheckboxGroup (#5332)

* ci(changesets): version packages (#5323)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(deps): bump RA versions (#5361)

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore: changeset

* refactor(listbox): already extends in AriaListBoxProps

* chore(docs): remove herohack announcement (#5363)

* chore: remove herohack announcement

* Update carbon-ad.tsx

* chore(docs): fixed lint errors

* chore(docs): requested changes

* Update carbon-ad.tsx

* Update carbon-ad.tsx

* fix(theme): consistent faded styling for isInvalid in InputOtp and DateInput (#5349)

* fix(input-otp): remove bg and border styles from faded variant when isInvalid

* fix(date-input): remove bg styles from faded variant when isInvalid

* chore(changeset): add changeset

* chore: bump theme peerDependencies

* chore: bump theme peerDependencies

* fix: wrong version

* chore: extra line

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(theme): helperWrapper padding (#5350)

* fix(number-input): decreased helperWrapper padding to maintain consistency

* Update beige-laws-heal.md

* chore(theme): change to p-1

* chore(deps): bump peerDependencies for theme pkg

* fix(number-input): incorrect versions

* chore(changeset): include number input

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(autocomplete): onClear (#5365)

* fix(autocomplete): add onClear

* feat(autocomplete): add test case for onClear

* chore(changeset): add changeset

* fix(number-input): only allow number type (#5368)

* refactor(number-input): avoid non number type passing to number input

* chore(changeset): add changeset

* refactor: optimization (#5362)

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore(deps): bump RA versions

* chore: changeset

* chore(deps): remove unnecessary dependencies

* fix(calendar): typing issue

* refactor(system): remove unused SupportedCalendars

* refactor(system): move I18nProviderProps to type

* refactor: use `spectrumCalendarProps<DateValue>["createCalendar"]`

* feat: add consistent-type-imports

* fix: eslint

* chore: add changeset

* refactor: remove unused deps

* ci(changesets): version packages (#5364)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(deps): bump RA versions (#5382)

* fix(tabs): onClick (#5378)

* fix(tabs): handleClick

* chore(changeset): add changeset

* refactor: remove `@interationalized/date` from system (#5374)

* refactor(calendar): createCalendar typing

* refactor(system): ditch `@react-types/calendar`

* feat(system): include the required types or interfaces

* chore(deps): pnpm-lock.yaml

* fix: cast DateValue

* fix: minValue & maxValue typing

* chore(changeset): add changeset

* refactor(system): abstract class

* chore(deps): bump system peer dependency

* chore(changeset): add changeset

* fix(docs): correct display of the "Toast" component in the Safari browser (#5400)

* ci(changesets): version packages (#5394)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* docs: replace invalid yarn command (#5422)

* chore: remove ph banner (#5437)

* feat: 2.8.0 beta changes (#5473)

* ci(changesets): 📦 version packages (beta) (#5254)

* chore(pre-release): enter pre-release mode

* feat: support tailwindcss v4 (#4656)

* feat: upgrade tailwindcssv4

* feat: upgrade tailwindcssv4

* feat: update config

* feat: first init tailwindcss v4

* fix: update shadow xs to sm

* fix: update rounded xs to sm

* fix: variant issues

* fix: variant shadow etc issues

* fix: variant shadow issues

* fix: redundant shadow issues

* fix: redundant blur-sm issues

* fix: redundant blur-sm issues

* fix: redundant blur-sm shadow issues

* fix: remove redundant rename

* fix: role button issues

* fix: role button issues

* fix: font size

* fix: alpha color value

* fix: support text utilities in plugin

* feat: upgrade tailwind-merge

* fix: pkg package scope

(cherry picked from commit 6e823233fca0e920336ec32dda6d1d1d845ed0d2)

* fix: button base ui add cursor pointer

* fix: tailwindcss experimental

* feat: upgrade tailwindcss version

* fix: input step 1

* fix: input transition issue

* fix: theme to var function

* ci: run QA in beta branch

* fix: var to the theme and incorrect var usage MER-3261

* feat: upgrade tailwind-variants

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* feat: changeset for tailwindcss v4

* fix: changeset

* fix: changeset

* ci(changesets): version packages (beta) (#5008)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: tw 4 docs

* fix: select tests

* chore: timeout

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* fix: deployment

* ci(changesets): version packages (beta) (#5009)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: add the cli to upgrade the packages to beta

* fix: cli command

* fix: revert to use previous version (#5012)

* fix: revert to use previous version

* fix: revert to use previous version

* fix: revert

* fix: revert to use previous tailwind-merge version

* ci(changesets): version packages (beta) (#5015)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: adapt tailwind merger config (#5016)

* Revert "fix: revert to use previous version (#5012)"

This reverts commit 1d01df254d6df9bc524d29d767236823b33a96fd.

* fix: adapt tailwind merge config

* fix: adapt tailwind merge config

* fix: adapt tailwind merge config

* fix: changeset

* ci(changesets): version packages (beta)

* fix(tailwind): add missing values config for bg-grid plugin

* fix: remove useless tw config

* fix: add default styles

* docs: changeset

* docs: typo

* chore: merge origin canary to beta

* ci(changesets): version packages (beta)

* chore: remove changeset & pre.json

* chore: change to minor

* chore(pre-release): enter pre-release mode

* chore(deps): fix versions

* chore(deps): revise changed packages

* chore(deps): update tailwindcss version

* ci(changesets): 📦 version packages (beta) (#5166)

* ci(changesets): version packages (beta)

* fix: add missing delimiter

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>

* fix(docs): add missing semicolon

* fix: animate about skeleton (#5198)

* chore: pre release

* ci(changesets): version packages (beta) (#5199)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* docs: blurred hover button style

* fix: language selector blur (#5208)

* fix: skeleton animate translate value (#5207)

* fix: open in remote repo (#5214)

* chore: upgrade tw version

* fix: open in remote repo

* fix: update lock

* fix: select translate styles (#5219)

* chore: pre release

* ci(changesets): version packages (beta) (#5222)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: remove changeset

* chore(pre-release): enter pre-release mode

* chore(react): continue from 2.8.0-beta.2

* chore(changeset): add changeset

* fix(changeset): use patch

* ci(changesets): version packages (beta)

* fix(docs): beta docs

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Charlotte21110 <hejianer9@163.com>

* fix(workflow): check_if_pre_json_exists order

* chore(changeset): redeploy

* chore(changeset): changeset (#5263)

* ci(changesets): version packages (beta) (#5264)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(docs): mdx in beta (#5261)

* chore(docs): add lint:fix

* fix(docs): slug requires promise in next 15

* fix(docs): useMDXComponent

* fix(docs): typing issue

* docs: typography style error (#5274)

* chore(pre-release): enter pre-release mode

* feat: support tailwindcss v4 (#4656)

* feat: upgrade tailwindcssv4

* feat: upgrade tailwindcssv4

* feat: update config

* feat: first init tailwindcss v4

* fix: update shadow xs to sm

* fix: update rounded xs to sm

* fix: variant issues

* fix: variant shadow etc issues

* fix: variant shadow issues

* fix: redundant shadow issues

* fix: redundant blur-sm issues

* fix: redundant blur-sm issues

* fix: redundant blur-sm shadow issues

* fix: remove redundant rename

* fix: role button issues

* fix: role button issues

* fix: font size

* fix: alpha color value

* fix: support text utilities in plugin

* feat: upgrade tailwind-merge

* fix: pkg package scope

(cherry picked from commit 6e823233fca0e920336ec32dda6d1d1d845ed0d2)

* fix: button base ui add cursor pointer

* fix: tailwindcss experimental

* feat: upgrade tailwindcss version

* fix: input step 1

* fix: input transition issue

* fix: theme to var function

* ci: run QA in beta branch

* fix: var to the theme and incorrect var usage MER-3261

* feat: upgrade tailwind-variants

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* feat: changeset for tailwindcss v4

* fix: changeset

* fix: changeset

* ci(changesets): version packages (beta) (#5008)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: tw 4 docs

* fix: select tests

* chore: timeout

* ci(changesets): version packages (beta)

* ci(changesets): version packages (beta)

* fix: deployment

* ci(changesets): version packages (beta) (#5009)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: add the cli to upgrade the packages to beta

* fix: cli command

* fix: revert to use previous version (#5012)

* fix: revert to use previous version

* fix: revert to use previous version

* fix: revert

* fix: revert to use previous tailwind-merge version

* ci(changesets): version packages (beta) (#5015)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: adapt tailwind merger config (#5016)

* Revert "fix: revert to use previous version (#5012)"

This reverts commit 1d01df254d6df9bc524d29d767236823b33a96fd.

* fix: adapt tailwind merge config

* fix: adapt tailwind merge config

* fix: adapt tailwind merge config

* fix: changeset

* ci(changesets): version packages (beta)

* fix(tailwind): add missing values config for bg-grid plugin

* fix: remove useless tw config

* fix: add default styles

* docs: changeset

* docs: typo

* chore: merge origin canary to beta

* ci(changesets): version packages (beta)

* chore: remove changeset & pre.json

* chore: change to minor

* chore(pre-release): enter pre-release mode

* chore(deps): fix versions

* chore(deps): revise changed packages

* chore(deps): update tailwindcss version

* ci(changesets): 📦 version packages (beta) (#5166)

* ci(changesets): version packages (beta)

* fix: add missing delimiter

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>

* fix(docs): add missing semicolon

* fix: animate about skeleton (#5198)

* chore: pre release

* ci(changesets): version packages (beta) (#5199)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* docs: blurred hover button style

* fix: language selector blur (#5208)

* fix: skeleton animate translate value (#5207)

* fix: open in remote repo (#5214)

* chore: upgrade tw version

* fix: open in remote repo

* fix: update lock

* fix: select translate styles

* Merge branch beta/release-next of github.com:heroui-inc/heroui into beta/release-next-original

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Charlotte21110 <hejianer9@163.com>

* fix: transition scale (#5284)

* feat(toast): enable programatically closing a toast with a specific key (#5125)

* feat(toast): add closeToast method

* docs(toast): add example for programmatically closing toast

* refactor: change button title in doc

* refactor: add type for key

* test: sync storybook example with the one in docs

* chore: add changeset

* refactor: fix grammar

* chore: update toast package version change to patch

* Merge branch 'canary' into pr/5125

* chore(changeset): add ref number

* refactor(toast): export hooks

* chore(docs): use flat buttons

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* ci(changesets): version packages (beta) (#5285)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(input): prevent accessibility label duplication (#5161)

* fix(input): prevent accessibility label duplication

* chore(chageset): add changeset

* chore(changeset): include issue number

---------

Co-authored-by: WK <wingkwong.code@gmail.com>

* refactor: overlay & interactOutside (#5100)

* fix: remove ariaShouldCloseOnInteractOutside usage

* feat: add `@heroui/use-aria-overlay`

* chore(popover): remove ariaHideOutside

* fix(use-aria-modal-overlay): use useAriaOverlay instead

* fix(use-aira-overlay): revise onInteractOutside

* chore(deps): pnpm-lock.yaml

* feat(modal): add ModalWithAutocompleteTemplate

* chore(modal): remove state.close as handled by useInteractOutside

* fix(use-aria-multiselect): add menuTriggerProps.onPressStart and change domProps to triggerProps

* chore(use-aria-button): support onPressUp

* chore(deps): pnpm-lock.yaml

* chore(use-aria-multiselect): join by commas

* fix(tooltip): use useAriaOverlay instead

* fix(autocomplete): jest timeout issue

* chore(deps): pnpm-lock.yaml

* chore(changset): add changeset

* chore(deps): bump versions

* refactor(tooltip): move to type

* chore(deps): bump RA versions (#5315)

* chore(deps): bump RA versions

* fix(scripts): incorrect docs path

* chore(changeset): add changeset for bumping RA versions

* fix(docs): incorrect import path

* refactor(modal): use a simple example

* ci(changesets): version packages (beta) (#5303)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat(input): adding outside-top prop (#4775)

* feat(input): adding outside-top prop

* chore(input): add outside-top to use-label-placement hook

* refactor(input): use old method for computing labelPlacement in 'use-input'

* fix(input): fix focus behaviouir and alignment for 'outside-top'

* Merge branch 'canary' into pr/4775

* chore(changeset): include issue number

* feat(system): useInputLabelPlacement

* refactor(input): use useInputLabelPlacement

* chore(changeset): add changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore: sync latest changes to beta (#5347)

* chore: add herohack announcement

* fix(date-picker): error state (#5317)

* fix(date-range-picker): fixed the error state in preset

* Update giant-sloths-shop.md

* Removed if statement

* chore(date-picker): prettier

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore: banner replacement

* fix(theme): clear button in mobile (#5252)

* fix(toast): fixed close button hover position

* fix(input): fixed the clear button rendering on smaller devices

* Delete .changeset/soft-spoons-march.md

* Update input.ts

* Undo unrelated toast changes

* fix(toast): icons (#5246)

* feat(shared-icons): add loading icon

* fix(toast): icons

* chore(toast): revise types for icons

* chore(changeset): add changeset

* refactor: migrate eslint to v9 (#5267)

* refactor: migrate eslint to v9

* chore: lint

* chore: update eslint command

* chore: fix lint warnings

* chore: separate lint and lint:fix

* chore: exclude contentlayer generated code

* fix(scripts): add missing await

* fix(autocomplete): persist last selected item position (#5286)

* refactor(select): remove unnecessary code

* fix(autocomplete): persist last selected item position

* chore(changeset): add changeset

* chore(deps): bump framer-motion version (#5287)

* chore(deps): bump framer-motion version

* fix: typing issues

* chore(changeset): add changeset

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): supplement onAction & selectionBehavior (#5289)

* fix(autocomplete): ensure focused item matches selected item after filter, selection (#5290)

* fix(autocomplete): ensure focused item matches selected item after filter, selection

* chore: apply type and default value

* chore: add perpose coment in updated code

* test: add focuskey management testcode

* docs: add changeset

* docs: update changeset

* chore: remove comment

* fix: broken components in stories (#5291)

* chore(switch): remove xl size

* chore(docs): remove xl size

* chore(system-rsc): remove xl size

* chore(circular-progress): remove xl size

* chore: undo

* chore(deps): bump RA versions (#5310)

* chore(deps): ra version bump

* chore(changeset): add changeset

* fix(scripts): incorrect docs path

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore(docs): update meta data (#5311)

* docs(layout.tsx): added text-foreground (#5316)

* feat(tabs): add click handling for tab items in tests and implementation (#3917)

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix issues in tabs examples (#2405)

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore(docs): add missing onValueChange in CheckboxGroup (#5332)

* ci(changesets): version packages (#5323)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* chore: remove pre.json

---------

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: Vishv Salvi <82429084+Vishvsalvi@users.noreply.github.com>
Co-authored-by: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Co-authored-by: liaoyinglong <vigossliao@gmail.com>
Co-authored-by: zhengjitf <zhengjitf@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore(pre-release): enter pre-release mode

* chore: update changesets

* chore: remove changesets

* chore: add changeset

* chore: update `@heroui/react` pre version

* fix(deps): add missing `@heroui/use-aria-overlay` import

* fix: lock file (#5351)

* ci(changesets): 📦 version packages (beta) (#5348)

* ci(changesets): version packages (beta)

* Merge branch 'beta/release-next' into changeset-release/beta/release-next

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore: sync 2.8.0 to beta (#5388)

* chore: remove outdated changeset

* chore(pre-release): enter pre-release mode

* chore(deps): bump RA versions (beta) (#5392)

* chore(deps): bump RA versions

* chore: add changeset

* ci(changesets): version packages (beta) (#5393)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor: remove RA dependencies (overaly & utils) (#5398)

* refactor(system): remove `@react-aria/utils` package

* refactor(system): remove `@react-aria/overlays` package

* ci(changesets): version packages (beta) (#5399)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor: RA optimization (#5401)

* refactor(shared-utils): add common functions from `@react-aria/utils`

* feat(system): add shouldClientNavigate & useRouter

* refactor(deps): remove `@react-aria/utils`

* feat(shared-utils): include common functions from RA

* refactor: import functions from `@heroui/shared-utils` instead

* chore(deps): pnpm-lock.yaml

* chore: add changeset

* chore(shared-utils): update directory

* fix(shared-utils): add use client directive

* feat: add `@heroui/use-viewport-size`

* feat: add `@heroui/use-form-reset`

* feat(use-resize): add hasResizeObserver & RefObject

* feat(form): add useObjectRef

* chore: update import

* chore(deps): update dependencies

* refactor(shared-utils): only keep utils

* chore(deps): pnpm-lock.yaml

* chore(changeset): add changeset

* ci(changesets): version packages (beta) (#5406)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix: transitions (#5409)

* chore(changeset): add changeset

* fix: outline style (#5421)

* fix: outline style

* chore(changeset): add changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(toast): Renaming the loadingIcon to loadingComponent (#4919)

* fix: toast should be above the modal

* fix: renaming the loadingIcon to loadingComponent

* chore: adding changeset

* chore: fixing conflicts

* chore: adding the region props

* fix: adding Marcus' suggestions

* fix: marcus' suggestions

* Revert all commits except 4c6bf32

* chore(toast): bump `@heroui/theme` in peerDependencies

* chore: nits

* chore: applying marcus' suggestions

* chore(toast): update story

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore: use beta version

* chore: delete pre.json

* chore(pre-release): enter pre-release mode

* chore(changeset): trigger release

* chore(changeset): trigger release

* chore: keep previous changesets

* ci(changesets): version packages (beta) (#5429)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(table): header and isStriped missing radius (#5062)

* fix(table): tableheader and isStriped missing radius

* chore: add changeset

* fix: fix missing radius styles

* chore(changeset): update message

* fix(theme): reorder radius

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(slider): prevent NaN error for equal min / max values (#5044)

* fix(slider): prevent NaN error for equal min/max values

* fix: restore isdisabled code

* fix(slider): perf prevent NaN error for equal min max values

* refactor: slider code

* fix(slider): prevent NaN error for equal min max values & add test

* fix(slider): perf prevent NaN error for equal min max values

* fix: remove redundant code

* chore: add changeset

* Revert "chore: add changeset"

This reverts commit f31de4ac859e48eb09c8a14a546fed9e5197eccd.

* chore(slider): add missing warn

* refactor(slider): remove unnecessary line

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix: double fetch img src (#5417)

* fix(image): double fetch when using custom image component

* fix(avatar): avoid passing disableAnimation to dom & double fetch source

* chore(changeset): include avatar

* fix(autocomplete): empty button when selectorIcon is null (#5427)

* fix(toast): Toast items close in reverse order (#5405)

* fix(toast): correct closing order to implement proper FIFO behavior

* chore(changeset): add changeset

* fix(changeset): update issue number

* chore(toast): use `!==` instead

* feat(toast): apply exit animation to auto-close timeout

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(table): remove removeWrapper on virtualized table (#5428)

* fix(table): remove `removeWrapper` for virtualized table

* chore(docs): update description for removeWrapper

* chore(changeset): add changeset

* fix(toast): fixed close button hover position (#5245)

* fix(toast): fixed close button hover position

* Update soft-spoons-march.md

* Update toast.ts

* chore(theme): prettier

* Using "placement" to apply the top and bottom extension

* fix(toast): modified hover for expanded region

* update dependancy array

* lint fix

* Merge branch 'canary' into pr/5245

* chore(theme): remove line breaks

* chore(changeset): add missing package

* static extension size

* fix(toast): static extension fix

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* feat(table): support custom sort icon (#5243)

* feat(shared-icons): add SortIcon

* feat(table): add CustomSortIcon story

* feat(table): support custom sort icon

* fix(table): handle functional sortIcon

* chore(changeset): add changeset

* chore(table): update type

* feat(docs): add sortIcon to table

* fix(docs): broken object

* chore(shared-icons): lint

* feat(docs): add example for sort icon

* chore: bump pnpm & node version (#5442)

* refactor: bump pnpm & node version

* chore(deps): bump `@types/node`

* fix(calendar): improve month and year picker selection for different zoom levels (#5151)

* fix(calendar): improve month and year picker selection for different zoom levels

* fix(calendar): improve month and year picker selection for different zoom levels

* fix(calendar): prevent stale values while scrolling both year and month pickers simultaneously

* docs: replace invalid yarn command (#5422)

* chore: remove ph banner (#5437)

* chore(changeset): update changeset message

* chore: add line breaks

---------

Co-authored-by: Nicolas Cappabianca <nicolas.cappabianca@gmail.com>
Co-authored-by: WK <wingkwong.code@gmail.com>

* feat(select): adding isClearable to select (#4785)

* feat(select): adding isClearable to select

* chore(select): add changeset

* test(select): add tests for isClearable

* chore(select): add theme package patch, improve the testcase, rename nextui package to heroui

* fix(select): fixing alignment for clear button for different cases

* Merge branch 'canary' into pr/4785

* Merge branch 'canary' into pr/4785

* fix(select): remove component level styling

* fix(select): fix the alignment and focus behaviour

* fix(select): shift clear buttojn close to trigger

* fix(select): fix alignment for different variants

* feat(select): add data-has-end-content

* fix(theme): revise select styles with clear button and end content

* feat(docs): add end content

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(select): use span instead as trigger is button

* fix(docs): add ToastProvider for blog post

* ci(changesets): version packages (beta) (#5430)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(select): clear button test cases

* fix(modal): draggable modal, scrollable on mobile (#5444)

Co-authored-by: Vishv Salvi <vishvsalvi@Vishvs-MacBook-Air.local>

* chore: trigger release

* ci(changesets): version packages (beta) (#5445)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(theme): table header sorting icon transition (#5449)

* fix: table header sorcting icon transition

* chore(changeset): add changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(table): allow text selection with cursor in table cells (#5454)

* fix(table): allow text selection with cursor in table cells

* chore(changeset): add changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* ci(changesets): version packages (beta) (#5450)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: add back RA deps (#5466)

* chore(deps): bump testing-library & jest versions (#5468)

* refactor: revise test cases

* chore(deps): bump testing-library & jest versions

* ci(changesets): version packages (beta) (#5467)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor(autocomplete): test cases

* fix(use-theme): incorrect target theme

* ci(changesets): version packages (beta) (#5470)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(use-theme): remove all theme values and add the new one

* ci(changesets): version packages (beta) (#5472)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* docs: 2.8.0 (#5443)

* chore(docs): update routes.json

* chore(docs): bump versions

* chore(docs): initial draft

* chore(docs): add examples

* chore(Docs): update credits and community

* chore(docs): update date & what's next

* chore(docs): update meta data

* chore(docs): add update tags

* chore(docs): add tableSortIcon example

* chore(docs): revise sidebar width

* chore(docs): remove package size optimization

* chore(docs): update meta

* ci(changesets): exit pre-release mode

* chore: update package versions

* chore(changeset): remove unrelated changeset

* chore(deps): remove unused autoprefixer

* chore(docs): update tailwind v4 content

* chore(docs): update template doc content

* chore(docs): update formatting

* chore(toast): export getToastQueue (#5476)

* chore(docs): add hydration issue handling to page router example (#5474)

* docs(dark-mode): add hydration handling to page router example

* chore(docs): format

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore(deps): bump tw4 versions

* fix: handle files with paths containing empty space (#5478)

* chore(docs): revise wordings in 2.8.0 blog

* feat(slider): add getTooltipValue prop for custom tooltip value (#5384)

* feat(slider): add getTooltipValue prop for custom tooltip value

* feat(slider): fix coderabbit highlights

* feat(slider): fixed wingkwong highlights

* feat(slider): added custom-tooltip.raw.tsx?raw

* feat(slider): improved custom-tooltip.raw.tsx

* chore: undo README.md

* chore(slider): use normal $ sign

* chore(changeset): add changeset

* chore(docs): formatting

---------

Co-authored-by: andartadev1 <andartadev@gmail.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore(docs): revise custom tooltip example

* chore(docs): add custom tooltip example for slider

* chore(deps): bump contentlayer2 & next-contentlayer2

* chore(docs): fix formatting

* chore(docs): update metadata

* chore: add v2.8.0 image

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Charlotte21110 <hejianer9@163.com>
Co-authored-by: Feiyu Zheng <67126194+ChaserZ98@users.noreply.github.com>
Co-authored-by: Dmytro Klymenko <dmytro@klymenko.xyz>
Co-authored-by: Abhinav Agarwal <78839973+abhinav700@users.noreply.github.com>
Co-authored-by: Vishv Salvi <82429084+Vishvsalvi@users.noreply.github.com>
Co-authored-by: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Co-authored-by: liaoyinglong <vigossliao@gmail.com>
Co-authored-by: zhengjitf <zhengjitf@gmail.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@gmail.com>
Co-authored-by: Yohan <58714229+kaishuige@users.noreply.github.com>
Co-authored-by: Aditya Ray <96347576+adi-ray@users.noreply.github.com>
Co-authored-by: Aakash Patel <ap0524@srmist.edu.in>
Co-authored-by: Nicolas Cappabianca <nicolas.cappabianca@gmail.com>
Co-authored-by: Vishv Salvi <vishvsalvi@Vishvs-MacBook-Air.local>
Co-authored-by: Priyadharshini S <priyadharshinis5102@gmail.com>
Co-authored-by: arar <77303253+ararTP@users.noreply.github.com>
Co-authored-by: andartadev1 <andartadev@gmail.com>

* chore: consolidated version part 2

* ci(changesets): version packages (#5482)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

---------

Co-authored-by: Vishv Salvi <82429084+Vishvsalvi@users.noreply.github.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Co-authored-by: liaoyinglong <vigossliao@gmail.com>
Co-authored-by: zhengjitf <zhengjitf@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Anuj Kuralkar <76731106+anuj-kuralkar@users.noreply.github.com>
Co-authored-by: Poli Sour <57824881+novsource@users.noreply.github.com>
Co-authored-by: Nicolas Cappabianca <nicolas.cappabianca@gmail.com>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Charlotte21110 <hejianer9@163.com>
Co-authored-by: Feiyu Zheng <67126194+ChaserZ98@users.noreply.github.com>
Co-authored-by: Dmytro Klymenko <dmytro@klymenko.xyz>
Co-authored-by: Abhinav Agarwal <78839973+abhinav700@users.noreply.github.com>
Co-authored-by: Maharshi Alpesh <maharshialpesh@gmail.com>
Co-authored-by: Yohan <58714229+kaishuige@users.noreply.github.com>
Co-authored-by: Aditya Ray <96347576+adi-ray@users.noreply.github.com>
Co-authored-by: Aakash Patel <ap0524@srmist.edu.in>
Co-authored-by: Vishv Salvi <vishvsalvi@Vishvs-MacBook-Air.local>
Co-authored-by: Priyadharshini S <priyadharshinis5102@gmail.com>
Co-authored-by: arar <77303253+ararTP@users.noreply.github.com>
Co-authored-by: andartadev1 <andartadev@gmail.com>
This commit is contained in:
Junior Garcia 2025-07-14 18:52:44 -03:00 committed by GitHub
parent 89892cd6d1
commit 9803aef296
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
521 changed files with 23328 additions and 9626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/QA.yaml vendored
View File

@ -4,6 +4,7 @@ on:
pull_request:
branches:
- canary
- beta/release-next
jobs:
build:

12
.github/workflows/pre-release.yaml vendored
View File

@ -28,6 +28,12 @@ jobs:
- name: Install
uses: ./.github/common-actions/install
- name: Check if pre.json exists
id: check_if_pre_json_exists
uses: andstor/file-existence-action@v3.0.0
with:
files: ".changeset/pre.json"
- name: Debug condition values
run: |
echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
@ -35,12 +41,6 @@ jobs:
echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
- name: Check if pre.json exists
id: check_if_pre_json_exists
uses: andstor/file-existence-action@v3.0.0
with:
files: ".changeset/pre.json"
- name: Get pre-release changesets
id: get-pre-release-changesets
uses: notiz-dev/github-action-json-property@release

14
.lintstagedrc.cjs
View File

@ -1,4 +1,6 @@
const {relative} = require("path");
const escape = require('shell-quote').quote
const isWin = process.platform === 'win32'
const {ESLint} = require("eslint");
@ -9,18 +11,24 @@ const removeIgnoredFiles = async (files) => {
const isIgnored = await Promise.all(relativePaths.map((file) => eslint.isPathIgnored(file)));
const filteredFiles = files.filter((_, i) => !isIgnored[i]);
return filteredFiles.join(" ");
return filteredFiles;
};
module.exports = {
"**/*.{js,ts,jsx,tsx}": async (files) => {
const filesToLint = await removeIgnoredFiles(files);
return [`eslint --max-warnings=0 --fix ${filesToLint}`];
return filesToLint.map((filename) =>
`"${isWin ? filename : escape([filename])}"`
).map((file) => `eslint --max-warnings=0 --fix ${file}`);
},
"**/*.css": async (files) => {
const filesToLint = await removeIgnoredFiles(files);
return [`prettier --config .prettierrc.json --ignore-path --write ${filesToLint}`];
return filesToLint.map((filename) =>
`"${isWin ? filename : escape([filename])}"`
).map(
(file) => `prettier --config .prettierrc.json --ignore-path --write ${file}`
);
},
};

2
.nvmrc
View File

@ -1 +1 @@
v20.16.0
v22.14.0

7
.vscode/settings.json vendored
View File

@ -5,10 +5,13 @@
"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"
],
}

2
CONTRIBUTING.md
View File

@ -196,7 +196,7 @@ pnpm build
npm run build
```
> Note: ensure that you have at least Node.js 20.16.0 as well as pnpm 9.6.0 or higher installed on your machine to run the scripts
> Note: ensure that you have at least Node.js 22 as well as pnpm 10 or higher installed on your machine to run the scripts
6. Send your pull request:

2
apps/docs/app/blog/layout.tsx
View File

@ -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

17
apps/docs/app/docs/[[...slug]]/page.tsx
View File

@ -13,14 +13,13 @@ import {CONTENT_PATH, TAG} from "@/libs/docs/config";
import {getHeadings} from "@/libs/docs/utils";
interface DocPageProps {
params: {
slug: string[];
};
params: Promise<{slug: string[]}>;
}
async function getDocFromParams({params}: DocPageProps) {
const slug = params.slug?.join("/") || "";
const doc = allDocs.find((doc) => doc.slugAsParams === slug);
const {slug} = await params;
const paramsSlug = slug?.join("/") || "";
const doc = allDocs.find((doc) => doc.slugAsParams === paramsSlug);
if (!doc) {
null;
@ -72,9 +71,11 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata
}
export async function generateStaticParams(): Promise<DocPageProps["params"][]> {
return allDocs.map((doc) => ({
slug: doc.slugAsParams.split("/"),
}));
return allDocs.map((doc) =>
Promise.resolve({
slug: doc.slugAsParams.split("/"),
}),
);
}
export default async function DocPage({params}: DocPageProps) {

2
apps/docs/app/docs/layout.tsx
View File

@ -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} />

2
apps/docs/app/examples/navbar/layout.tsx
View File

@ -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

8
apps/docs/app/examples/perf/client-page.tsx
View File

@ -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>

10
apps/docs/app/examples/table/custom-styles/page.tsx
View File

@ -467,7 +467,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-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
@ -519,13 +519,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",
],
}),
[],

96
apps/docs/app/examples/table/sort-icon/page.tsx Normal file
View File

@ -0,0 +1,96 @@
"use client";
import {
Table,
TableHeader,
TableColumn,
TableBody,
TableRow,
TableCell,
getKeyValue,
Spinner,
} from "@heroui/react";
import {SortIcon} from "@heroui/shared-icons";
import {useAsyncList} from "@react-stately/data";
import {useState} from "react";
type SWCharacter = {
name: string;
height: string;
mass: string;
birth_year: string;
};
export default function Page() {
const [isLoading, setIsLoading] = useState(true);
let list = useAsyncList<SWCharacter>({
async load({signal}) {
let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
signal,
});
let json = await res.json();
setIsLoading(false);
return {
items: json.results,
};
},
async sort({items, sortDescriptor}) {
return {
items: items.sort((a, b) => {
let first = a[sortDescriptor.column as keyof SWCharacter];
let second = b[sortDescriptor.column as keyof SWCharacter];
let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
if (sortDescriptor.direction === "descending") {
cmp *= -1;
}
return cmp;
}),
};
},
});
return (
<div className="p-6">
<Table
aria-label="Example table with client side sorting"
classNames={{
table: "min-h-[400px]",
}}
sortDescriptor={list.sortDescriptor}
sortIcon={SortIcon}
onSortChange={list.sort}
>
<TableHeader>
<TableColumn key="name" allowsSorting>
Name
</TableColumn>
<TableColumn key="height" allowsSorting>
Height
</TableColumn>
<TableColumn key="mass" allowsSorting>
Mass
</TableColumn>
<TableColumn key="birth_year" allowsSorting>
Birth year
</TableColumn>
</TableHeader>
<TableBody
isLoading={isLoading}
items={list.items}
loadingContent={<Spinner label="Loading..." />}
>
{(item) => (
<TableRow key={item.name}>
{(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
</TableRow>
)}
</TableBody>
</Table>
</div>
);
}

2
apps/docs/app/examples/table/use-case/page.tsx
View File

@ -459,7 +459,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-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>

2
apps/docs/app/page.tsx
View File

@ -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} />

2
apps/docs/app/playground/page.tsx
View File

@ -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>

12
apps/docs/components/cmdk.tsx
View File

@ -63,7 +63,7 @@ const cmdk = tv({
"h-14",
"font-sans",
"text-lg",
"outline-none",
"outline-solid outline-transparent",
"rounded-none",
"bg-transparent",
"text-default-700",
@ -81,7 +81,7 @@ const cmdk = tv({
"justify-between",
"items-center",
"rounded-lg",
"shadow",
"shadow-xs",
"bg-content2/50",
"active:opacity-70",
"cursor-pointer",
@ -397,10 +397,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"],
}}

6
apps/docs/components/demo-code-modal.tsx
View File

@ -37,8 +37,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={{
@ -71,7 +71,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}

2
apps/docs/components/demos/custom-button.tsx
View File

@ -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}
>

12
apps/docs/components/demos/music-player.tsx
View File

@ -52,7 +52,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)}
@ -85,7 +85,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"
>
@ -94,7 +94,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"
>
@ -103,7 +103,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"
>
@ -112,7 +112,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"
>
@ -121,7 +121,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"
>

2
apps/docs/components/docs/components/component-links.tsx
View File

@ -44,7 +44,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}

8
apps/docs/components/docs/components/package-managers.tsx
View File

@ -24,6 +24,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]" />,
@ -32,10 +36,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]" />,

4
apps/docs/components/docs/heroui-pro-callout.tsx
View File

@ -18,7 +18,7 @@ export const HeroUIProCallout = () => {
<div>
<p className="leading-[1.025] tracking-tight text-center text-large font-semibold">
Ship&nbsp;
<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}
/>

4
apps/docs/components/docs/sidebar.tsx
View File

@ -196,7 +196,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-solid outline-transparent w-full tap-highlight-transparent",
hasChildNodes ? "mb-4" : "first:mt-4",
// focus ring
...dataFocusVisibleClasses,
@ -284,7 +284,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
return (
<ScrollArea
ref={ref}
className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
className="h-full max-w-full lg:max-h-[calc(100vh_-_64px)]"
role="tree"
{...collectionProps}
scrollViewPortRef={scrollViewPortRef}

2
apps/docs/components/featurebase/fb-roadmap-link.tsx
View File

@ -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-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
icon={arrowRightUpIcon}
width={10}
/>

16
apps/docs/components/gradient-box.tsx
View File

@ -8,14 +8,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]",

2
apps/docs/components/heroui-chat-banner.tsx
View File

@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
HeroUI Chat
<Icon
aria-hidden="true"
className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>

6
apps/docs/components/heroui-logo.tsx
View File

@ -21,7 +21,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}
@ -51,7 +51,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}
@ -74,7 +74,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)}

6
apps/docs/components/marketing/a11y-otb.tsx
View File

@ -69,7 +69,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);
@ -147,7 +147,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)}
@ -217,7 +217,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

2
apps/docs/components/marketing/custom-themes/custom-themes.tsx
View File

@ -260,7 +260,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"

18
apps/docs/components/marketing/custom-themes/styles.ts
View File

@ -19,10 +19,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",
],
@ -40,8 +40,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"],
@ -59,7 +59,7 @@ export const shopCartStyles = tv({
"text-sm",
"rounded-full",
// focus ring
"group-data-[focus-visible=true]:outline-none",
"group-data-[focus-visible=true]:outline-solid outline-transparent",
"group-data-[focus-visible=true]:ring-2",
"group-data-[focus-visible=true]:ring-focus",
"group-data-[focus-visible=true]:ring-offset-2",
@ -181,7 +181,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",
@ -195,7 +195,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]",
@ -206,7 +206,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",
},

4
apps/docs/components/marketing/dark-mode.tsx
View File

@ -45,7 +45,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)}
@ -56,7 +56,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>

2
apps/docs/components/marketing/hero/bg-looper.tsx
View File

@ -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}
/>

8
apps/docs/components/marketing/hero/hero.tsx
View File

@ -39,11 +39,11 @@ export const Hero = () => {
content: "font-semibold text-foreground text-xs ",
}}
color="primary"
href="/blog/v2.7.0"
href="/blog/v2.8.0"
variant="flat"
onClick={() => handlePressAnnouncement("HeroUI v2.7.0", "/blog/v2.7.0")}
onClick={() => handlePressAnnouncement("HeroUI v2.8.0", "/blog/v2.8.0")}
>
HeroUI v2.7.0&nbsp;
HeroUI v2.8.0&nbsp;
<span aria-label="emoji" role="img">
🔥
</span>
@ -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-solid outline-transparent transition-transform"
strokeWidth={2}
/>
}

2
apps/docs/components/marketing/heroui-pro-section.tsx
View File

@ -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"

2
apps/docs/components/marketing/heroui-pro-section/heroui-pro-chip.tsx
View File

@ -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"

4
apps/docs/components/marketing/install-banner.tsx
View File

@ -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-solid outline-transparent 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}
/>

2
apps/docs/components/marketing/marquee.tsx
View File

@ -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,

2
apps/docs/components/marketing/support-client.tsx
View File

@ -191,7 +191,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}
>

4
apps/docs/components/mdx-components.tsx
View File

@ -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-solid outline-transparent">
<InfoCircle className="text-default-400" size={16} />
</button>
</Components.PopoverTrigger>

4
apps/docs/components/mdx-content.tsx
View File

@ -2,10 +2,10 @@
import type {MDXComponents as MDXComponentsType} from "mdx/types";
import {useMDXComponent} from "next-contentlayer2/hooks";
import {MDXComponents} from "./mdx-components";
import {useMDXComponent} from "@/hooks/use-mdx-component";
interface MDXContentProps {
code: string;
}

16
apps/docs/components/navbar.tsx
View File

@ -122,7 +122,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}
/>
@ -163,7 +163,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]",
@ -193,11 +193,11 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
content: "font-semibold text-foreground text-xs ",
}}
color="primary"
href="/blog/v2.7.0"
href="/blog/v2.8.0"
variant="flat"
onClick={() => handlePressNavbarItem("HeroUI v2.7.0", "/blog/v2.7.0")}
onClick={() => handlePressNavbarItem("HeroUI v2.8.0", "/blog/v2.8.0")}
>
HeroUI v2.7.0&nbsp;
HeroUI v2.8.0&nbsp;
<span aria-label="emoji" role="img">
🔥
</span>
@ -220,14 +220,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-solid outline-transparent",
// focus ring
...dataFocusVisibleClasses,
)}
@ -337,7 +337,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>

2
apps/docs/components/ph-banner.tsx
View File

@ -97,7 +97,7 @@ export const PhBanner = () => {
Get 30% off
<Icon
aria-hidden="true"
className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>

4
apps/docs/components/primitives.ts
View File

@ -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!",
},
},
});

6
apps/docs/components/pro-banner.tsx
View File

@ -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-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>

18
apps/docs/components/sandpack/entries.ts
View File

@ -46,13 +46,21 @@ 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/*`;
export const viteConfig = `import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
});
`;

2
apps/docs/components/sandpack/language-selector.tsx
View File

@ -32,7 +32,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
base: "absolute z-10 right-3 bottom-4",
cursor: "bg-default-600 dark:bg-default-300",
tabList:
"bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
"bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
}}
radius="md"
selectedKey={selectedTemplate}

56
apps/docs/components/sandpack/use-sandpack.ts
View File

@ -4,6 +4,7 @@ import type {HighlightedLines} from "./types";
import {useMemo} from "react";
import {useTheme} from "next-themes";
import {useLocalStorage} from "usehooks-ts";
import {omit} from "lodash";
import {getHighlightedLines, getFileName} from "./utils";
import {
@ -13,6 +14,7 @@ import {
npmrcConfig,
getHtmlFile,
rootFile,
viteConfig,
} from "./entries";
export interface UseSandpackProps {
@ -185,12 +187,50 @@ 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.1.11",
"@tailwindcss/postcss": "4.1.11",
"@tailwindcss/vite": "4.1.11",
vite: "6.0.6",
},
};
const packageJson = `{
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "18.3.1",
"react-dom": "18.3.1",
${Object.entries(
omit(dependencies as any, [
"react",
"react-dom",
"react-dom/client",
"@vitejs/plugin-react",
"vite",
"postcss",
"tailwindcss",
"@tailwindcss/vite",
"@tailwindcss/postcss",
]),
)
.map(([key, value]) => `"${key}": "${value}"`)
.join(",\n ")}
},
"devDependencies": {
"@vitejs/plugin-react": "4.3.4",
${Object.entries(customSetup.devDependencies)
.map(([key, value]) => `"${key}": "${value}"`)
.join(",\n ")}
},
"main": "/index.jsx",
"packageManager": "pnpm@9.6.0"
}`;
return {
customSetup,
files: {
@ -207,7 +247,7 @@ export const useSandpack = ({
code: tailwindConfig,
hidden: true,
},
"postcss.config.js": {
"postcss.config.cjs": {
code: postcssConfig,
hidden: true,
},
@ -219,6 +259,14 @@ export const useSandpack = ({
code: npmrcConfig,
hidden: true,
},
"vite.config.js": {
code: viteConfig,
hidden: true,
},
"package.json": {
code: packageJson,
hidden: true,
},
},
hasTypescript,
entryFile,

2
apps/docs/components/scripts/script-providers.tsx
View File

@ -15,7 +15,7 @@ export function ScriptProviders({ isKapaEnabled = true }: { isKapaEnabled?: bool
React.useEffect(() => {
function hideKapa() {
const kapaElements = document.querySelectorAll('[id^="kapa-"]');
const display = pathname === "/docs/components/toast" || pathname === "/blog/v2.7.0" ? "none" : "block";
const display = pathname === "/docs/components/toast" || pathname === "/blog/v2.8.0" ? "none" : "block";
kapaElements.forEach((element) => (element as HTMLElement).style.display = display);

2
apps/docs/components/theme-switch.tsx
View File

@ -76,7 +76,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",

8
apps/docs/config/github-info.json
View File

@ -1,6 +1,6 @@
{
"stars": { "raw": 24238, "formatted": "24.2K" },
"forks": 1769,
"subscribers": 88,
"openIssues": 346
"stars": { "raw": 24825, "formatted": "24.8K" },
"forks": 1838,
"subscribers": 89,
"openIssues": 246
}

38
apps/docs/config/routes.json
View File

@ -40,8 +40,7 @@
"key": "forms",
"title": "Forms",
"keywords": "forms, form validation, heroui",
"path": "/docs/guide/forms.mdx",
"updated": true
"path": "/docs/guide/forms.mdx"
},
{
"key": "tailwind-v4",
@ -214,8 +213,7 @@
"key": "checkbox",
"title": "Checkbox",
"keywords": "checkbox, binary choice, selection control, toggle",
"path": "/docs/components/checkbox.mdx",
"updated": true
"path": "/docs/components/checkbox.mdx"
},
{
"key": "checkbox-group",
@ -300,15 +298,13 @@
"key": "input-otp",
"title": "Input OTP",
"keywords": "input, otp, auth, verification code",
"path": "/docs/components/input-otp.mdx",
"updated": true
"path": "/docs/components/input-otp.mdx"
},
{
"key": "kbd",
"title": "Kbd",
"keywords": "keyboard input, shortcut, keys, user input display",
"path": "/docs/components/kbd.mdx",
"updated": true
"path": "/docs/components/kbd.mdx"
},
{
"key": "link",
@ -338,8 +334,7 @@
"key": "number-input",
"title": "Number Input",
"keywords": "input, numeric input, number input",
"path": "/docs/components/number-input.mdx",
"newPost": true
"path": "/docs/components/number-input.mdx"
},
{
"key": "pagination",
@ -363,8 +358,7 @@
"key": "radio-group",
"title": "Radio Group",
"keywords": "radio group, selection set, option selection, exclusive choices",
"path": "/docs/components/radio-group.mdx",
"updated": true
"path": "/docs/components/radio-group.mdx"
},
{
"key": "range-calendar",
@ -382,7 +376,8 @@
"key": "select",
"title": "Select",
"keywords": "select, selection, option list, multiple choice",
"path": "/docs/components/select.mdx"
"path": "/docs/components/select.mdx",
"updated": true
},
{
"key": "skeleton",
@ -394,7 +389,8 @@
"key": "slider",
"title": "Slider",
"keywords": "slider, range input, value selector, sliding control",
"path": "/docs/components/slider.mdx"
"path": "/docs/components/slider.mdx",
"updated": true
},
{
"key": "snippet",
@ -412,8 +408,7 @@
"key": "spinner",
"title": "Spinner",
"keywords": "spinner, loading, activity indicator, processing signal",
"path": "/docs/components/spinner.mdx",
"updated": true
"path": "/docs/components/spinner.mdx"
},
{
"key": "switch",
@ -432,15 +427,14 @@
"key": "tabs",
"title": "Tabs",
"keywords": "tabs, section navigation, categorized content, tabbed interface",
"path": "/docs/components/tabs.mdx",
"updated": true
"path": "/docs/components/tabs.mdx"
},
{
"key": "toast",
"title": "Toast",
"keywords": "toast, notification, message",
"path": "/docs/components/toast.mdx",
"newPost": true
"updated": true
},
{
"key": "textarea",
@ -478,15 +472,13 @@
"key": "cli-api",
"title": "HeroUI CLI",
"keywords": "api references, heroui, api, cli",
"path": "/docs/api-references/cli-api.mdx",
"updated": true
"path": "/docs/api-references/cli-api.mdx"
},
{
"key": "heroui-provider",
"title": "HeroUIProvider",
"keywords": "api references, heroui, api, heroui provider",
"path": "/docs/api-references/heroui-provider.mdx",
"updated": true
"path": "/docs/api-references/heroui-provider.mdx"
}
]
}

2855
apps/docs/config/search-meta.json
View File

File diff suppressed because it is too large Load Diff

12
apps/docs/content/blog/v2.2.0.mdx
View File

@ -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
}}
>

158
apps/docs/content/blog/v2.8.0.mdx Normal file
View File

@ -0,0 +1,158 @@
---
title: "HeroUI v2.8.0"
description: "TailwindCSS v4, improvements and bug fixes."
date: "2025-07-15"
image: "/blog/v2.8.0.jpg"
tags: ["heroui", "v2.8.0", "release", "tailwind v4", "improvements", "theme"]
author:
name: "WK Wong"
username: "@wingkwong"
link: "https://github.com/wingkwong"
avatar: "https://avatars.githubusercontent.com/u/35857179?v=4"
---
import closeToast from "@/content/components/toast/close.ts";
import inputLabelPlacement from "@/content/components/input/label-placements.ts";
import selectIsClearable from "@/content/components/select/is-clearable.ts";
import selectEndContent from "@/content/components/select/end-content.ts";
import tableSortIcon from "@/content/components/table/sort-icon.ts";
import customTooltipContent from "@/content/components/slider/custom-tooltip.ts";
<img
src="/blog/v2.8.0_2x.jpg"
width={700}
height={350}
alt="HeroUI v2.8.0"
className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
/>
HeroUI version **v2.8.0** introduces TailwindCSS v4, improvements and bug fixes.
## What's New in v2.8.0?
- [TailwindCSS v4](#tailwindcss-v4) - Support for TailwindCSS and upgrades to various dependencies.
- [Overlay Enhancement](#overlay-enhancement) - Enhanced overlay and outside interactions across multiple components.
- [Component Enhancement](#component-enhancement) - Enhanced component capabilities.
- [What's Next?](#whats-next) - Upcoming features and improvements
- [Breaking Changes](#breaking-changes) - Important changes that may affect existing implementations
- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements
<Spacer y={4} />
**Upgrade today by using one of the following methods**:
1. Upgrading HeroUI using the `cli`
<PackageManagers
commands={{
cli: "heroui upgrade --all",
npm: "npx heroui-cli@latest upgrade --all",
}}
/>
2. Upgrading HeroUI using package managers
<PackageManagers
commands={{
npm: "npm install @heroui/react@latest",
pnpm: "pnpm add @heroui/react@latest",
yarn: "yarn add @heroui/react@latest",
bun: "bun add @heroui/react@latest",
}}
/>
<Spacer y={4} />
## TailwindCSS v4
HeroUI is now compatible with TailwindCSS v4. With this update, HeroUI CLI has also been enhanced to support initializing new starter templates pre-configured with TailwindCSS v4.
To upgrade your existing projects, please refer to [migration guide](/docs/guide/tailwind-v4#migration-steps).
## Overlay Enhancement
The handling of overlay and outside interaction for components such as Popover, Modal, Dropdown, Select, and Tooltip have been improved to ensure consistent dismissal behaviour.
## Component Enhancement
### Toast
- The return type of `addToast` has been changed from `void` to `string` where the returned string value is the unique key value of the newly created toast.
- A new method `closeToast(key: string): void` has been introduced to accept a key value of `string` type and provide a way to close the specific toast with its unique key programmatically.
- The Toast closing order has been updated from Last In, First Out (LIFO) to First In, First Out (FIFO).
<CodeDemo title="Close Toast" files={closeToast} showEditor={false}/>
### Input
The Input component now features a new label placement option `outside-top`. Previously, labels would always remain inside the input field if there was no placeholder.
The new `outside-top` option ensures that labels are consistently displayed at the top of the input field, regardless of whether a placeholder is present, similar to the existing `outside-left` placement.
<CodeDemo title="Label Placement" files={inputLabelPlacement} />
### Select
Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is slected and a callback function triggered upon clearing the selection for custom handling.
<CodeDemo title="Clearable" files={selectIsClearable} />
`endContent` has been introduced in the Select component.
<CodeDemo title="End Content" files={selectEndContent} />
### Table
The table header previously utilized either a chevron-up or chevron-down icon for sorting, which was not configurable. A new `sortIcon` property has been introduced, allowing users to customize the default sort icon. This icon will only be applied when `allowsSorting` is set to true.
<CodeDemo
asIframe
title="Sort Icon"
resizeEnabled={false}
displayMode="visible"
files={tableSortIcon}
previewHeight="520px"
iframeSrc="/examples/table/sort-icon"
/>
### Slider
The `getTooltipValue` property has been introduced to customize the content displayed in the tooltip by returning a string or a number from the function. The existing `tooltipValueFormatOptions` prop can be used for additional formatting when number is returned. If `tooltipProps.content` is set, it will take precedence over the value generated by `getTooltipValue`.
<CodeDemo title="Custom Tooltip" files={customTooltipContent} />
## What's Next?
We're excited to share that HeroUI v3 (Alpha) is just around the corner! You are expected to create stunning interfaces with 50% smaller bundle size, lightning-fast native CSS animations, and effortless customization that adapts to your design vision.
As an Alpha version, we're actively gathering feedback and refining the current components, including Button, Accordion, Avatar, TextArea, Checkbox, and more. Your input is invaluable in shaping the future of the library.
## Breaking Changes
- The component style have been updated to align TailwindCSS v4.
- `loadingIcon` now renames to `loadingComponent` in Toast component
## Release Changes
<Spacer y={1} />
As always, we are incredibly grateful for your continued support and contributions. There are many exciting milestones ahead, and we invite you to join us on this journey.
Special thanks to HeroUI Team members [@winchesHe](https://github.com/winchesHe), [@macci001](https://github.com/macci001), [@Vishvsalvi](https://github.com/Vishvsalvi), and contributors for their contributions to this release.
<Spacer y={6} />
Thanks for reading and happy coding! 🚀
---
## Community
We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!
<Community />
## Contributing
PRs on HeroUI are always welcome, please see our [contribution guidelines](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.

6
apps/docs/content/components/alert/custom-impl.raw.jsx
View File

@ -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"],

2
apps/docs/content/components/autocomplete/custom-items.raw.jsx
View File

@ -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>

2
apps/docs/content/components/autocomplete/custom-styles.raw.jsx
View File

@ -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>

2
apps/docs/content/components/autocomplete/fully-controlled.ts
View File

@ -1,4 +1,4 @@
import App from "./fully-controlled.raw.tsx?raw";
import App from "./fully-controlled.raw.jsx?raw";
import AppTs from "./fully-controlled.raw.tsx?raw";
const react = {

2
apps/docs/content/components/avatar/custom.raw.jsx
View File

@ -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 />}

2
apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
View File

@ -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",

2
apps/docs/content/components/button/custom-styles.raw.jsx
View File

@ -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

12
apps/docs/content/components/card/blurred.raw.jsx
View File

@ -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"
>

8
apps/docs/content/components/card/cover-image.raw.jsx
View File

@ -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"

2
apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
View File

@ -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-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},

2
apps/docs/content/components/checkbox/custom-implementation.raw.jsx
View File

@ -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-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},

4
apps/docs/content/components/chip/custom-styles.raw.jsx
View File

@ -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
apps/docs/content/components/circular-progress/custom-styles.raw.jsx
View File

@ -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={{

4
apps/docs/content/components/date-input/start-end-content.raw.jsx
View File

@ -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"

4
apps/docs/content/components/drawer/backdrop.raw.jsx
View File

@ -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"

10
apps/docs/content/components/drawer/custom-styles.raw.jsx
View File

@ -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"
/>

4
apps/docs/content/components/drawer/form.raw.jsx
View File

@ -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"

2
apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
View File

@ -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-solid outline-transparent 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"
>

4
apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
View File

@ -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>

2
apps/docs/content/components/dropdown/description.raw.jsx
View File

@ -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>

2
apps/docs/content/components/dropdown/icons.raw.jsx
View File

@ -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>

2
apps/docs/content/components/dropdown/sections.raw.jsx
View File

@ -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>

10
apps/docs/content/components/input/custom-impl.raw.jsx
View File

@ -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

8
apps/docs/content/components/input/custom-styles.raw.jsx
View File

@ -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>

2
apps/docs/content/components/input/label-placements.raw.jsx
View File

@ -1,7 +1,7 @@
import {Input} from "@heroui/react";
export default function App() {
const placements = ["inside", "outside", "outside-left"];
const placements = ["inside", "outside", "outside-left", "outside-top"];
return (
<div className="flex flex-col gap-4">

2
apps/docs/content/components/input/password.raw.jsx
View File

@ -71,7 +71,7 @@ export default function App() {
endContent={
<button
aria-label="toggle password visibility"
className="focus:outline-none"
className="focus:outline-solid outline-transparent"
type="button"
onClick={toggleVisibility}
>

8
apps/docs/content/components/input/start-end-content.raw.jsx
View File

@ -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-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
id="currency"
name="currency"
>

2
apps/docs/content/components/listbox/description.raw.jsx
View File

@ -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>

2
apps/docs/content/components/listbox/icons.raw.jsx
View File

@ -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>

2
apps/docs/content/components/listbox/sections.raw.jsx
View File

@ -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>

2
apps/docs/content/components/listbox/top-content.raw.jsx
View File

@ -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>

2
apps/docs/content/components/listbox/top-content.raw.tsx
View File

@ -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>

2
apps/docs/content/components/modal/custom-backdrop.raw.jsx
View File

@ -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}

4
apps/docs/content/components/modal/form.raw.jsx
View File

@ -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"

2
apps/docs/content/components/number-input/start-end-content.raw.jsx
View File

@ -21,7 +21,7 @@ export default function App() {
</label>
<select
aria-label="Select currency"
className="outline-none border-0 bg-transparent text-default-400 text-small"
className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
defaultValue="USD"
id="currency"
name="currency"

2
apps/docs/content/components/pagination/custom-items.raw.jsx
View File

@ -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)}
>

2
apps/docs/content/components/pagination/custom-items.raw.tsx
View File

@ -79,7 +79,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
apps/docs/content/components/pagination/custom-styles.raw.jsx
View File

@ -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}
/>

2
apps/docs/content/components/popover/custom-styles.raw.jsx
View File

@ -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",
],
}}

2
apps/docs/content/components/progress/custom-styles.raw.jsx
View File

@ -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",
}}

2
apps/docs/content/components/select/custom-items.raw.jsx
View File

@ -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>

9
apps/docs/content/components/select/custom-render-value.raw.jsx
View File

@ -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>

9
apps/docs/content/components/select/custom-render-value.raw.tsx
View File

@ -231,12 +231,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>
@ -248,7 +243,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>

9
apps/docs/content/components/select/custom-styles.raw.jsx
View File

@ -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>

69
apps/docs/content/components/select/end-content.raw.jsx Normal file
View File

@ -0,0 +1,69 @@
import {Select, SelectItem} from "@heroui/react";
export const PetIcon = (props) => {
return (
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 24 24"
width="1em"
{...props}
>
<path
d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
fill="currentColor"
/>
<path
d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
fill="currentColor"
/>
<path
d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
fill="currentColor"
/>
<path
d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
fill="currentColor"
/>
<path
d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
fill="currentColor"
/>
</svg>
);
};
export const animals = [
{key: "cat", label: "Cat"},
{key: "dog", label: "Dog"},
{key: "elephant", label: "Elephant"},
{key: "lion", label: "Lion"},
{key: "tiger", label: "Tiger"},
{key: "giraffe", label: "Giraffe"},
{key: "dolphin", label: "Dolphin"},
{key: "penguin", label: "Penguin"},
{key: "zebra", label: "Zebra"},
{key: "shark", label: "Shark"},
{key: "whale", label: "Whale"},
{key: "otter", label: "Otter"},
{key: "crocodile", label: "Crocodile"},
];
export default function App() {
return (
<Select
className="max-w-xs"
defaultSelectedKeys={["cat"]}
endContent={<PetIcon />}
label="Favorite Animal"
placeholder="Select an animal"
>
{animals.map((animal) => (
<SelectItem key={animal.key}>{animal.label}</SelectItem>
))}
</Select>
);
}

Some files were not shown because too many files have changed in this diff Show More