@profidev/pleiades 1.7.0 → 1.8.0

package/dist/components/ui/command/command-input.svelte

@@ -17,15 +17,18 @@
     class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!"
   >
     <CommandPrimitive.Input
+      {value}
       data-slot="command-input"
       class={cn(
         'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
-      bind:ref
       {...restProps}
-      bind:value
-    />
+    >
+      {#snippet child({ props })}
+        <InputGroup.Input {...props} bind:value bind:ref />
+      {/snippet}
+    </CommandPrimitive.Input>
     <InputGroup.Addon>
       <SearchIcon class="size-4 shrink-0 opacity-50" />
     </InputGroup.Addon>

package/dist/components/ui/field/field-label.svelte

@@ -15,7 +15,7 @@
   bind:ref
   data-slot="field-label"
   class={cn(
-    'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
+    'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
     'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
     className
   )}

package/dist/components/ui/field/field-title.svelte

@@ -14,7 +14,7 @@
   bind:this={ref}
   data-slot="field-label"
   class={cn(
-    'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+    'flex w-fit items-center gap-2 text-sm leading-snug leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
     className
   )}
   {...restProps}

package/dist/components/ui/slider/slider.svelte

@@ -41,7 +41,7 @@ get along, so we shut typescript up by casting `value` to `never`.
         )}
       />
     </span>
-    {#each thumbItems as thumb (thumb)}
+    {#each thumbItems as thumb (thumb.index)}
       <SliderPrimitive.Thumb
         data-slot="slider-thumb"
         index={thumb.index}

package/dist/components/ui/tooltip/tooltip.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
   import { Tooltip as TooltipPrimitive } from 'bits-ui';
-  import TooltipProvider from './tooltip-provider.svelte';
 
   let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
     $props();
 </script>
 
-<TooltipProvider>
-  <TooltipPrimitive.Root bind:open {...restProps} />
-</TooltipProvider>
+<TooltipPrimitive.Root bind:open {...restProps} />

package/dist/components/ui-extra/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import {
+    buttonVariants,
+    type ButtonVariant,
+    type ButtonSize
+  } from '../button/index.js';
+  import { cn } from '../../../blocks/utils.js';
+  import { Spinner } from '../spinner';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'default',
+    size = 'default',
+    loading = false,
+    children,
+    ...restProps
+  }: AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+  } = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+  bind:ref
+  data-slot="alert-dialog-action"
+  class={cn(
+    buttonVariants({ variant, size }),
+    'cn-alert-dialog-action',
+    className
+  )}
+  {...restProps}
+>
+  {#if loading}
+    <Spinner data-icon="inline-start" />
+  {/if}
+  {@render children?.()}
+</AlertDialogPrimitive.Action>

package/dist/components/ui-extra/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import { type ButtonVariant, type ButtonSize } from '../button/index.js';
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;

package/dist/components/ui-extra/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import {
+    buttonVariants,
+    type ButtonVariant,
+    type ButtonSize
+  } from '../button/index.js';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    variant = 'outline',
+    size = 'default',
+    ...restProps
+  }: AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+  } = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+  bind:ref
+  data-slot="alert-dialog-cancel"
+  class={cn(
+    buttonVariants({ variant, size }),
+    'cn-alert-dialog-cancel',
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import { type ButtonVariant, type ButtonSize } from '../button/index.js';
+type $$ComponentProps = AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogCancel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/components/ui-extra/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import AlertDialogPortal from './alert-dialog-portal.svelte';
+  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+  import {
+    cn,
+    type WithoutChild,
+    type WithoutChildrenOrChild
+  } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    size = 'default',
+    portalProps,
+    ...restProps
+  }: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    size?: 'default' | 'sm';
+    portalProps?: WithoutChildrenOrChild<
+      ComponentProps<typeof AlertDialogPortal>
+    >;
+  } = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    data-slot="alert-dialog-content"
+    data-size={size}
+    class={cn(
+      '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 bg-popover text-popover-foreground ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+      className
+    )}
+    {...restProps}
+  />
+</AlertDialogPortal>

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

@@ -0,0 +1,11 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import AlertDialogPortal from './alert-dialog-portal.svelte';
+import { type WithoutChild, type WithoutChildrenOrChild } from '../../../blocks/utils.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    size?: 'default' | 'sm';
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+};
+declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/components/ui-extra/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+  bind:ref
+  data-slot="alert-dialog-description"
+  class={cn(
+    'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/alert-dialog/alert-dialog-description.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,23 @@
+<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="alert-dialog-footer"
+  class={cn(
+    'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/alert-dialog/alert-dialog-footer.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-header"
+  class={cn(
+    'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/alert-dialog/alert-dialog-header.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-media"
+  class={cn(
+    "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/alert-dialog/alert-dialog-media.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+  bind:ref
+  data-slot="alert-dialog-overlay"
+  class={cn(
+    'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/alert-dialog/alert-dialog-overlay.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-portal.svelte

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

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

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+  bind:ref
+  data-slot="alert-dialog-title"
+  class={cn(
+    'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/alert-dialog/alert-dialog-title.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    ...restProps
+  }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger
+  bind:ref
+  data-slot="alert-dialog-trigger"
+  {...restProps}
+/>

package/dist/components/ui-extra/alert-dialog/alert-dialog-trigger.svelte.d.ts

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

package/dist/components/ui-extra/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+  let {
+    open = $bindable(false),
+    ...restProps
+  }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

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

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

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

@@ -0,0 +1,13 @@
+import Root from './alert-dialog.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Media from './alert-dialog-media.svelte';
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia };

package/dist/components/ui-extra/alert-dialog/index.js

@@ -0,0 +1,15 @@
+import Root from './alert-dialog.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Media from './alert-dialog-media.svelte';
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 
+//
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia };

package/dist/components/ui-extra/button-group/button-group-separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import { Separator } from '../separator/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    ...restProps
+  }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-slot="button-group-separator"
+  {orientation}
+  class={cn(
+    'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
+    className
+  )}
+  {...restProps}
+/>

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

@@ -0,0 +1,13 @@
+declare const ButtonGroupSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "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").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type ButtonGroupSeparator = ReturnType<typeof ButtonGroupSeparator>;
+export default ButtonGroupSeparator;

package/dist/components/ui-extra/button-group/button-group-text.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+  } = $props();
+
+  const mergedProps = $derived({
+    ...restProps,
+    class: cn(
+      "bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+      className
+    ),
+    'data-slot': 'button-group-text'
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render mergedProps.children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const ButtonGroupText: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ButtonGroupText = ReturnType<typeof ButtonGroupText>;
+export default ButtonGroupText;

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

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const buttonGroupVariants = tv({
+    base: "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>[data-slot]]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+        vertical:
+          'flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0'
+      }
+    },
+    defaultVariants: {
+      orientation: 'horizontal'
+    }
+  });
+
+  export type ButtonGroupOrientation = VariantProps<
+    typeof buttonGroupVariants
+  >['orientation'];
+</script>
+
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    orientation = 'horizontal',
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={cn(buttonGroupVariants({ orientation }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", unknown, unknown, undefined>>;
+export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>['orientation'];
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+};
+declare const ButtonGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

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

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