sve-ui 0.2.1 → 0.3.1
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/README.md +5 -3
- package/dist/components/Accordion/AccordionContent.svelte +25 -0
- package/dist/components/Accordion/AccordionContent.svelte.d.ts +10 -0
- package/dist/components/Accordion/AccordionContent.svelte.d.ts.map +1 -0
- package/dist/components/Accordion/AccordionHeader.svelte +22 -0
- package/dist/components/Accordion/AccordionHeader.svelte.d.ts +10 -0
- package/dist/components/Accordion/AccordionHeader.svelte.d.ts.map +1 -0
- package/dist/components/Accordion/AccordionItem.svelte +22 -0
- package/dist/components/Accordion/AccordionItem.svelte.d.ts +10 -0
- package/dist/components/Accordion/AccordionItem.svelte.d.ts.map +1 -0
- package/dist/components/Accordion/AccordionRoot.svelte +37 -0
- package/dist/components/Accordion/AccordionRoot.svelte.d.ts +21 -0
- package/dist/components/Accordion/AccordionRoot.svelte.d.ts.map +1 -0
- package/dist/components/Accordion/AccordionTrigger.svelte +71 -0
- package/dist/components/Accordion/AccordionTrigger.svelte.d.ts +11 -0
- package/dist/components/Accordion/AccordionTrigger.svelte.d.ts.map +1 -0
- package/dist/components/Accordion/index.d.ts +14 -0
- package/dist/components/Accordion/index.d.ts.map +1 -0
- package/dist/components/Accordion/index.js +13 -0
- package/dist/components/Checkbox/CheckboxRoot.svelte +95 -0
- package/dist/components/Checkbox/CheckboxRoot.svelte.d.ts +12 -0
- package/dist/components/Checkbox/CheckboxRoot.svelte.d.ts.map +1 -0
- package/dist/components/Checkbox/index.d.ts +9 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Checkbox/index.js +8 -0
- package/dist/components/Code/Code.svelte +130 -0
- package/dist/components/Code/Code.svelte.d.ts +14 -0
- package/dist/components/Code/Code.svelte.d.ts.map +1 -0
- package/dist/components/Combobox/ComboboxContent.svelte +33 -0
- package/dist/components/Combobox/ComboboxContent.svelte.d.ts +10 -0
- package/dist/components/Combobox/ComboboxContent.svelte.d.ts.map +1 -0
- package/dist/components/Combobox/ComboboxInput.svelte +42 -0
- package/dist/components/Combobox/ComboboxInput.svelte.d.ts +10 -0
- package/dist/components/Combobox/ComboboxInput.svelte.d.ts.map +1 -0
- package/dist/components/Combobox/ComboboxItem.svelte +50 -0
- package/dist/components/Combobox/ComboboxItem.svelte.d.ts +10 -0
- package/dist/components/Combobox/ComboboxItem.svelte.d.ts.map +1 -0
- package/dist/components/Combobox/index.d.ts +17 -0
- package/dist/components/Combobox/index.d.ts.map +1 -0
- package/dist/components/Combobox/index.js +16 -0
- package/dist/components/RadioGroup/RadioGroupItem.svelte +58 -0
- package/dist/components/RadioGroup/RadioGroupItem.svelte.d.ts +10 -0
- package/dist/components/RadioGroup/RadioGroupItem.svelte.d.ts.map +1 -0
- package/dist/components/RadioGroup/RadioGroupRoot.svelte +30 -0
- package/dist/components/RadioGroup/RadioGroupRoot.svelte.d.ts +10 -0
- package/dist/components/RadioGroup/RadioGroupRoot.svelte.d.ts.map +1 -0
- package/dist/components/RadioGroup/index.d.ts +10 -0
- package/dist/components/RadioGroup/index.d.ts.map +1 -0
- package/dist/components/RadioGroup/index.js +9 -0
- package/dist/components/Select/SelectContent.svelte +33 -0
- package/dist/components/Select/SelectContent.svelte.d.ts +10 -0
- package/dist/components/Select/SelectContent.svelte.d.ts.map +1 -0
- package/dist/components/Select/SelectItem.svelte +51 -0
- package/dist/components/Select/SelectItem.svelte.d.ts +10 -0
- package/dist/components/Select/SelectItem.svelte.d.ts.map +1 -0
- package/dist/components/Select/SelectTrigger.svelte +66 -0
- package/dist/components/Select/SelectTrigger.svelte.d.ts +11 -0
- package/dist/components/Select/SelectTrigger.svelte.d.ts.map +1 -0
- package/dist/components/Select/index.d.ts +18 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Select/index.js +17 -0
- package/dist/components/Slider/Slider.svelte +101 -0
- package/dist/components/Slider/Slider.svelte.d.ts +31 -0
- package/dist/components/Slider/Slider.svelte.d.ts.map +1 -0
- package/dist/components/Switch/SwitchRoot.svelte +87 -0
- package/dist/components/Switch/SwitchRoot.svelte.d.ts +12 -0
- package/dist/components/Switch/SwitchRoot.svelte.d.ts.map +1 -0
- package/dist/components/Switch/index.d.ts +8 -0
- package/dist/components/Switch/index.d.ts.map +1 -0
- package/dist/components/Switch/index.js +7 -0
- package/dist/components/Tabs/TabsContent.svelte +29 -0
- package/dist/components/Tabs/TabsContent.svelte.d.ts +10 -0
- package/dist/components/Tabs/TabsContent.svelte.d.ts.map +1 -0
- package/dist/components/Tabs/TabsList.svelte +24 -0
- package/dist/components/Tabs/TabsList.svelte.d.ts +10 -0
- package/dist/components/Tabs/TabsList.svelte.d.ts.map +1 -0
- package/dist/components/Tabs/TabsRoot.svelte +29 -0
- package/dist/components/Tabs/TabsRoot.svelte.d.ts +10 -0
- package/dist/components/Tabs/TabsRoot.svelte.d.ts.map +1 -0
- package/dist/components/Tabs/TabsTrigger.svelte +54 -0
- package/dist/components/Tabs/TabsTrigger.svelte.d.ts +10 -0
- package/dist/components/Tabs/TabsTrigger.svelte.d.ts.map +1 -0
- package/dist/components/Tabs/index.d.ts +12 -0
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/dist/components/Tabs/index.js +11 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +16 -0
- package/package.json +4 -2
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Combobox } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsContentProps = ComponentProps<typeof Combobox.Content>;
|
|
4
|
+
interface Props extends Omit<BitsContentProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const ComboboxContent: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type ComboboxContent = ReturnType<typeof ComboboxContent>;
|
|
9
|
+
export default ComboboxContent;
|
|
10
|
+
//# sourceMappingURL=ComboboxContent.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/ComboboxContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Combobox } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsInputProps = ComponentProps<typeof Combobox.Input>;
|
|
6
|
+
|
|
7
|
+
interface Props extends Omit<BitsInputProps, 'class'> {
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let { class: cls, ...rest }: Props = $props();
|
|
12
|
+
|
|
13
|
+
const className = $derived(['sve-combobox__input', cls].filter(Boolean).join(' '));
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Combobox.Input class={className} data-slot="combobox-input" {...rest} />
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
:global(.sve-combobox__input) {
|
|
20
|
+
display: block;
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 2.5rem;
|
|
23
|
+
padding: var(--sve-space-2) var(--sve-space-3);
|
|
24
|
+
border: 1px solid var(--sve-color-default-border);
|
|
25
|
+
border-radius: var(--sve-radius-md);
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
color: var(--sve-color-default-foreground);
|
|
28
|
+
font-family: var(--sve-font-family-sans);
|
|
29
|
+
font-size: var(--sve-font-size-md);
|
|
30
|
+
outline: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:global(.sve-combobox__input:focus-visible) {
|
|
34
|
+
border-color: var(--sve-color-primary-border);
|
|
35
|
+
box-shadow: 0 0 0 3px var(--sve-color-primary-surface);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:global(.sve-combobox__input:disabled) {
|
|
39
|
+
opacity: 0.5;
|
|
40
|
+
cursor: not-allowed;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Combobox } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsInputProps = ComponentProps<typeof Combobox.Input>;
|
|
4
|
+
interface Props extends Omit<BitsInputProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const ComboboxInput: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type ComboboxInput = ReturnType<typeof ComboboxInput>;
|
|
9
|
+
export default ComboboxInput;
|
|
10
|
+
//# sourceMappingURL=ComboboxInput.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/ComboboxInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AAE5D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Combobox } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsItemProps = ComponentProps<typeof Combobox.Item>;
|
|
6
|
+
|
|
7
|
+
// `value` (required) and `label` flow through ...rest; the selected check is
|
|
8
|
+
// rendered via CSS (::after on [data-selected]) to avoid shadowing children.
|
|
9
|
+
interface Props extends Omit<BitsItemProps, 'class'> {
|
|
10
|
+
class?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let { class: cls, ...rest }: Props = $props();
|
|
14
|
+
|
|
15
|
+
const className = $derived(['sve-combobox__item', cls].filter(Boolean).join(' '));
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<Combobox.Item class={className} data-slot="combobox-item" {...rest} />
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
:global(.sve-combobox__item) {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
gap: var(--sve-space-2);
|
|
26
|
+
padding: var(--sve-space-2) var(--sve-space-3);
|
|
27
|
+
border-radius: var(--sve-radius-sm);
|
|
28
|
+
color: var(--sve-color-default-foreground);
|
|
29
|
+
font-size: var(--sve-font-size-md);
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
user-select: none;
|
|
32
|
+
outline: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:global(.sve-combobox__item[data-highlighted]) {
|
|
36
|
+
background-color: var(--sve-color-primary-surface);
|
|
37
|
+
color: var(--sve-color-primary);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:global(.sve-combobox__item[data-disabled]) {
|
|
41
|
+
opacity: 0.5;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:global(.sve-combobox__item[data-selected])::after {
|
|
46
|
+
content: '✓';
|
|
47
|
+
color: var(--sve-color-primary);
|
|
48
|
+
font-weight: var(--sve-font-weight-bold);
|
|
49
|
+
}
|
|
50
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Combobox } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsItemProps = ComponentProps<typeof Combobox.Item>;
|
|
4
|
+
interface Props extends Omit<BitsItemProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const ComboboxItem: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type ComboboxItem = ReturnType<typeof ComboboxItem>;
|
|
9
|
+
export default ComboboxItem;
|
|
10
|
+
//# sourceMappingURL=ComboboxItem.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComboboxItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/ComboboxItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAI1D,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Combobox namespace — sve-ui styled wrappers over bits-ui Combobox.
|
|
3
|
+
*
|
|
4
|
+
* Root, Trigger, Group, GroupHeading: re-exported as-is (behavior; Bits owns
|
|
5
|
+
* ARIA, open state, and typeahead). Root narrows on the consumer's literal `type`.
|
|
6
|
+
* Input, Content, Item: styled wrappers. Content portals to <body>; Item shows
|
|
7
|
+
* a selected check via CSS. Filtering is consumer-driven from the input value.
|
|
8
|
+
*/
|
|
9
|
+
import { Combobox } from 'bits-ui';
|
|
10
|
+
export declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
|
|
11
|
+
export declare const Trigger: import("svelte").Component<Combobox.TriggerProps, {}, "ref">;
|
|
12
|
+
export declare const Group: import("svelte").Component<Combobox.GroupProps, {}, "ref">;
|
|
13
|
+
export declare const GroupHeading: import("svelte").Component<Combobox.GroupHeadingProps, {}, "ref">;
|
|
14
|
+
export { default as Input } from './ComboboxInput.svelte';
|
|
15
|
+
export { default as Content } from './ComboboxContent.svelte';
|
|
16
|
+
export { default as Item } from './ComboboxItem.svelte';
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Combobox/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC,eAAO,MAAM,IAAI,kGAAgB,CAAC;AAClC,eAAO,MAAM,OAAO,8DAAmB,CAAC;AACxC,eAAO,MAAM,KAAK,4DAAiB,CAAC;AACpC,eAAO,MAAM,YAAY,mEAAwB,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Combobox namespace — sve-ui styled wrappers over bits-ui Combobox.
|
|
3
|
+
*
|
|
4
|
+
* Root, Trigger, Group, GroupHeading: re-exported as-is (behavior; Bits owns
|
|
5
|
+
* ARIA, open state, and typeahead). Root narrows on the consumer's literal `type`.
|
|
6
|
+
* Input, Content, Item: styled wrappers. Content portals to <body>; Item shows
|
|
7
|
+
* a selected check via CSS. Filtering is consumer-driven from the input value.
|
|
8
|
+
*/
|
|
9
|
+
import { Combobox } from 'bits-ui';
|
|
10
|
+
export const Root = Combobox.Root;
|
|
11
|
+
export const Trigger = Combobox.Trigger;
|
|
12
|
+
export const Group = Combobox.Group;
|
|
13
|
+
export const GroupHeading = Combobox.GroupHeading;
|
|
14
|
+
export { default as Input } from './ComboboxInput.svelte';
|
|
15
|
+
export { default as Content } from './ComboboxContent.svelte';
|
|
16
|
+
export { default as Item } from './ComboboxItem.svelte';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { RadioGroup } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsItemProps = ComponentProps<typeof RadioGroup.Item>;
|
|
6
|
+
|
|
7
|
+
interface Props extends Omit<BitsItemProps, 'class' | 'children'> {
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let { class: cls, ...rest }: Props = $props();
|
|
12
|
+
|
|
13
|
+
const className = $derived(['sve-radio', cls].filter(Boolean).join(' '));
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<RadioGroup.Item class={className} data-slot="radio-item" {...rest}>
|
|
17
|
+
{#snippet children({ checked })}
|
|
18
|
+
{#if checked}<span class="sve-radio__dot" data-slot="radio-dot"></span>{/if}
|
|
19
|
+
{/snippet}
|
|
20
|
+
</RadioGroup.Item>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
:global(.sve-radio) {
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
flex-shrink: 0;
|
|
28
|
+
width: 1.25rem;
|
|
29
|
+
height: 1.25rem;
|
|
30
|
+
padding: 0;
|
|
31
|
+
border: 1px solid var(--sve-color-default-border);
|
|
32
|
+
border-radius: var(--sve-radius-full);
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
transition: border-color 0.15s ease;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:global(.sve-radio[data-state='checked']) {
|
|
39
|
+
border-color: var(--sve-color-primary);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:global(.sve-radio:focus-visible) {
|
|
43
|
+
outline: 2px solid var(--sve-color-primary);
|
|
44
|
+
outline-offset: 2px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:global(.sve-radio:disabled) {
|
|
48
|
+
opacity: 0.5;
|
|
49
|
+
cursor: not-allowed;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:global(.sve-radio__dot) {
|
|
53
|
+
width: 0.625rem;
|
|
54
|
+
height: 0.625rem;
|
|
55
|
+
border-radius: var(--sve-radius-full);
|
|
56
|
+
background-color: var(--sve-color-primary);
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RadioGroup } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsItemProps = ComponentProps<typeof RadioGroup.Item>;
|
|
4
|
+
interface Props extends Omit<BitsItemProps, 'class' | 'children'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const RadioGroupItem: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
|
|
9
|
+
export default RadioGroupItem;
|
|
10
|
+
//# sourceMappingURL=RadioGroupItem.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RadioGroup/RadioGroupItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;AAE5D,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsBH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { RadioGroup } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsRootProps = ComponentProps<typeof RadioGroup.Root>;
|
|
6
|
+
|
|
7
|
+
interface Props extends Omit<BitsRootProps, 'class'> {
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let { value = $bindable(), class: cls, ...rest }: Props = $props();
|
|
12
|
+
|
|
13
|
+
const className = $derived(
|
|
14
|
+
['sve-radio-group', cls].filter(Boolean).join(' ')
|
|
15
|
+
);
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<RadioGroup.Root bind:value class={className} data-slot="radio-group" {...rest} />
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
:global(.sve-radio-group) {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
gap: var(--sve-space-2);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:global(.sve-radio-group[data-orientation='horizontal']) {
|
|
28
|
+
flex-direction: row;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RadioGroup } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsRootProps = ComponentProps<typeof RadioGroup.Root>;
|
|
4
|
+
interface Props extends Omit<BitsRootProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const RadioGroupRoot: import("svelte").Component<Props, {}, "value">;
|
|
8
|
+
type RadioGroupRoot = ReturnType<typeof RadioGroupRoot>;
|
|
9
|
+
export default RadioGroupRoot;
|
|
10
|
+
//# sourceMappingURL=RadioGroupRoot.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RadioGroup/RadioGroupRoot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;AAE5D,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBH,QAAA,MAAM,cAAc,gDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RadioGroup namespace — sve-ui styled wrappers over bits-ui RadioGroup.
|
|
3
|
+
*
|
|
4
|
+
* Root: styled group container; `bind:value` is forwarded to the Bits root
|
|
5
|
+
* (Bits owns ARIA role="radiogroup", roving focus, and keyboard navigation).
|
|
6
|
+
* Item: styled radio with a selected dot indicator. `value` is required.
|
|
7
|
+
*/
|
|
8
|
+
export { default as Root } from './RadioGroupRoot.svelte';
|
|
9
|
+
export { default as Item } from './RadioGroupItem.svelte';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/RadioGroup/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RadioGroup namespace — sve-ui styled wrappers over bits-ui RadioGroup.
|
|
3
|
+
*
|
|
4
|
+
* Root: styled group container; `bind:value` is forwarded to the Bits root
|
|
5
|
+
* (Bits owns ARIA role="radiogroup", roving focus, and keyboard navigation).
|
|
6
|
+
* Item: styled radio with a selected dot indicator. `value` is required.
|
|
7
|
+
*/
|
|
8
|
+
export { default as Root } from './RadioGroupRoot.svelte';
|
|
9
|
+
export { default as Item } from './RadioGroupItem.svelte';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsContentProps = ComponentProps<typeof Select.Content>;
|
|
6
|
+
|
|
7
|
+
interface Props extends Omit<BitsContentProps, 'class'> {
|
|
8
|
+
class?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
let { class: cls, ...rest }: Props = $props();
|
|
12
|
+
|
|
13
|
+
const className = $derived(['sve-select__content', cls].filter(Boolean).join(' '));
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Select.Portal>
|
|
17
|
+
<Select.Content class={className} data-slot="select-content" {...rest} />
|
|
18
|
+
</Select.Portal>
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
:global(.sve-select__content) {
|
|
22
|
+
z-index: 60;
|
|
23
|
+
min-width: var(--bits-select-anchor-width, 8rem);
|
|
24
|
+
max-height: 18rem;
|
|
25
|
+
overflow-y: auto;
|
|
26
|
+
padding: var(--sve-space-1);
|
|
27
|
+
border: 1px solid var(--sve-color-default-border);
|
|
28
|
+
border-radius: var(--sve-radius-md);
|
|
29
|
+
background-color: var(--sve-color-default-surface);
|
|
30
|
+
box-shadow: var(--sve-shadow-md);
|
|
31
|
+
font-family: var(--sve-font-family-sans);
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Select } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsContentProps = ComponentProps<typeof Select.Content>;
|
|
4
|
+
interface Props extends Omit<BitsContentProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const SelectContent: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type SelectContent = ReturnType<typeof SelectContent>;
|
|
9
|
+
export default SelectContent;
|
|
10
|
+
//# sourceMappingURL=SelectContent.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/SelectContent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;AAE9D,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsItemProps = ComponentProps<typeof Select.Item>;
|
|
6
|
+
|
|
7
|
+
// `value` (required) and `label` flow through ...rest; the selected check is
|
|
8
|
+
// rendered via CSS (::after on [data-selected]) to avoid shadowing the
|
|
9
|
+
// children snippet.
|
|
10
|
+
interface Props extends Omit<BitsItemProps, 'class'> {
|
|
11
|
+
class?: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
let { class: cls, ...rest }: Props = $props();
|
|
15
|
+
|
|
16
|
+
const className = $derived(['sve-select__item', cls].filter(Boolean).join(' '));
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<Select.Item class={className} data-slot="select-item" {...rest} />
|
|
20
|
+
|
|
21
|
+
<style>
|
|
22
|
+
:global(.sve-select__item) {
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
gap: var(--sve-space-2);
|
|
27
|
+
padding: var(--sve-space-2) var(--sve-space-3);
|
|
28
|
+
border-radius: var(--sve-radius-sm);
|
|
29
|
+
color: var(--sve-color-default-foreground);
|
|
30
|
+
font-size: var(--sve-font-size-md);
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
user-select: none;
|
|
33
|
+
outline: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
:global(.sve-select__item[data-highlighted]) {
|
|
37
|
+
background-color: var(--sve-color-primary-surface);
|
|
38
|
+
color: var(--sve-color-primary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:global(.sve-select__item[data-disabled]) {
|
|
42
|
+
opacity: 0.5;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:global(.sve-select__item[data-selected])::after {
|
|
47
|
+
content: '✓';
|
|
48
|
+
color: var(--sve-color-primary);
|
|
49
|
+
font-weight: var(--sve-font-weight-bold);
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Select } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps } from 'svelte';
|
|
3
|
+
type BitsItemProps = ComponentProps<typeof Select.Item>;
|
|
4
|
+
interface Props extends Omit<BitsItemProps, 'class'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
}
|
|
7
|
+
declare const SelectItem: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type SelectItem = ReturnType<typeof SelectItem>;
|
|
9
|
+
export default SelectItem;
|
|
10
|
+
//# sourceMappingURL=SelectItem.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/SelectItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG3C,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAKxD,UAAU,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkBH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select } from 'bits-ui';
|
|
3
|
+
import type { ComponentProps, Snippet } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type BitsTriggerProps = ComponentProps<typeof Select.Trigger>;
|
|
6
|
+
|
|
7
|
+
interface Props extends Omit<BitsTriggerProps, 'class' | 'children'> {
|
|
8
|
+
class?: string;
|
|
9
|
+
children?: Snippet;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let { class: cls, children, ...rest }: Props = $props();
|
|
13
|
+
|
|
14
|
+
const className = $derived(['sve-select__trigger', cls].filter(Boolean).join(' '));
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<Select.Trigger class={className} data-slot="select-trigger" {...rest}>
|
|
18
|
+
<span class="sve-select__trigger-value">{@render children?.()}</span>
|
|
19
|
+
<svg class="sve-select__trigger-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
20
|
+
<path d="m6 9 6 6 6-6" />
|
|
21
|
+
</svg>
|
|
22
|
+
</Select.Trigger>
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
:global(.sve-select__trigger) {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
gap: var(--sve-space-2);
|
|
30
|
+
width: 100%;
|
|
31
|
+
min-height: 2.5rem;
|
|
32
|
+
padding: var(--sve-space-2) var(--sve-space-3);
|
|
33
|
+
border: 1px solid var(--sve-color-default-border);
|
|
34
|
+
border-radius: var(--sve-radius-md);
|
|
35
|
+
background-color: transparent;
|
|
36
|
+
color: var(--sve-color-default-foreground);
|
|
37
|
+
font-family: var(--sve-font-family-sans);
|
|
38
|
+
font-size: var(--sve-font-size-md);
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
text-align: left;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:global(.sve-select__trigger:focus-visible) {
|
|
44
|
+
outline: 2px solid var(--sve-color-primary);
|
|
45
|
+
outline-offset: 1px;
|
|
46
|
+
border-color: var(--sve-color-primary-border);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:global(.sve-select__trigger:disabled) {
|
|
50
|
+
opacity: 0.5;
|
|
51
|
+
cursor: not-allowed;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:global(.sve-select__trigger-value) {
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:global(.sve-select__trigger-icon) {
|
|
61
|
+
width: 1.1rem;
|
|
62
|
+
height: 1.1rem;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
opacity: 0.6;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Select } from 'bits-ui';
|
|
2
|
+
import type { ComponentProps, Snippet } from 'svelte';
|
|
3
|
+
type BitsTriggerProps = ComponentProps<typeof Select.Trigger>;
|
|
4
|
+
interface Props extends Omit<BitsTriggerProps, 'class' | 'children'> {
|
|
5
|
+
class?: string;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
}
|
|
8
|
+
declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type SelectTrigger = ReturnType<typeof SelectTrigger>;
|
|
10
|
+
export default SelectTrigger;
|
|
11
|
+
//# sourceMappingURL=SelectTrigger.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectTrigger.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/SelectTrigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC;AAE9D,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select namespace — sve-ui styled wrappers over bits-ui Select.
|
|
3
|
+
*
|
|
4
|
+
* Root, Value, Group, GroupHeading: re-exported as-is (behavior + non-visual;
|
|
5
|
+
* Bits owns ARIA, keyboard, and typeahead). Root's value/type props narrow on
|
|
6
|
+
* the consumer's literal `type`.
|
|
7
|
+
* Trigger, Content, Item: styled wrappers. Content portals to <body>; Item
|
|
8
|
+
* shows a selected check via CSS.
|
|
9
|
+
*/
|
|
10
|
+
import { Select } from 'bits-ui';
|
|
11
|
+
export declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
|
|
12
|
+
export declare const Value: import("svelte").Component<Select.ValueProps, {}, "ref">;
|
|
13
|
+
export declare const Group: import("svelte").Component<Select.GroupProps, {}, "ref">;
|
|
14
|
+
export declare const GroupHeading: import("svelte").Component<Select.GroupHeadingProps, {}, "ref">;
|
|
15
|
+
export { default as Trigger } from './SelectTrigger.svelte';
|
|
16
|
+
export { default as Content } from './SelectContent.svelte';
|
|
17
|
+
export { default as Item } from './SelectItem.svelte';
|
|
18
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Select/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEjC,eAAO,MAAM,IAAI,gGAAc,CAAC;AAChC,eAAO,MAAM,KAAK,0DAAe,CAAC;AAClC,eAAO,MAAM,KAAK,0DAAe,CAAC;AAClC,eAAO,MAAM,YAAY,iEAAsB,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Select namespace — sve-ui styled wrappers over bits-ui Select.
|
|
3
|
+
*
|
|
4
|
+
* Root, Value, Group, GroupHeading: re-exported as-is (behavior + non-visual;
|
|
5
|
+
* Bits owns ARIA, keyboard, and typeahead). Root's value/type props narrow on
|
|
6
|
+
* the consumer's literal `type`.
|
|
7
|
+
* Trigger, Content, Item: styled wrappers. Content portals to <body>; Item
|
|
8
|
+
* shows a selected check via CSS.
|
|
9
|
+
*/
|
|
10
|
+
import { Select } from 'bits-ui';
|
|
11
|
+
export const Root = Select.Root;
|
|
12
|
+
export const Value = Select.Value;
|
|
13
|
+
export const Group = Select.Group;
|
|
14
|
+
export const GroupHeading = Select.GroupHeading;
|
|
15
|
+
export { default as Trigger } from './SelectTrigger.svelte';
|
|
16
|
+
export { default as Content } from './SelectContent.svelte';
|
|
17
|
+
export { default as Item } from './SelectItem.svelte';
|