@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/src/components/picker/i18n/de.json

@@ -0,0 +1,60 @@
+{
+  "label": "Symbol und Farbe",
+  "icon": "Symbol",
+  "color": "Farbe",
+  "placeholder": {
+    "both": "Symbol und Farbe wählen",
+    "icon": "Symbol wählen",
+    "color": "Farbe wählen"
+  },
+  "nothing": "Noch nichts gewählt",
+  "done": "Fertig",
+  "search": "Symbole suchen",
+  "searchPlaceholder": "Symbole suchen…",
+  "categoriesLabel": "Kategorien",
+  "all": "Alle",
+  "results": "Gefundene Symbole: {count}",
+  "empty": "Keine Symbole passen zu „{query}“",
+  "clear": "Suche löschen",
+  "custom": "Eigene Farbe",
+  "hex": "Hex-Farbe",
+  "invalidHex": "Gib eine Farbe wie #3b82f6 ein",
+  "colors": {
+    "red": "Rot",
+    "orange": "Orange",
+    "amber": "Bernstein",
+    "yellow": "Gelb",
+    "lime": "Limette",
+    "green": "Grün",
+    "emerald": "Smaragd",
+    "teal": "Petrol",
+    "cyan": "Cyan",
+    "sky": "Himmelblau",
+    "blue": "Blau",
+    "indigo": "Indigo",
+    "violet": "Violett",
+    "purple": "Lila",
+    "fuchsia": "Fuchsia",
+    "pink": "Rosa",
+    "rose": "Himbeere",
+    "maroon": "Weinrot",
+    "brown": "Braun",
+    "olive": "Oliv",
+    "navy": "Marineblau",
+    "slate": "Schiefer",
+    "stone": "Stein",
+    "graphite": "Graphit"
+  },
+  "categories": {
+    "work": "Arbeit",
+    "people": "Personen",
+    "communication": "Kommunikation",
+    "commerce": "Handel",
+    "operations": "Betrieb",
+    "places": "Orte",
+    "tech": "Technik",
+    "status": "Status",
+    "objects": "Gegenstände",
+    "nature": "Natur"
+  }
+}

package/src/components/picker/i18n/en.json

@@ -0,0 +1,60 @@
+{
+  "label": "Icon and colour",
+  "icon": "Icon",
+  "color": "Colour",
+  "placeholder": {
+    "both": "Choose icon and colour",
+    "icon": "Choose an icon",
+    "color": "Choose a colour"
+  },
+  "nothing": "Nothing chosen yet",
+  "done": "Done",
+  "search": "Search icons",
+  "searchPlaceholder": "Search icons…",
+  "categoriesLabel": "Categories",
+  "all": "All",
+  "results": "Icons found: {count}",
+  "empty": "No icons match “{query}”",
+  "clear": "Clear search",
+  "custom": "Custom colour",
+  "hex": "Hex colour",
+  "invalidHex": "Enter a colour like #3b82f6",
+  "colors": {
+    "red": "Red",
+    "orange": "Orange",
+    "amber": "Amber",
+    "yellow": "Yellow",
+    "lime": "Lime",
+    "green": "Green",
+    "emerald": "Emerald",
+    "teal": "Teal",
+    "cyan": "Cyan",
+    "sky": "Sky",
+    "blue": "Blue",
+    "indigo": "Indigo",
+    "violet": "Violet",
+    "purple": "Purple",
+    "fuchsia": "Fuchsia",
+    "pink": "Pink",
+    "rose": "Rose",
+    "maroon": "Maroon",
+    "brown": "Brown",
+    "olive": "Olive",
+    "navy": "Navy",
+    "slate": "Slate",
+    "stone": "Stone",
+    "graphite": "Graphite"
+  },
+  "categories": {
+    "work": "Work",
+    "people": "People",
+    "communication": "Communication",
+    "commerce": "Commerce",
+    "operations": "Operations",
+    "places": "Places",
+    "tech": "Tech",
+    "status": "Status",
+    "objects": "Objects",
+    "nature": "Nature"
+  }
+}

package/src/components/picker/i18n/es.json

