mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
fix(theme): applied tw nested group (#3658)
* fix(theme): apply nested group for checkbox * fix(theme): apply nested group for autocomplete * fix(theme): apply nested group for select * fix(theme): apply nested group for toggle * fix(theme): apply nested group for radio * fix(theme): apply nested group for input * fix(theme): apply nested group for datepicker * fix(theme): apply nested group for dateinput * chore(changeset): add changeset * chore(changeset): add issue number * chore(theme): format code * feat(table): add TableWithSwitch
This commit is contained in:
աӄա
GitHub
parent
b0728e3c38
commit
5b5a9746e3
5
.changeset/clean-teachers-heal.md
Normal file
5
.changeset/clean-teachers-heal.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@nextui-org/theme": patch
|
||||
---
|
||||
|
||||
applied tw nested group (#3544, #2324, #2959)
|
||||
@ -22,6 +22,7 @@ import {
|
||||
TableProps,
|
||||
getKeyValue,
|
||||
} from "../src";
|
||||
import {Switch} from "../../switch/src";
|
||||
|
||||
export default {
|
||||
title: "Components/Table",
|
||||
@ -151,6 +152,46 @@ const StaticTemplate = (args: TableProps) => (
|
||||
</Table>
|
||||
);
|
||||
|
||||
const TableWithSwitchTemplate = (args: TableProps) => (
|
||||
<Table aria-label="Table with Switch" {...args}>
|
||||
<TableHeader>
|
||||
<TableColumn>NAME</TableColumn>
|
||||
<TableColumn>ROLE</TableColumn>
|
||||
<TableColumn>ACTIVE</TableColumn>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow key="1">
|
||||
<TableCell>Tony Reichert</TableCell>
|
||||
<TableCell>CEO</TableCell>
|
||||
<TableCell>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow key="2">
|
||||
<TableCell>Zoey Lang</TableCell>
|
||||
<TableCell>Technical Lead</TableCell>
|
||||
<TableCell>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow key="3">
|
||||
<TableCell>Jane Fisher</TableCell>
|
||||
<TableCell>Senior Developer</TableCell>
|
||||
<TableCell>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow key="4">
|
||||
<TableCell>William Howard</TableCell>
|
||||
<TableCell>Community Manager</TableCell>
|
||||
<TableCell>
|
||||
<Switch />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
const EmptyTemplate = (args: TableProps) => (
|
||||
<Table aria-label="Example empty table" {...args}>
|
||||
<TableHeader>
|
||||
@ -1061,3 +1102,11 @@ export const DisableAnimation = {
|
||||
disableAnimation: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const TableWithSwitch = {
|
||||
render: TableWithSwitchTemplate,
|
||||
args: {
|
||||
...defaultProps,
|
||||
selectionMode: "multiple",
|
||||
},
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import {tv} from "../utils/tv";
|
||||
|
||||
const autocomplete = tv({
|
||||
slots: {
|
||||
base: "group inline-flex flex-column w-full",
|
||||
base: "group/autocomplete inline-flex flex-column w-full",
|
||||
listboxWrapper: "scroll-py-6 max-h-64 w-full",
|
||||
listbox: "",
|
||||
popoverContent: "w-full p-1 overflow-hidden",
|
||||
@ -16,14 +16,14 @@ const autocomplete = tv({
|
||||
"opacity-0",
|
||||
"pointer-events-none",
|
||||
"text-default-500",
|
||||
"group-data-[invalid=true]:text-danger",
|
||||
"group-data-[invalid=true]/autocomplete:text-danger",
|
||||
"data-[visible=true]:opacity-100", // on mobile is always visible when there is a value
|
||||
"data-[visible=true]:pointer-events-auto",
|
||||
"data-[visible=true]:cursor-pointer",
|
||||
"sm:data-[visible=true]:opacity-0", // only visible on hover
|
||||
"sm:data-[visible=true]:pointer-events-none",
|
||||
"sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
|
||||
"sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto",
|
||||
"sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
|
||||
"sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto",
|
||||
],
|
||||
selectorButton: "text-medium",
|
||||
},
|
||||
|
||||
@ -21,7 +21,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
|
||||
*/
|
||||
const checkbox = tv({
|
||||
slots: {
|
||||
base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
|
||||
base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
|
||||
wrapper: [
|
||||
"relative",
|
||||
"inline-flex",
|
||||
@ -44,14 +44,14 @@ const checkbox = tv({
|
||||
"after:scale-50",
|
||||
"after:opacity-0",
|
||||
"after:origin-center",
|
||||
"group-data-[selected=true]:after:scale-100",
|
||||
"group-data-[selected=true]:after:opacity-100",
|
||||
"group-data-[selected=true]/checkbox:after:scale-100",
|
||||
"group-data-[selected=true]/checkbox:after:opacity-100",
|
||||
// hover
|
||||
"group-data-[hover=true]:before:bg-default-100",
|
||||
"group-data-[hover=true]/checkbox:before:bg-default-100",
|
||||
// focus ring
|
||||
...groupDataFocusVisibleClasses,
|
||||
],
|
||||
icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
|
||||
icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
|
||||
label: "relative text-foreground select-none",
|
||||
},
|
||||
variants: {
|
||||
@ -147,8 +147,8 @@ const checkbox = tv({
|
||||
"before:bg-foreground",
|
||||
"before:w-0",
|
||||
"before:h-0.5",
|
||||
"group-data-[selected=true]:opacity-60",
|
||||
"group-data-[selected=true]:before:w-full",
|
||||
"group-data-[selected=true]/checkbox:opacity-60",
|
||||
"group-data-[selected=true]/checkbox:before:w-full",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -172,7 +172,7 @@ const checkbox = tv({
|
||||
false: {
|
||||
wrapper: [
|
||||
"before:transition-colors",
|
||||
"group-data-[pressed=true]:scale-95",
|
||||
"group-data-[pressed=true]/checkbox:scale-95",
|
||||
"transition-transform",
|
||||
"after:transition-transform-opacity",
|
||||
"after:!ease-linear",
|
||||
|
||||
@ -9,13 +9,13 @@ import {tv} from "../utils/tv";
|
||||
*/
|
||||
const dateInput = tv({
|
||||
slots: {
|
||||
base: "group flex flex-col",
|
||||
base: "group/dateinput flex flex-col",
|
||||
label: [
|
||||
"block subpixel-antialiased text-small text-default-600",
|
||||
// isRequired=true
|
||||
"group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
|
||||
"group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
|
||||
// isInValid=true
|
||||
"group-data-[invalid=true]:text-danger",
|
||||
"group-data-[invalid=true]/dateinput:text-danger",
|
||||
],
|
||||
inputWrapper: [
|
||||
"relative px-3 gap-3 w-full inline-flex flex-row items-center",
|
||||
@ -25,10 +25,10 @@ const dateInput = tv({
|
||||
innerWrapper: [
|
||||
"flex items-center text-default-400 w-full gap-x-2 h-6",
|
||||
// isInValid=true
|
||||
"group-data-[invalid=true]:text-danger",
|
||||
"group-data-[invalid=true]/dateinput:text-danger",
|
||||
], // this wraps the input and the start/end content
|
||||
segment: [
|
||||
"group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
|
||||
"group/dateinput first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
|
||||
"inline-block outline-none focus:shadow-sm rounded-md",
|
||||
"text-foreground-500 data-[editable=true]:text-foreground",
|
||||
"data-[editable=true]:data-[placeholder=true]:text-foreground-500",
|
||||
@ -37,7 +37,8 @@ const dateInput = tv({
|
||||
"data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
|
||||
"data-[invalid=true]:data-[editable=true]:focus:text-danger",
|
||||
],
|
||||
helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
|
||||
helperWrapper:
|
||||
"hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
|
||||
description: "text-tiny text-foreground-400",
|
||||
errorMessage: "text-tiny text-danger",
|
||||
},
|
||||
@ -49,9 +50,9 @@ const dateInput = tv({
|
||||
"hover:bg-default-200",
|
||||
"focus-within:hover:bg-default-100",
|
||||
// isInvalid=true
|
||||
"group-data-[invalid=true]:bg-danger-50",
|
||||
"group-data-[invalid=true]:hover:bg-danger-100",
|
||||
"group-data-[invalid=true]:focus-within:hover:bg-danger-50",
|
||||
"group-data-[invalid=true]/dateinput:bg-danger-50",
|
||||
"group-data-[invalid=true]/dateinput:hover:bg-danger-100",
|
||||
"group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
|
||||
],
|
||||
},
|
||||
faded: {
|
||||
@ -61,9 +62,9 @@ const dateInput = tv({
|
||||
"border-default-200",
|
||||
"hover:border-default-400",
|
||||
// isInvalid=true
|
||||
"group-data-[invalid=true]:bg-danger-50",
|
||||
"group-data-[invalid=true]:hover:bg-danger-100",
|
||||
"group-data-[invalid=true]:focus-within:hover:bg-danger-50",
|
||||
"group-data-[invalid=true]/dateinput:bg-danger-50",
|
||||
"group-data-[invalid=true]/dateinput:hover:bg-danger-100",
|
||||
"group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
|
||||
],
|
||||
},
|
||||
bordered: {
|
||||
@ -74,9 +75,9 @@ const dateInput = tv({
|
||||
"focus-within:border-default-foreground",
|
||||
"focus-within:hover:border-default-foreground",
|
||||
// isInvalid=true
|
||||
"group-data-[invalid=true]:border-danger",
|
||||
"group-data-[invalid=true]:hover:border-danger",
|
||||
"group-data-[invalid=true]:focus-within:hover:border-danger",
|
||||
"group-data-[invalid=true]/dateinput:border-danger",
|
||||
"group-data-[invalid=true]/dateinput:hover:border-danger",
|
||||
"group-data-[invalid=true]/dateinput:focus-within:hover:border-danger",
|
||||
],
|
||||
},
|
||||
underlined: {
|
||||
@ -102,7 +103,7 @@ const dateInput = tv({
|
||||
"after:h-[2px]",
|
||||
"focus-within:after:w-full",
|
||||
// isInvalid=true
|
||||
"group-data-[invalid=true]:after:bg-danger",
|
||||
"group-data-[invalid=true]/dateinput:after:bg-danger",
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@ import {tv} from "../utils/tv";
|
||||
*/
|
||||
const datePicker = tv({
|
||||
slots: {
|
||||
base: "group w-full",
|
||||
base: "group/datepicker w-full",
|
||||
selectorButton: "-mr-2 text-inherit",
|
||||
selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
|
||||
popoverContent: "p-0 w-full",
|
||||
@ -23,9 +23,10 @@ const datePicker = tv({
|
||||
const dateRangePicker = tv({
|
||||
extend: datePicker,
|
||||
slots: {
|
||||
calendar: "group",
|
||||
calendar: "group/daterangepicker",
|
||||
bottomContent: "flex flex-col gap-y-2",
|
||||
timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
|
||||
timeInputWrapper:
|
||||
"flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
|
||||
separator: "-mx-1 text-inherit",
|
||||
},
|
||||
});
|
||||
|
||||
@ -23,7 +23,7 @@ import {dataFocusVisibleClasses, groupDataFocusVisibleClasses} from "../utils";
|
||||
*/
|
||||
const input = tv({
|
||||
slots: {
|
||||
base: "group flex flex-col data-[hidden=true]:hidden",
|
||||
base: "group/input flex flex-col data-[hidden=true]:hidden",
|
||||
label: [
|
||||
"absolute",
|
||||
"z-10",
|
||||
@ -65,7 +65,7 @@ const input = tv({
|
||||
// focus ring
|
||||
...dataFocusVisibleClasses,
|
||||
],
|
||||
helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
|
||||
helperWrapper: "hidden group-data-[has-helper=true]/input:flex p-1 relative flex-col gap-1.5",
|
||||
description: "text-tiny text-foreground-400",
|
||||
errorMessage: "text-tiny text-danger",
|
||||
},
|
||||
@ -75,7 +75,7 @@ const input = tv({
|
||||
inputWrapper: [
|
||||
"bg-default-100",
|
||||
"data-[hover=true]:bg-default-200",
|
||||
"group-data-[focus=true]:bg-default-100",
|
||||
"group-data-[focus=true]/input:bg-default-100",
|
||||
],
|
||||
},
|
||||
faded: {
|
||||
@ -85,14 +85,14 @@ const input = tv({
|
||||
"border-default-200",
|
||||
"data-[hover=true]:border-default-400",
|
||||
],
|
||||
value: "group-data-[has-value=true]:text-default-foreground",
|
||||
value: "group-data-[has-value=true]/input:text-default-foreground",
|
||||
},
|
||||
bordered: {
|
||||
inputWrapper: [
|
||||
"border-medium",
|
||||
"border-default-200",
|
||||
"data-[hover=true]:border-default-400",
|
||||
"group-data-[focus=true]:border-default-foreground",
|
||||
"group-data-[focus=true]/input:border-default-foreground",
|
||||
],
|
||||
},
|
||||
underlined: {
|
||||
@ -116,10 +116,10 @@ const input = tv({
|
||||
"after:-translate-x-1/2",
|
||||
"after:-bottom-[2px]",
|
||||
"after:h-[2px]",
|
||||
"group-data-[focus=true]:after:w-full",
|
||||
"group-data-[focus=true]/input:after:w-full",
|
||||
],
|
||||
innerWrapper: "pb-1",
|
||||
label: "group-data-[filled-within=true]:text-foreground",
|
||||
label: "group-data-[filled-within=true]/input:text-foreground",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
@ -178,7 +178,7 @@ const input = tv({
|
||||
inside: {
|
||||
label: "text-tiny cursor-text",
|
||||
inputWrapper: "flex-col items-start justify-center gap-0",
|
||||
innerWrapper: "group-data-[has-label=true]:items-end",
|
||||
innerWrapper: "group-data-[has-label=true]/input:items-end",
|
||||
},
|
||||
},
|
||||
fullWidth: {
|
||||
@ -215,7 +215,7 @@ const input = tv({
|
||||
true: {
|
||||
label: "relative",
|
||||
inputWrapper: "!h-auto",
|
||||
innerWrapper: "items-start group-data-[has-label=true]:items-start",
|
||||
innerWrapper: "items-start group-data-[has-label=true]/input:items-start",
|
||||
input: "resize-none data-[hide-scroll=true]:scrollbar-hide",
|
||||
},
|
||||
},
|
||||
@ -253,7 +253,7 @@ const input = tv({
|
||||
variant: "flat",
|
||||
color: "default",
|
||||
class: {
|
||||
input: "group-data-[has-value=true]:text-default-foreground",
|
||||
input: "group-data-[has-value=true]/input:text-default-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -264,7 +264,7 @@ const input = tv({
|
||||
"bg-primary-50",
|
||||
"data-[hover=true]:bg-primary-100",
|
||||
"text-primary",
|
||||
"group-data-[focus=true]:bg-primary-50",
|
||||
"group-data-[focus=true]/input:bg-primary-50",
|
||||
"placeholder:text-primary",
|
||||
],
|
||||
input: "placeholder:text-primary",
|
||||
@ -279,7 +279,7 @@ const input = tv({
|
||||
"bg-secondary-50",
|
||||
"text-secondary",
|
||||
"data-[hover=true]:bg-secondary-100",
|
||||
"group-data-[focus=true]:bg-secondary-50",
|
||||
"group-data-[focus=true]/input:bg-secondary-50",
|
||||
"placeholder:text-secondary",
|
||||
],
|
||||
input: "placeholder:text-secondary",
|
||||
@ -297,7 +297,7 @@ const input = tv({
|
||||
"placeholder:text-success-600",
|
||||
"dark:placeholder:text-success",
|
||||
"data-[hover=true]:bg-success-100",
|
||||
"group-data-[focus=true]:bg-success-50",
|
||||
"group-data-[focus=true]/input:bg-success-50",
|
||||
],
|
||||
input: "placeholder:text-success-600 dark:placeholder:text-success",
|
||||
label: "text-success-600 dark:text-success",
|
||||
@ -314,7 +314,7 @@ const input = tv({
|
||||
"placeholder:text-warning-600",
|
||||
"dark:placeholder:text-warning",
|
||||
"data-[hover=true]:bg-warning-100",
|
||||
"group-data-[focus=true]:bg-warning-50",
|
||||
"group-data-[focus=true]/input:bg-warning-50",
|
||||
],
|
||||
input: "placeholder:text-warning-600 dark:placeholder:text-warning",
|
||||
label: "text-warning-600 dark:text-warning",
|
||||
@ -331,7 +331,7 @@ const input = tv({
|
||||
"placeholder:text-danger",
|
||||
"dark:placeholder:text-danger-500",
|
||||
"data-[hover=true]:bg-danger-100",
|
||||
"group-data-[focus=true]:bg-danger-50",
|
||||
"group-data-[focus=true]/input:bg-danger-50",
|
||||
],
|
||||
input: "placeholder:text-danger dark:placeholder:text-danger-500",
|
||||
label: "text-danger dark:text-danger-500",
|
||||
@ -383,7 +383,7 @@ const input = tv({
|
||||
variant: "underlined",
|
||||
color: "default",
|
||||
class: {
|
||||
input: "group-data-[has-value=true]:text-foreground",
|
||||
input: "group-data-[has-value=true]/input:text-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -431,7 +431,7 @@ const input = tv({
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: {
|
||||
inputWrapper: "group-data-[focus=true]:border-primary",
|
||||
inputWrapper: "group-data-[focus=true]/input:border-primary",
|
||||
label: "text-primary",
|
||||
},
|
||||
},
|
||||
@ -439,7 +439,7 @@ const input = tv({
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: {
|
||||
inputWrapper: "group-data-[focus=true]:border-secondary",
|
||||
inputWrapper: "group-data-[focus=true]/input:border-secondary",
|
||||
label: "text-secondary",
|
||||
},
|
||||
},
|
||||
@ -447,7 +447,7 @@ const input = tv({
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: {
|
||||
inputWrapper: "group-data-[focus=true]:border-success",
|
||||
inputWrapper: "group-data-[focus=true]/input:border-success",
|
||||
label: "text-success",
|
||||
},
|
||||
},
|
||||
@ -455,7 +455,7 @@ const input = tv({
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: {
|
||||
inputWrapper: "group-data-[focus=true]:border-warning",
|
||||
inputWrapper: "group-data-[focus=true]/input:border-warning",
|
||||
label: "text-warning",
|
||||
},
|
||||
},
|
||||
@ -463,7 +463,7 @@ const input = tv({
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: {
|
||||
inputWrapper: "group-data-[focus=true]:border-danger",
|
||||
inputWrapper: "group-data-[focus=true]/input:border-danger",
|
||||
label: "text-danger",
|
||||
},
|
||||
},
|
||||
@ -472,7 +472,7 @@ const input = tv({
|
||||
labelPlacement: "inside",
|
||||
color: "default",
|
||||
class: {
|
||||
label: "group-data-[filled-within=true]:text-default-600",
|
||||
label: "group-data-[filled-within=true]/input:text-default-600",
|
||||
},
|
||||
},
|
||||
// labelPlacement=outside & default
|
||||
@ -480,7 +480,7 @@ const input = tv({
|
||||
labelPlacement: "outside",
|
||||
color: "default",
|
||||
class: {
|
||||
label: "group-data-[filled-within=true]:text-foreground",
|
||||
label: "group-data-[filled-within=true]/input:text-foreground",
|
||||
},
|
||||
},
|
||||
// radius-full & size
|
||||
@ -538,7 +538,7 @@ const input = tv({
|
||||
inputWrapper: [
|
||||
"!bg-danger-50",
|
||||
"data-[hover=true]:!bg-danger-100",
|
||||
"group-data-[focus=true]:!bg-danger-50",
|
||||
"group-data-[focus=true]/input:!bg-danger-50",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -546,7 +546,7 @@ const input = tv({
|
||||
isInvalid: true,
|
||||
variant: "bordered",
|
||||
class: {
|
||||
inputWrapper: "!border-danger group-data-[focus=true]:!border-danger",
|
||||
inputWrapper: "!border-danger group-data-[focus=true]/input:!border-danger",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -592,7 +592,7 @@ const input = tv({
|
||||
{
|
||||
labelPlacement: ["inside", "outside"],
|
||||
class: {
|
||||
label: ["group-data-[filled-within=true]:pointer-events-auto"],
|
||||
label: ["group-data-[filled-within=true]/input:pointer-events-auto"],
|
||||
},
|
||||
},
|
||||
// labelPlacement=[outside] & isMultiline
|
||||
@ -600,13 +600,13 @@ const input = tv({
|
||||
labelPlacement: "outside",
|
||||
isMultiline: false,
|
||||
class: {
|
||||
base: "group relative justify-end",
|
||||
base: "relative justify-end",
|
||||
label: [
|
||||
"pb-0",
|
||||
"z-20",
|
||||
"top-1/2",
|
||||
"-translate-y-1/2",
|
||||
"group-data-[filled-within=true]:start-0",
|
||||
"group-data-[filled-within=true]/input:start-0",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -614,7 +614,7 @@ const input = tv({
|
||||
{
|
||||
labelPlacement: ["inside"],
|
||||
class: {
|
||||
label: ["group-data-[filled-within=true]:scale-85"],
|
||||
label: ["group-data-[filled-within=true]/input:scale-85"],
|
||||
},
|
||||
},
|
||||
// labelPlacement=[inside] & variant=flat
|
||||
@ -654,7 +654,7 @@ const input = tv({
|
||||
size: "sm",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -664,7 +664,7 @@ const input = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -675,7 +675,7 @@ const input = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -687,7 +687,7 @@ const input = tv({
|
||||
size: "sm",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -698,7 +698,7 @@ const input = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -710,7 +710,7 @@ const input = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -722,7 +722,7 @@ const input = tv({
|
||||
size: "sm",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -733,7 +733,7 @@ const input = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -745,7 +745,7 @@ const input = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -758,7 +758,7 @@ const input = tv({
|
||||
label: [
|
||||
"start-2",
|
||||
"text-tiny",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
|
||||
},
|
||||
@ -772,7 +772,7 @@ const input = tv({
|
||||
"start-3",
|
||||
"end-auto",
|
||||
"text-small",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
|
||||
},
|
||||
@ -786,7 +786,7 @@ const input = tv({
|
||||
"start-3",
|
||||
"end-auto",
|
||||
"text-medium",
|
||||
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
|
||||
"group-data-[filled-within=true]/input:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
|
||||
},
|
||||
@ -796,21 +796,21 @@ const input = tv({
|
||||
labelPlacement: "outside-left",
|
||||
size: "sm",
|
||||
class: {
|
||||
label: "group-data-[has-helper=true]:pt-2",
|
||||
label: "group-data-[has-helper=true]/input:pt-2",
|
||||
},
|
||||
},
|
||||
{
|
||||
labelPlacement: "outside-left",
|
||||
size: "md",
|
||||
class: {
|
||||
label: "group-data-[has-helper=true]:pt-3",
|
||||
label: "group-data-[has-helper=true]/input:pt-3",
|
||||
},
|
||||
},
|
||||
{
|
||||
labelPlacement: "outside-left",
|
||||
size: "lg",
|
||||
class: {
|
||||
label: "group-data-[has-helper=true]:pt-4",
|
||||
label: "group-data-[has-helper=true]/input:pt-4",
|
||||
},
|
||||
},
|
||||
// labelPlacement=[outside, outside-left] & isMultiline
|
||||
|
||||
@ -27,7 +27,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
|
||||
*/
|
||||
const radio = tv({
|
||||
slots: {
|
||||
base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
|
||||
base: "group/radio relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
|
||||
wrapper: [
|
||||
"relative",
|
||||
"inline-flex",
|
||||
@ -40,7 +40,7 @@ const radio = tv({
|
||||
"box-border",
|
||||
"border-default",
|
||||
"rounded-full",
|
||||
"group-data-[hover-unselected=true]:bg-default-100",
|
||||
"group-data-[hover-unselected=true]/radio:bg-default-100",
|
||||
// focus ring
|
||||
...groupDataFocusVisibleClasses,
|
||||
],
|
||||
@ -53,8 +53,8 @@ const radio = tv({
|
||||
"scale-0",
|
||||
"origin-center",
|
||||
"rounded-full",
|
||||
"group-data-[selected=true]:opacity-100",
|
||||
"group-data-[selected=true]:scale-100",
|
||||
"group-data-[selected=true]/radio:opacity-100",
|
||||
"group-data-[selected=true]/radio:scale-100",
|
||||
],
|
||||
label: "relative text-foreground select-none",
|
||||
description: "relative text-foreground-400",
|
||||
@ -63,27 +63,27 @@ const radio = tv({
|
||||
color: {
|
||||
default: {
|
||||
control: "bg-default-500 text-default-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-default-500",
|
||||
wrapper: "group-data-[selected=true]/radio:border-default-500",
|
||||
},
|
||||
primary: {
|
||||
control: "bg-primary text-primary-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-primary",
|
||||
wrapper: "group-data-[selected=true]/radio:border-primary",
|
||||
},
|
||||
secondary: {
|
||||
control: "bg-secondary text-secondary-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-secondary",
|
||||
wrapper: "group-data-[selected=true]/radio:border-secondary",
|
||||
},
|
||||
success: {
|
||||
control: "bg-success text-success-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-success",
|
||||
wrapper: "group-data-[selected=true]/radio:border-success",
|
||||
},
|
||||
warning: {
|
||||
control: "bg-warning text-warning-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-warning",
|
||||
wrapper: "group-data-[selected=true]/radio:border-warning",
|
||||
},
|
||||
danger: {
|
||||
control: "bg-danger text-danger-foreground",
|
||||
wrapper: "group-data-[selected=true]:border-danger",
|
||||
wrapper: "group-data-[selected=true]/radio:border-danger",
|
||||
},
|
||||
},
|
||||
size: {
|
||||
@ -117,7 +117,7 @@ const radio = tv({
|
||||
isInvalid: {
|
||||
true: {
|
||||
control: "bg-danger text-danger-foreground",
|
||||
wrapper: "border-danger group-data-[selected=true]:border-danger",
|
||||
wrapper: "border-danger group-data-[selected=true]/radio:border-danger",
|
||||
label: "text-danger",
|
||||
description: "text-danger-300",
|
||||
},
|
||||
@ -126,7 +126,7 @@ const radio = tv({
|
||||
true: {},
|
||||
false: {
|
||||
wrapper: [
|
||||
"group-data-[pressed=true]:scale-95",
|
||||
"group-data-[pressed=true]/radio:scale-95",
|
||||
"transition-transform-colors",
|
||||
"motion-reduce:transition-none",
|
||||
],
|
||||
|
||||
@ -5,7 +5,7 @@ import {tv} from "../utils/tv";
|
||||
|
||||
const select = tv({
|
||||
slots: {
|
||||
base: ["group inline-flex flex-col relative w-full"],
|
||||
base: ["group/select inline-flex flex-col relative w-full"],
|
||||
label: [
|
||||
"block",
|
||||
"absolute",
|
||||
@ -38,7 +38,7 @@ const select = tv({
|
||||
trigger: [
|
||||
"bg-default-100",
|
||||
"data-[hover=true]:bg-default-200",
|
||||
"group-data-[focus=true]:bg-default-100",
|
||||
"group-data-[focus=true]/select:bg-default-100",
|
||||
],
|
||||
},
|
||||
faded: {
|
||||
@ -49,7 +49,7 @@ const select = tv({
|
||||
"border-default-200",
|
||||
"data-[hover=true]:border-default-400",
|
||||
],
|
||||
value: "group-data-[has-value=true]:text-default-foreground",
|
||||
value: "group-data-[has-value=true]/select:text-default-foreground",
|
||||
},
|
||||
bordered: {
|
||||
trigger: [
|
||||
@ -86,7 +86,7 @@ const select = tv({
|
||||
"data-[open=true]:after:w-full",
|
||||
"data-[focus=true]:after:w-full",
|
||||
],
|
||||
value: "group-data-[has-value=true]:text-default-foreground",
|
||||
value: "group-data-[has-value=true]/select:text-default-foreground",
|
||||
},
|
||||
},
|
||||
color: {
|
||||
@ -218,7 +218,7 @@ const select = tv({
|
||||
variant: "flat",
|
||||
color: "default",
|
||||
class: {
|
||||
value: "group-data-[has-value=true]:text-default-foreground",
|
||||
value: "group-data-[has-value=true]/select:text-default-foreground",
|
||||
trigger: ["bg-default-100", "data-[hover=true]:bg-default-50"],
|
||||
},
|
||||
},
|
||||
@ -230,7 +230,7 @@ const select = tv({
|
||||
"bg-primary-100",
|
||||
"text-primary",
|
||||
"data-[hover=true]:bg-primary-50",
|
||||
"group-data-[focus=true]:bg-primary-50",
|
||||
"group-data-[focus=true]/select:bg-primary-50",
|
||||
],
|
||||
value: "text-primary",
|
||||
label: "text-primary",
|
||||
@ -244,7 +244,7 @@ const select = tv({
|
||||
"bg-secondary-100",
|
||||
"text-secondary",
|
||||
"data-[hover=true]:bg-secondary-50",
|
||||
"group-data-[focus=true]:bg-secondary-50",
|
||||
"group-data-[focus=true]/select:bg-secondary-50",
|
||||
],
|
||||
value: "text-secondary",
|
||||
label: "text-secondary",
|
||||
@ -259,7 +259,7 @@ const select = tv({
|
||||
"text-success-600",
|
||||
"dark:text-success",
|
||||
"data-[hover=true]:bg-success-50",
|
||||
"group-data-[focus=true]:bg-success-50",
|
||||
"group-data-[focus=true]/select:bg-success-50",
|
||||
],
|
||||
value: "text-success-600 dark:text-success",
|
||||
label: "text-success-600 dark:text-success",
|
||||
@ -274,7 +274,7 @@ const select = tv({
|
||||
"text-warning-600",
|
||||
"dark:text-warning",
|
||||
"data-[hover=true]:bg-warning-50",
|
||||
"group-data-[focus=true]:bg-warning-50",
|
||||
"group-data-[focus=true]/select:bg-warning-50",
|
||||
],
|
||||
value: "text-warning-600 dark:text-warning",
|
||||
label: "text-warning-600 dark:text-warning",
|
||||
@ -289,7 +289,7 @@ const select = tv({
|
||||
"text-danger",
|
||||
"dark:text-danger-500",
|
||||
"data-[hover=true]:bg-danger-50",
|
||||
"group-data-[focus=true]:bg-danger-50",
|
||||
"group-data-[focus=true]/select:bg-danger-50",
|
||||
],
|
||||
value: "text-danger dark:text-danger-500",
|
||||
label: "text-danger dark:text-danger-500",
|
||||
@ -342,7 +342,7 @@ const select = tv({
|
||||
variant: "underlined",
|
||||
color: "default",
|
||||
class: {
|
||||
value: "group-data-[has-value=true]:text-foreground",
|
||||
value: "group-data-[has-value=true]/select:text-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -431,7 +431,7 @@ const select = tv({
|
||||
labelPlacement: "inside",
|
||||
color: "default",
|
||||
class: {
|
||||
label: "group-data-[filled=true]:text-default-600",
|
||||
label: "group-data-[filled=true]/select:text-default-600",
|
||||
},
|
||||
},
|
||||
// labelPlacement=outside & default
|
||||
@ -439,7 +439,7 @@ const select = tv({
|
||||
labelPlacement: "outside",
|
||||
color: "default",
|
||||
class: {
|
||||
label: "group-data-[filled=true]:text-foreground",
|
||||
label: "group-data-[filled=true]/select:text-foreground",
|
||||
},
|
||||
},
|
||||
// radius-full & size
|
||||
@ -497,7 +497,7 @@ const select = tv({
|
||||
trigger: [
|
||||
"bg-danger-50",
|
||||
"data-[hover=true]:bg-danger-100",
|
||||
"group-data-[focus=true]:bg-danger-50",
|
||||
"group-data-[focus=true]/select:bg-danger-50",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -505,7 +505,7 @@ const select = tv({
|
||||
isInvalid: true,
|
||||
variant: "bordered",
|
||||
class: {
|
||||
trigger: "!border-danger group-data-[focus=true]:border-danger",
|
||||
trigger: "!border-danger group-data-[focus=true]/select:border-danger",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -543,14 +543,20 @@ const select = tv({
|
||||
isMultiline: false,
|
||||
class: {
|
||||
base: "group relative justify-end",
|
||||
label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"],
|
||||
label: [
|
||||
"pb-0",
|
||||
"z-20",
|
||||
"top-1/2",
|
||||
"-translate-y-1/2",
|
||||
"group-data-[filled=true]/select:start-0",
|
||||
],
|
||||
},
|
||||
},
|
||||
// labelPlacement=[inside]
|
||||
{
|
||||
labelPlacement: ["inside"],
|
||||
class: {
|
||||
label: "group-data-[filled=true]:scale-85",
|
||||
label: "group-data-[filled=true]/select:scale-85",
|
||||
},
|
||||
},
|
||||
// inside & size
|
||||
@ -566,8 +572,10 @@ const select = tv({
|
||||
isMultiline: false,
|
||||
size: "sm",
|
||||
class: {
|
||||
label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]"],
|
||||
innerWrapper: "group-data-[has-label=true]:pt-4",
|
||||
label: [
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]",
|
||||
],
|
||||
innerWrapper: "group-data-[has-label=true]/select:pt-4",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -576,9 +584,9 @@ const select = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]",
|
||||
],
|
||||
innerWrapper: "group-data-[has-label=true]:pt-4",
|
||||
innerWrapper: "group-data-[has-label=true]/select:pt-4",
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -588,9 +596,9 @@ const select = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]",
|
||||
],
|
||||
innerWrapper: "group-data-[has-label=true]:pt-5",
|
||||
innerWrapper: "group-data-[has-label=true]/select:pt-5",
|
||||
},
|
||||
},
|
||||
// inside & size & [faded, bordered]
|
||||
@ -601,7 +609,7 @@ const select = tv({
|
||||
size: "sm",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -612,7 +620,7 @@ const select = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -624,7 +632,7 @@ const select = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -635,7 +643,9 @@ const select = tv({
|
||||
isMultiline: false,
|
||||
size: "sm",
|
||||
class: {
|
||||
label: ["group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]"],
|
||||
label: [
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -645,7 +655,7 @@ const select = tv({
|
||||
size: "md",
|
||||
class: {
|
||||
label: [
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -657,7 +667,7 @@ const select = tv({
|
||||
class: {
|
||||
label: [
|
||||
"text-medium",
|
||||
"group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -670,7 +680,7 @@ const select = tv({
|
||||
label: [
|
||||
"start-2",
|
||||
"text-tiny",
|
||||
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
|
||||
},
|
||||
@ -683,7 +693,7 @@ const select = tv({
|
||||
label: [
|
||||
"start-3",
|
||||
"text-small",
|
||||
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
|
||||
},
|
||||
@ -696,7 +706,7 @@ const select = tv({
|
||||
label: [
|
||||
"start-3",
|
||||
"text-medium",
|
||||
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
|
||||
"group-data-[filled=true]/select:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
|
||||
],
|
||||
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
|
||||
},
|
||||
|
||||
@ -30,7 +30,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
|
||||
*/
|
||||
const toggle = tv({
|
||||
slots: {
|
||||
base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
|
||||
base: "group/toggle relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
|
||||
wrapper: [
|
||||
"px-1",
|
||||
"relative",
|
||||
@ -63,37 +63,37 @@ const toggle = tv({
|
||||
color: {
|
||||
default: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-default-400",
|
||||
"group-data-[selected=true]:text-default-foreground",
|
||||
"group-data-[selected=true]/toggle:bg-default-400",
|
||||
"group-data-[selected=true]/toggle:text-default-foreground",
|
||||
],
|
||||
},
|
||||
primary: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-primary",
|
||||
"group-data-[selected=true]:text-primary-foreground",
|
||||
"group-data-[selected=true]/toggle:bg-primary",
|
||||
"group-data-[selected=true]/toggle:text-primary-foreground",
|
||||
],
|
||||
},
|
||||
secondary: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-secondary",
|
||||
"group-data-[selected=true]:text-secondary-foreground",
|
||||
"group-data-[selected=true]/toggle:bg-secondary",
|
||||
"group-data-[selected=true]/toggle:text-secondary-foreground",
|
||||
],
|
||||
},
|
||||
success: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-success",
|
||||
"group-data-[selected=true]:text-success-foreground",
|
||||
"group-data-[selected=true]/toggle:bg-success",
|
||||
"group-data-[selected=true]/toggle:text-success-foreground",
|
||||
],
|
||||
},
|
||||
warning: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-warning",
|
||||
"group-data-[selected=true]:text-warning-foreground",
|
||||
"group-data-[selected=true]/toggle:bg-warning",
|
||||
"group-data-[selected=true]/toggle:text-warning-foreground",
|
||||
],
|
||||
},
|
||||
danger: {
|
||||
wrapper: [
|
||||
"group-data-[selected=true]:bg-danger",
|
||||
"group-data-[selected=true]/toggle:bg-danger",
|
||||
"data-[selected=true]:text-danger-foreground",
|
||||
],
|
||||
},
|
||||
@ -104,7 +104,7 @@ const toggle = tv({
|
||||
thumb: [
|
||||
"w-4 h-4 text-tiny",
|
||||
//selected
|
||||
"group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4",
|
||||
"group-data-[selected=true]/toggle:ml-4 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-4",
|
||||
],
|
||||
endContent: "text-tiny",
|
||||
startContent: "text-tiny",
|
||||
@ -115,7 +115,7 @@ const toggle = tv({
|
||||
thumb: [
|
||||
"w-5 h-5 text-small",
|
||||
//selected
|
||||
"group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5",
|
||||
"group-data-[selected=true]/toggle:ml-5 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-5",
|
||||
],
|
||||
endContent: "text-small",
|
||||
startContent: "text-small",
|
||||
@ -126,7 +126,7 @@ const toggle = tv({
|
||||
thumb: [
|
||||
"w-6 h-6 text-medium",
|
||||
//selected
|
||||
"group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6",
|
||||
"group-data-[selected=true]/toggle:ml-6 rtl:group-data-[selected=true]/toggle:ml-0 rtl:group-data-[selected=true]/toggle:mr-6",
|
||||
],
|
||||
endContent: "text-medium",
|
||||
startContent: "text-medium",
|
||||
@ -150,14 +150,14 @@ const toggle = tv({
|
||||
"opacity-0",
|
||||
"scale-50",
|
||||
"transition-transform-opacity",
|
||||
"group-data-[selected=true]:scale-100",
|
||||
"group-data-[selected=true]:opacity-100",
|
||||
"group-data-[selected=true]/toggle:scale-100",
|
||||
"group-data-[selected=true]/toggle:opacity-100",
|
||||
],
|
||||
endContent: [
|
||||
"opacity-100",
|
||||
"transition-transform-opacity",
|
||||
"group-data-[selected=true]:translate-x-3",
|
||||
"group-data-[selected=true]:opacity-0",
|
||||
"group-data-[selected=true]/toggle:translate-x-3",
|
||||
"group-data-[selected=true]/toggle:opacity-0",
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -172,21 +172,30 @@ const toggle = tv({
|
||||
disableAnimation: false,
|
||||
size: "sm",
|
||||
class: {
|
||||
thumb: ["group-data-[pressed=true]:w-5", "group-data-[selected]:group-data-[pressed]:ml-3"],
|
||||
thumb: [
|
||||
"group-data-[pressed=true]/toggle:w-5",
|
||||
"group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-3",
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: false,
|
||||
size: "md",
|
||||
class: {
|
||||
thumb: ["group-data-[pressed=true]:w-6", "group-data-[selected]:group-data-[pressed]:ml-4"],
|
||||
thumb: [
|
||||
"group-data-[pressed=true]/toggle:w-6",
|
||||
"group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-4",
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
disableAnimation: false,
|
||||
size: "lg",
|
||||
class: {
|
||||
thumb: ["group-data-[pressed=true]:w-7", "group-data-[selected]:group-data-[pressed]:ml-5"],
|
||||
thumb: [
|
||||
"group-data-[pressed=true]/toggle:w-7",
|
||||
"group-data-[selected]/toggle:group-data-[pressed]/toggle:ml-5",
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user