@tristan2828/ui-foundation 4.51.0 → 4.52.0

package/dist/components/app/emoji-field-data.d.ts

@@ -0,0 +1,11 @@
+export type EmojiEntry = {
+    emoji: string;
+    name: string;
+    keywords?: string;
+};
+export type EmojiGroup = {
+    label: string;
+    emojis: EmojiEntry[];
+};
+export declare const EMOJI_GROUPS: EmojiGroup[];
+export declare function filterEmojiGroups(query: string): EmojiGroup[];

package/dist/components/app/emoji-field-data.js

@@ -0,0 +1,157 @@
+export const EMOJI_GROUPS = [
+    {
+        label: 'Morning and sleep',
+        emojis: [
+            { emoji: '☀️', name: 'Sun', keywords: 'morning day bright' },
+            { emoji: '🌅', name: 'Sunrise', keywords: 'morning dawn' },
+            { emoji: '⏰', name: 'Alarm clock', keywords: 'wake time' },
+            { emoji: '🌙', name: 'Moon', keywords: 'night evening' },
+            { emoji: '😴', name: 'Sleeping face', keywords: 'sleep bed rest' },
+            { emoji: '🛏️', name: 'Bed', keywords: 'sleep bedroom' },
+            { emoji: '🌄', name: 'Sunrise over mountains', keywords: 'morning' },
+            { emoji: '🌃', name: 'Night with stars', keywords: 'evening' },
+        ],
+    },
+    {
+        label: 'Body and health',
+        emojis: [
+            { emoji: '🧘', name: 'Person in lotus position', keywords: 'yoga meditate breathe calm' },
+            { emoji: '🏃', name: 'Person running', keywords: 'run exercise workout cardio' },
+            { emoji: '🏋️', name: 'Person lifting weights', keywords: 'gym strength workout' },
+            { emoji: '🚴', name: 'Person biking', keywords: 'cycling exercise' },
+            { emoji: '🏊', name: 'Person swimming', keywords: 'pool exercise' },
+            { emoji: '🤸', name: 'Person cartwheeling', keywords: 'stretch gymnastics' },
+            { emoji: '💪', name: 'Flexed biceps', keywords: 'strength muscle' },
+            { emoji: '🦷', name: 'Tooth', keywords: 'dentist brush teeth' },
+            { emoji: '🪥', name: 'Toothbrush', keywords: 'brush teeth' },
+            { emoji: '💊', name: 'Pill', keywords: 'medicine vitamins' },
+            { emoji: '🩺', name: 'Stethoscope', keywords: 'doctor health' },
+            { emoji: '❤️', name: 'Red heart', keywords: 'love health' },
+            { emoji: '🫁', name: 'Lungs', keywords: 'breathe breath' },
+            { emoji: '🧠', name: 'Brain', keywords: 'mind think' },
+        ],
+    },
+    {
+        label: 'Self-care',
+        emojis: [
+            { emoji: '🚿', name: 'Shower', keywords: 'wash clean' },
+            { emoji: '🛁', name: 'Bathtub', keywords: 'bath wash' },
+            { emoji: '🧼', name: 'Soap', keywords: 'wash clean hands' },
+            { emoji: '🧴', name: 'Lotion bottle', keywords: 'skincare moisturizer sunscreen' },
+            { emoji: '🪒', name: 'Razor', keywords: 'shave' },
+            { emoji: '💇', name: 'Person getting haircut', keywords: 'hair' },
+            { emoji: '🧖', name: 'Person in steamy room', keywords: 'sauna spa relax' },
+            { emoji: '🕯️', name: 'Candle', keywords: 'calm relax' },
+        ],
+    },
+    {
+        label: 'Food and drink',
+        emojis: [
+            { emoji: '🍳', name: 'Cooking', keywords: 'breakfast egg pan' },
+            { emoji: '🥣', name: 'Bowl with spoon', keywords: 'cereal oatmeal breakfast' },
+            { emoji: '🥗', name: 'Green salad', keywords: 'lunch healthy' },
+            { emoji: '🍽️', name: 'Plate with cutlery', keywords: 'meal dinner eat' },
+            { emoji: '🍎', name: 'Red apple', keywords: 'fruit snack' },
+            { emoji: '🥑', name: 'Avocado', keywords: 'food' },
+            { emoji: '☕', name: 'Hot beverage', keywords: 'coffee tea' },
+            { emoji: '🍵', name: 'Teacup', keywords: 'tea' },
+            { emoji: '💧', name: 'Droplet', keywords: 'water drink hydrate' },
+            { emoji: '🥤', name: 'Cup with straw', keywords: 'drink' },
+            { emoji: '🛒', name: 'Shopping cart', keywords: 'groceries store' },
+        ],
+    },
+    {
+        label: 'Home and chores',
+        emojis: [
+            { emoji: '🏠', name: 'House', keywords: 'home' },
+            { emoji: '🧹', name: 'Broom', keywords: 'sweep clean chores' },
+            { emoji: '🧽', name: 'Sponge', keywords: 'scrub clean dishes' },
+            { emoji: '🧺', name: 'Basket', keywords: 'laundry' },
+            { emoji: '👕', name: 'T-shirt', keywords: 'laundry clothes' },
+            { emoji: '🗑️', name: 'Wastebasket', keywords: 'trash garbage' },
+            { emoji: '🛠️', name: 'Hammer and wrench', keywords: 'repair fix tools' },
+            { emoji: '🔧', name: 'Wrench', keywords: 'repair fix' },
+            { emoji: '🔑', name: 'Key', keywords: 'lock keys' },
+            { emoji: '🪴', name: 'Potted plant', keywords: 'garden water plants' },
+            { emoji: '🌱', name: 'Seedling', keywords: 'garden grow plant' },
+            { emoji: '🌿', name: 'Herb', keywords: 'garden plant' },
+            { emoji: '🐕', name: 'Dog', keywords: 'pet walk' },
+            { emoji: '🐈', name: 'Cat', keywords: 'pet' },
+        ],
+    },
+    {
+        label: 'Work and learning',
+        emojis: [
+            { emoji: '💻', name: 'Laptop', keywords: 'computer work code' },
+            { emoji: '📧', name: 'Email', keywords: 'mail inbox' },
+            { emoji: '📅', name: 'Calendar', keywords: 'date plan schedule' },
+            { emoji: '📝', name: 'Memo', keywords: 'notes write journal' },
+            { emoji: '✅', name: 'Check mark', keywords: 'done task todo' },
+            { emoji: '📋', name: 'Clipboard', keywords: 'list checklist' },
+            { emoji: '📚', name: 'Books', keywords: 'read study learn' },
+            { emoji: '📖', name: 'Open book', keywords: 'read' },
+            { emoji: '🎓', name: 'Graduation cap', keywords: 'study school learn' },
+            { emoji: '✏️', name: 'Pencil', keywords: 'write draw' },
+            { emoji: '🎯', name: 'Bullseye', keywords: 'goal focus target' },
+            { emoji: '💡', name: 'Light bulb', keywords: 'idea' },
+            { emoji: '🧾', name: 'Receipt', keywords: 'bills budget' },
+            { emoji: '💰', name: 'Money bag', keywords: 'finance budget savings' },
+        ],
+    },
+    {
+        label: 'Play and music',
+        emojis: [
+            { emoji: '🎵', name: 'Musical note', keywords: 'music song' },
+            { emoji: '🎧', name: 'Headphones', keywords: 'music podcast listen' },
+            { emoji: '🎸', name: 'Guitar', keywords: 'music practice' },
+            { emoji: '🎹', name: 'Piano keyboard', keywords: 'music practice' },
+            { emoji: '🎨', name: 'Artist palette', keywords: 'paint draw art' },
+            { emoji: '🎮', name: 'Video game', keywords: 'play controller' },
+            { emoji: '📺', name: 'Television', keywords: 'tv watch show' },
+            { emoji: '🎬', name: 'Clapper board', keywords: 'movie film' },
+            { emoji: '📷', name: 'Camera', keywords: 'photo picture' },
+            { emoji: '🧩', name: 'Puzzle piece', keywords: 'game' },
+        ],
+    },
+    {
+        label: 'Outside and travel',
+        emojis: [
+            { emoji: '🚶', name: 'Person walking', keywords: 'walk steps' },
+            { emoji: '🥾', name: 'Hiking boot', keywords: 'hike trail' },
+            { emoji: '🌳', name: 'Tree', keywords: 'park nature' },
+            { emoji: '⛰️', name: 'Mountain', keywords: 'hike' },
+            { emoji: '🌧️', name: 'Rain cloud', keywords: 'weather' },
+            { emoji: '❄️', name: 'Snowflake', keywords: 'winter cold' },
+            { emoji: '🚗', name: 'Car', keywords: 'drive commute' },
+            { emoji: '🚌', name: 'Bus', keywords: 'commute transit' },
+            { emoji: '✈️', name: 'Airplane', keywords: 'travel flight trip' },
+            { emoji: '🧳', name: 'Luggage', keywords: 'travel pack trip' },
+        ],
+    },
+    {
+        label: 'Symbols',
+        emojis: [
+            { emoji: '⭐', name: 'Star', keywords: 'favorite' },
+            { emoji: '✨', name: 'Sparkles', keywords: 'new clean' },
+            { emoji: '🔥', name: 'Fire', keywords: 'streak hot' },
+            { emoji: '🎉', name: 'Party popper', keywords: 'celebrate' },
+            { emoji: '🏆', name: 'Trophy', keywords: 'win goal' },
+            { emoji: '🔔', name: 'Bell', keywords: 'reminder notify' },
+            { emoji: '⏱️', name: 'Stopwatch', keywords: 'timer time' },
+            { emoji: '⏳', name: 'Hourglass', keywords: 'wait time' },
+            { emoji: '🔄', name: 'Counterclockwise arrows', keywords: 'repeat again refresh' },
+            { emoji: '🙏', name: 'Folded hands', keywords: 'gratitude thanks pray' },
+            { emoji: '😊', name: 'Smiling face', keywords: 'happy' },
+            { emoji: '🌈', name: 'Rainbow', keywords: 'colour' },
+        ],
+    },
+];
+export function filterEmojiGroups(query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return EMOJI_GROUPS;
+    return EMOJI_GROUPS.map((group) => ({
+        ...group,
+        emojis: group.emojis.filter((e) => `${e.name} ${e.keywords ?? ''}`.toLowerCase().includes(q)),
+    })).filter((group) => group.emojis.length > 0);
+}

