@profidev/pleiades 1.7.1 → 1.8.0

package/dist/components/ui-extra/button-group/index.js

@@ -0,0 +1,6 @@
+import Root, { buttonGroupVariants } from './button-group.svelte';
+import Text from './button-group-text.svelte';
+import Separator from './button-group-separator.svelte';
+export { Root, Text, Separator, buttonGroupVariants, 
+//
+Root as ButtonGroup, Text as ButtonGroupText, Separator as ButtonGroupSeparator };

package/dist/components/ui-extra/confirm-delete-dialog/confirm-delete-dialog.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+  class ConfirmDeleteDialogState {
+    open = $state(false);
+    inputText = $state('');
+    options = $state<ConfirmDeleteOptions | null>(null);
+    loading = $state(false);
+
+    constructor() {
+      this.confirm = this.confirm.bind(this);
+      this.cancel = this.cancel.bind(this);
+    }
+
+    newConfirmation(options: ConfirmDeleteOptions) {
+      this.reset();
+      this.options = options;
+      this.open = true;
+    }
+
+    reset() {
+      this.open = false;
+      this.inputText = '';
+      this.options = null;
+    }
+
+    confirm() {
+      if (this.options?.input) {
+        if (this.inputText !== this.options.input.confirmationText) {
+          return;
+        }
+      }
+
+      this.loading = true;
+      this.options
+        ?.onConfirm()
+        .then(() => {
+          this.open = false;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    }
+
+    cancel() {
+      this.options?.onCancel?.();
+      this.open = false;
+    }
+  }
+
+  const dialogState = new ConfirmDeleteDialogState();
+
+  export type ConfirmDeleteOptions = {
+    title: string;
+    description: string;
+    skipConfirmation?: boolean;
+    input?: {
+      confirmationText: string;
+    };
+    confirm?: {
+      text?: string;
+    };
+    cancel?: {
+      text?: string;
+    };
+    onConfirm: () => Promise<unknown>;
+    onCancel?: () => void;
+  };
+
+  export function confirmDelete(options: ConfirmDeleteOptions) {
+    if (options.skipConfirmation) {
+      options.onConfirm();
+      return;
+    }
+
+    dialogState.newConfirmation(options);
+  }
+</script>
+
+<script lang="ts">
+  import * as AlertDialog from '../alert-dialog';
+  import { Input } from '../input';
+</script>
+
+<AlertDialog.Root bind:open={dialogState.open}>
+  <AlertDialog.Content>
+    <form
+      method="POST"
+      onsubmit={(e) => {
+        e.preventDefault();
+        dialogState.confirm();
+      }}
+      class="flex flex-col gap-4"
+    >
+      <AlertDialog.Header>
+        <AlertDialog.Title>
+          {dialogState.options?.title}
+        </AlertDialog.Title>
+        <AlertDialog.Description>
+          {dialogState.options?.description}
+        </AlertDialog.Description>
+      </AlertDialog.Header>
+      {#if dialogState.options?.input}
+        <Input
+          bind:value={dialogState.inputText}
+          placeholder={`Enter \"${dialogState.options.input.confirmationText}\" to confirm.`}
+          onkeydown={(e) => {
+            if (e.key === 'Enter') {
+              // for some reason without this the form will submit and the dialog will close immediately
+              e.preventDefault();
+              dialogState.confirm();
+            }
+          }}
+        />
+      {/if}
+      <AlertDialog.Footer>
+        <AlertDialog.Cancel type="button" onclick={dialogState.cancel}>
+          {dialogState.options?.cancel?.text ?? 'Cancel'}
+        </AlertDialog.Cancel>
+        <AlertDialog.Action
+          type="submit"
+          variant="destructive"
+          loading={dialogState.loading}
+          disabled={dialogState.options?.input &&
+            dialogState.inputText !==
+              dialogState.options.input.confirmationText}
+        >
+          {dialogState.options?.confirm?.text ?? 'Delete'}
+        </AlertDialog.Action>
+      </AlertDialog.Footer>
+    </form>
+  </AlertDialog.Content>
+</AlertDialog.Root>

package/dist/components/ui-extra/confirm-delete-dialog/confirm-delete-dialog.svelte.d.ts

@@ -0,0 +1,35 @@
+export type ConfirmDeleteOptions = {
+    title: string;
+    description: string;
+    skipConfirmation?: boolean;
+    input?: {
+        confirmationText: string;
+    };
+    confirm?: {
+        text?: string;
+    };
+    cancel?: {
+        text?: string;
+    };
+    onConfirm: () => Promise<unknown>;
+    onCancel?: () => void;
+};
+export declare function confirmDelete(options: ConfirmDeleteOptions): void;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConfirmDeleteDialog: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConfirmDeleteDialog = InstanceType<typeof ConfirmDeleteDialog>;
+export default ConfirmDeleteDialog;

package/dist/components/ui-extra/confirm-delete-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import ConfirmDeleteDialog, { confirmDelete, type ConfirmDeleteOptions } from './confirm-delete-dialog.svelte';
+export { ConfirmDeleteDialog, confirmDelete, type ConfirmDeleteOptions };

package/dist/components/ui-extra/confirm-delete-dialog/index.js

@@ -0,0 +1,2 @@
+import ConfirmDeleteDialog, { confirmDelete } from './confirm-delete-dialog.svelte';
+export { ConfirmDeleteDialog, confirmDelete };

package/dist/components/ui-extra/github-button/github-button.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+  import type { ButtonProps, Size } from '../../../blocks/button.svelte';
+
+  export type GithubButtonProps = Omit<
+    ButtonProps,
+    'href' | 'children' | 'size'
+  > & {
+    repo: {
+      owner: string;
+      repo: string;
+    };
+    stars?: Promise<number> | number;
+    starsTweenedDuration?: number;
+    size?: Size;
+  };
+</script>
+
+<script lang="ts">
+  import Button, { sizeMap } from '../../../blocks/button.svelte';
+  import { cn } from '../../../blocks/utils';
+  import { cubicInOut } from 'svelte/easing';
+  import { Tween } from 'svelte/motion';
+
+  let {
+    starsTweenedDuration = 5000,
+    variant = 'outline',
+    repo,
+    class: className,
+    stars,
+    size = 'default',
+    ...rest
+  }: GithubButtonProps = $props();
+
+  function displayStars(stars: number): string {
+    if (stars < 1000) return `${stars.toFixed(0)}`;
+
+    return `${(parseInt(stars.toFixed(0)) / 1000).toFixed(1)}k`;
+  }
+
+  // svelte-ignore state_referenced_locally
+  const starsTweened = new Tween(typeof stars === 'number' ? stars : 0, {
+    duration: starsTweenedDuration,
+    easing: cubicInOut
+  });
+
+  $effect(() => {
+    if (stars instanceof Promise) {
+      stars.then((value) => starsTweened.set(value));
+    } else if (stars !== undefined) {
+      starsTweened.set(stars);
+    }
+  });
+</script>
+
+<Button
+  href={`https://github.com/${repo.owner}/${repo.repo}`}
+  class={cn(
+    '[&_span]:text-muted-foreground gap-2 font-mono text-xs',
+    className
+  )}
+  {variant}
+  size={stars === undefined ? sizeMap[size].icon : sizeMap[size].normal}
+  {...rest}
+>
+  <svg
+    class={cn('text-foreground size-4 shrink-0 fill-current', className)}
+    viewBox="0 0 256 250"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+    aria-hidden="true"
+  >
+    <path
+      d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"
+    />
+  </svg>
+  {#if stars !== undefined}
+    <span aria-label="Stars on GitHub" class="tabular-nums">
+      {displayStars(starsTweened.current)}
+    </span>
+  {/if}
+</Button>

package/dist/components/ui-extra/github-button/github-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps, Size } from '../../../blocks/button.svelte';
+export type GithubButtonProps = Omit<ButtonProps, 'href' | 'children' | 'size'> & {
+    repo: {
+        owner: string;
+        repo: string;
+    };
+    stars?: Promise<number> | number;
+    starsTweenedDuration?: number;
+    size?: Size;
+};
+declare const GithubButton: import("svelte").Component<GithubButtonProps, {}, "">;
+type GithubButton = ReturnType<typeof GithubButton>;
+export default GithubButton;

package/dist/components/ui-extra/github-button/index.d.ts

@@ -0,0 +1,20 @@
+import Root from './github-button.svelte';
+/**
+ * Get the stars for a GitHub repository using the ungh.cc API.
+ *
+ * @example
+ * ```ts
+ * const stars = await getStars({ owner: 'ieedan', repo: 'shadcn-svelte-extras', fallback: 539 });
+ * ```
+ *
+ * @param owner - The owner of the repository
+ * @param repoName - The name of the repository
+ * @param fallback - The fallback value to return if the request fails
+ * @returns
+ */
+export declare function getStars({ owner, repo: repoName, fallback }: {
+    owner: string;
+    repo: string;
+    fallback?: number;
+}): Promise<any>;
+export { Root as GitHubButton };

package/dist/components/ui-extra/github-button/index.js

@@ -0,0 +1,27 @@
+import Root from './github-button.svelte';
+/**
+ * Get the stars for a GitHub repository using the ungh.cc API.
+ *
+ * @example
+ * ```ts
+ * const stars = await getStars({ owner: 'ieedan', repo: 'shadcn-svelte-extras', fallback: 539 });
+ * ```
+ *
+ * @param owner - The owner of the repository
+ * @param repoName - The name of the repository
+ * @param fallback - The fallback value to return if the request fails
+ * @returns
+ */
+export async function getStars({ owner, repo: repoName, fallback = 0 }) {
+    try {
+        const response = await fetch(`https://ungh.cc/repos/${owner}/${repoName}`);
+        if (!response.ok)
+            return fallback;
+        const { repo } = await response.json();
+        return repo.stars;
+    }
+    catch {
+        return fallback;
+    }
+}
+export { Root as GitHubButton };

package/dist/components/ui-extra/select/index.d.ts

@@ -0,0 +1,12 @@
+import Root from './select.svelte';
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+import Portal from './select-portal.svelte';
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, Portal as SelectPortal };

package/dist/components/ui-extra/select/index.js

@@ -0,0 +1,14 @@
+import Root from './select.svelte';
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+import Portal from './select-portal.svelte';
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, 
+//
+Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, Portal as SelectPortal };

package/dist/components/ui-extra/select/select-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import SelectPortal from './select-portal.svelte';
+  import SelectScrollUpButton from './select-scroll-up-button.svelte';
+  import SelectScrollDownButton from './select-scroll-down-button.svelte';
+  import { cn, type WithoutChild } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    preventScroll = true,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+  } = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    {preventScroll}
+    data-slot="select-content"
+    class={cn(
+      'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 min-w-36 overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100',
+      className
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn(
+        'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1'
+      )}
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPortal>

package/dist/components/ui-extra/select/select-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import SelectPortal from './select-portal.svelte';
+import { type WithoutChild } from '../../../blocks/utils.js';
+import type { ComponentProps } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../blocks/utils.js';
+type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+};
+declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/dist/components/ui-extra/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>