@@ -0,0 +1,60 @@
+{
+  "label": "Icono y color",
+  "icon": "Icono",
+  "color": "Color",
+  "placeholder": {
+    "both": "Elige icono y color",
+    "icon": "Elige un icono",
+    "color": "Elige un color"
+  },
+  "nothing": "Nada elegido todavía",
+  "done": "Listo",
+  "search": "Buscar iconos",
+  "searchPlaceholder": "Buscar iconos…",
+  "categoriesLabel": "Categorías",
+  "all": "Todos",
+  "results": "Iconos encontrados: {count}",
+  "empty": "Ningún icono coincide con «{query}»",
+  "clear": "Borrar búsqueda",
+  "custom": "Color personalizado",
+  "hex": "Color hexadecimal",
+  "invalidHex": "Escribe un color como #3b82f6",
+  "colors": {
+    "red": "Rojo",
+    "orange": "Naranja",
+    "amber": "Ámbar",
+    "yellow": "Amarillo",
+    "lime": "Lima",
+    "green": "Verde",
+    "emerald": "Esmeralda",
+    "teal": "Verde azulado",
+    "cyan": "Cian",
+    "sky": "Celeste",
+    "blue": "Azul",
+    "indigo": "Índigo",
+    "violet": "Violeta",
+    "purple": "Púrpura",
+    "fuchsia": "Fucsia",
+    "pink": "Rosa",
+    "rose": "Frambuesa",
+    "maroon": "Granate",
+    "brown": "Marrón",
+    "olive": "Oliva",
+    "navy": "Azul marino",
+    "slate": "Pizarra",
+    "stone": "Piedra",
+    "graphite": "Grafito"
+  },
+  "categories": {
+    "work": "Trabajo",
+    "people": "Personas",
+    "communication": "Comunicación",
+    "commerce": "Comercio",
+    "operations": "Operaciones",
+    "places": "Lugares",
+    "tech": "Tecnología",
+    "status": "Estados",
+    "objects": "Objetos",
+    "nature": "Naturaleza"
+  }
+}

package/src/components/picker/i18n/fr.json

@@ -0,0 +1,60 @@
+{
+  "label": "Icône et couleur",
+  "icon": "Icône",
+  "color": "Couleur",
+  "placeholder": {
+    "both": "Choisir une icône et une couleur",
+    "icon": "Choisir une icône",
+    "color": "Choisir une couleur"
+  },
+  "nothing": "Rien de choisi pour l’instant",
+  "done": "Terminé",
+  "search": "Rechercher des icônes",
+  "searchPlaceholder": "Rechercher des icônes…",
+  "categoriesLabel": "Catégories",
+  "all": "Toutes",
+  "results": "Icônes trouvées : {count}",
+  "empty": "Aucune icône ne correspond à « {query} »",
+  "clear": "Effacer la recherche",
+  "custom": "Couleur personnalisée",
+  "hex": "Couleur hexadécimale",
+  "invalidHex": "Saisissez une couleur comme #3b82f6",
+  "colors": {
+    "red": "Rouge",
+    "orange": "Orange",
+    "amber": "Ambre",
+    "yellow": "Jaune",
+    "lime": "Citron vert",
+    "green": "Vert",
+    "emerald": "Émeraude",
+    "teal": "Sarcelle",
+    "cyan": "Cyan",
+    "sky": "Ciel",
+    "blue": "Bleu",
+    "indigo": "Indigo",
+    "violet": "Violet",
+    "purple": "Pourpre",
+    "fuchsia": "Fuchsia",
+    "pink": "Rose",
+    "rose": "Framboise",
+    "maroon": "Bordeaux",
+    "brown": "Marron",
+    "olive": "Olive",
+    "navy": "Bleu marine",
+    "slate": "Ardoise",
+    "stone": "Pierre",
+    "graphite": "Graphite"
+  },
+  "categories": {
+    "work": "Travail",
+    "people": "Personnes",
+    "communication": "Communication",
+    "commerce": "Commerce",
+    "operations": "Opérations",
+    "places": "Lieux",
+    "tech": "Technologie",
+    "status": "Statuts",
+    "objects": "Objets",
+    "nature": "Nature"
+  }
+}

package/src/components/picker/i18n/pl.json

