@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.
Files changed (160) hide show
  1. package/dist/charts/dual-axis.js +38 -0
  2. package/dist/lib/sliding-pill.js +2 -2
  3. package/dist/record/measure-clamp.js +23 -0
  4. package/dist/shadcn/button-group/index.js +6 -0
  5. package/dist/shadcn/checkbox/checkbox-box.js +3 -0
  6. package/dist/shadcn/input-group/index.js +9 -0
  7. package/dist/shadcn/item/index.js +13 -0
  8. package/dist/shadcn/native-select/index.js +6 -0
  9. package/dist/shadcn/pagination/index.js +12 -0
  10. package/dist/slides/deck-controller.svelte.js +62 -15
  11. package/dist/slides/layout.js +3 -2
  12. package/package.json +9 -2
  13. package/scripts/svelte-dts.mjs +3 -0
  14. package/scripts/sync-shadcn.mjs +0 -5
  15. package/src/ai/generation-progress/GenerationProgress.svelte +14 -12
  16. package/src/canvas/pen/PenOverlay.svelte +1 -30
  17. package/src/canvas/screen/PartView.svelte +13 -8
  18. package/src/canvas/screen/ScreenBody.svelte +18 -11
  19. package/src/canvas/ui/BarTooltip.svelte +46 -0
  20. package/src/canvas/ui/BarTooltip.svelte.d.ts +17 -0
  21. package/src/canvas/ui/CanvasToolbar.svelte +170 -156
  22. package/src/canvas/ui/StylePanel.svelte +179 -102
  23. package/src/canvas/ui/canvas-ui.css +12 -76
  24. package/src/charts/area-chart.css +6 -0
  25. package/src/charts/area-chart.svelte +115 -17
  26. package/src/charts/area-chart.svelte.d.ts +11 -2
  27. package/src/charts/chart-tokens.css +4 -3
  28. package/src/charts/dashboard/data-table.svelte +80 -80
  29. package/src/charts/dashboard/hint.svelte +34 -0
  30. package/src/charts/dashboard/hint.svelte.d.ts +10 -0
  31. package/src/charts/dashboard/rating-chip.svelte +4 -3
  32. package/src/charts/dual-axis.test.ts +40 -0
  33. package/src/charts/dual-axis.ts +43 -0
  34. package/src/charts/legend.css +0 -8
  35. package/src/charts/legend.svelte +26 -30
  36. package/src/components/copy/copy-button.svelte +10 -2
  37. package/src/components/copy/copy-button.test.ts +7 -0
  38. package/src/components/data-table/table-skeleton.svelte +15 -7
  39. package/src/components/data-table/table-skeleton.svelte.d.ts +4 -0
  40. package/src/components/docs/on-this-page.svelte +2 -2
  41. package/src/components/hold-to-confirm/hold-to-confirm.svelte +2 -1
  42. package/src/components/list-page/filter-item.svelte +20 -7
  43. package/src/components/list-page/filter-popover.svelte +41 -16
  44. package/src/components/list-page/filter-popover.svelte.d.ts +1 -1
  45. package/src/components/list-page/grouped-list.svelte +41 -23
  46. package/src/components/picker/picker.svelte +8 -3
  47. package/src/components/picker/picker.svelte.d.ts +2 -1
  48. package/src/components/segmented/segmented-filter.svelte +19 -10
  49. package/src/components/segmented/segmented-track.svelte +11 -3
  50. package/src/components/table-view/table-view.svelte +22 -6
  51. package/src/components/tags-input/tags-input.svelte +94 -77
  52. package/src/components/toolbar/toolbar.svelte +2 -1
  53. package/src/components/toolbar/toolbar.test.ts +5 -4
  54. package/src/components/work-parts/group-head.svelte +28 -9
  55. package/src/components/work-parts/group-head.svelte.d.ts +5 -2
  56. package/src/editor/editor-toolbar.svelte +231 -193
  57. package/src/editor/editor.svelte +57 -39
  58. package/src/editor/image-toolbar.svelte +99 -37
  59. package/src/editor/image-toolbar.svelte.d.ts +4 -5
  60. package/src/editor/url-dialog.svelte +96 -0
  61. package/src/editor/url-dialog.svelte.d.ts +15 -0
  62. package/src/effects/theme-toggle/ThemeToggle.css +8 -8
  63. package/src/effects/theme-toggle/ThemeToggle.svelte +20 -6
  64. package/src/inbox/thread-inbox.svelte +9 -1
  65. package/src/lib/live-region.svelte +12 -4
  66. package/src/lib/live-region.svelte.d.ts +5 -1
  67. package/src/lib/sliding-pill.ts +3 -2
  68. package/src/record/info-list.svelte +33 -59
  69. package/src/record/measure-clamp.ts +31 -0
  70. package/src/record/record-shell.svelte +38 -39
  71. package/src/record/record-timeline.svelte +10 -5
  72. package/src/record/steps-rail.svelte +50 -36
  73. package/src/record/where-we-are.svelte +5 -19
  74. package/src/shadcn/button-group/button-group-separator.svelte +23 -0
  75. package/src/shadcn/button-group/button-group-separator.svelte.d.ts +13 -0
  76. package/src/shadcn/button-group/button-group-text.svelte +28 -0
  77. package/src/shadcn/button-group/button-group-text.svelte.d.ts +11 -0
  78. package/src/shadcn/button-group/button-group.svelte +46 -0
  79. package/src/shadcn/button-group/button-group.svelte.d.ts +16 -0
  80. package/src/shadcn/button-group/index.ts +15 -0
  81. package/src/shadcn/checkbox/checkbox-box.ts +4 -0
  82. package/src/shadcn/checkbox/checkbox.svelte +2 -4
  83. package/src/shadcn/input-group/index.ts +22 -0
  84. package/src/shadcn/input-group/input-group-addon.svelte +51 -0
  85. package/src/shadcn/input-group/input-group-addon.svelte.d.ts +18 -0
  86. package/src/shadcn/input-group/input-group-button.svelte +49 -0
  87. package/src/shadcn/input-group/input-group-button.svelte.d.ts +18 -0
  88. package/src/shadcn/input-group/input-group-input.svelte +20 -0
  89. package/src/shadcn/input-group/input-group-input.svelte.d.ts +11 -0
  90. package/src/shadcn/input-group/input-group-text.svelte +19 -0
  91. package/src/shadcn/input-group/input-group-text.svelte.d.ts +5 -0
  92. package/src/shadcn/input-group/input-group-textarea.svelte +20 -0
  93. package/src/shadcn/input-group/input-group-textarea.svelte.d.ts +3 -0
  94. package/src/shadcn/input-group/input-group.svelte +24 -0
  95. package/src/shadcn/input-group/input-group.svelte.d.ts +5 -0
  96. package/src/shadcn/item/index.ts +34 -0
  97. package/src/shadcn/item/item-actions.svelte +20 -0
  98. package/src/shadcn/item/item-actions.svelte.d.ts +5 -0
  99. package/src/shadcn/item/item-content.svelte +23 -0
  100. package/src/shadcn/item/item-content.svelte.d.ts +5 -0
  101. package/src/shadcn/item/item-description.svelte +23 -0
  102. package/src/shadcn/item/item-description.svelte.d.ts +5 -0
  103. package/src/shadcn/item/item-footer.svelte +20 -0
  104. package/src/shadcn/item/item-footer.svelte.d.ts +5 -0
  105. package/src/shadcn/item/item-group.svelte +21 -0
  106. package/src/shadcn/item/item-group.svelte.d.ts +5 -0
  107. package/src/shadcn/item/item-header.svelte +20 -0
  108. package/src/shadcn/item/item-header.svelte.d.ts +5 -0
  109. package/src/shadcn/item/item-media.svelte +42 -0
  110. package/src/shadcn/item/item-media.svelte.d.ts +17 -0
  111. package/src/shadcn/item/item-separator.svelte +19 -0
  112. package/src/shadcn/item/item-separator.svelte.d.ts +13 -0
  113. package/src/shadcn/item/item-title.svelte +20 -0
  114. package/src/shadcn/item/item-title.svelte.d.ts +5 -0
  115. package/src/shadcn/item/item.svelte +61 -0
  116. package/src/shadcn/item/item.svelte.d.ts +28 -0
  117. package/src/shadcn/native-select/index.ts +13 -0
  118. package/src/shadcn/native-select/native-select-opt-group.svelte +20 -0
  119. package/src/shadcn/native-select/native-select-opt-group.svelte.d.ts +5 -0
  120. package/src/shadcn/native-select/native-select-option.svelte +20 -0
  121. package/src/shadcn/native-select/native-select-option.svelte.d.ts +5 -0
  122. package/src/shadcn/native-select/native-select.svelte +45 -0
  123. package/src/shadcn/native-select/native-select.svelte.d.ts +8 -0
  124. package/src/shadcn/pagination/index.ts +31 -0
  125. package/src/shadcn/pagination/pagination-content.svelte +20 -0
  126. package/src/shadcn/pagination/pagination-content.svelte.d.ts +5 -0
  127. package/src/shadcn/pagination/pagination-ellipsis.svelte +22 -0
  128. package/src/shadcn/pagination/pagination-ellipsis.svelte.d.ts +5 -0
  129. package/src/shadcn/pagination/pagination-item.svelte +14 -0
  130. package/src/shadcn/pagination/pagination-item.svelte.d.ts +5 -0
  131. package/src/shadcn/pagination/pagination-link.svelte +41 -0
  132. package/src/shadcn/pagination/pagination-link.svelte.d.ts +9 -0
  133. package/src/shadcn/pagination/pagination-next-button.svelte +34 -0
  134. package/src/shadcn/pagination/pagination-next-button.svelte.d.ts +4 -0
  135. package/src/shadcn/pagination/pagination-next.svelte +26 -0
  136. package/src/shadcn/pagination/pagination-next.svelte.d.ts +4 -0
  137. package/src/shadcn/pagination/pagination-prev-button.svelte +34 -0
  138. package/src/shadcn/pagination/pagination-prev-button.svelte.d.ts +4 -0
  139. package/src/shadcn/pagination/pagination-previous.svelte +30 -0
  140. package/src/shadcn/pagination/pagination-previous.svelte.d.ts +4 -0
  141. package/src/shadcn/pagination/pagination.svelte +27 -0
  142. package/src/shadcn/pagination/pagination.svelte.d.ts +4 -0
  143. package/src/slides/Controls.svelte +39 -36
  144. package/src/slides/Deck.svelte +23 -10
  145. package/src/slides/Overview.svelte +10 -4
  146. package/src/slides/README.md +1 -1
  147. package/src/slides/Slide.svelte +17 -11
  148. package/src/slides/deck-controller.svelte.ts +62 -16
  149. package/src/slides/layout.ts +3 -2
  150. package/src/slides/theme.css +34 -5
  151. package/src/thread/thread.svelte +15 -8
  152. package/src/work/detail/task-detail.svelte +1 -1
  153. package/src/work/gantt/gantt-task-row.svelte +3 -6
  154. package/src/work/inbox/inbox-card.svelte +7 -5
  155. package/src/work/inbox/inbox-trace.svelte +14 -10
  156. package/src/work/kanban-board.svelte +40 -25
  157. package/src/work/kanban-hidden-rail.svelte +67 -65
  158. package/src/work/task-list.svelte +145 -124
  159. package/src/work/task-list.svelte.test.ts +5 -2
  160. 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,3 @@
1
+ declare const $$Component: import("svelte").Component<Omit<import("../../lib/utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
2
+ type $$Component = ReturnType<typeof $$Component>;
3
+ export default $$Component;
@@ -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;