@profidev/pleiades 1.7.0

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-portal.svelte

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

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

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    ...restProps
+  }: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="dropdown-menu-radio-group"
+  {...restProps}
+/>

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
+type DropdownMenuRadioGroup = ReturnType<typeof DropdownMenuRadioGroup>;
+export default DropdownMenuRadioGroup;

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { cn, type WithoutChild } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+  bind:ref
+  data-slot="dropdown-menu-radio-item"
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-inset:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span
+      class="pointer-events-none absolute right-2 flex items-center justify-center"
+      data-slot="dropdown-menu-radio-item-indicator"
+    >
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</DropdownMenuPrimitive.RadioItem>

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  data-slot="dropdown-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>

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

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-shortcut.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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="dropdown-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-shortcut.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+  bind:ref
+  data-slot="dropdown-menu-sub-content"
+  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 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 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100',
+    className
+  )}
+  {...restProps}
+/>

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="dropdown-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+type $$ComponentProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+};
+declare const DropdownMenuSubTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
+export default DropdownMenuSubTrigger;

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub.svelte

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-sub.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-trigger.svelte

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu.svelte

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

package/dist/components/ui-extra/dropdown-menu/dropdown-menu.svelte.d.ts

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

package/dist/components/ui-extra/dropdown-menu/index.d.ts

@@ -0,0 +1,18 @@
+import Root from './dropdown-menu.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger };

package/dist/components/ui-extra/dropdown-menu/index.js

@@ -0,0 +1,18 @@
+import Root from './dropdown-menu.svelte';
+import Sub from './dropdown-menu-sub.svelte';
+import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+import Portal from './dropdown-menu-portal.svelte';
+export { CheckboxGroup, CheckboxItem, Content, Portal, Root as DropdownMenu, CheckboxGroup as DropdownMenuCheckboxGroup, CheckboxItem as DropdownMenuCheckboxItem, Content as DropdownMenuContent, Portal as DropdownMenuPortal, Group as DropdownMenuGroup, Item as DropdownMenuItem, Label as DropdownMenuLabel, RadioGroup as DropdownMenuRadioGroup, RadioItem as DropdownMenuRadioItem, Separator as DropdownMenuSeparator, Shortcut as DropdownMenuShortcut, Sub as DropdownMenuSub, SubContent as DropdownMenuSubContent, SubTrigger as DropdownMenuSubTrigger, Trigger as DropdownMenuTrigger, GroupHeading as DropdownMenuGroupHeading, Group, GroupHeading, Item, Label, RadioGroup, RadioItem, Root, Separator, Shortcut, Sub, SubContent, SubTrigger, Trigger };

package/dist/components/ui-extra/emoji-picker/emoji-picker-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { EmojiPickerFooterProps } from './types';
+  import { useEmojiPickerFooter } from './emoji-picker.svelte.js';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: EmojiPickerFooterProps = $props();
+
+  const footerState = useEmojiPickerFooter();
+</script>
+
+<div
+  {...rest}
+  class={cn('border-border relative max-w-full border-t p-2', className)}
+>
+  {@render children?.({ active: footerState.root.emojiPickerState.active })}
+</div>

package/dist/components/ui-extra/emoji-picker/emoji-picker-footer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmojiPickerFooterProps } from './types';
+declare const EmojiPickerFooter: import("svelte").Component<EmojiPickerFooterProps, {}, "">;
+type EmojiPickerFooter = ReturnType<typeof EmojiPickerFooter>;
+export default EmojiPickerFooter;

package/dist/components/ui-extra/emoji-picker/emoji-picker-list.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import * as Command from '../command';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import data, { type EmojiMartData } from '@emoji-mart/data';
+  import * as casing from '../../../blocks/casing';
+  import type { EmojiPickerListProps } from './types';
+  import {
+    makeValue,
+    parseValue,
+    useEmojiPickerList
+  } from './emoji-picker.svelte.js';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    emptyMessage = 'No results.',
+    class: className,
+    ...rest
+  }: EmojiPickerListProps = $props();
+
+  const emojiData = data as EmojiMartData;
+
+  const filter = (value: string, keywords: string[]) => {
+    if (!Array.isArray(keywords)) {
+      return false;
+    }
+
+    for (const keyword of keywords) {
+      if (keyword.toLowerCase().startsWith(value.toLowerCase())) return true;
+    }
+
+    return false;
+  };
+
+  const pickerState = useEmojiPickerList();
+</script>
+
+<Command.List bind:ref class={cn('relative h-[200px]', className)} {...rest}>
+  <Command.Empty
+    class="absolute inset-0 flex place-items-center justify-center py-0"
+  >
+    {emptyMessage}
+  </Command.Empty>
+  {#if pickerState.showRecents}
+    {@const recents = pickerState.root.frecency?.items
+      .filter((item) => {
+        const { name } = parseValue(item);
+        return filter(
+          pickerState.root.emojiPickerState.search,
+          emojiData.emojis[name].keywords
+        );
+      })
+      .slice(0, pickerState.maxRecents)}
+    {#if recents && recents.length > 0}
+      <CommandPrimitive.Group>
+        <CommandPrimitive.GroupHeading
+          class="text-muted-foreground px-2 py-1 text-xs"
+        >
+          Recents
+        </CommandPrimitive.GroupHeading>
+        <CommandPrimitive.GroupItems class="grid grid-cols-6 px-2">
+          {#each recents as item (item)}
+            {@const { name, skin } = parseValue(item)}
+            {@const emoji = emojiData.emojis[name].skins[skin].native}
+            <Command.Item
+              class="flex aspect-square size-9 place-items-center justify-center text-lg [&_svg]:hidden!"
+              value="{item}:recent"
+              onSelect={() => {
+                pickerState.select(item);
+                pickerState.root.frecency?.use(item);
+              }}
+            >
+              {emoji}
+            </Command.Item>
+          {/each}
+        </CommandPrimitive.GroupItems>
+      </CommandPrimitive.Group>
+    {/if}
+  {/if}
+  {#each emojiData.categories as category (category.id)}
+    {@const emojis = category.emojis.filter((item) =>
+      filter(
+        pickerState.root.emojiPickerState.search,
+        emojiData.emojis[item].keywords
+      )
+    )}
+    {#if emojis.length > 0}
+      <CommandPrimitive.Group>
+        <CommandPrimitive.GroupHeading
+          class="text-muted-foreground px-2 py-1 text-xs"
+        >
+          {casing.camelToPascal(category.id)}
+        </CommandPrimitive.GroupHeading>
+        <CommandPrimitive.GroupItems class="grid grid-cols-6 px-2">
+          {#each emojis as item (item)}
+            {@const emoji = emojiData.emojis[item]}
+            {@const emojiSkin =
+              emoji.skins.length > 1 ? pickerState.skinIndex : 0}
+            {@const key = makeValue(item, emojiSkin)}
+            <Command.Item
+              class="flex aspect-square size-9 place-items-center justify-center text-lg [&_svg]:hidden!"
+              value={item}
+              onSelect={() => {
+                pickerState.select(key);
+                pickerState.root.frecency?.use(key);
+              }}
+            >
+              {emoji.skins[emojiSkin].native}
+            </Command.Item>
+          {/each}
+        </CommandPrimitive.GroupItems>
+      </CommandPrimitive.Group>
+    {/if}
+  {/each}
+</Command.List>

package/dist/components/ui-extra/emoji-picker/emoji-picker-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmojiPickerListProps } from './types';
+declare const EmojiPickerList: import("svelte").Component<EmojiPickerListProps, {}, "ref">;
+type EmojiPickerList = ReturnType<typeof EmojiPickerList>;
+export default EmojiPickerList;

package/dist/components/ui-extra/emoji-picker/emoji-picker-search.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import SearchIcon from '@lucide/svelte/icons/search';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { EmojiPickerSearchProps } from './types';
+  import { useEmojiPickerInput } from './emoji-picker.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Search',
+    ...rest
+  }: EmojiPickerSearchProps = $props();
+
+  useEmojiPickerInput({
+    value: box.with(
+      () => value,
+      (v) => (value = v)
+    )
+  });
+</script>
+
+<div class="p-2">
+  <div
+    class="bg-input border-input dark:bg-input/30 flex h-9 items-center gap-2 rounded-md border px-3"
+  >
+    <SearchIcon class="size-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      {...rest}
+      {placeholder}
+      class={'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50'}
+      bind:value
+    />
+  </div>
+</div>

package/dist/components/ui-extra/emoji-picker/emoji-picker-search.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const EmojiPickerSearch: import("svelte").Component<CommandPrimitive.InputProps, {}, "value">;
+type EmojiPickerSearch = ReturnType<typeof EmojiPickerSearch>;
+export default EmojiPickerSearch;

package/dist/components/ui-extra/emoji-picker/emoji-picker-skin-tone-selector.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+  import { useEmojiPickerSkinToneSelector } from './emoji-picker.svelte.js';
+  import type { EmojiPickerSkinProps } from './types.js';
+  import Button, { type ButtonProps } from '../../../blocks/button.svelte';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    previewEmoji = '👋',
+    variant = 'outline',
+    size = 'icon',
+    class: className,
+    onclick,
+    ...rest
+  }: EmojiPickerSkinProps = $props();
+
+  const skinState = useEmojiPickerSkinToneSelector({
+    previewEmoji: box.with(() => previewEmoji)
+  });
+</script>
+
+<Button
+  {...rest /* eslint-disable-line @typescript-eslint/no-explicit-any */ as any}
+  {variant}
+  {size}
+  class={cn('size-8', className)}
+  onclick={(e: Parameters<NonNullable<ButtonProps['onclick']>>[0]) => {
+    onclick?.(e);
+    skinState.cycleSkinTone();
+  }}
+>
+  {skinState.preview}
+</Button>

package/dist/components/ui-extra/emoji-picker/emoji-picker-skin-tone-selector.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmojiPickerSkinProps } from './types.js';
+declare const EmojiPickerSkinToneSelector: import("svelte").Component<EmojiPickerSkinProps, {}, "">;
+type EmojiPickerSkinToneSelector = ReturnType<typeof EmojiPickerSkinToneSelector>;
+export default EmojiPickerSkinToneSelector;

package/dist/components/ui-extra/emoji-picker/emoji-picker-viewport.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div {...rest} class={cn('border-border rounded-md border', className)}>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/emoji-picker/emoji-picker-viewport.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const EmojiPickerViewport: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type EmojiPickerViewport = ReturnType<typeof EmojiPickerViewport>;
+export default EmojiPickerViewport;

package/dist/components/ui-extra/emoji-picker/emoji-picker.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+  import type { EmojiPickerRootProps } from './types';
+  import { useEmojiPicker } from './emoji-picker.svelte.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    value = $bindable(''),
+    skin = $bindable(0),
+    onSelect = () => {},
+    showRecents = false,
+    recentsKey = '',
+    maxRecents = 12,
+    onSkinChange = () => {},
+    class: className,
+    children,
+    ...rest
+  }: EmojiPickerRootProps = $props();
+
+  const state = useEmojiPicker({
+    value: box.with(
+      () => value,
+      (v) => (value = v)
+    ),
+    skin: box.with(
+      () => skin,
+      (v) => (skin = v)
+    ),
+    showRecents: box.with(() => showRecents),
+    recentsKey: box.with(() => recentsKey),
+    maxRecents: box.with(() => maxRecents),
+    onSelect: box.with(() => onSelect),
+    onSkinChange: box.with(() => onSkinChange)
+  });
+</script>
+
+<CommandPrimitive.Root
+  {...rest}
+  columns={6}
+  shouldFilter={false}
+  class={cn('max-w-[232px]', className)}
+  onValueChange={state.onValueChange}
+>
+  {@render children?.()}
+</CommandPrimitive.Root>

package/dist/components/ui-extra/emoji-picker/emoji-picker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmojiPickerRootProps } from './types';
+declare const EmojiPicker: import("svelte").Component<EmojiPickerRootProps, {}, "value" | "skin">;
+type EmojiPicker = ReturnType<typeof EmojiPicker>;
+export default EmojiPicker;