package/dist/components/app/emoji-field.d.ts

@@ -0,0 +1,23 @@
+export type EmojiFieldProps = {
+    /** The trigger button's id, for the field's `<FieldLabel htmlFor>`. */
+    id?: string;
+    /** The emoji, or `''` for none. */
+    value: string;
+    /** Called with the picked emoji, or `''` when cleared. */
+    onChange: (value: string) => void;
+    /** What the button says with none picked. Defaults to "Pick an emoji". */
+    placeholder?: string;
+    /** Offer Clear in the popup, for an optional field. */
+    clearable?: boolean;
+    /** The value was refused: `aria-invalid` on the button. */
+    invalid?: boolean;
+    /** Saving: the button shows the emoji but won't open. */
+    readOnly?: boolean;
+    /** Open on mount (for stories and editing in place). */
+    defaultOpen?: boolean;
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+export declare function EmojiField({ id, value, onChange, placeholder, clearable, invalid, readOnly, defaultOpen, className, ...aria }: EmojiFieldProps): import("react").JSX.Element;

package/dist/components/app/emoji-field.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// One emoji on a form: a routine's mark, a list's icon. The value is the
+// emoji itself, or `''` for none. A button showing the choice, opening a
+// Popover with a search box and a curated set of emoji in groups (not the
+// whole of Unicode: `emoji-field-data.ts`). Like DateField it is one
+// control for a react-hook-form `Controller`; `clearable` adds Clear.
+import { useState } from 'react';
+import { SmilePlus } from 'lucide-react';
+import { cn } from 'cn';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover.js';
+import { filterEmojiGroups } from './emoji-field-data.js';
+export function EmojiField({ id, value, onChange, placeholder = 'Pick an emoji', clearable = false, invalid = false, readOnly = false, defaultOpen = false, className, ...aria }) {
+    const [open, setOpen] = useState(defaultOpen && !readOnly);
+    const [query, setQuery] = useState('');
+    const groups = filterEmojiGroups(query);
+    const changeOpen = (next) => {
+        if (next && readOnly)
+            return;
+        setOpen(next);
+        if (!next)
+            setQuery('');
+    };
+    const pick = (next) => {
+        onChange(next);
+        changeOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: changeOpen, children: [_jsx(PopoverTrigger, { render: _jsx(Button, { id: id, type: "button", variant: "outline", "aria-invalid": invalid || undefined, "aria-readonly": readOnly || undefined, className: cn('w-full justify-start font-normal', !value && 'text-muted-foreground', className), ...aria }), children: value ? (_jsx("span", { className: "text-base leading-none", children: value })) : (_jsxs(_Fragment, { children: [_jsx(SmilePlus, { "aria-hidden": "true", className: "size-4" }), placeholder] })) }), _jsxs(PopoverContent, { className: "w-72 gap-2 p-2", align: "start", "data-slot": "emoji-field-popup", "aria-label": "Emoji", children: [_jsx(Input, { type: "search", autoComplete: "off", "aria-label": "Search emoji", placeholder: "Search", value: query, onChange: (event) => setQuery(event.target.value) }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: groups.length === 0 ? (_jsxs("p", { className: "p-2 text-sm text-muted-foreground", children: ["No emoji match \"", query.trim(), "\"."] })) : (groups.map((group) => (_jsxs("section", { "aria-label": group.label, className: "mb-2 last:mb-0", children: [_jsx("h3", { className: "px-1 py-1 text-xs font-medium text-muted-foreground", children: group.label }), _jsx("div", { className: "grid grid-cols-7 gap-0.5", children: group.emojis.map((entry) => (_jsx("button", { type: "button", "aria-label": entry.name, title: entry.name, "aria-pressed": entry.emoji === value, onClick: () => pick(entry.emoji), className: "flex size-8 items-center justify-center rounded-md text-xl leading-none outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 aria-pressed:bg-accent", children: entry.emoji }, entry.emoji))) })] }, group.label)))) }), clearable && value && (_jsx("div", { className: "border-t border-border pt-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full", onClick: () => pick(''), children: "Clear" }) }))] })] }));
+}

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { MultiLineChart, type ChartSeries, type ChartTone, type MultiLineChartPr
 export { StepBar, type StepBarProps } from './components/app/step-bar.js';
 export { RatingStar, type RatingStarProps, type RatingStarValue } from './components/app/rating-star.js';
 export { DateField, type DateFieldProps } from './components/app/date-field.js';
+export { EmojiField, type EmojiFieldProps } from './components/app/emoji-field.js';
 export { ImageField, type ImageFieldProps } from './components/app/image-field.js';
 export { DEFAULT_IMAGE_TYPES, type ImageUpload, type ImageUploadResult } from './lib/image-file.js';
 export { formatPlainDate, type PlainDate } from './lib/plain-date.js';

package/dist/index.js

@@ -44,6 +44,7 @@ export { MultiLineChart, } from './components/app/multi-line-chart.js';
 export { StepBar } from './components/app/step-bar.js';
 export { RatingStar } from './components/app/rating-star.js';
 export { DateField } from './components/app/date-field.js';
+export { EmojiField } from './components/app/emoji-field.js';
 export { ImageField } from './components/app/image-field.js';
 export { DEFAULT_IMAGE_TYPES } from './lib/image-file.js';
 export { formatPlainDate } from './lib/plain-date.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.51.0",
+  "version": "4.52.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {