@profidev/pleiades 1.7.0

package/dist/components/ui-extra/image-cropper/index.d.ts

@@ -0,0 +1,11 @@
+import Root from './image-cropper.svelte';
+import UploadTrigger from './image-cropper-upload-trigger.svelte';
+import Preview from './image-cropper-preview.svelte';
+import Dialog from './image-cropper-dialog.svelte';
+import Cropper from './image-cropper-cropper.svelte';
+import Controls from './image-cropper-controls.svelte';
+import Crop from './image-cropper-crop.svelte';
+import Cancel from './image-cropper-cancel.svelte';
+import { getFileFromUrl } from './utils';
+export { Root, UploadTrigger, Preview, Dialog, Cropper, Controls, Crop, Cancel, getFileFromUrl };
+export type { ImageCropperRootPropsWithoutHTML, ImageCropperRootProps, ImageCropperDialogProps, ImageCropperCropperProps, ImageCropperControlsWithoutHTML, ImageCropperControlsProps, ImageCropperPreviewPropsWithoutHTML, ImageCropperPreviewProps, ImageCropperUploadTriggerPropsWithoutHTML, ImageCropperUploadTriggerProps } from './types';

package/dist/components/ui-extra/image-cropper/index.js

@@ -0,0 +1,10 @@
+import Root from './image-cropper.svelte';
+import UploadTrigger from './image-cropper-upload-trigger.svelte';
+import Preview from './image-cropper-preview.svelte';
+import Dialog from './image-cropper-dialog.svelte';
+import Cropper from './image-cropper-cropper.svelte';
+import Controls from './image-cropper-controls.svelte';
+import Crop from './image-cropper-crop.svelte';
+import Cancel from './image-cropper-cancel.svelte';
+import { getFileFromUrl } from './utils';
+export { Root, UploadTrigger, Preview, Dialog, Cropper, Controls, Crop, Cancel, getFileFromUrl };

package/dist/components/ui-extra/image-cropper/types.d.ts

@@ -0,0 +1,27 @@
+import type { AvatarRootProps, DialogContentProps, WithChildren, WithoutChild, WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { CropperProps } from 'svelte-easy-crop';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+export type ImageCropperRootPropsWithoutHTML = WithChildren<{
+    id?: string;
+    src?: string;
+    onCropped?: (url: string) => void;
+    onUnsupportedFile?: (file: File) => void;
+}>;
+export type ImageCropperRootProps = ImageCropperRootPropsWithoutHTML & HTMLInputAttributes;
+export type ImageCropperDialogProps = DialogContentProps;
+export type ImageCropperCropperProps = Omit<Partial<CropperProps>, 'oncropcomplete' | 'image'>;
+export type ImageCropperControlsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+}>;
+export type ImageCropperControlsProps = ImageCropperControlsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type ImageCropperPreviewPropsWithoutHTML = {
+    child?: Snippet<[{
+        src: string;
+    }]>;
+};
+export type ImageCropperPreviewProps = ImageCropperPreviewPropsWithoutHTML & WithoutChild<AvatarRootProps>;
+export type ImageCropperUploadTriggerPropsWithoutHTML = WithChildren<{
+    ref?: HTMLLabelElement | null;
+}>;
+export type ImageCropperUploadTriggerProps = ImageCropperUploadTriggerPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLLabelElement>>;

package/dist/components/ui-extra/image-cropper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui-extra/image-cropper/utils.d.ts

@@ -0,0 +1,10 @@
+import type { CropArea } from 'svelte-easy-crop';
+export declare const getFileFromUrl: (url: string, fileName?: string) => Promise<File>;
+/** Gets the cropped image from the src using the cropped area
+ *
+ * @param imageSrc
+ * @param pixelCrop
+ * @param rotation
+ * @returns
+ */
+export declare const getCroppedImg: (imageSrc: string, pixelCrop: CropArea, rotation?: number) => Promise<string>;

package/dist/components/ui-extra/image-cropper/utils.js

