compote-ui 0.52.1 → 0.52.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.
- package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte +6 -6
- package/dist/components/popover/popover-content.svelte +1 -1
- package/dist/components/scroll-area/scroll-area-content.svelte +1 -1
- package/dist/components/toggle/toggle.svelte +5 -4
- package/dist/components/toggle/toggle.svelte.d.ts +1 -0
- package/dist/components/toggle/toggle.variants.d.ts +15 -2
- package/dist/components/toggle/toggle.variants.js +6 -2
- package/dist/components/toggle/types.d.ts +3 -2
- package/package.json +1 -1
|
@@ -159,8 +159,8 @@
|
|
|
159
159
|
{/if}
|
|
160
160
|
</Popover.Trigger>
|
|
161
161
|
|
|
162
|
-
<Popover.Content class="w-
|
|
163
|
-
<div class="flex items-center justify-between
|
|
162
|
+
<Popover.Content class="w-70 p-3 flex flex-col gap-3" showArrow={false}>
|
|
163
|
+
<div class="flex items-center justify-between py-2.5 mr-1">
|
|
164
164
|
<span class="text-sm font-medium text-ink">Filters</span>
|
|
165
165
|
{#if activeCount > 0}
|
|
166
166
|
<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
|
|
@@ -170,10 +170,10 @@
|
|
|
170
170
|
</div>
|
|
171
171
|
|
|
172
172
|
{#if activeColumns.length > 0}
|
|
173
|
-
<div class="overflow-hidden border-t border-surface-
|
|
173
|
+
<div class="overflow-hidden border-t border-surface-2">
|
|
174
174
|
<ScrollArea.Root class="h-96">
|
|
175
175
|
<ScrollArea.Viewport>
|
|
176
|
-
<ScrollArea.Content>
|
|
176
|
+
<ScrollArea.Content class="flex flex-col gap-3">
|
|
177
177
|
{#each activeColumns as column (column.id)}
|
|
178
178
|
<div class="border border-surface-3 p-3">
|
|
179
179
|
<div class="mb-2 flex items-center justify-between">
|
|
@@ -285,8 +285,8 @@
|
|
|
285
285
|
}}
|
|
286
286
|
/>
|
|
287
287
|
</Field.Root>
|
|
288
|
-
<ScrollArea.Root
|
|
289
|
-
<ScrollArea.Viewport>
|
|
288
|
+
<ScrollArea.Root>
|
|
289
|
+
<ScrollArea.Viewport class="max-h-40">
|
|
290
290
|
<ScrollArea.Content>
|
|
291
291
|
<div class="flex flex-col gap-0.5">
|
|
292
292
|
{#each options as option (option)}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<Popover.Positioner>
|
|
19
19
|
<Popover.Content
|
|
20
20
|
class={cn(
|
|
21
|
-
'z-50 w-72 rounded-md border bg-surface-
|
|
21
|
+
'z-50 w-72 rounded-md border bg-surface-document p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
|
|
22
22
|
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
|
|
23
23
|
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
|
|
24
24
|
className
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Toggle
|
|
2
|
+
import { Toggle } from '@ark-ui/svelte/toggle';
|
|
3
3
|
import type { ToggleProps } from './types';
|
|
4
4
|
import { toggle } from './toggle.variants';
|
|
5
5
|
|
|
@@ -8,15 +8,16 @@
|
|
|
8
8
|
children,
|
|
9
9
|
pressed = $bindable(),
|
|
10
10
|
size,
|
|
11
|
+
variant,
|
|
11
12
|
icon,
|
|
12
13
|
...rootProps
|
|
13
14
|
}: ToggleProps = $props();
|
|
14
15
|
</script>
|
|
15
16
|
|
|
16
|
-
<
|
|
17
|
+
<Toggle.Root
|
|
17
18
|
{...rootProps}
|
|
18
19
|
bind:pressed
|
|
19
|
-
class={toggle({ size, icon, class: className as never })}
|
|
20
|
+
class={toggle({ size, variant, icon, class: className as never })}
|
|
20
21
|
>
|
|
21
22
|
{@render children?.()}
|
|
22
|
-
</
|
|
23
|
+
</Toggle.Root>
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { type VariantProps } from 'tailwind-variants';
|
|
2
2
|
export declare const toggle: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
variant: {
|
|
4
|
+
ghost: string;
|
|
5
|
+
outline: string;
|
|
6
|
+
};
|
|
3
7
|
size: {
|
|
4
8
|
sm: string;
|
|
5
9
|
md: string;
|
|
@@ -8,7 +12,11 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
|
|
|
8
12
|
icon: {
|
|
9
13
|
true: string;
|
|
10
14
|
};
|
|
11
|
-
}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none
|
|
15
|
+
}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", {
|
|
16
|
+
variant: {
|
|
17
|
+
ghost: string;
|
|
18
|
+
outline: string;
|
|
19
|
+
};
|
|
12
20
|
size: {
|
|
13
21
|
sm: string;
|
|
14
22
|
md: string;
|
|
@@ -18,6 +26,10 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
|
|
|
18
26
|
true: string;
|
|
19
27
|
};
|
|
20
28
|
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
29
|
+
variant: {
|
|
30
|
+
ghost: string;
|
|
31
|
+
outline: string;
|
|
32
|
+
};
|
|
21
33
|
size: {
|
|
22
34
|
sm: string;
|
|
23
35
|
md: string;
|
|
@@ -26,5 +38,6 @@ export declare const toggle: import("tailwind-variants").TVReturnType<{
|
|
|
26
38
|
icon: {
|
|
27
39
|
true: string;
|
|
28
40
|
};
|
|
29
|
-
}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none
|
|
41
|
+
}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", unknown, unknown, undefined>>;
|
|
30
42
|
export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;
|
|
43
|
+
export type ToggleVariant = NonNullable<VariantProps<typeof toggle>['variant']>;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { tv } from 'tailwind-variants';
|
|
2
2
|
export const toggle = tv({
|
|
3
|
-
base: 'inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none
|
|
3
|
+
base: 'inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0',
|
|
4
4
|
variants: {
|
|
5
|
+
variant: {
|
|
6
|
+
ghost: 'hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm',
|
|
7
|
+
outline: 'border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm'
|
|
8
|
+
},
|
|
5
9
|
size: {
|
|
6
10
|
sm: 'h-7 min-w-7 gap-1 px-1.5 text-xs [&_svg]:size-3.5',
|
|
7
11
|
md: 'h-8 min-w-8 gap-1.5 px-2 text-sm [&_svg]:size-4',
|
|
@@ -16,5 +20,5 @@ export const toggle = tv({
|
|
|
16
20
|
{ size: 'md', icon: true, class: 'w-8 px-0 [&_svg]:size-6' },
|
|
17
21
|
{ size: 'lg', icon: true, class: 'w-9 px-0 [&_svg]:size-7' }
|
|
18
22
|
],
|
|
19
|
-
defaultVariants: { size: 'md' }
|
|
23
|
+
defaultVariants: { size: 'md', variant: 'ghost' }
|
|
20
24
|
});
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { ToggleRootProps } from '@ark-ui/svelte/toggle';
|
|
2
2
|
import type { ClassValue } from 'svelte/elements';
|
|
3
|
-
import type { ToggleSize } from './toggle.variants';
|
|
3
|
+
import type { ToggleSize, ToggleVariant } from './toggle.variants';
|
|
4
4
|
export interface ToggleProps extends ToggleRootProps {
|
|
5
5
|
class?: ClassValue | null;
|
|
6
6
|
size?: ToggleSize;
|
|
7
|
+
variant?: ToggleVariant;
|
|
7
8
|
icon?: boolean;
|
|
8
9
|
}
|
|
9
|
-
export type { ToggleSize };
|
|
10
|
+
export type { ToggleSize, ToggleVariant };
|