@heyramzi/ui 3.0.0 → 3.2.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/charts/dual-axis.js +38 -0
- package/dist/lib/sliding-pill.js +2 -2
- package/dist/record/measure-clamp.js +23 -0
- package/dist/shadcn/button-group/index.js +6 -0
- package/dist/shadcn/checkbox/checkbox-box.js +3 -0
- package/dist/shadcn/input-group/index.js +9 -0
- package/dist/shadcn/item/index.js +13 -0
- package/dist/shadcn/native-select/index.js +6 -0
- package/dist/shadcn/pagination/index.js +12 -0
- package/dist/slides/deck-controller.svelte.js +62 -15
- package/dist/slides/layout.js +3 -2
- package/package.json +9 -2
- package/scripts/svelte-dts.mjs +3 -0
- package/scripts/sync-shadcn.mjs +0 -5
- package/src/ai/generation-progress/GenerationProgress.svelte +14 -12
- package/src/canvas/pen/PenOverlay.svelte +1 -30
- package/src/canvas/screen/PartView.svelte +13 -8
- package/src/canvas/screen/ScreenBody.svelte +18 -11
- package/src/canvas/ui/BarTooltip.svelte +46 -0
- package/src/canvas/ui/BarTooltip.svelte.d.ts +17 -0
- package/src/canvas/ui/CanvasToolbar.svelte +170 -156
- package/src/canvas/ui/StylePanel.svelte +179 -102
- package/src/canvas/ui/canvas-ui.css +12 -76
- package/src/charts/area-chart.css +6 -0
- package/src/charts/area-chart.svelte +115 -17
- package/src/charts/area-chart.svelte.d.ts +11 -2
- package/src/charts/chart-tokens.css +4 -3
- package/src/charts/dashboard/data-table.svelte +80 -80
- package/src/charts/dashboard/hint.svelte +34 -0
- package/src/charts/dashboard/hint.svelte.d.ts +10 -0
- package/src/charts/dashboard/rating-chip.svelte +4 -3
- package/src/charts/dual-axis.test.ts +40 -0
- package/src/charts/dual-axis.ts +43 -0
- package/src/charts/legend.css +0 -8
- package/src/charts/legend.svelte +26 -30
- package/src/components/copy/copy-button.svelte +10 -2
- package/src/components/copy/copy-button.test.ts +7 -0
- package/src/components/data-table/table-skeleton.svelte +15 -7
- package/src/components/data-table/table-skeleton.svelte.d.ts +4 -0
- package/src/components/docs/on-this-page.svelte +2 -2
- package/src/components/hold-to-confirm/hold-to-confirm.svelte +2 -1
- package/src/components/list-page/filter-item.svelte +20 -7
- package/src/components/list-page/filter-popover.svelte +41 -16
- package/src/components/list-page/filter-popover.svelte.d.ts +1 -1
- package/src/components/list-page/grouped-list.svelte +41 -23
- package/src/components/picker/picker.svelte +8 -3
- package/src/components/picker/picker.svelte.d.ts +2 -1
- package/src/components/segmented/segmented-filter.svelte +19 -10
- package/src/components/segmented/segmented-track.svelte +11 -3
- package/src/components/table-view/table-view.svelte +22 -6
- package/src/components/tags-input/tags-input.svelte +94 -77
- package/src/components/toolbar/toolbar.svelte +2 -1
- package/src/components/toolbar/toolbar.test.ts +5 -4
- package/src/components/work-parts/group-head.svelte +28 -9
- package/src/components/work-parts/group-head.svelte.d.ts +5 -2
- package/src/editor/editor-toolbar.svelte +231 -193
- package/src/editor/editor.svelte +57 -39
- package/src/editor/image-toolbar.svelte +99 -37
- package/src/editor/image-toolbar.svelte.d.ts +4 -5
- package/src/editor/url-dialog.svelte +96 -0
- package/src/editor/url-dialog.svelte.d.ts +15 -0
- package/src/effects/theme-toggle/ThemeToggle.css +8 -8
- package/src/effects/theme-toggle/ThemeToggle.svelte +20 -6
- package/src/inbox/thread-inbox.svelte +9 -1
- package/src/lib/live-region.svelte +12 -4
- package/src/lib/live-region.svelte.d.ts +5 -1
- package/src/lib/sliding-pill.ts +3 -2
- package/src/record/info-list.svelte +33 -59
- package/src/record/measure-clamp.ts +31 -0
- package/src/record/record-shell.svelte +38 -39
- package/src/record/record-timeline.svelte +10 -5
- package/src/record/steps-rail.svelte +50 -36
- package/src/record/where-we-are.svelte +5 -19
- package/src/shadcn/button-group/button-group-separator.svelte +23 -0
- package/src/shadcn/button-group/button-group-separator.svelte.d.ts +13 -0
- package/src/shadcn/button-group/button-group-text.svelte +28 -0
- package/src/shadcn/button-group/button-group-text.svelte.d.ts +11 -0
- package/src/shadcn/button-group/button-group.svelte +46 -0
- package/src/shadcn/button-group/button-group.svelte.d.ts +16 -0
- package/src/shadcn/button-group/index.ts +15 -0
- package/src/shadcn/checkbox/checkbox-box.ts +4 -0
- package/src/shadcn/checkbox/checkbox.svelte +2 -4
- package/src/shadcn/input-group/index.ts +22 -0
- package/src/shadcn/input-group/input-group-addon.svelte +51 -0
- package/src/shadcn/input-group/input-group-addon.svelte.d.ts +18 -0
- package/src/shadcn/input-group/input-group-button.svelte +49 -0
- package/src/shadcn/input-group/input-group-button.svelte.d.ts +18 -0
- package/src/shadcn/input-group/input-group-input.svelte +20 -0
- package/src/shadcn/input-group/input-group-input.svelte.d.ts +11 -0
- package/src/shadcn/input-group/input-group-text.svelte +19 -0
- package/src/shadcn/input-group/input-group-text.svelte.d.ts +5 -0
- package/src/shadcn/input-group/input-group-textarea.svelte +20 -0
- package/src/shadcn/input-group/input-group-textarea.svelte.d.ts +3 -0
- package/src/shadcn/input-group/input-group.svelte +24 -0
- package/src/shadcn/input-group/input-group.svelte.d.ts +5 -0
- package/src/shadcn/item/index.ts +34 -0
- package/src/shadcn/item/item-actions.svelte +20 -0
- package/src/shadcn/item/item-actions.svelte.d.ts +5 -0
- package/src/shadcn/item/item-content.svelte +23 -0
- package/src/shadcn/item/item-content.svelte.d.ts +5 -0
- package/src/shadcn/item/item-description.svelte +23 -0
- package/src/shadcn/item/item-description.svelte.d.ts +5 -0
- package/src/shadcn/item/item-footer.svelte +20 -0
- package/src/shadcn/item/item-footer.svelte.d.ts +5 -0
- package/src/shadcn/item/item-group.svelte +21 -0
- package/src/shadcn/item/item-group.svelte.d.ts +5 -0
- package/src/shadcn/item/item-header.svelte +20 -0
- package/src/shadcn/item/item-header.svelte.d.ts +5 -0
- package/src/shadcn/item/item-media.svelte +42 -0
- package/src/shadcn/item/item-media.svelte.d.ts +17 -0
- package/src/shadcn/item/item-separator.svelte +19 -0
- package/src/shadcn/item/item-separator.svelte.d.ts +13 -0
- package/src/shadcn/item/item-title.svelte +20 -0
- package/src/shadcn/item/item-title.svelte.d.ts +5 -0
- package/src/shadcn/item/item.svelte +61 -0
- package/src/shadcn/item/item.svelte.d.ts +28 -0
- package/src/shadcn/native-select/index.ts +13 -0
- package/src/shadcn/native-select/native-select-opt-group.svelte +20 -0
- package/src/shadcn/native-select/native-select-opt-group.svelte.d.ts +5 -0
- package/src/shadcn/native-select/native-select-option.svelte +20 -0
- package/src/shadcn/native-select/native-select-option.svelte.d.ts +5 -0
- package/src/shadcn/native-select/native-select.svelte +45 -0
- package/src/shadcn/native-select/native-select.svelte.d.ts +8 -0
- package/src/shadcn/pagination/index.ts +31 -0
- package/src/shadcn/pagination/pagination-content.svelte +20 -0
- package/src/shadcn/pagination/pagination-content.svelte.d.ts +5 -0
- package/src/shadcn/pagination/pagination-ellipsis.svelte +22 -0
- package/src/shadcn/pagination/pagination-ellipsis.svelte.d.ts +5 -0
- package/src/shadcn/pagination/pagination-item.svelte +14 -0
- package/src/shadcn/pagination/pagination-item.svelte.d.ts +5 -0
- package/src/shadcn/pagination/pagination-link.svelte +41 -0
- package/src/shadcn/pagination/pagination-link.svelte.d.ts +9 -0
- package/src/shadcn/pagination/pagination-next-button.svelte +34 -0
- package/src/shadcn/pagination/pagination-next-button.svelte.d.ts +4 -0
- package/src/shadcn/pagination/pagination-next.svelte +26 -0
- package/src/shadcn/pagination/pagination-next.svelte.d.ts +4 -0
- package/src/shadcn/pagination/pagination-prev-button.svelte +34 -0
- package/src/shadcn/pagination/pagination-prev-button.svelte.d.ts +4 -0
- package/src/shadcn/pagination/pagination-previous.svelte +30 -0
- package/src/shadcn/pagination/pagination-previous.svelte.d.ts +4 -0
- package/src/shadcn/pagination/pagination.svelte +27 -0
- package/src/shadcn/pagination/pagination.svelte.d.ts +4 -0
- package/src/slides/Controls.svelte +39 -36
- package/src/slides/Deck.svelte +23 -10
- package/src/slides/Overview.svelte +10 -4
- package/src/slides/README.md +1 -1
- package/src/slides/Slide.svelte +17 -11
- package/src/slides/deck-controller.svelte.ts +62 -16
- package/src/slides/layout.ts +3 -2
- package/src/slides/theme.css +34 -5
- package/src/thread/thread.svelte +15 -8
- package/src/work/detail/task-detail.svelte +1 -1
- package/src/work/gantt/gantt-task-row.svelte +3 -6
- package/src/work/inbox/inbox-card.svelte +7 -5
- package/src/work/inbox/inbox-trace.svelte +14 -10
- package/src/work/kanban-board.svelte +40 -25
- package/src/work/kanban-hidden-rail.svelte +67 -65
- package/src/work/task-list.svelte +145 -124
- package/src/work/task-list.svelte.test.ts +5 -2
- package/src/work/time/time-tracker.svelte +35 -10
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Input } from "../input/index.js";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import type { ComponentProps } from "svelte";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
value = $bindable(),
|
|
9
|
+
class: className,
|
|
10
|
+
...props
|
|
11
|
+
}: ComponentProps<typeof Input> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<Input
|
|
15
|
+
bind:ref
|
|
16
|
+
data-slot="input-group-control"
|
|
17
|
+
class={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1", className)}
|
|
18
|
+
bind:value
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
|
|
2
|
+
type: "file";
|
|
3
|
+
files?: FileList;
|
|
4
|
+
} | {
|
|
5
|
+
type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
|
|
6
|
+
files?: undefined;
|
|
7
|
+
})) & {
|
|
8
|
+
ref?: HTMLElement | null | undefined;
|
|
9
|
+
}, {}, "value" | "ref">;
|
|
10
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
11
|
+
export default $$Component;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<span
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
class={cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
|
|
16
|
+
{...restProps}
|
|
17
|
+
>
|
|
18
|
+
{@render children?.()}
|
|
19
|
+
</span>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Textarea } from "../textarea/index.js";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import type { ComponentProps } from "svelte";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
value = $bindable(),
|
|
9
|
+
class: className,
|
|
10
|
+
...props
|
|
11
|
+
}: ComponentProps<typeof Textarea> = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<Textarea
|
|
15
|
+
bind:ref
|
|
16
|
+
data-slot="input-group-control"
|
|
17
|
+
class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none", className)}
|
|
18
|
+
bind:value
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...props
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="input-group"
|
|
16
|
+
role="group"
|
|
17
|
+
class={cn(
|
|
18
|
+
"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
|
|
19
|
+
className
|
|
20
|
+
)}
|
|
21
|
+
{...props}
|
|
22
|
+
>
|
|
23
|
+
{@render children?.()}
|
|
24
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import Actions from "./item-actions.svelte";
|
|
2
|
+
import Content from "./item-content.svelte";
|
|
3
|
+
import Description from "./item-description.svelte";
|
|
4
|
+
import Footer from "./item-footer.svelte";
|
|
5
|
+
import Group from "./item-group.svelte";
|
|
6
|
+
import Header from "./item-header.svelte";
|
|
7
|
+
import Media from "./item-media.svelte";
|
|
8
|
+
import Separator from "./item-separator.svelte";
|
|
9
|
+
import Title from "./item-title.svelte";
|
|
10
|
+
import Root from "./item.svelte";
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
Root,
|
|
14
|
+
Group,
|
|
15
|
+
Separator,
|
|
16
|
+
Header,
|
|
17
|
+
Footer,
|
|
18
|
+
Content,
|
|
19
|
+
Title,
|
|
20
|
+
Description,
|
|
21
|
+
Actions,
|
|
22
|
+
Media,
|
|
23
|
+
//
|
|
24
|
+
Root as Item,
|
|
25
|
+
Group as ItemGroup,
|
|
26
|
+
Separator as ItemSeparator,
|
|
27
|
+
Header as ItemHeader,
|
|
28
|
+
Footer as ItemFooter,
|
|
29
|
+
Content as ItemContent,
|
|
30
|
+
Title as ItemTitle,
|
|
31
|
+
Description as ItemDescription,
|
|
32
|
+
Actions as ItemActions,
|
|
33
|
+
Media as ItemMedia,
|
|
34
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-actions"
|
|
16
|
+
class={cn("gap-2 flex items-center", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-content"
|
|
16
|
+
class={cn(
|
|
17
|
+
"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<p
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-description"
|
|
16
|
+
class={cn(
|
|
17
|
+
"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...restProps}
|
|
21
|
+
>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
</p>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-footer"
|
|
16
|
+
class={cn("gap-2 flex basis-full items-center justify-between", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
role="list"
|
|
16
|
+
data-slot="item-group"
|
|
17
|
+
class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
>
|
|
20
|
+
{@render children?.()}
|
|
21
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-header"
|
|
16
|
+
class={cn("gap-2 flex basis-full items-center justify-between", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
3
|
+
|
|
4
|
+
export const itemMediaVariants = tv({
|
|
5
|
+
base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "bg-transparent",
|
|
9
|
+
icon: "[&_svg:not([class*='size-'])]:size-4",
|
|
10
|
+
image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
variant: "default",
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<script lang="ts">
|
|
22
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
23
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
24
|
+
|
|
25
|
+
let {
|
|
26
|
+
ref = $bindable(null),
|
|
27
|
+
class: className,
|
|
28
|
+
children,
|
|
29
|
+
variant = "default",
|
|
30
|
+
...restProps
|
|
31
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<div
|
|
35
|
+
bind:this={ref}
|
|
36
|
+
data-slot="item-media"
|
|
37
|
+
data-variant={variant}
|
|
38
|
+
class={cn(itemMediaVariants({ variant }), className)}
|
|
39
|
+
{...restProps}
|
|
40
|
+
>
|
|
41
|
+
{@render children?.()}
|
|
42
|
+
</div>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
variant: {
|
|
4
|
+
default: string;
|
|
5
|
+
icon: string;
|
|
6
|
+
image: string;
|
|
7
|
+
};
|
|
8
|
+
}, undefined, "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", undefined, undefined, undefined>;
|
|
9
|
+
export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
|
|
10
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
11
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
12
|
+
type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
|
13
|
+
variant?: ItemMediaVariant;
|
|
14
|
+
};
|
|
15
|
+
declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
16
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
17
|
+
export default $$Component;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Separator } from "../separator/index.js";
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import type { ComponentProps } from "svelte";
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
...restProps
|
|
10
|
+
}: ComponentProps<typeof Separator> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Separator
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot="item-separator"
|
|
16
|
+
orientation="horizontal"
|
|
17
|
+
class={cn("my-2", className)}
|
|
18
|
+
{...restProps}
|
|
19
|
+
/>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const $$Component: import("svelte").Component<Omit<{
|
|
2
|
+
orientation?: import("bits-ui").Orientation;
|
|
3
|
+
decorative?: boolean;
|
|
4
|
+
}, "children" | "child"> & {
|
|
5
|
+
child?: import("svelte").Snippet<[{
|
|
6
|
+
props: Record<string, unknown>;
|
|
7
|
+
}]> | undefined;
|
|
8
|
+
children?: import("svelte").Snippet<[]> | undefined;
|
|
9
|
+
style?: import("bits-ui").StyleProperties | string | null | undefined;
|
|
10
|
+
ref?: HTMLElement | null | undefined;
|
|
11
|
+
} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
|
|
12
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
13
|
+
export default $$Component;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<div
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="item-title"
|
|
16
|
+
class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { tv, type VariantProps } from "tailwind-variants";
|
|
3
|
+
|
|
4
|
+
export const itemVariants = tv({
|
|
5
|
+
base: "[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "border-transparent",
|
|
9
|
+
outline: "border-border",
|
|
10
|
+
muted: "bg-muted/50 border-transparent",
|
|
11
|
+
},
|
|
12
|
+
size: {
|
|
13
|
+
default: "gap-3.5 px-4 py-3.5",
|
|
14
|
+
sm: "gap-2.5 px-3 py-2.5",
|
|
15
|
+
xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
variant: "default",
|
|
20
|
+
size: "default",
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export type ItemSize = VariantProps<typeof itemVariants>["size"];
|
|
25
|
+
export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<script lang="ts">
|
|
29
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
30
|
+
import type { Snippet } from "svelte";
|
|
31
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
32
|
+
|
|
33
|
+
let {
|
|
34
|
+
ref = $bindable(null),
|
|
35
|
+
class: className,
|
|
36
|
+
child,
|
|
37
|
+
variant,
|
|
38
|
+
size,
|
|
39
|
+
...restProps
|
|
40
|
+
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
|
41
|
+
child?: Snippet<[{ props: Record<string, unknown> }]>;
|
|
42
|
+
variant?: ItemVariant;
|
|
43
|
+
size?: ItemSize;
|
|
44
|
+
} = $props();
|
|
45
|
+
|
|
46
|
+
const mergedProps = $derived({
|
|
47
|
+
class: cn(itemVariants({ variant, size }), className),
|
|
48
|
+
"data-slot": "item",
|
|
49
|
+
"data-variant": variant,
|
|
50
|
+
"data-size": size,
|
|
51
|
+
...restProps,
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
{#if child}
|
|
56
|
+
{@render child({ props: mergedProps })}
|
|
57
|
+
{:else}
|
|
58
|
+
<div bind:this={ref} {...mergedProps}>
|
|
59
|
+
{@render mergedProps.children?.()}
|
|
60
|
+
</div>
|
|
61
|
+
{/if}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { type VariantProps } from "tailwind-variants";
|
|
2
|
+
export declare const itemVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
variant: {
|
|
4
|
+
default: string;
|
|
5
|
+
outline: string;
|
|
6
|
+
muted: string;
|
|
7
|
+
};
|
|
8
|
+
size: {
|
|
9
|
+
default: string;
|
|
10
|
+
sm: string;
|
|
11
|
+
xs: string;
|
|
12
|
+
};
|
|
13
|
+
}, undefined, "[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", undefined, undefined, undefined>;
|
|
14
|
+
export type ItemSize = VariantProps<typeof itemVariants>["size"];
|
|
15
|
+
export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
|
|
16
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
17
|
+
import type { Snippet } from "svelte";
|
|
18
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
19
|
+
type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
|
20
|
+
child?: Snippet<[{
|
|
21
|
+
props: Record<string, unknown>;
|
|
22
|
+
}]>;
|
|
23
|
+
variant?: ItemVariant;
|
|
24
|
+
size?: ItemSize;
|
|
25
|
+
};
|
|
26
|
+
declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
27
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
28
|
+
export default $$Component;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Root from "./native-select.svelte";
|
|
2
|
+
import Option from "./native-select-option.svelte";
|
|
3
|
+
import OptGroup from "./native-select-opt-group.svelte";
|
|
4
|
+
|
|
5
|
+
export {
|
|
6
|
+
Root,
|
|
7
|
+
Option,
|
|
8
|
+
OptGroup,
|
|
9
|
+
//
|
|
10
|
+
Root as NativeSelect,
|
|
11
|
+
Option as NativeSelectOption,
|
|
12
|
+
OptGroup as NativeSelectOptGroup,
|
|
13
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLOptgroupAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLOptgroupAttributes> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<optgroup
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="native-select-optgroup"
|
|
16
|
+
class={cn("bg-[Canvas] text-[CanvasText]", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</optgroup>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLOptgroupAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLOptgroupAttributes>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, type WithElementRef } from "../../lib/utils.js";
|
|
3
|
+
import type { HTMLOptionAttributes } from "svelte/elements";
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: WithElementRef<HTMLOptionAttributes> = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<option
|
|
14
|
+
bind:this={ref}
|
|
15
|
+
data-slot="native-select-option"
|
|
16
|
+
class={cn("bg-[Canvas] text-[CanvasText]", className)}
|
|
17
|
+
{...restProps}
|
|
18
|
+
>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</option>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type WithElementRef } from "../../lib/utils.js";
|
|
2
|
+
import type { HTMLOptionAttributes } from "svelte/elements";
|
|
3
|
+
declare const $$Component: import("svelte").Component<WithElementRef<HTMLOptionAttributes>, {}, "ref">;
|
|
4
|
+
type $$Component = ReturnType<typeof $$Component>;
|
|
5
|
+
export default $$Component;
|