@@ -0,0 +1,60 @@
+{
+  "label": "Ikona i kolor",
+  "icon": "Ikona",
+  "color": "Kolor",
+  "placeholder": {
+    "both": "Wybierz ikonę i kolor",
+    "icon": "Wybierz ikonę",
+    "color": "Wybierz kolor"
+  },
+  "nothing": "Nic jeszcze nie wybrano",
+  "done": "Gotowe",
+  "search": "Szukaj ikon",
+  "searchPlaceholder": "Szukaj ikon…",
+  "categoriesLabel": "Kategorie",
+  "all": "Wszystkie",
+  "results": "Znalezione ikony: {count}",
+  "empty": "Brak ikon pasujących do „{query}”",
+  "clear": "Wyczyść wyszukiwanie",
+  "custom": "Własny kolor",
+  "hex": "Kolor szesnastkowy",
+  "invalidHex": "Wpisz kolor, np. #3b82f6",
+  "colors": {
+    "red": "Czerwony",
+    "orange": "Pomarańczowy",
+    "amber": "Bursztynowy",
+    "yellow": "Żółty",
+    "lime": "Limonkowy",
+    "green": "Zielony",
+    "emerald": "Szmaragdowy",
+    "teal": "Morski",
+    "cyan": "Cyjan",
+    "sky": "Błękitny",
+    "blue": "Niebieski",
+    "indigo": "Indygo",
+    "violet": "Fioletowy",
+    "purple": "Purpurowy",
+    "fuchsia": "Fuksja",
+    "pink": "Różowy",
+    "rose": "Malinowy",
+    "maroon": "Bordowy",
+    "brown": "Brązowy",
+    "olive": "Oliwkowy",
+    "navy": "Granatowy",
+    "slate": "Łupkowy",
+    "stone": "Kamienny",
+    "graphite": "Grafitowy"
+  },
+  "categories": {
+    "work": "Praca",
+    "people": "Ludzie",
+    "communication": "Komunikacja",
+    "commerce": "Handel",
+    "operations": "Operacje",
+    "places": "Miejsca",
+    "tech": "Technologia",
+    "status": "Status",
+    "objects": "Przedmioty",
+    "nature": "Natura"
+  }
+}

package/src/components/picker/i18n/ru.json

@@ -0,0 +1,60 @@
+{
+  "label": "Значок и цвет",
+  "icon": "Значок",
+  "color": "Цвет",
+  "placeholder": {
+    "both": "Выберите значок и цвет",
+    "icon": "Выберите значок",
+    "color": "Выберите цвет"
+  },
+  "nothing": "Ничего не выбрано",
+  "done": "Готово",
+  "search": "Поиск значков",
+  "searchPlaceholder": "Поиск значков…",
+  "categoriesLabel": "Категории",
+  "all": "Все",
+  "results": "Найдено значков: {count}",
+  "empty": "Нет значков по запросу «{query}»",
+  "clear": "Очистить поиск",
+  "custom": "Свой цвет",
+  "hex": "Цвет в формате HEX",
+  "invalidHex": "Введите цвет, например #3b82f6",
+  "colors": {
+    "red": "Красный",
+    "orange": "Оранжевый",
+    "amber": "Янтарный",
+    "yellow": "Жёлтый",
+    "lime": "Лаймовый",
+    "green": "Зелёный",
+    "emerald": "Изумрудный",
+    "teal": "Бирюзовый",
+    "cyan": "Циан",
+    "sky": "Небесный",
+    "blue": "Синий",
+    "indigo": "Индиго",
+    "violet": "Фиолетовый",
+    "purple": "Пурпурный",
+    "fuchsia": "Фуксия",
+    "pink": "Розовый",
+    "rose": "Малиновый",
+    "maroon": "Бордовый",
+    "brown": "Коричневый",
+    "olive": "Оливковый",
+    "navy": "Тёмно-синий",
+    "slate": "Сланцевый",
+    "stone": "Каменный",
+    "graphite": "Графитовый"
+  },
+  "categories": {
+    "work": "Работа",
+    "people": "Люди",
+    "communication": "Общение",
+    "commerce": "Торговля",
+    "operations": "Операции",
+    "places": "Места",
+    "tech": "Технологии",
+    "status": "Статусы",
+    "objects": "Предметы",
+    "nature": "Природа"
+  }
+}

package/src/components/picker/i18n/uk.json

@@ -0,0 +1,60 @@
+{
+  "label": "Значок і колір",
+  "icon": "Значок",
+  "color": "Колір",
+  "placeholder": {
+    "both": "Виберіть значок і колір",
+    "icon": "Виберіть значок",
+    "color": "Виберіть колір"
+  },
+  "nothing": "Нічого не вибрано",
+  "done": "Готово",
+  "search": "Пошук значків",
+  "searchPlaceholder": "Пошук значків…",
+  "categoriesLabel": "Категорії",
+  "all": "Усі",
+  "results": "Знайдено значків: {count}",
+  "empty": "Немає значків за запитом «{query}»",
+  "clear": "Очистити пошук",
+  "custom": "Власний колір",
+  "hex": "Колір у форматі HEX",
+  "invalidHex": "Введіть колір, наприклад #3b82f6",
+  "colors": {
+    "red": "Червоний",
+    "orange": "Помаранчевий",
+    "amber": "Бурштиновий",
+    "yellow": "Жовтий",
+    "lime": "Лаймовий",
+    "green": "Зелений",
+    "emerald": "Смарагдовий",
+    "teal": "Бірюзовий",
+    "cyan": "Ціан",
+    "sky": "Небесний",
+    "blue": "Синій",
+    "indigo": "Індиго",
+    "violet": "Фіолетовий",
+    "purple": "Пурпуровий",
+    "fuchsia": "Фуксія",
+    "pink": "Рожевий",
+    "rose": "Малиновий",
+    "maroon": "Бордовий",
+    "brown": "Коричневий",
+    "olive": "Оливковий",
+    "navy": "Темно-синій",
+    "slate": "Сланцевий",
+    "stone": "Кам’яний",
+    "graphite": "Графітовий"
+  },
+  "categories": {
+    "work": "Робота",
+    "people": "Люди",
+    "communication": "Спілкування",
+    "commerce": "Торгівля",
+    "operations": "Операції",
+    "places": "Місця",
+    "tech": "Технології",
+    "status": "Статуси",
+    "objects": "Предмети",
+    "nature": "Природа"
+  }
+}

package/src/components/picker/i18n.ts

@@ -0,0 +1,19 @@
+import { i18nHelper } from '@owlmeans/i18n'
+
+import en from './i18n/en.json' with { type: 'json' }
+import pl from './i18n/pl.json' with { type: 'json' }
+import ru from './i18n/ru.json' with { type: 'json' }
+import be from './i18n/be.json' with { type: 'json' }
+import uk from './i18n/uk.json' with { type: 'json' }
+import es from './i18n/es.json' with { type: 'json' }
+import de from './i18n/de.json' with { type: 'json' }
+import fr from './i18n/fr.json' with { type: 'json' }
+
+i18nHelper.addI18nLib('en', 'picker', en)
+i18nHelper.addI18nLib('pl', 'picker', pl)
+i18nHelper.addI18nLib('ru', 'picker', ru)
+i18nHelper.addI18nLib('be', 'picker', be)
+i18nHelper.addI18nLib('uk', 'picker', uk)
+i18nHelper.addI18nLib('es', 'picker', es)
+i18nHelper.addI18nLib('de', 'picker', de)
+i18nHelper.addI18nLib('fr', 'picker', fr)

package/src/components/picker/icon-color-picker.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react'
+import type { IconColorPickerProps } from './types.js'
+import { PickerRoot } from './root.js'
+
+const present = (value: string | null | undefined): string | undefined =>
+  value != null && value !== '' ? value : undefined
+
+/**
+ * The composite icon + colour picker — the standard editor of a mark a person chooses (a type's,
+ * a flow's, a label's). One trigger opens both halves: 24 swatches (plus a colour wheel and a hex
+ * field with `customColors`) and a searchable, categorized icon grid tinted in the chosen colour.
+ *
+ * Every pick commits at once: `onChange({ icon, color })` carries both halves as they now stand —
+ * a palette key or `#rrggbb`, a kebab-case lucide name; a half never chosen stays `undefined`. It
+ * opens as a popover from 768px up and as a bottom sheet below (`surface`), and stays open until
+ * Esc, a click outside or (on the sheet) Done.
+ */
+export const IconColorPicker: FC<IconColorPickerProps> = (
+  { value, onChange, trigger = 'button', customColors = false, ...base }
+) => <PickerRoot
+  {...base} mode="both" trigger={trigger} customColors={customColors} closeOnPick={false}
+  icon={value?.icon} color={value?.color}
+  onIcon={icon => onChange({ icon, color: present(value?.color) })}
+  onColor={color => onChange({ icon: present(value?.icon), color })}
+/>

