@streamscloud/kit 0.2.0 → 0.2.2

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">import { ArrayHelper } from '../../core/utils';
+import { Icon } from '../icon';
+import { emojiCategories } from './emoji-list';
+import { EmojiPickerLocalization } from './emoji-picker-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+let { on } = $props();
+let searchValue = $state('');
+const loc = new EmojiPickerLocalization();
+const filteredEmojiCategories = $derived.by(() => {
+    if (!searchValue) {
+        return emojiCategories;
+    }
+    const searchTerms = searchValue.replace(/\s\s+/g, ' ').trim().toLowerCase().split(' ');
+    const searchMap = [];
+    emojiCategories.forEach((category) => {
+        category.emojis.forEach((emoji) => {
+            let score = 0;
+            searchTerms.forEach((term) => {
+                if (emoji.text.toLowerCase().includes(term)) {
+                    score++;
+                }
+            });
+            if (score > 0) {
+                searchMap.push({ emoji, score });
+            }
+        });
+    });
+    const sorted = ArrayHelper.sortArrayDescending(searchMap, (x) => x.score);
+    return [
+        {
+            name: 'search',
+            emojis: sorted.map((s) => s.emoji)
+        }
+    ];
+});
+const select = (emoji) => {
+    on.select(emoji.unicode);
+};
+const getCategoryLabel = (name) => {
+    return loc.categories[name] ?? name;
+};
+const clearSearch = () => {
+    searchValue = '';
+};
+</script>
+
+<div class="emoji-panel">
+  <div class="emoji-panel__search">
+    <input
+      class="emoji-panel__search-input"
+      type="text"
+      placeholder={loc.searchPlaceholder}
+      value={searchValue}
+      oninput={(e) => (searchValue = e.currentTarget.value)} />
+    {#if searchValue}
+      <button type="button" class="emoji-panel__search-clear" onclick={clearSearch}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/if}
+  </div>
+  <div class="emoji-panel__categories">
+    {#each filteredEmojiCategories as category (category.name)}
+      <div class="emoji-panel__category-title">{getCategoryLabel(category.name)}</div>
+      <div class="emoji-panel__grid">
+        {#each category.emojis as emoji (emoji.text)}
+          <span class="emoji-panel__emoji" onclick={() => select(emoji)} onkeydown={() => ({})} role="none" title={emoji.text}>{emoji.unicode}</span>
+        {/each}
+        {#if !category.emojis.length}
+          <span class="emoji-panel__not-found">{loc.notFound}</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
+and can be embedded directly by input components.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
+| `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
+| `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
+| `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+| `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+-->
+
+<style>.emoji-panel {
+  --_emoji-panel--background: var(--sc-kit--emoji-panel--background, light-dark(#ffffff, #2e2e2e));
+  --_emoji-panel--border-color: var(--sc-kit--emoji-panel--border-color, light-dark(#d1d5db, #4b5563));
+  --_emoji-panel--label-color: var(--sc-kit--emoji-panel--label-color, light-dark(#6b7280, #9ca3af));
+  --_emoji-panel--placeholder-color: var(--sc-kit--emoji-panel--placeholder-color, light-dark(#9ca3af, #6b7280));
+  --_emoji-panel--width: var(--sc-kit--emoji-panel--width, 100%);
+  width: var(--_emoji-panel--width);
+  background-color: var(--_emoji-panel--background);
+  border: 1px solid var(--_emoji-panel--border-color);
+  border-radius: 0.25rem;
+  z-index: 999;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.emoji-panel__search {
+  padding: 0.375rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.emoji-panel__search-input {
+  width: 100%;
+  height: 1.75rem;
+  font-size: 0.75rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--_emoji-panel--border-color);
+  border-radius: 1em;
+  background: transparent;
+  outline: none;
+}
+.emoji-panel__search-input::placeholder {
+  color: var(--_emoji-panel--placeholder-color);
+}
+.emoji-panel__search-clear {
+  position: absolute;
+  right: 0.625rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  --sc-kit--icon--size: 0.875rem;
+  --sc-kit--icon--color: var(--_emoji-panel--placeholder-color);
+}
+.emoji-panel__categories {
+  max-height: 15em;
+  padding: 0 0.5rem;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.emoji-panel__categories::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.emoji-panel__categories::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.emoji-panel__categories::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .emoji-panel__categories {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.emoji-panel__category-title {
+  font-size: 0.625rem;
+  font-weight: 400;
+  color: var(--_emoji-panel--label-color);
+  position: sticky;
+  top: 0;
+  background-color: var(--_emoji-panel--background);
+  padding: 0.5rem 0;
+  z-index: 1;
+}
+.emoji-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(1.7em, 1fr));
+  grid-auto-rows: minmax(1.7em, auto);
+}
+.emoji-panel__not-found {
+  grid-column: 1/-1;
+  line-height: 1.7em;
+  font-size: 0.5rem;
+  text-align: center;
+  font-style: italic;
+  color: var(--_emoji-panel--label-color);
+}
+.emoji-panel__emoji {
+  font-size: 1.25em;
+  cursor: pointer;
+  text-align: center;
+}</style>

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte.d.ts

@@ -0,0 +1,21 @@
+type Props = {
+    on: {
+        select: (value: string) => void;
+    };
+};
+/**
+ * Inline emoji panel with search and categorized emoji grid. Used by EmojiPicker (dropdown wrapper)
+ * and can be embedded directly by input components.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--emoji-panel--background` | Panel background | light-dark white/gray-800 |
+ * | `--sc-kit--emoji-panel--border-color` | Border color | light-dark neutral-300/neutral-600 |
+ * | `--sc-kit--emoji-panel--label-color` | Category title and info text color | light-dark neutral-500/neutral-400 |
+ * | `--sc-kit--emoji-panel--placeholder-color` | Placeholder and clear icon color | light-dark neutral-400/neutral-500 |
+ * | `--sc-kit--emoji-panel--width` | Panel width | `100%` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import { Dropdown } from '../dropdown';
+import { Icon } from '../icon';
+import { default as EmojiPanel } from './cmp.emoji-panel.svelte';
+import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
+let { dropdownPosition = 'bottom-end', on, children } = $props();
+</script>
+
+<Dropdown position={dropdownPosition} keepDropdownOpen={true}>
+  {#snippet trigger()}
+    <div class="emoji-picker__trigger">
+      {#if children}
+        {@render children()}
+      {:else}
+        <Icon src={IconEmoji} />
+      {/if}
+    </div>
+  {/snippet}
+  <EmojiPanel on={{ select: on.select }} />
+</Dropdown>
+
+<!--
+@component
+Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning.
+-->
+
+<style>.emoji-picker__trigger {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+:global(:hover) > .emoji-picker__trigger {
+  opacity: 1;
+}</style>

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type DropdownPosition } from '../dropdown';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Popper.js dropdown placement @default 'bottom-end' */
+    dropdownPosition?: DropdownPosition;
+    on: {
+        select: (value: string) => void;
+    };
+    /** Custom trigger content (defaults to emoji icon) */
+    children?: Snippet;
+};
+/** Emoji picker dropdown with trigger icon. Wraps EmojiPanel in a Dropdown for positioning. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/emoji-picker/emoji-list.d.ts

@@ -0,0 +1,2 @@
+import type { EmojiCategory } from './types';
+export declare const emojiCategories: EmojiCategory[];