package/dist/components/ui-extra/select/select-group-heading.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const SelectGroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
+export default SelectGroupHeading;

package/dist/components/ui-extra/select/select-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+  bind:ref
+  data-slot="select-group"
+  class={cn('scroll-my-1 p-1', className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/select/select-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const SelectGroup: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+type SelectGroup = ReturnType<typeof SelectGroup>;
+export default SelectGroup;

package/dist/components/ui-extra/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '../../../blocks/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    <span class="absolute end-2 flex size-3.5 items-center justify-center">
+      {#if selected}
+        <CheckIcon class="cn-select-item-indicator-icon" />
+      {/if}
+    </span>
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

package/dist/components/ui-extra/select/select-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const SelectItem: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/components/ui-extra/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="select-label"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/select/select-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {};
+declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectLabel = ReturnType<typeof SelectLabel>;
+export default SelectLabel;

package/dist/components/ui-extra/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+
+  let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

package/dist/components/ui-extra/select/select-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SelectPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type SelectPortal = ReturnType<typeof SelectPortal>;
+export default SelectPortal;

package/dist/components/ui-extra/select/select-scroll-down-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '../../../blocks/utils.js';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn(
+    "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronDownIcon />
+</SelectPrimitive.ScrollDownButton>

package/dist/components/ui-extra/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
+export default SelectScrollDownButton;

package/dist/components/ui-extra/select/select-scroll-up-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '../../../blocks/utils.js';
+  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn(
+    "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+>
+  <ChevronUpIcon />
+</SelectPrimitive.ScrollUpButton>

package/dist/components/ui-extra/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
+export default SelectScrollUpButton;

package/dist/components/ui-extra/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { Separator } from '../separator/index.js';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-slot="select-separator"
+  class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/select/select-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;