package/src/components/picker/icon-picker.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react'
+import type { IconPickerProps } from './types.js'
+import { PickerRoot } from './root.js'
+
+/**
+ * The icon half alone: a trigger opening the searchable, categorized grid (tinted in `color`).
+ * Commits a kebab-case lucide name on click and closes.
+ */
+export const IconPicker: FC<IconPickerProps> = ({ value, onChange, color, trigger = 'button', ...base }) =>
+  <PickerRoot
+    {...base} mode="icon" trigger={trigger} closeOnPick icon={value} color={color}
+    onIcon={onChange} onColor={() => undefined}
+  />

package/src/components/picker/index.ts

@@ -0,0 +1,11 @@
+export type * from './types.js'
+
+export * from './icon-color-picker.js'
+export * from './icon-picker.js'
+export * from './color-picker.js'
+export { ColorSwatches } from './swatches.js'
+export { IconGrid } from './grid.js'
+export * from './tile.js'
+export * from './dot.js'
+export * from './translate.js'
+export * from './i18n.js'

package/src/components/picker/panel.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import { PlusIcon } from 'lucide-react'
+import { cn } from '../../@/lib/utils.js'
+import { pickerColorHelper } from '../../picker/vocabulary.js'
+import type { PickerPanelProps } from './types.local.js'
+import { IconBrowser } from './grid.js'
+import { SwatchGrid } from './swatches.js'
+import { IconTile } from './tile.js'
+import {
+  BODY, DONE, HAIRLINE, HEADER, HEADER_SUMMARY, HEADER_TITLE, ICON_GRID_PAD, SECTION, SECTION_TITLE, TRIGGER_EMPTY,
+} from './consts.local.js'
+
+/**
+ * A picker's content: a preview header (the mark as it will render, the title, the current choice
+ * — and on the sheet a 44px Done button), then the swatches and the icon grid, scrolling between a
+ * fixed header and the surface's edge.
+ */
+export const PickerPanel: FC<PickerPanelProps> = ({
+  mode, icon, color, onIcon, onColor, onCustomColor, colors, icons, customColors, text, layout, title, onDone, searchRef,
+}) => {
+  const resolved = pickerColorHelper.resolve(color, colors)
+  const summary = text.summary(icon, resolved, mode) ?? text.text('nothing', 'Nothing chosen yet')
+
+  return <div data-picker-panel className="flex min-h-0 flex-1 flex-col">
+    <div className={HEADER[layout]}>
+      {mode === 'color'
+        ? <span
+          aria-hidden="true" style={pickerColorHelper.styleOf(color, colors)}
+          className={cn('size-12 shrink-0 rounded-full bg-(--pick-swatch)', HAIRLINE, resolved == null && 'opacity-40')}
+        />
+        : (icon == null || icon === '') && resolved == null
+          ? <span aria-hidden="true" className={cn(TRIGGER_EMPTY, 'size-12 rounded-xl [&>svg]:size-5')}><PlusIcon /></span>
+          : <IconTile icon={icon} color={color} colors={colors} size="lg" />}
+      <div className="min-w-0 flex-1">
+        <p aria-hidden="true" className={HEADER_TITLE}>{title}</p>
+        <p data-picker-summary className={HEADER_SUMMARY}>{summary}</p>
+      </div>
+      {onDone != null && <button
+        type="button" data-picker-done aria-label={text.text('done', 'Done')} onClick={onDone} className={DONE}
+      >
+        {text.text('done', 'Done')}
+      </button>}
+    </div>
+    <div data-picker-scroll className={BODY}>
+      {mode !== 'icon' && <section className={cn(SECTION[layout], mode === 'color' && ICON_GRID_PAD[layout])}>
+        {mode === 'both' && <h3 className={SECTION_TITLE}>{text.text('color', 'Colour')}</h3>}
+        <SwatchGrid
+          value={color} onChange={onColor} onCustomChange={onCustomColor} colors={colors} customColors={customColors}
+          text={text} layout={layout} label={text.text('color', 'Colour')}
+        />
+      </section>}
+      {mode !== 'color' && <section className={cn(SECTION[layout], ICON_GRID_PAD[layout])}>
+        {mode === 'both' && <h3 className={SECTION_TITLE}>{text.text('icon', 'Icon')}</h3>}
+        <IconBrowser
+          value={icon} onChange={onIcon} color={color} colors={colors} icons={icons} text={text} layout={layout}
+          label={text.text('icon', 'Icon')} searchRef={searchRef}
+        />
+      </section>}
+    </div>
+  </div>
+}