@@ -0,0 +1,61 @@
+export const getFileFromUrl = async (url, fileName = 'cropped.png') => {
+    // Fetch the file data from the URL
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch resource: ${response.status} ${response.statusText}`);
+    }
+    // Convert the response into a Blob
+    const blob = await response.blob();
+    // Create and return a File. You can set a custom type if needed.
+    return new File([blob], fileName, { type: blob.type });
+};
+const createImage = (url) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.addEventListener('load', () => resolve(image));
+        image.addEventListener('error', (error) => reject(error));
+        image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+        image.src = url;
+    });
+};
+const getRadianAngle = (degreeValue) => {
+    return (degreeValue * Math.PI) / 180;
+};
+/** Gets the cropped image from the src using the cropped area
+ *
+ * @param imageSrc
+ * @param pixelCrop
+ * @param rotation
+ * @returns
+ */
+export const getCroppedImg = async (imageSrc, pixelCrop, rotation = 0) => {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Error getting 2d rendering context');
+    }
+    const maxSize = Math.max(image.width, image.height);
+    const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
+    // set each dimensions to double largest dimension to allow for a safe area for the
+    // image to rotate in without being clipped by canvas context
+    canvas.width = safeArea;
+    canvas.height = safeArea;
+    // translate canvas context to a central location on image to allow rotating around the center.
+    ctx.translate(safeArea / 2, safeArea / 2);
+    ctx.rotate(getRadianAngle(rotation));
+    ctx.translate(-safeArea / 2, -safeArea / 2);
+    // draw rotated image and store data.
+    ctx.drawImage(image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5);
+    const data = ctx.getImageData(0, 0, safeArea, safeArea);
+    // set canvas width to final desired crop size - this will clear existing context
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+    // paste generated rotate image with correct offsets for x,y crop values.
+    ctx.putImageData(data, Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x), Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y));
+    return new Promise((resolve) => {
+        canvas.toBlob((file) => {
+            resolve(URL.createObjectURL(file));
+        }, 'image/png');
+    });
+};

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

@@ -0,0 +1,2 @@
+import Root from './input.svelte';
+export { Root, Root as Input };

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

@@ -0,0 +1,4 @@
+import Root from './input.svelte';
+export { Root, 
+//
+Root as Input };

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type {
+    HTMLInputAttributes,
+    HTMLInputTypeAttribute
+  } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+
+  type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, 'type'> &
+      (
+        | { type: 'file'; files?: FileList }
+        | { type?: InputType; files?: undefined }
+      )
+  >;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    'data-slot': dataSlot = 'input',
+    ...restProps
+  }: Props = $props();
+</script>
+
+{#if type === 'file'}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+      className
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  />
+{:else}
+  <input
+    bind:this={ref}
+    data-slot={dataSlot}
+    class={cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+      className
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  />
+{/if}

package/dist/components/ui-extra/input/input.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../blocks/utils.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,7 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

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

@@ -0,0 +1,9 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/ui-extra/input-group/input-group-addon.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+  export const inputGroupAddonVariants = tv({
+    base: "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+    variants: {
+      align: {
+        'inline-start':
+          'order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]',
+        'inline-end':
+          'order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]',
+        'block-start':
+          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+        'block-end':
+          'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2'
+      }
+    },
+    defaultVariants: {
+      align: 'inline-start'
+    }
+  });
+
+  export type InputGroupAddonAlign = VariantProps<
+    typeof inputGroupAddonVariants
+  >['align'];
+</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,
+    align = 'inline-start',
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(inputGroupAddonVariants({ align }), className)}
+  onclick={(e) => {
+    if ((e.target as HTMLElement).closest('button')) {
+      return;
+    }
+    e.currentTarget.parentElement?.querySelector('input')?.focus();
+  }}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': string;
+        'inline-end': string;
+        'block-start': string;
+        'block-end': string;
+    };
+}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

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

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const inputGroupButtonVariants = tv({
+    base: 'flex items-center gap-2 text-sm shadow-none',
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: 'cn-input-group-button-size-sm',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+      }
+    },
+    defaultVariants: {
+      size: 'xs'
+    }
+  });
+
+  export type InputGroupButtonSize = VariantProps<
+    typeof inputGroupButtonVariants
+  >['size'];
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import { Button } from '../button/index.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    type = 'button',
+    variant = 'ghost',
+    size = 'xs',
+    ...restProps
+  }: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+  } = $props();
+</script>
+
+<Button
+  bind:ref
+  {type}
+  data-size={size}
+  {variant}
+  class={cn(inputGroupButtonVariants({ size }), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</Button>

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

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "flex items-center gap-2 text-sm shadow-none", {
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        'icon-xs': string;
+        'icon-sm': string;
+    };
+}, undefined, "flex items-center gap-2 text-sm shadow-none", unknown, unknown, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import type { ComponentProps } from 'svelte';
+import { Button } from '../button/index.js';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { ComponentProps } from 'svelte';
+  import { Input } from '../input/index.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...props
+  }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+  bind:ref
+  data-slot="input-group-control"
+  class={cn(
+    'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+    className
+  )}
+  bind:value
+  {...props}
+/>

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

@@ -0,0 +1,11 @@
+declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: "number" | "url" | "reset" | "submit" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "email" | "hidden" | "color" | "time" | "image" | "date" | "month" | "datetime-local" | "password" | "range" | "week";
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "value" | "ref">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

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

@@ -0,0 +1,22 @@
+<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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cn(
+    "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

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

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

package/dist/components/ui-extra/input-group/input-group-textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { Textarea } from '../textarea/index.js';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    ...props
+  }: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+  bind:ref
+  data-slot="input-group-control"
+  class={cn(
+    'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+    className
+  )}
+  bind:value
+  {...props}
+/>

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

@@ -0,0 +1,3 @@
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../blocks/utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
+type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
+export default InputGroupTextarea;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../blocks/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...props
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="input-group"
+  role="group"
+  class={cn(
+    '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 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none 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-[>textarea]:h-auto 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',
+    className
+  )}
+  {...props}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/components/ui-extra/language-switcher/index.d.ts

@@ -0,0 +1,3 @@
+import LanguageSwitcher from './language-switcher.svelte';
+export type { Language, LanguageSwitcherProps } from './language-switcher.svelte';
+export { LanguageSwitcher as Root, LanguageSwitcher };

package/dist/components/ui-extra/language-switcher/index.js

@@ -0,0 +1,2 @@
+import LanguageSwitcher from './language-switcher.svelte';
+export { LanguageSwitcher as Root, LanguageSwitcher };

package/dist/components/ui-extra/language-switcher/language-switcher.svelte

@@ -0,0 +1,67 @@
+<script lang="ts" module>
+  export type Language = {
+    /** Language code (e.g., 'en', 'de') */
+    code: string;
+    /** Display name (e.g., 'English', 'Deutsch') */
+    label: string;
+  };
+
+  export type LanguageSwitcherProps = {
+    /** List of available languages */
+    languages: Language[];
+
+    /** Current selected language code */
+    value?: string;
+
+    /** Dropdown alignment */
+    align?: 'start' | 'center' | 'end';
+
+    /** Button variant */
+    variant?: 'outline' | 'ghost';
+
+    /** Called when the language changes */
+    onChange?: (code: string) => void;
+
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import GlobeIcon from '@lucide/svelte/icons/globe';
+  import * as DropdownMenu from '../dropdown-menu';
+  import { buttonVariants } from '../button';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    languages = [],
+    value = $bindable(''),
+    align = 'end',
+    variant = 'outline',
+    onChange,
+    class: className
+  }: LanguageSwitcherProps = $props();
+
+  // set default code if there isn't one selected
+  if (value === '') {
+    value = languages[0].code;
+  }
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger
+    class={cn(buttonVariants({ variant, size: 'icon' }), className)}
+    aria-label="Change language"
+  >
+    <GlobeIcon class="size-4" />
+    <span class="sr-only">Change language</span>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content {align}>
+    <DropdownMenu.RadioGroup bind:value onValueChange={onChange}>
+      {#each languages as language (language.code)}
+        <DropdownMenu.RadioItem value={language.code}>
+          {language.label}
+        </DropdownMenu.RadioItem>
+      {/each}
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/ui-extra/language-switcher/language-switcher.svelte.d.ts

@@ -0,0 +1,22 @@
+export type Language = {
+    /** Language code (e.g., 'en', 'de') */
+    code: string;
+    /** Display name (e.g., 'English', 'Deutsch') */
+    label: string;
+};
+export type LanguageSwitcherProps = {
+    /** List of available languages */
+    languages: Language[];
+    /** Current selected language code */
+    value?: string;
+    /** Dropdown alignment */
+    align?: 'start' | 'center' | 'end';
+    /** Button variant */
+    variant?: 'outline' | 'ghost';
+    /** Called when the language changes */
+    onChange?: (code: string) => void;
+    class?: string;
+};
+declare const LanguageSwitcher: import("svelte").Component<LanguageSwitcherProps, {}, "value">;
+type LanguageSwitcher = ReturnType<typeof LanguageSwitcher>;
+export default LanguageSwitcher;