aplance-ui 1.0.1

package/registry/components/ui/input-fields/emoji-picker/utils.ts

@@ -0,0 +1,505 @@
+/**
+ * Curated emoji dataset for EmojiPalette.
+ * ~300 popular emojis grouped by category, each with a searchable name.
+ * Tiny enough to bundle inline (~10KB) while covering 90%+ of common use cases.
+ * Extend or replace by passing your own `categories` to <EmojiPalette />.
+ */
+
+export type EmojiEntry = { char: string; name: string };
+
+export type EmojiCategory = {
+  id: string;
+  label: string;
+  emojis: readonly EmojiEntry[];
+};
+
+const e = (char: string, name: string): EmojiEntry => ({ char, name });
+
+export const DEFAULT_EMOJI_CATEGORIES: readonly EmojiCategory[] = [
+  {
+    id: "smileys",
+    label: "Smileys & people",
+    emojis: [
+      e("😀", "grinning face"),
+      e("😃", "smiling face big eyes"),
+      e("😄", "smiling face smiling eyes"),
+      e("😁", "beaming face smiling eyes"),
+      e("😆", "grinning squinting face"),
+      e("😅", "grinning face sweat"),
+      e("🤣", "rolling on the floor laughing"),
+      e("😂", "face tears of joy"),
+      e("🙂", "slightly smiling face"),
+      e("🙃", "upside-down face"),
+      e("😉", "winking face"),
+      e("😊", "smiling face smiling eyes"),
+      e("😇", "smiling face halo"),
+      e("🥰", "smiling face hearts"),
+      e("😍", "smiling face heart-eyes"),
+      e("🤩", "star-struck"),
+      e("😘", "face blowing kiss"),
+      e("😗", "kissing face"),
+      e("😚", "kissing face closed eyes"),
+      e("😙", "kissing face smiling eyes"),
+      e("🥲", "smiling face tear"),
+      e("😋", "face savoring food"),
+      e("😛", "face tongue"),
+      e("😜", "winking face tongue"),
+      e("🤪", "zany face"),
+      e("😝", "squinting face tongue"),
+      e("🤑", "money-mouth face"),
+      e("🤗", "smiling face open hands hug"),
+      e("🤭", "face hand over mouth"),
+      e("🤫", "shushing face"),
+      e("🤔", "thinking face"),
+      e("🤐", "zipper-mouth face"),
+      e("🤨", "face raised eyebrow"),
+      e("😐", "neutral face"),
+      e("😑", "expressionless face"),
+      e("😶", "face without mouth"),
+      e("😏", "smirking face"),
+      e("😒", "unamused face"),
+      e("🙄", "face with rolling eyes"),
+      e("😬", "grimacing face"),
+      e("🤥", "lying face"),
+      e("😌", "relieved face"),
+      e("😔", "pensive face"),
+      e("😪", "sleepy face"),
+      e("🤤", "drooling face"),
+      e("😴", "sleeping face"),
+      e("😷", "face medical mask"),
+      e("🤒", "face thermometer"),
+      e("🤕", "face head bandage"),
+      e("🤢", "nauseated face"),
+      e("🤮", "face vomiting"),
+      e("🥵", "hot face"),
+      e("🥶", "cold face"),
+      e("😵", "face crossed-out eyes"),
+      e("🤯", "exploding head mind blown"),
+      e("🥳", "partying face celebration"),
+      e("😎", "smiling face sunglasses cool"),
+      e("🤓", "nerd face"),
+      e("🧐", "face monocle"),
+      e("😢", "crying face sad"),
+      e("😭", "loudly crying face"),
+      e("😤", "face steam from nose"),
+      e("😡", "pouting face angry"),
+      e("😠", "angry face"),
+      e("🤬", "face cursing"),
+      e("👍", "thumbs up like"),
+      e("👎", "thumbs down dislike"),
+      e("👏", "clapping hands"),
+      e("🙌", "raising hands celebration"),
+      e("🙏", "folded hands please thanks"),
+      e("👋", "waving hand hi hello"),
+      e("🤝", "handshake deal"),
+      e("✌️", "victory hand peace"),
+      e("🤞", "crossed fingers luck"),
+      e("🤟", "love-you gesture"),
+      e("🤘", "rock on horns"),
+      e("👌", "ok hand"),
+      e("🤙", "call me hand"),
+    ],
+  },
+  {
+    id: "animals",
+    label: "Animals & nature",
+    emojis: [
+      e("🐶", "dog face"),
+      e("🐱", "cat face"),
+      e("🐭", "mouse face"),
+      e("🐹", "hamster"),
+      e("🐰", "rabbit face"),
+      e("🦊", "fox"),
+      e("🐻", "bear"),
+      e("🐼", "panda"),
+      e("🐨", "koala"),
+      e("🐯", "tiger face"),
+      e("🦁", "lion"),
+      e("🐮", "cow face"),
+      e("🐷", "pig face"),
+      e("🐸", "frog"),
+      e("🐵", "monkey face"),
+      e("🐔", "chicken"),
+      e("🐧", "penguin"),
+      e("🐦", "bird"),
+      e("🐤", "baby chick"),
+      e("🦆", "duck"),
+      e("🦅", "eagle"),
+      e("🦉", "owl"),
+      e("🐺", "wolf"),
+      e("🐗", "boar"),
+      e("🐴", "horse face"),
+      e("🦄", "unicorn"),
+      e("🐝", "honeybee"),
+      e("🐛", "bug caterpillar"),
+      e("🦋", "butterfly"),
+      e("🐌", "snail"),
+      e("🐞", "ladybug"),
+      e("🐜", "ant"),
+      e("🦂", "scorpion"),
+      e("🐢", "turtle"),
+      e("🐍", "snake"),
+      e("🦎", "lizard"),
+      e("🦖", "t-rex dinosaur"),
+      e("🦕", "sauropod dinosaur"),
+      e("🐙", "octopus"),
+      e("🦑", "squid"),
+      e("🦐", "shrimp"),
+      e("🦞", "lobster"),
+      e("🦀", "crab"),
+      e("🐡", "blowfish"),
+      e("🐠", "tropical fish"),
+      e("🐟", "fish"),
+      e("🐬", "dolphin"),
+      e("🐳", "spouting whale"),
+      e("🐋", "whale"),
+      e("🦈", "shark"),
+      e("🌵", "cactus"),
+      e("🌲", "evergreen tree"),
+      e("🌳", "deciduous tree"),
+      e("🌴", "palm tree"),
+      e("🌱", "seedling"),
+      e("🌿", "herb"),
+      e("☘️", "shamrock"),
+      e("🍀", "four leaf clover"),
+      e("🍁", "maple leaf"),
+      e("🌷", "tulip"),
+      e("🌹", "rose"),
+      e("🌺", "hibiscus"),
+      e("🌻", "sunflower"),
+      e("🌼", "blossom"),
+      e("🌸", "cherry blossom"),
+    ],
+  },
+  {
+    id: "food",
+    label: "Food & drink",
+    emojis: [
+      e("🍎", "red apple"),
+      e("🍏", "green apple"),
+      e("🍐", "pear"),
+      e("🍊", "tangerine orange"),
+      e("🍋", "lemon"),
+      e("🍌", "banana"),
+      e("🍉", "watermelon"),
+      e("🍇", "grapes"),
+      e("🍓", "strawberry"),
+      e("🫐", "blueberries"),
+      e("🍒", "cherries"),
+      e("🍑", "peach"),
+      e("🥭", "mango"),
+      e("🍍", "pineapple"),
+      e("🥥", "coconut"),
+      e("🥝", "kiwi"),
+      e("🍅", "tomato"),
+      e("🍆", "eggplant"),
+      e("🥑", "avocado"),
+      e("🥦", "broccoli"),
+      e("🥬", "leafy greens"),
+      e("🥒", "cucumber"),
+      e("🌶️", "hot pepper"),
+      e("🌽", "corn"),
+      e("🥕", "carrot"),
+      e("🥔", "potato"),
+      e("🍞", "bread"),
+      e("🥐", "croissant"),
+      e("🥖", "baguette"),
+      e("🥨", "pretzel"),
+      e("🥯", "bagel"),
+      e("🧀", "cheese wedge"),
+      e("🍳", "cooking egg"),
+      e("🥞", "pancakes"),
+      e("🧇", "waffle"),
+      e("🥓", "bacon"),
+      e("🍔", "hamburger"),
+      e("🍟", "french fries"),
+      e("🍕", "pizza"),
+      e("🌭", "hot dog"),
+      e("🌮", "taco"),
+      e("🌯", "burrito"),
+      e("🥗", "green salad"),
+      e("🍝", "spaghetti"),
+      e("🍣", "sushi"),
+      e("🍱", "bento"),
+      e("🍜", "ramen"),
+      e("🍙", "rice ball"),
+      e("🍚", "rice bowl"),
+      e("🍛", "curry"),
+      e("🍤", "shrimp tempura"),
+      e("🥟", "dumpling"),
+      e("🍦", "soft ice cream"),
+      e("🍰", "shortcake"),
+      e("🎂", "birthday cake"),
+      e("🍪", "cookie"),
+      e("🍩", "doughnut"),
+      e("🍫", "chocolate bar"),
+      e("🍬", "candy"),
+      e("☕", "coffee hot drink"),
+      e("🍵", "tea"),
+      e("🍺", "beer mug"),
+      e("🍷", "wine glass"),
+      e("🍸", "cocktail"),
+      e("🥂", "clinking glasses cheers"),
+      e("🍾", "bottle popping champagne"),
+    ],
+  },
+  {
+    id: "activities",
+    label: "Activities & objects",
+    emojis: [
+      e("⚽", "soccer ball"),
+      e("🏀", "basketball"),
+      e("🏈", "american football"),
+      e("⚾", "baseball"),
+      e("🎾", "tennis"),
+      e("🏐", "volleyball"),
+      e("🏉", "rugby"),
+      e("🎱", "billiards pool"),
+      e("🏓", "ping pong"),
+      e("🏸", "badminton"),
+      e("🥊", "boxing glove"),
+      e("🥋", "martial arts uniform"),
+      e("⛳", "flag in hole golf"),
+      e("🎯", "bullseye dart"),
+      e("🎮", "video game controller"),
+      e("🎲", "game die dice"),
+      e("🧩", "puzzle piece"),
+      e("🎨", "artist palette"),
+      e("🎭", "performing arts"),
+      e("🎪", "circus tent"),
+      e("🎬", "clapper board film"),
+      e("🎤", "microphone"),
+      e("🎧", "headphone"),
+      e("🎼", "musical score"),
+      e("🎹", "musical keyboard piano"),
+      e("🥁", "drum"),
+      e("🎷", "saxophone"),
+      e("🎺", "trumpet"),
+      e("🎸", "guitar"),
+      e("🎻", "violin"),
+      e("🎯", "dart bullseye"),
+      e("🎁", "gift wrapped present"),
+      e("🎉", "party popper celebration"),
+      e("🎊", "confetti ball"),
+      e("🎈", "balloon"),
+      e("🎂", "birthday cake"),
+      e("📱", "mobile phone"),
+      e("💻", "laptop"),
+      e("⌨️", "keyboard"),
+      e("🖥️", "desktop computer"),
+      e("🖱️", "computer mouse"),
+      e("🖨️", "printer"),
+      e("📷", "camera"),
+      e("🎥", "movie camera"),
+      e("📺", "television"),
+      e("⏰", "alarm clock"),
+      e("⏳", "hourglass"),
+      e("📅", "calendar"),
+      e("📌", "pushpin"),
+      e("📎", "paperclip"),
+      e("✂️", "scissors"),
+      e("🔑", "key"),
+      e("🔒", "locked"),
+      e("🔓", "unlocked"),
+      e("🔍", "magnifying glass search"),
+      e("💡", "light bulb idea"),
+      e("📚", "books"),
+      e("✏️", "pencil"),
+      e("🖊️", "pen"),
+      e("📝", "memo writing"),
+    ],
+  },
+  {
+    id: "travel",
+    label: "Travel & places",
+    emojis: [
+      e("🚗", "car"),
+      e("🚕", "taxi"),
+      e("🚙", "suv"),
+      e("🚌", "bus"),
+      e("🚎", "trolleybus"),
+      e("🏎️", "racing car"),
+      e("🚓", "police car"),
+      e("🚑", "ambulance"),
+      e("🚒", "fire engine"),
+      e("🚐", "minibus"),
+      e("🚛", "articulated lorry truck"),
+      e("🚜", "tractor"),
+      e("🏍️", "motorcycle"),
+      e("🛵", "scooter"),
+      e("🚲", "bicycle"),
+      e("🛴", "kick scooter"),
+      e("🛹", "skateboard"),
+      e("🚏", "bus stop"),
+      e("⛽", "fuel pump gas"),
+      e("🚦", "vertical traffic light"),
+      e("🚧", "construction"),
+      e("⚓", "anchor"),
+      e("⛵", "sailboat"),
+      e("🚤", "speedboat"),
+      e("🛳️", "passenger ship"),
+      e("🚢", "ship"),
+      e("✈️", "airplane"),
+      e("🛩️", "small airplane"),
+      e("🚁", "helicopter"),
+      e("🚂", "locomotive"),
+      e("🚆", "train"),
+      e("🚇", "metro subway"),
+      e("🚉", "station"),
+      e("🚀", "rocket"),
+      e("🛸", "flying saucer ufo"),
+      e("🗺️", "world map"),
+      e("🗿", "moai"),
+      e("🗽", "statue of liberty"),
+      e("🗼", "tokyo tower"),
+      e("🏰", "castle"),
+      e("🏯", "japanese castle"),
+      e("🏟️", "stadium"),
+      e("🎡", "ferris wheel"),
+      e("🎢", "roller coaster"),
+      e("🎠", "carousel horse"),
+      e("⛲", "fountain"),
+      e("⛱️", "umbrella on ground"),
+      e("🏖️", "beach with umbrella"),
+      e("🏝️", "desert island"),
+      e("🏔️", "snow-capped mountain"),
+      e("⛰️", "mountain"),
+      e("🌋", "volcano"),
+      e("🏕️", "camping"),
+      e("🏠", "house"),
+      e("🏡", "house with garden"),
+      e("🏢", "office building"),
+      e("🏥", "hospital"),
+      e("🏦", "bank"),
+      e("🏨", "hotel"),
+      e("🏪", "convenience store"),
+      e("🏫", "school"),
+      e("⛪", "church"),
+      e("🕌", "mosque"),
+      e("🕍", "synagogue"),
+      e("🛕", "hindu temple"),
+    ],
+  },
+  {
+    id: "symbols",
+    label: "Symbols",
+    emojis: [
+      e("❤️", "red heart love"),
+      e("🧡", "orange heart"),
+      e("💛", "yellow heart"),
+      e("💚", "green heart"),
+      e("💙", "blue heart"),
+      e("💜", "purple heart"),
+      e("🖤", "black heart"),
+      e("🤍", "white heart"),
+      e("🤎", "brown heart"),
+      e("💔", "broken heart"),
+      e("❣️", "heart exclamation"),
+      e("💕", "two hearts"),
+      e("💞", "revolving hearts"),
+      e("💓", "beating heart"),
+      e("💗", "growing heart"),
+      e("💖", "sparkling heart"),
+      e("💘", "heart with arrow"),
+      e("💝", "heart with ribbon"),
+      e("💟", "heart decoration"),
+      e("☮️", "peace symbol"),
+      e("✝️", "latin cross"),
+      e("☪️", "star and crescent"),
+      e("🕉️", "om"),
+      e("☸️", "wheel of dharma"),
+      e("✡️", "star of david"),
+      e("☯️", "yin yang"),
+      e("✨", "sparkles"),
+      e("⭐", "star"),
+      e("🌟", "glowing star"),
+      e("💫", "dizzy star"),
+      e("🔥", "fire"),
+      e("💥", "collision boom"),
+      e("💢", "anger symbol"),
+      e("💦", "sweat droplets"),
+      e("💨", "dashing away"),
+      e("💤", "zzz sleep"),
+      e("✅", "check mark green"),
+      e("❌", "cross mark"),
+      e("❎", "cross mark button"),
+      e("⭕", "hollow red circle"),
+      e("‼️", "double exclamation"),
+      e("⁉️", "exclamation question mark"),
+      e("❓", "question mark"),
+      e("❗", "exclamation mark"),
+      e("💯", "hundred points"),
+      e("🔴", "red circle"),
+      e("🟠", "orange circle"),
+      e("🟡", "yellow circle"),
+      e("🟢", "green circle"),
+      e("🔵", "blue circle"),
+      e("🟣", "purple circle"),
+      e("🟤", "brown circle"),
+      e("⚫", "black circle"),
+      e("⚪", "white circle"),
+      e("♻️", "recycling symbol"),
+      e("🔔", "bell"),
+      e("🔕", "bell with slash"),
+      e("📣", "megaphone announce"),
+      e("📢", "loudspeaker"),
+    ],
+  },
+  {
+    id: "flags",
+    label: "Flags",
+    emojis: [
+      e("🏁", "chequered flag"),
+      e("🚩", "triangular flag"),
+      e("🎌", "crossed flags"),
+      e("🏴", "black flag"),
+      e("🏳️", "white flag"),
+      e("🏳️‍🌈", "rainbow flag"),
+      e("🏴‍☠️", "pirate flag"),
+      e("🇺🇸", "united states flag"),
+      e("🇬🇧", "united kingdom flag uk"),
+      e("🇨🇦", "canada flag"),
+      e("🇦🇺", "australia flag"),
+      e("🇩🇪", "germany flag"),
+      e("🇫🇷", "france flag"),
+      e("🇪🇸", "spain flag"),
+      e("🇮🇹", "italy flag"),
+      e("🇯🇵", "japan flag"),
+      e("🇰🇷", "south korea flag"),
+      e("🇨🇳", "china flag"),
+      e("🇮🇳", "india flag"),
+      e("🇧🇷", "brazil flag"),
+      e("🇲🇽", "mexico flag"),
+      e("🇷🇺", "russia flag"),
+      e("🇿🇦", "south africa flag"),
+      e("🇳🇱", "netherlands flag"),
+      e("🇸🇪", "sweden flag"),
+      e("🇳🇴", "norway flag"),
+      e("🇫🇮", "finland flag"),
+      e("🇩🇰", "denmark flag"),
+      e("🇨🇭", "switzerland flag"),
+      e("🇦🇹", "austria flag"),
+    ],
+  },
+];
+
+/** Filter the dataset by name match (case-insensitive substring). */
+export const searchEmojis = (
+  query: string,
+  categories: readonly EmojiCategory[],
+): EmojiEntry[] => {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const seen = new Set<string>();
+  const out: EmojiEntry[] = [];
+  for (const cat of categories) {
+    for (const item of cat.emojis) {
+      if (seen.has(item.char)) continue;
+      if (item.name.includes(q)) {
+        seen.add(item.char);
+        out.push(item);
+      }
+    }
+  }
+  return out;
+};

