@adea-ai/ui 0.118.1 → 0.118.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,7 +12,7 @@ import { type VariantProps } from '#lib/variants';
|
|
|
12
12
|
* Kobalte supplies the pressed state and the keyboard behaviour; the styling
|
|
13
13
|
* adds the one thing a headless primitive cannot know — that a pressed toggle
|
|
14
14
|
* in a toolbar should read as *filled*, not merely outlined. Pressed reads on
|
|
15
|
-
* the accent rung (`primary-subtle
|
|
15
|
+
* the accent rung (`primary-subtle`, foreground text, accent glyph): pressed is the
|
|
16
16
|
* control's on state, the same family the checked checkbox and switch own, so
|
|
17
17
|
* it keeps a touch of the user's accent instead of a neutral fill.
|
|
18
18
|
*/
|
|
@@ -15,11 +15,11 @@ import { ToggleButton } from "@kobalte/core/toggle-button";
|
|
|
15
15
|
* Kobalte supplies the pressed state and the keyboard behaviour; the styling
|
|
16
16
|
* adds the one thing a headless primitive cannot know — that a pressed toggle
|
|
17
17
|
* in a toolbar should read as *filled*, not merely outlined. Pressed reads on
|
|
18
|
-
* the accent rung (`primary-subtle
|
|
18
|
+
* the accent rung (`primary-subtle`, foreground text, accent glyph): pressed is the
|
|
19
19
|
* control's on state, the same family the checked checkbox and switch own, so
|
|
20
20
|
* it keeps a touch of the user's accent instead of a neutral fill.
|
|
21
21
|
*/
|
|
22
|
-
var toggleVariants = cva(`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
|
|
22
|
+
var toggleVariants = cva(`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-foreground data-[pressed]:[&_svg]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`, {
|
|
23
23
|
variants: {
|
|
24
24
|
variant: {
|
|
25
25
|
default: "bg-transparent",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","names":["ToggleButton","ComponentProps","splitProps","cva","controlInteractive","controlSize","VariantProps","cn","toggleVariants","variants","variant","default","outline","subtle","size","xs","sm","md","lg","xl","defaultVariants","ToggleProps","Toggle","props","local","rest","_$createComponent","_$mergeProps","class","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/toggle/toggle.tsx"],"sourcesContent":["import { ToggleButton } from '@kobalte/core/toggle-button'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Toggle.\n *\n * A button that stays pressed. The difference from Button is state, not looks:\n * a Toggle reports `aria-pressed` and holds its pressed appearance until\n * released, which is what makes it right for a formatting control and wrong\n * for a command.\n *\n * Kobalte supplies the pressed state and the keyboard behaviour; the styling\n * adds the one thing a headless primitive cannot know — that a pressed toggle\n * in a toolbar should read as *filled*, not merely outlined. Pressed reads on\n * the accent rung (`primary-subtle
|
|
1
|
+
{"version":3,"file":"toggle.js","names":["ToggleButton","ComponentProps","splitProps","cva","controlInteractive","controlSize","VariantProps","cn","toggleVariants","variants","variant","default","outline","subtle","size","xs","sm","md","lg","xl","defaultVariants","ToggleProps","Toggle","props","local","rest","_$createComponent","_$mergeProps","class","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/toggle/toggle.tsx"],"sourcesContent":["import { ToggleButton } from '@kobalte/core/toggle-button'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Toggle.\n *\n * A button that stays pressed. The difference from Button is state, not looks:\n * a Toggle reports `aria-pressed` and holds its pressed appearance until\n * released, which is what makes it right for a formatting control and wrong\n * for a command.\n *\n * Kobalte supplies the pressed state and the keyboard behaviour; the styling\n * adds the one thing a headless primitive cannot know — that a pressed toggle\n * in a toolbar should read as *filled*, not merely outlined. Pressed reads on\n * the accent rung (`primary-subtle`, foreground text, accent glyph): pressed is the\n * control's on state, the same family the checked checkbox and switch own, so\n * it keeps a touch of the user's accent instead of a neutral fill.\n */\nexport const toggleVariants = cva(\n `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-foreground data-[pressed]:[&_svg]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n /** Sits inside a field or toolbar that already has a fill. */\n outline: 'border border-border bg-transparent',\n /** Filled even when unpressed, for a segmented control's idle item. */\n subtle: 'bg-surface-hover',\n },\n size: {\n '2xs': `${controlSize['2xs']} [&_svg]:size-3`,\n xs: `${controlSize.xs} [&_svg]:size-3.5`,\n sm: `${controlSize.sm} [&_svg]:size-3.5`,\n md: `${controlSize.md} [&_svg]:size-4`,\n lg: `${controlSize.lg} [&_svg]:size-4`,\n xl: `${controlSize.xl} [&_svg]:size-5`,\n '2xl': `${controlSize['2xl']} [&_svg]:size-6`,\n 'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',\n 'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',\n 'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',\n 'icon-md': 'size-control-md p-0 [&_svg]:size-4',\n 'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',\n 'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',\n 'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',\n },\n },\n defaultVariants: { variant: 'default', size: 'md' },\n }\n)\n\nexport type ToggleProps = ComponentProps<typeof ToggleButton> & VariantProps<typeof toggleVariants>\n\nexport function Toggle(props: ToggleProps) {\n const [local, rest] = splitProps(props, ['variant', 'size', 'class'])\n\n return (\n <ToggleButton\n data-slot=\"toggle\"\n class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}\n {...rest}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAaQ,iBAAiBL,IAC5B,GAAGC,mBAAkB,+UACrB;CACEK,UAAU;EACRC,SAAS;GACPC,SAAS;;GAETC,SAAS;;GAETC,QAAQ;EACV;EACAC,MAAM;GACJ,OAAO,GAAGT,YAAY,OAAM;GAC5BU,IAAI,GAAGV,YAAYU,GAAE;GACrBC,IAAI,GAAGX,YAAYW,GAAE;GACrBC,IAAI,GAAGZ,YAAYY,GAAE;GACrBC,IAAI,GAAGb,YAAYa,GAAE;GACrBC,IAAI,GAAGd,YAAYc,GAAE;GACrB,OAAO,GAAGd,YAAY,OAAM;GAC5B,YAAY;GACZ,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,YAAY;EACd;CACF;CACAe,iBAAiB;EAAEV,SAAS;EAAWI,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBQ,OAAOC,OAAoB;CACzC,MAAM,CAACC,OAAOC,QAAQvB,WAAWqB,OAAO;EAAC;EAAW;EAAQ;CAAO,CAAC;CAEpE,OAAAG,gBACG1B,cAAY2B,WAAA;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEJpB,GAAGC,eAAe;IAAEE,SAASc,MAAMd;IAASI,MAAMU,MAAMV;GAAK,CAAC,GAAGU,MAAMI,KAAK;EAAC;CAAA,GAChFH,IAAI,CAAA;AAGd"}
|
|
@@ -15,12 +15,12 @@ import { cn } from '../../../lib/utils'
|
|
|
15
15
|
* Kobalte supplies the pressed state and the keyboard behaviour; the styling
|
|
16
16
|
* adds the one thing a headless primitive cannot know — that a pressed toggle
|
|
17
17
|
* in a toolbar should read as *filled*, not merely outlined. Pressed reads on
|
|
18
|
-
* the accent rung (`primary-subtle
|
|
18
|
+
* the accent rung (`primary-subtle`, foreground text, accent glyph): pressed is the
|
|
19
19
|
* control's on state, the same family the checked checkbox and switch own, so
|
|
20
20
|
* it keeps a touch of the user's accent instead of a neutral fill.
|
|
21
21
|
*/
|
|
22
22
|
export const toggleVariants = cva(
|
|
23
|
-
`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
|
|
23
|
+
`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-foreground data-[pressed]:[&_svg]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
|
|
24
24
|
{
|
|
25
25
|
variants: {
|
|
26
26
|
variant: {
|
package/package.json
CHANGED
|
@@ -15,12 +15,12 @@ import { cn } from '#lib/utils'
|
|
|
15
15
|
* Kobalte supplies the pressed state and the keyboard behaviour; the styling
|
|
16
16
|
* adds the one thing a headless primitive cannot know — that a pressed toggle
|
|
17
17
|
* in a toolbar should read as *filled*, not merely outlined. Pressed reads on
|
|
18
|
-
* the accent rung (`primary-subtle
|
|
18
|
+
* the accent rung (`primary-subtle`, foreground text, accent glyph): pressed is the
|
|
19
19
|
* control's on state, the same family the checked checkbox and switch own, so
|
|
20
20
|
* it keeps a touch of the user's accent instead of a neutral fill.
|
|
21
21
|
*/
|
|
22
22
|
export const toggleVariants = cva(
|
|
23
|
-
`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
|
|
23
|
+
`${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-foreground data-[pressed]:[&_svg]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
|
|
24
24
|
{
|
|
25
25
|
variants: {
|
|
26
26
|
variant: {
|