compote-ui 0.0.6 → 0.1.0
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/checkbox/Checkbox-group.svelte +29 -0
- package/dist/components/checkbox/Checkbox-group.svelte.d.ts +25 -0
- package/dist/components/checkbox/Checkbox.svelte +16 -8
- package/dist/components/checkbox/Checkbox.svelte.d.ts +1 -1
- package/dist/components/checkbox/checkbox-group.types.d.ts +11 -0
- package/dist/components/checkbox/checkbox.types.js +1 -0
- package/dist/gray-oklch.min.css +1 -0
- package/dist/icons/PhCheck.svelte +3 -2
- package/dist/icons/PhMinus.svelte +15 -0
- package/dist/icons/PhMinus.svelte.d.ts +5 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/palette.css +1 -0
- package/dist/palette.oklch.css +72 -0
- package/dist/theme.css +28 -1
- package/package.json +1 -1
- package/dist/icons/CheckBold.svelte +0 -10
- package/dist/icons/CheckBold.svelte.d.ts +0 -5
- /package/dist/components/checkbox/{checkbox-props.js → checkbox-group.types.js} +0 -0
- /package/dist/components/checkbox/{checkbox-props.d.ts → checkbox.types.d.ts} +0 -0
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts" generics="T extends string | number">
|
|
2
|
+
import { Checkbox } from '@ark-ui/svelte/checkbox';
|
|
3
|
+
import type { CheckboxGroupProps } from './checkbox-group.types';
|
|
4
|
+
import CheckboxItem from './Checkbox.svelte';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
items,
|
|
8
|
+
value = $bindable([]),
|
|
9
|
+
onValueChange,
|
|
10
|
+
orientation = 'horizontal',
|
|
11
|
+
...rest
|
|
12
|
+
}: CheckboxGroupProps<T> = $props();
|
|
13
|
+
|
|
14
|
+
const arkValue = $derived(value.map(String));
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<Checkbox.Group
|
|
18
|
+
value={arkValue}
|
|
19
|
+
onValueChange={(newValue) => {
|
|
20
|
+
value = items.filter((item) => newValue.includes(String(item.value))).map((item) => item.value);
|
|
21
|
+
onValueChange?.(newValue);
|
|
22
|
+
}}
|
|
23
|
+
{...rest}
|
|
24
|
+
class={orientation === 'vertical' ? 'flex flex-col gap-0.5' : 'flex flex-wrap gap-4'}
|
|
25
|
+
>
|
|
26
|
+
{#each items as item (item.value)}
|
|
27
|
+
<CheckboxItem value={String(item.value)} label={item.label} />
|
|
28
|
+
{/each}
|
|
29
|
+
</Checkbox.Group>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { CheckboxGroupProps } from './checkbox-group.types';
|
|
2
|
+
declare function $$render<T extends string | number>(): {
|
|
3
|
+
props: CheckboxGroupProps<T>;
|
|
4
|
+
exports: {};
|
|
5
|
+
bindings: "value";
|
|
6
|
+
slots: {};
|
|
7
|
+
events: {};
|
|
8
|
+
};
|
|
9
|
+
declare class __sveltets_Render<T extends string | number> {
|
|
10
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
11
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
12
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
13
|
+
bindings(): "value";
|
|
14
|
+
exports(): {};
|
|
15
|
+
}
|
|
16
|
+
interface $$IsomorphicComponent {
|
|
17
|
+
new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
18
|
+
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
19
|
+
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
20
|
+
<T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
21
|
+
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
22
|
+
}
|
|
23
|
+
declare const CheckboxGroup: $$IsomorphicComponent;
|
|
24
|
+
type CheckboxGroup<T extends string | number> = InstanceType<typeof CheckboxGroup<T>>;
|
|
25
|
+
export default CheckboxGroup;
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { Checkbox } from '@ark-ui/svelte/checkbox';
|
|
3
|
-
import type { CheckboxProps as Props } from './checkbox
|
|
4
|
-
import PhCheck from '../../icons/
|
|
3
|
+
import type { CheckboxProps as Props } from './checkbox.types.js';
|
|
4
|
+
import PhCheck from '../../icons/PhCheck.svelte';
|
|
5
5
|
|
|
6
6
|
let { checked = $bindable(), label, children, ...rest }: Props = $props();
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
|
-
<Checkbox.Root
|
|
9
|
+
<Checkbox.Root
|
|
10
|
+
bind:checked
|
|
11
|
+
class="inline-flex cursor-pointer gap-2 {children ? 'items-start' : 'items-center'}"
|
|
12
|
+
{...rest}
|
|
13
|
+
>
|
|
10
14
|
<Checkbox.Control
|
|
11
|
-
class="
|
|
15
|
+
class="{children
|
|
16
|
+
? 'mt-0.5'
|
|
17
|
+
: ''} flex size-4 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary"
|
|
12
18
|
>
|
|
13
19
|
<Checkbox.Indicator>
|
|
14
20
|
<PhCheck class="size-3.5 text-primary-foreground" />
|
|
@@ -16,11 +22,13 @@
|
|
|
16
22
|
</Checkbox.Control>
|
|
17
23
|
{#if label}
|
|
18
24
|
<div class="flex flex-col gap-0.5">
|
|
19
|
-
<Checkbox.Label class="text-base
|
|
20
|
-
|
|
21
|
-
>
|
|
25
|
+
<Checkbox.Label class="text-base select-none data-disabled:opacity-50">
|
|
26
|
+
{label}
|
|
27
|
+
</Checkbox.Label>
|
|
22
28
|
{#if children}
|
|
23
|
-
<span class="text-sm text-
|
|
29
|
+
<span class="text-sm text-ink-dim">
|
|
30
|
+
{@render children()}
|
|
31
|
+
</span>
|
|
24
32
|
{/if}
|
|
25
33
|
</div>
|
|
26
34
|
{/if}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Checkbox } from '@ark-ui/svelte/checkbox';
|
|
2
|
-
import type { CheckboxProps as Props } from './checkbox
|
|
2
|
+
import type { CheckboxProps as Props } from './checkbox.types.ts';
|
|
3
3
|
declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
|
|
4
4
|
type Checkbox = ReturnType<typeof Checkbox>;
|
|
5
5
|
export default Checkbox;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { CheckboxGroupBaseProps } from '@ark-ui/svelte/checkbox';
|
|
2
|
+
export interface CheckboxGroupProps<T = string | number> extends Omit<CheckboxGroupBaseProps, 'value'> {
|
|
3
|
+
label?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
items: {
|
|
6
|
+
value: T;
|
|
7
|
+
label: string;
|
|
8
|
+
}[];
|
|
9
|
+
value: T[];
|
|
10
|
+
orientation?: 'horizontal' | 'vertical';
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:where(*){--gray-0:oklch(99% var(--gray-chroma,none) var(--gray-hue,none));--gray-1:oklch(95% var(--gray-chroma,none) var(--gray-hue,none));--gray-2:oklch(88% var(--gray-chroma,none) var(--gray-hue,none));--gray-3:oklch(80% var(--gray-chroma,none) var(--gray-hue,none));--gray-4:oklch(74% var(--gray-chroma,none) var(--gray-hue,none));--gray-5:oklch(68% var(--gray-chroma,none) var(--gray-hue,none));--gray-6:oklch(63% var(--gray-chroma,none) var(--gray-hue,none));--gray-7:oklch(58% var(--gray-chroma,none) var(--gray-hue,none));--gray-8:oklch(53% var(--gray-chroma,none) var(--gray-hue,none));--gray-9:oklch(49% var(--gray-chroma,none) var(--gray-hue,none));--gray-10:oklch(43% var(--gray-chroma,none) var(--gray-hue,none));--gray-11:oklch(37% var(--gray-chroma,none) var(--gray-hue,none));--gray-12:oklch(31% var(--gray-chroma,none) var(--gray-hue,none));--gray-13:oklch(25% var(--gray-chroma,none) var(--gray-hue,none));--gray-14:oklch(18% var(--gray-chroma,none) var(--gray-hue,none));--gray-15:oklch(10% var(--gray-chroma,none) var(--gray-hue,none))}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
let { class:
|
|
2
|
+
let { class: className = '', ...restProps } = $props();
|
|
3
3
|
</script>
|
|
4
4
|
|
|
5
5
|
<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
|
|
6
6
|
<svg
|
|
7
|
+
class={className}
|
|
7
8
|
xmlns="http://www.w3.org/2000/svg"
|
|
8
9
|
width="1em"
|
|
9
10
|
height="1em"
|
|
@@ -11,7 +12,7 @@
|
|
|
11
12
|
{...restProps}
|
|
12
13
|
>
|
|
13
14
|
<path
|
|
14
|
-
fill="
|
|
15
|
+
fill="currentColor"
|
|
15
16
|
d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32"
|
|
16
17
|
/>
|
|
17
18
|
</svg>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { class: className = '', ...restProps } = $props();
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
|
|
6
|
+
<svg
|
|
7
|
+
class={className}
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
width="1em"
|
|
10
|
+
height="1em"
|
|
11
|
+
viewBox="0 0 256 256"
|
|
12
|
+
{...restProps}
|
|
13
|
+
>
|
|
14
|
+
<path fill="currentColor" d="M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8" />
|
|
15
|
+
</svg>
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
// Reexport your entry components here
|
|
2
2
|
export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
|
|
3
|
+
export { default as CheckboxGroup } from './components/checkbox/Checkbox-group.svelte';
|
|
3
4
|
export { default as Button } from './components/button/Button.svelte';
|
package/dist/palette.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
:where(:root) {
|
|
2
|
+
--palette-hue: 250; /* <angle */
|
|
3
|
+
--palette-hue-rotate-by: 0; /* +- deg : warm or cool the palette */
|
|
4
|
+
--palette-chroma: 0.15; /* 0-1 : lower to mute and pastel, over 2 at own risk */
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
* {
|
|
8
|
+
--color-1: oklch(
|
|
9
|
+
98% calc(0.03 * var(--palette-chroma, 1))
|
|
10
|
+
calc(var(--palette-hue) + (0 * var(--palette-hue-rotate-by)))
|
|
11
|
+
);
|
|
12
|
+
--color-2: oklch(
|
|
13
|
+
97% calc(0.06 * var(--palette-chroma, 1))
|
|
14
|
+
calc(var(--palette-hue) + (1 * var(--palette-hue-rotate-by)))
|
|
15
|
+
);
|
|
16
|
+
--color-3: oklch(
|
|
17
|
+
93% calc(0.1 * var(--palette-chroma, 1))
|
|
18
|
+
calc(var(--palette-hue) + (2 * var(--palette-hue-rotate-by)))
|
|
19
|
+
);
|
|
20
|
+
--color-4: oklch(
|
|
21
|
+
84% calc(0.12 * var(--palette-chroma, 1))
|
|
22
|
+
calc(var(--palette-hue) + (3 * var(--palette-hue-rotate-by)))
|
|
23
|
+
);
|
|
24
|
+
--color-5: oklch(
|
|
25
|
+
80% calc(0.16 * var(--palette-chroma, 1))
|
|
26
|
+
calc(var(--palette-hue) + (4 * var(--palette-hue-rotate-by)))
|
|
27
|
+
);
|
|
28
|
+
--color-6: oklch(
|
|
29
|
+
71% calc(0.19 * var(--palette-chroma, 1))
|
|
30
|
+
calc(var(--palette-hue) + (5 * var(--palette-hue-rotate-by)))
|
|
31
|
+
);
|
|
32
|
+
--color-7: oklch(
|
|
33
|
+
66% calc(0.2 * var(--palette-chroma, 1))
|
|
34
|
+
calc(var(--palette-hue) + (6 * var(--palette-hue-rotate-by)))
|
|
35
|
+
);
|
|
36
|
+
--color-8: oklch(
|
|
37
|
+
58% calc(0.21 * var(--palette-chroma, 1))
|
|
38
|
+
calc(var(--palette-hue) + (7 * var(--palette-hue-rotate-by)))
|
|
39
|
+
);
|
|
40
|
+
--color-9: oklch(
|
|
41
|
+
53% calc(0.2 * var(--palette-chroma, 1))
|
|
42
|
+
calc(var(--palette-hue) + (8 * var(--palette-hue-rotate-by)))
|
|
43
|
+
);
|
|
44
|
+
--color-10: oklch(
|
|
45
|
+
49% calc(0.19 * var(--palette-chroma, 1))
|
|
46
|
+
calc(var(--palette-hue) + (9 * var(--palette-hue-rotate-by)))
|
|
47
|
+
);
|
|
48
|
+
--color-11: oklch(
|
|
49
|
+
42% calc(0.17 * var(--palette-chroma, 1))
|
|
50
|
+
calc(var(--palette-hue) + (10 * var(--palette-hue-rotate-by)))
|
|
51
|
+
);
|
|
52
|
+
--color-12: oklch(
|
|
53
|
+
35% calc(0.15 * var(--palette-chroma, 1))
|
|
54
|
+
calc(var(--palette-hue) + (11 * var(--palette-hue-rotate-by)))
|
|
55
|
+
);
|
|
56
|
+
--color-13: oklch(
|
|
57
|
+
27% calc(0.12 * var(--palette-chroma, 1))
|
|
58
|
+
calc(var(--palette-hue) + (12 * var(--palette-hue-rotate-by)))
|
|
59
|
+
);
|
|
60
|
+
--color-14: oklch(
|
|
61
|
+
20% calc(0.09 * var(--palette-chroma, 1))
|
|
62
|
+
calc(var(--palette-hue) + (13 * var(--palette-hue-rotate-by)))
|
|
63
|
+
);
|
|
64
|
+
--color-15: oklch(
|
|
65
|
+
16% calc(0.07 * var(--palette-chroma, 1))
|
|
66
|
+
calc(var(--palette-hue) + (14 * var(--palette-hue-rotate-by)))
|
|
67
|
+
);
|
|
68
|
+
--color-16: oklch(
|
|
69
|
+
10% calc(0.05 * var(--palette-chroma, 1))
|
|
70
|
+
calc(var(--palette-hue) + (15 * var(--palette-hue-rotate-by)))
|
|
71
|
+
);
|
|
72
|
+
}
|
package/dist/theme.css
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
|
+
@import './palette.oklch.css';
|
|
2
|
+
|
|
1
3
|
:root {
|
|
4
|
+
--gray-hue: 248.19;
|
|
5
|
+
--gray-chroma: 0.009;
|
|
2
6
|
--radius: 6px;
|
|
7
|
+
--dim: 0.3;
|
|
8
|
+
--compote-ink: var(--color-gray-900);
|
|
9
|
+
--compote-ink-dim: oklch(from var(--compote-ink) calc(l + var(--dim)) c h);
|
|
10
|
+
--compote-surface: oklch(from var(--compote-ink) calc(1 - l) c h);
|
|
11
|
+
--compote-surface: oklch(from var(--compote-ink) calc(1 - l) c h);
|
|
3
12
|
|
|
4
13
|
--background: oklch(0.9885 0.0057 84.5659);
|
|
5
14
|
--foreground: oklch(0.366 0.0251 49.6085);
|
|
@@ -27,6 +36,15 @@
|
|
|
27
36
|
|
|
28
37
|
@media (prefers-color-scheme: dark) {
|
|
29
38
|
:root {
|
|
39
|
+
--compote-ink: var(--color-1);
|
|
40
|
+
--compote-ink-dim: var(--color-5);
|
|
41
|
+
--compote-surface-3: var(--color-11);
|
|
42
|
+
--compote-surface-2: var(--color-12);
|
|
43
|
+
--compote-surface-1: var(--color-13);
|
|
44
|
+
--compote-surface-document: var(--color-14);
|
|
45
|
+
--compote-well-1: var(--color-15);
|
|
46
|
+
--compote-well-2: var(--color-16);
|
|
47
|
+
|
|
30
48
|
--background: oklch(26.21% 0.009 248.19);
|
|
31
49
|
--foreground: oklch(0.9699 0.0013 106.4238);
|
|
32
50
|
--card: oklch(34.51% 0.013 248.21);
|
|
@@ -50,6 +68,15 @@
|
|
|
50
68
|
}
|
|
51
69
|
|
|
52
70
|
@theme inline {
|
|
71
|
+
--color-ink: var(--compote-ink);
|
|
72
|
+
--color-ink-dim: var(--compote-ink-dim);
|
|
73
|
+
--color-surface-3: var(--compote-surface-3);
|
|
74
|
+
--color-surface-2: var(--compote-surface-2);
|
|
75
|
+
--color-surface-1: var(--compote-surface-1);
|
|
76
|
+
--color-surface-document: var(--compote-surface-document);
|
|
77
|
+
--color-well-1: var(--compote-well-1);
|
|
78
|
+
--color-well-2: var(--compote-well-2);
|
|
79
|
+
|
|
53
80
|
--color-background: var(--background);
|
|
54
81
|
--color-foreground: var(--foreground);
|
|
55
82
|
--color-card: var(--card);
|
|
@@ -85,6 +112,6 @@
|
|
|
85
112
|
@apply border-border outline-ring/50;
|
|
86
113
|
}
|
|
87
114
|
body {
|
|
88
|
-
@apply bg-
|
|
115
|
+
@apply bg-surface-document text-ink;
|
|
89
116
|
}
|
|
90
117
|
}
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
let { class: cls = '', ...rest } = $props();
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<svg class={cls} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...rest}>
|
|
6
|
-
<path
|
|
7
|
-
fill="currentColor"
|
|
8
|
-
d="m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z"
|
|
9
|
-
/>
|
|
10
|
-
</svg>
|
|
File without changes
|
|
File without changes
|