package/registry/components/ui/input-fields/field-group/field-group.module.css

@@ -0,0 +1,86 @@
+/* Field group - accessibility-first wrapper for grouping form controls.
+   Removes default fieldset chrome and arranges children in a flex
+   row/column with sensible gap. Outer shell + legend typography come
+   from the common module (sCommon.container, sCommon.label). */
+
+.root {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
+  /* Inherits the standard .container gap (--spacing-2). The legend's own
+     border + margin handle the heading separation. */
+}
+
+.legend {
+  /* Reset fieldset's odd legend defaults (padding-inline, float-like flow)
+     and pin typography explicitly - some UA stylesheets size <legend>
+     differently from the inherited form font, which would defeat the
+     sCommon.label class otherwise. */
+  float: none;
+  display: block;
+  width: 100%;
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  font-weight: inherit;
+  color: var(--color-secondary-foreground);
+  line-height: 1.4;
+  /* background-color: var(--color-muted); */
+
+  /* Subtle separator between the heading and the grouped fields -
+     visual hierarchy without breaking the family's gap rhythm. */
+  margin-bottom: var(--spacing-6);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border);
+  /* border-radius: var(--radius-md); */
+}
+
+.group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.group_vertical {
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+.group_horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-8);
+
+  /* Compact-control siblings (Switch / Input radio / Input checkbox) size
+     to their content in horizontal mode so flex doesn't distribute them
+     into equal columns. Vertical mode lets children keep their natural
+     width - text Input/Select stay full-width. */
+  > * {
+    width: fit-content;
+    min-width: 0;
+  }
+}
+
+/* Grid layout - column count comes from the inline `--fg-cols` custom
+   property set by the FieldGroup component. minmax(0, 1fr) prevents
+   long values from overflowing equal-width tracks. */
+.group_grid {
+  display: grid;
+  grid-template-columns: repeat(var(--fg-cols, 2), minmax(0, 1fr));
+  gap: var(--spacing-6);
+
+  > * {
+    min-width: 0;
+  }
+}
+
+@media (width <= 768px) {
+  .group_grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 480px) {
+  .group_grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/registry/components/ui/input-fields/field-group/field-group.tsx

@@ -0,0 +1,86 @@
+import type { CSSProperties, ReactNode } from "react";
+import clsx from "clsx";
+import sCommon from "../common/input-field-common.module.css";
+import s from "./field-group.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+
+export type FieldGroupOrientation = "vertical" | "horizontal";
+
+export type FieldGroupProps = {
+  label?: string;
+  /**
+   * Accessible role. Defaults to the implicit fieldset role ("group").
+   * Set "radiogroup" when wrapping `<input type="radio">` siblings.
+   */
+  role?: "group" | "radiogroup";
+  orientation?: FieldGroupOrientation;
+  /**
+   * Render children in a CSS grid with this many equal-width columns.
+   * Overrides `orientation` when set. Collapses to 2 columns on tablets
+   * and 1 column on narrow phones. Typical values: 2, 3, 4.
+   */
+  columns?: number;
+  errors?: readonly string[];
+  info?: readonly string[];
+  /**
+   * Native fieldset-level disable. Browsers propagate `:disabled` to every
+   * nested form control automatically - no per-child wiring required.
+   */
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  id?: string;
+  children?: ReactNode;
+};
+
+export const FieldGroup = ({
+  label,
+  role,
+  orientation = "vertical",
+  columns,
+  errors,
+  info,
+  disabled,
+  required,
+  className,
+  style,
+  id,
+  children,
+}: FieldGroupProps) => {
+  const hasErrors = (errors?.length ?? 0) > 0;
+  const isGrid = typeof columns === "number" && columns > 1;
+  const groupStyle = isGrid
+    ? ({ ["--fg-cols" as string]: columns } as CSSProperties)
+    : undefined;
+
+  return (
+    <fieldset
+      id={id}
+      className={clsx(sCommon.container, s.root, className)}
+      style={style}
+      disabled={disabled}
+      role={role}
+      aria-required={required || undefined}
+      aria-invalid={hasErrors || undefined}
+    >
+      {label && (
+        <legend className={clsx(sCommon.label, s.legend)}>{label}</legend>
+      )}
+      <div
+        className={clsx(
+          s.group,
+          isGrid
+            ? s.group_grid
+            : orientation === "horizontal"
+              ? s.group_horizontal
+              : s.group_vertical,
+        )}
+        style={groupStyle}
+      >
+        {children}
+      </div>
+      <FieldMessage errors={errors} info={info} />
+    </fieldset>
+  );
+};