package/src/components/picker/root.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useRef, useState } from 'react'
+import type { FC } from 'react'
+import { PICKER_COLORS } from '../../picker/vocabulary/consts.js'
+import type { PickerRootProps } from './types.local.js'
+import { PickerPanel } from './panel.js'
+import { PickerSurface } from './surface.js'
+import { PickerTrigger } from './trigger.js'
+import { makePickerText } from './text.js'
+import { FINE_POINTER_QUERY, POPOVER_QUERY } from './consts.local.js'
+
+const matches = (query: string): boolean =>
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(query).matches
+
+/**
+ * The state every picker shares: open or closed, and on which surface.
+ *
+ * `surface="auto"` is decided when the picker OPENS — a popover from 768px up, a sheet below — and
+ * kept until it closes, so a resize or an on-screen keyboard never swaps the surface under the
+ * person's finger. Picks commit at once through `onIcon` / `onColor`; a single-purpose picker then
+ * closes, the composite stays open for its other half. On open, a fine pointer lands in the search
+ * field; anything else on the selected cell (no keyboard pops up on a phone).
+ */
+export const PickerRoot: FC<PickerRootProps> = ({
+  mode, icon, color, onIcon, onColor, colors = PICKER_COLORS, icons, customColors = false, trigger, closeOnPick,
+  label, placeholder, disabled, surface = 'auto', translate, className, id,
+}) => {
+  const text = useMemo(() => makePickerText(translate), [translate])
+  const [open, setOpen] = useState(false)
+  const [kind, setKind] = useState<'popover' | 'sheet'>('popover')
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const searchRef = useRef<HTMLInputElement | null>(null)
+
+  const title = label != null && label !== ''
+    ? label
+    : mode === 'both' ? text.text('label', 'Icon and colour')
+      : mode === 'icon' ? text.text('icon', 'Icon') : text.text('color', 'Colour')
+  const hint = placeholder ?? (
+    mode === 'both' ? text.text('placeholder.both', 'Choose icon and colour')
+      : mode === 'icon' ? text.text('placeholder.icon', 'Choose an icon') : text.text('placeholder.color', 'Choose a colour')
+  )
+
+  const show = (): void => {
+    if (disabled === true) {
+      return
+    }
+    setKind(surface === 'auto' ? (matches(POPOVER_QUERY) ? 'popover' : 'sheet') : surface)
+    setOpen(true)
+  }
+
+  const picked = (apply: (value: string) => void) => (value: string): void => {
+    apply(value)
+    if (closeOnPick) {
+      setOpen(false)
+    }
+  }
+
+  const onOpenFocus = (content: HTMLElement): void => {
+    const search = searchRef.current
+    if (search != null && matches(FINE_POINTER_QUERY)) {
+      search.focus()
+
+      return
+    }
+    ;(content.querySelector<HTMLElement>('[data-roving-item][tabindex="0"]') ?? content).focus()
+  }
+
+  return <PickerSurface
+    open={open} onOpenChange={setOpen} kind={kind} tall={mode !== 'color'} title={title}
+    onOpenFocus={onOpenFocus} onCloseFocus={() => triggerRef.current?.focus()}
+    anchor={<PickerTrigger
+      ref={triggerRef} mode={mode} variant={trigger} icon={icon} color={color} colors={colors} text={text}
+      label={label} placeholder={hint} open={open} disabled={disabled} id={id} className={className} onOpen={show}
+    />}
+  >
+    <PickerPanel
+      mode={mode} icon={icon} color={color} onIcon={picked(onIcon)} onColor={picked(onColor)} onCustomColor={onColor}
+      colors={colors} icons={icons} customColors={customColors} text={text} layout={kind} title={title}
+      onDone={kind === 'sheet' ? () => setOpen(false) : undefined} searchRef={searchRef}
+    />
+  </PickerSurface>
+}