@particle-academy/react-fancy 1.0.0

package/dist/index.js

@@ -0,0 +1,2713 @@
+import { forwardRef, useId, useRef, useEffect, createContext, useState, useCallback, useMemo, Children, useContext } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/components/Action/Action.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/data/emoji-data.ts
+var CATEGORY_DATA = [
+  {
+    category: "smileys",
+    icon: "\u{1F600}",
+    label: "Smileys",
+    emojis: [
+      { char: "\u{1F600}", name: "grinning face" },
+      { char: "\u{1F603}", name: "grinning face with big eyes" },
+      { char: "\u{1F604}", name: "grinning face with smiling eyes" },
+      { char: "\u{1F601}", name: "beaming face with smiling eyes" },
+      { char: "\u{1F606}", name: "grinning squinting face" },
+      { char: "\u{1F605}", name: "grinning face with sweat" },
+      { char: "\u{1F923}", name: "rolling on the floor laughing" },
+      { char: "\u{1F602}", name: "face with tears of joy" },
+      { char: "\u{1F642}", name: "slightly smiling face" },
+      { char: "\u{1F643}", name: "upside-down face" },
+      { char: "\u{1F609}", name: "winking face" },
+      { char: "\u{1F60A}", name: "smiling face with smiling eyes" },
+      { char: "\u{1F607}", name: "smiling face with halo" },
+      { char: "\u{1F970}", name: "smiling face with hearts" },
+      { char: "\u{1F60D}", name: "smiling face with heart-eyes" },
+      { char: "\u{1F929}", name: "star-struck" },
+      { char: "\u{1F618}", name: "face blowing a kiss" },
+      { char: "\u{1F617}", name: "kissing face" },
+      { char: "\u{1F61A}", name: "kissing face with closed eyes" },
+      { char: "\u{1F619}", name: "kissing face with smiling eyes" },
+      { char: "\u{1F972}", name: "smiling face with tear" },
+      { char: "\u{1F60B}", name: "face savoring food" },
+      { char: "\u{1F61B}", name: "face with tongue" },
+      { char: "\u{1F61C}", name: "winking face with tongue" },
+      { char: "\u{1F92A}", name: "zany face" },
+      { char: "\u{1F61D}", name: "squinting face with tongue" },
+      { char: "\u{1F911}", name: "money-mouth face" },
+      { char: "\u{1F917}", name: "hugging face" },
+      { char: "\u{1F92D}", name: "face with hand over mouth" },
+      { char: "\u{1F92B}", name: "shushing face" },
+      { char: "\u{1F914}", name: "thinking face" },
+      { char: "\u{1F910}", name: "zipper-mouth face" },
+      { char: "\u{1F928}", name: "face with raised eyebrow" },
+      { char: "\u{1F610}", name: "neutral face" },
+      { char: "\u{1F611}", name: "expressionless face" },
+      { char: "\u{1F636}", name: "face without mouth" },
+      { char: "\u{1F60F}", name: "smirking face" },
+      { char: "\u{1F612}", name: "unamused face" },
+      { char: "\u{1F644}", name: "face with rolling eyes" },
+      { char: "\u{1F62C}", name: "grimacing face" },
+      { char: "\u{1F925}", name: "lying face" },
+      { char: "\u{1F60C}", name: "relieved face" },
+      { char: "\u{1F614}", name: "pensive face" },
+      { char: "\u{1F62A}", name: "sleepy face" },
+      { char: "\u{1F924}", name: "drooling face" },
+      { char: "\u{1F634}", name: "sleeping face" },
+      { char: "\u{1F637}", name: "face with medical mask" },
+      { char: "\u{1F912}", name: "face with thermometer" },
+      { char: "\u{1F915}", name: "face with head-bandage" },
+      { char: "\u{1F922}", name: "nauseated face" },
+      { char: "\u{1F92E}", name: "face vomiting" },
+      { char: "\u{1F927}", name: "sneezing face" },
+      { char: "\u{1F975}", name: "hot face" },
+      { char: "\u{1F976}", name: "cold face" },
+      { char: "\u{1F974}", name: "woozy face" },
+      { char: "\u{1F635}", name: "dizzy face" },
+      { char: "\u{1F92F}", name: "exploding head" },
+      { char: "\u{1F920}", name: "cowboy hat face" },
+      { char: "\u{1F973}", name: "partying face" },
+      { char: "\u{1F978}", name: "disguised face" },
+      { char: "\u{1F60E}", name: "smiling face with sunglasses" },
+      { char: "\u{1F913}", name: "nerd face" },
+      { char: "\u{1F9D0}", name: "face with monocle" },
+      { char: "\u{1F615}", name: "confused face" },
+      { char: "\u{1F61F}", name: "worried face" },
+      { char: "\u{1F641}", name: "slightly frowning face" },
+      { char: "\u{1F62E}", name: "face with open mouth" },
+      { char: "\u{1F62F}", name: "hushed face" },
+      { char: "\u{1F632}", name: "astonished face" },
+      { char: "\u{1F633}", name: "flushed face" },
+      { char: "\u{1F97A}", name: "pleading face" },
+      { char: "\u{1F626}", name: "frowning face with open mouth" },
+      { char: "\u{1F627}", name: "anguished face" },
+      { char: "\u{1F628}", name: "fearful face" },
+      { char: "\u{1F630}", name: "anxious face with sweat" },
+      { char: "\u{1F625}", name: "sad but relieved face" },
+      { char: "\u{1F622}", name: "crying face" },
+      { char: "\u{1F62D}", name: "loudly crying face" },
+      { char: "\u{1F631}", name: "face screaming in fear" },
+      { char: "\u{1F616}", name: "confounded face" },
+      { char: "\u{1F623}", name: "persevering face" },
+      { char: "\u{1F61E}", name: "disappointed face" },
+      { char: "\u{1F613}", name: "downcast face with sweat" },
+      { char: "\u{1F629}", name: "weary face" },
+      { char: "\u{1F62B}", name: "tired face" },
+      { char: "\u{1F971}", name: "yawning face" },
+      { char: "\u{1F624}", name: "face with steam from nose" },
+      { char: "\u{1F621}", name: "pouting face" },
+      { char: "\u{1F620}", name: "angry face" },
+      { char: "\u{1F92C}", name: "face with symbols on mouth" },
+      { char: "\u{1F608}", name: "smiling face with horns" },
+      { char: "\u{1F47F}", name: "angry face with horns" },
+      { char: "\u{1F480}", name: "skull" },
+      { char: "\u{1F4A9}", name: "pile of poo" },
+      { char: "\u{1F921}", name: "clown face" },
+      { char: "\u{1F479}", name: "ogre" },
+      { char: "\u{1F47A}", name: "goblin" },
+      { char: "\u{1F47B}", name: "ghost" },
+      { char: "\u{1F47D}", name: "alien" },
+      { char: "\u{1F47E}", name: "alien monster" },
+      { char: "\u{1F916}", name: "robot" }
+    ]
+  },
+  {
+    category: "people",
+    icon: "\u{1F44B}",
+    label: "People",
+    emojis: [
+      { char: "\u{1F44B}", name: "waving hand" },
+      { char: "\u{1F91A}", name: "raised back of hand" },
+      { char: "\u{1F590}", name: "hand with fingers splayed" },
+      { char: "\u270B", name: "raised hand" },
+      { char: "\u{1F596}", name: "vulcan salute" },
+      { char: "\u{1F44C}", name: "ok hand" },
+      { char: "\u{1F90C}", name: "pinched fingers" },
+      { char: "\u{1F90F}", name: "pinching hand" },
+      { char: "\u270C\uFE0F", name: "victory hand" },
+      { char: "\u{1F91E}", name: "crossed fingers" },
+      { char: "\u{1F91F}", name: "love-you gesture" },
+      { char: "\u{1F918}", name: "sign of the horns" },
+      { char: "\u{1F919}", name: "call me hand" },
+      { char: "\u{1F448}", name: "backhand index pointing left" },
+      { char: "\u{1F449}", name: "backhand index pointing right" },
+      { char: "\u{1F446}", name: "backhand index pointing up" },
+      { char: "\u{1F447}", name: "backhand index pointing down" },
+      { char: "\u261D\uFE0F", name: "index pointing up" },
+      { char: "\u{1F44D}", name: "thumbs up" },
+      { char: "\u{1F44E}", name: "thumbs down" },
+      { char: "\u270A", name: "raised fist" },
+      { char: "\u{1F44A}", name: "oncoming fist" },
+      { char: "\u{1F91B}", name: "left-facing fist" },
+      { char: "\u{1F91C}", name: "right-facing fist" },
+      { char: "\u{1F44F}", name: "clapping hands" },
+      { char: "\u{1F64C}", name: "raising hands" },
+      { char: "\u{1F450}", name: "open hands" },
+      { char: "\u{1F932}", name: "palms up together" },
+      { char: "\u{1F91D}", name: "handshake" },
+      { char: "\u{1F64F}", name: "folded hands" },
+      { char: "\u270D\uFE0F", name: "writing hand" },
+      { char: "\u{1F485}", name: "nail polish" },
+      { char: "\u{1F933}", name: "selfie" },
+      { char: "\u{1F4AA}", name: "flexed biceps" },
+      { char: "\u{1F476}", name: "baby" },
+      { char: "\u{1F467}", name: "girl" },
+      { char: "\u{1F9D2}", name: "child" },
+      { char: "\u{1F466}", name: "boy" },
+      { char: "\u{1F469}", name: "woman" },
+      { char: "\u{1F9D1}", name: "person" },
+      { char: "\u{1F468}", name: "man" },
+      { char: "\u{1F475}", name: "old woman" },
+      { char: "\u{1F9D3}", name: "older person" },
+      { char: "\u{1F474}", name: "old man" },
+      { char: "\u{1F46E}", name: "police officer" },
+      { char: "\u{1F477}", name: "construction worker" },
+      { char: "\u{1F482}", name: "guard" },
+      { char: "\u{1F575}\uFE0F", name: "detective" },
+      { char: "\u{1F469}\u200D\u2695\uFE0F", name: "woman health worker" },
+      { char: "\u{1F468}\u200D\u2695\uFE0F", name: "man health worker" },
+      { char: "\u{1F469}\u200D\u{1F393}", name: "woman student" },
+      { char: "\u{1F468}\u200D\u{1F393}", name: "man student" },
+      { char: "\u{1F469}\u200D\u{1F4BB}", name: "woman technologist" },
+      { char: "\u{1F468}\u200D\u{1F4BB}", name: "man technologist" },
+      { char: "\u{1F9D9}", name: "mage" },
+      { char: "\u{1F9DA}", name: "fairy" },
+      { char: "\u{1F9DB}", name: "vampire" },
+      { char: "\u{1F9DC}", name: "merperson" },
+      { char: "\u{1F9DD}", name: "elf" },
+      { char: "\u{1F9DE}", name: "genie" },
+      { char: "\u{1F9DF}", name: "zombie" },
+      { char: "\u{1F486}", name: "person getting massage" },
+      { char: "\u{1F487}", name: "person getting haircut" },
+      { char: "\u{1F6B6}", name: "person walking" },
+      { char: "\u{1F9CD}", name: "person standing" },
+      { char: "\u{1F9CE}", name: "person kneeling" },
+      { char: "\u{1F3C3}", name: "person running" },
+      { char: "\u{1F483}", name: "woman dancing" },
+      { char: "\u{1F57A}", name: "man dancing" },
+      { char: "\u{1F46B}", name: "woman and man holding hands" },
+      { char: "\u{1F46D}", name: "women holding hands" },
+      { char: "\u{1F46C}", name: "men holding hands" },
+      { char: "\u{1F48F}", name: "kiss" },
+      { char: "\u{1F491}", name: "couple with heart" },
+      { char: "\u{1F46A}", name: "family" }
+    ]
+  },
+  {
+    category: "animals",
+    icon: "\u{1F431}",
+    label: "Animals",
+    emojis: [
+      { char: "\u{1F436}", name: "dog face" },
+      { char: "\u{1F431}", name: "cat face" },
+      { char: "\u{1F42D}", name: "mouse face" },
+      { char: "\u{1F439}", name: "hamster" },
+      { char: "\u{1F430}", name: "rabbit face" },
+      { char: "\u{1F98A}", name: "fox" },
+      { char: "\u{1F43B}", name: "bear" },
+      { char: "\u{1F43C}", name: "panda" },
+      { char: "\u{1F428}", name: "koala" },
+      { char: "\u{1F42F}", name: "tiger face" },
+      { char: "\u{1F981}", name: "lion" },
+      { char: "\u{1F42E}", name: "cow face" },
+      { char: "\u{1F437}", name: "pig face" },
+      { char: "\u{1F438}", name: "frog" },
+      { char: "\u{1F435}", name: "monkey face" },
+      { char: "\u{1F648}", name: "see-no-evil monkey" },
+      { char: "\u{1F649}", name: "hear-no-evil monkey" },
+      { char: "\u{1F64A}", name: "speak-no-evil monkey" },
+      { char: "\u{1F412}", name: "monkey" },
+      { char: "\u{1F414}", name: "chicken" },
+      { char: "\u{1F427}", name: "penguin" },
+      { char: "\u{1F426}", name: "bird" },
+      { char: "\u{1F424}", name: "baby chick" },
+      { char: "\u{1F986}", name: "duck" },
+      { char: "\u{1F985}", name: "eagle" },
+      { char: "\u{1F989}", name: "owl" },
+      { char: "\u{1F987}", name: "bat" },
+      { char: "\u{1F43A}", name: "wolf" },
+      { char: "\u{1F417}", name: "boar" },
+      { char: "\u{1F434}", name: "horse face" },
+      { char: "\u{1F984}", name: "unicorn" },
+      { char: "\u{1F41D}", name: "honeybee" },
+      { char: "\u{1F41B}", name: "bug" },
+      { char: "\u{1F98B}", name: "butterfly" },
+      { char: "\u{1F40C}", name: "snail" },
+      { char: "\u{1F41E}", name: "lady beetle" },
+      { char: "\u{1F41C}", name: "ant" },
+      { char: "\u{1F99F}", name: "mosquito" },
+      { char: "\u{1F422}", name: "turtle" },
+      { char: "\u{1F40D}", name: "snake" },
+      { char: "\u{1F98E}", name: "lizard" },
+      { char: "\u{1F419}", name: "octopus" },
+      { char: "\u{1F991}", name: "squid" },
+      { char: "\u{1F990}", name: "shrimp" },
+      { char: "\u{1F980}", name: "crab" },
+      { char: "\u{1F421}", name: "blowfish" },
+      { char: "\u{1F420}", name: "tropical fish" },
+      { char: "\u{1F41F}", name: "fish" },
+      { char: "\u{1F42C}", name: "dolphin" },
+      { char: "\u{1F433}", name: "spouting whale" },
+      { char: "\u{1F40B}", name: "whale" },
+      { char: "\u{1F988}", name: "shark" },
+      { char: "\u{1F40A}", name: "crocodile" },
+      { char: "\u{1F405}", name: "tiger" },
+      { char: "\u{1F406}", name: "leopard" },
+      { char: "\u{1F993}", name: "zebra" },
+      { char: "\u{1F98D}", name: "gorilla" },
+      { char: "\u{1F9A7}", name: "orangutan" },
+      { char: "\u{1F418}", name: "elephant" },
+      { char: "\u{1F99B}", name: "hippopotamus" },
+      { char: "\u{1F98F}", name: "rhinoceros" },
+      { char: "\u{1F42A}", name: "camel" },
+      { char: "\u{1F42B}", name: "two-hump camel" },
+      { char: "\u{1F992}", name: "giraffe" },
+      { char: "\u{1F998}", name: "kangaroo" },
+      { char: "\u{1F403}", name: "water buffalo" },
+      { char: "\u{1F402}", name: "ox" },
+      { char: "\u{1F404}", name: "cow" },
+      { char: "\u{1F40E}", name: "horse" },
+      { char: "\u{1F416}", name: "pig" },
+      { char: "\u{1F40F}", name: "ram" },
+      { char: "\u{1F411}", name: "ewe" },
+      { char: "\u{1F999}", name: "llama" },
+      { char: "\u{1F410}", name: "goat" },
+      { char: "\u{1F98C}", name: "deer" },
+      { char: "\u{1F415}", name: "dog" },
+      { char: "\u{1F429}", name: "poodle" },
+      { char: "\u{1F9AE}", name: "guide dog" },
+      { char: "\u{1F408}", name: "cat" },
+      { char: "\u{1F413}", name: "rooster" },
+      { char: "\u{1F983}", name: "turkey" },
+      { char: "\u{1F99A}", name: "peacock" },
+      { char: "\u{1F99C}", name: "parrot" },
+      { char: "\u{1F9A2}", name: "swan" },
+      { char: "\u{1F9A9}", name: "flamingo" },
+      { char: "\u{1F407}", name: "rabbit" },
+      { char: "\u{1F99D}", name: "raccoon" },
+      { char: "\u{1F9A8}", name: "skunk" },
+      { char: "\u{1F9A1}", name: "badger" },
+      { char: "\u{1F9AB}", name: "beaver" },
+      { char: "\u{1F9A6}", name: "otter" },
+      { char: "\u{1F9A5}", name: "sloth" }
+    ]
+  },
+  {
+    category: "food",
+    icon: "\u{1F354}",
+    label: "Food",
+    emojis: [
+      { char: "\u{1F34F}", name: "green apple" },
+      { char: "\u{1F34E}", name: "red apple" },
+      { char: "\u{1F350}", name: "pear" },
+      { char: "\u{1F34A}", name: "tangerine" },
+      { char: "\u{1F34B}", name: "lemon" },
+      { char: "\u{1F34C}", name: "banana" },
+      { char: "\u{1F349}", name: "watermelon" },
+      { char: "\u{1F347}", name: "grapes" },
+      { char: "\u{1F353}", name: "strawberry" },
+      { char: "\u{1FAD0}", name: "blueberries" },
+      { char: "\u{1F348}", name: "melon" },
+      { char: "\u{1F352}", name: "cherries" },
+      { char: "\u{1F351}", name: "peach" },
+      { char: "\u{1F96D}", name: "mango" },
+      { char: "\u{1F34D}", name: "pineapple" },
+      { char: "\u{1F965}", name: "coconut" },
+      { char: "\u{1F95D}", name: "kiwi fruit" },
+      { char: "\u{1F345}", name: "tomato" },
+      { char: "\u{1F346}", name: "eggplant" },
+      { char: "\u{1F951}", name: "avocado" },
+      { char: "\u{1F966}", name: "broccoli" },
+      { char: "\u{1F96C}", name: "leafy green" },
+      { char: "\u{1F952}", name: "cucumber" },
+      { char: "\u{1F336}\uFE0F", name: "hot pepper" },
+      { char: "\u{1FAD1}", name: "bell pepper" },
+      { char: "\u{1F33D}", name: "ear of corn" },
+      { char: "\u{1F955}", name: "carrot" },
+      { char: "\u{1F9C4}", name: "garlic" },
+      { char: "\u{1F9C5}", name: "onion" },
+      { char: "\u{1F954}", name: "potato" },
+      { char: "\u{1F360}", name: "roasted sweet potato" },
+      { char: "\u{1F950}", name: "croissant" },
+      { char: "\u{1F96F}", name: "bagel" },
+      { char: "\u{1F35E}", name: "bread" },
+      { char: "\u{1F956}", name: "baguette bread" },
+      { char: "\u{1F968}", name: "pretzel" },
+      { char: "\u{1F9C0}", name: "cheese wedge" },
+      { char: "\u{1F95A}", name: "egg" },
+      { char: "\u{1F373}", name: "cooking" },
+      { char: "\u{1F9C8}", name: "butter" },
+      { char: "\u{1F95E}", name: "pancakes" },
+      { char: "\u{1F9C7}", name: "waffle" },
+      { char: "\u{1F953}", name: "bacon" },
+      { char: "\u{1F969}", name: "cut of meat" },
+      { char: "\u{1F357}", name: "poultry leg" },
+      { char: "\u{1F356}", name: "meat on bone" },
+      { char: "\u{1F32D}", name: "hot dog" },
+      { char: "\u{1F354}", name: "hamburger" },
+      { char: "\u{1F35F}", name: "french fries" },
+      { char: "\u{1F355}", name: "pizza" },
+      { char: "\u{1F96A}", name: "sandwich" },
+      { char: "\u{1F959}", name: "stuffed flatbread" },
+      { char: "\u{1F9C6}", name: "falafel" },
+      { char: "\u{1F32E}", name: "taco" },
+      { char: "\u{1F32F}", name: "burrito" },
+      { char: "\u{1F957}", name: "green salad" },
+      { char: "\u{1F958}", name: "shallow pan of food" },
+      { char: "\u{1F35D}", name: "spaghetti" },
+      { char: "\u{1F35C}", name: "steaming bowl" },
+      { char: "\u{1F372}", name: "pot of food" },
+      { char: "\u{1F35B}", name: "curry rice" },
+      { char: "\u{1F363}", name: "sushi" },
+      { char: "\u{1F371}", name: "bento box" },
+      { char: "\u{1F95F}", name: "dumpling" },
+      { char: "\u{1F364}", name: "fried shrimp" },
+      { char: "\u{1F359}", name: "rice ball" },
+      { char: "\u{1F35A}", name: "cooked rice" },
+      { char: "\u{1F358}", name: "rice cracker" },
+      { char: "\u{1F365}", name: "fish cake with swirl" },
+      { char: "\u{1F96E}", name: "moon cake" },
+      { char: "\u{1F362}", name: "oden" },
+      { char: "\u{1F361}", name: "dango" },
+      { char: "\u{1F367}", name: "shaved ice" },
+      { char: "\u{1F368}", name: "ice cream" },
+      { char: "\u{1F366}", name: "soft ice cream" },
+      { char: "\u{1F967}", name: "pie" },
+      { char: "\u{1F9C1}", name: "cupcake" },
+      { char: "\u{1F370}", name: "shortcake" },
+      { char: "\u{1F382}", name: "birthday cake" },
+      { char: "\u{1F36E}", name: "custard" },
+      { char: "\u{1F36D}", name: "lollipop" },
+      { char: "\u{1F36C}", name: "candy" },
+      { char: "\u{1F36B}", name: "chocolate bar" },
+      { char: "\u{1F37F}", name: "popcorn" },
+      { char: "\u{1F369}", name: "doughnut" },
+      { char: "\u{1F36A}", name: "cookie" },
+      { char: "\u{1F330}", name: "chestnut" },
+      { char: "\u{1F95C}", name: "peanuts" },
+      { char: "\u{1F36F}", name: "honey pot" },
+      { char: "\u2615", name: "hot beverage" },
+      { char: "\u{1F375}", name: "teacup without handle" },
+      { char: "\u{1F9C3}", name: "beverage box" },
+      { char: "\u{1F964}", name: "cup with straw" },
+      { char: "\u{1F9CB}", name: "bubble tea" },
+      { char: "\u{1F376}", name: "sake" },
+      { char: "\u{1F37A}", name: "beer mug" },
+      { char: "\u{1F37B}", name: "clinking beer mugs" },
+      { char: "\u{1F942}", name: "clinking glasses" },
+      { char: "\u{1F377}", name: "wine glass" },
+      { char: "\u{1F943}", name: "tumbler glass" },
+      { char: "\u{1F378}", name: "cocktail glass" },
+      { char: "\u{1F379}", name: "tropical drink" },
+      { char: "\u{1F9CA}", name: "ice" }
+    ]
+  },
+  {
+    category: "activities",
+    icon: "\u26BD",
+    label: "Activities",
+    emojis: [
+      { char: "\u26BD", name: "soccer ball" },
+      { char: "\u{1F3C0}", name: "basketball" },
+      { char: "\u{1F3C8}", name: "american football" },
+      { char: "\u26BE", name: "baseball" },
+      { char: "\u{1F94E}", name: "softball" },
+      { char: "\u{1F3BE}", name: "tennis" },
+      { char: "\u{1F3D0}", name: "volleyball" },
+      { char: "\u{1F3C9}", name: "rugby football" },
+      { char: "\u{1F94F}", name: "flying disc" },
+      { char: "\u{1F3B1}", name: "pool 8 ball" },
+      { char: "\u{1FA80}", name: "yo-yo" },
+      { char: "\u{1F3D3}", name: "ping pong" },
+      { char: "\u{1F3F8}", name: "badminton" },
+      { char: "\u{1F3D2}", name: "ice hockey" },
+      { char: "\u{1F3D1}", name: "field hockey" },
+      { char: "\u{1F94D}", name: "lacrosse" },
+      { char: "\u{1F3CF}", name: "cricket game" },
+      { char: "\u{1FA83}", name: "boomerang" },
+      { char: "\u{1F945}", name: "goal net" },
+      { char: "\u26F3", name: "flag in hole" },
+      { char: "\u{1FA81}", name: "kite" },
+      { char: "\u{1F3F9}", name: "bow and arrow" },
+      { char: "\u{1F3A3}", name: "fishing pole" },
+      { char: "\u{1F93F}", name: "diving mask" },
+      { char: "\u{1F94A}", name: "boxing glove" },
+      { char: "\u{1F94B}", name: "martial arts uniform" },
+      { char: "\u{1F3BD}", name: "running shirt" },
+      { char: "\u{1F6F9}", name: "skateboard" },
+      { char: "\u{1F6FC}", name: "roller skate" },
+      { char: "\u{1F6F7}", name: "sled" },
+      { char: "\u26F8\uFE0F", name: "ice skate" },
+      { char: "\u{1F94C}", name: "curling stone" },
+      { char: "\u{1F3BF}", name: "skis" },
+      { char: "\u26F7\uFE0F", name: "skier" },
+      { char: "\u{1F3C2}", name: "snowboarder" },
+      { char: "\u{1F3CB}\uFE0F", name: "person lifting weights" },
+      { char: "\u{1F93C}", name: "people wrestling" },
+      { char: "\u{1F938}", name: "person cartwheeling" },
+      { char: "\u{1F93A}", name: "person fencing" },
+      { char: "\u26F9\uFE0F", name: "person bouncing ball" },
+      { char: "\u{1F93E}", name: "person playing handball" },
+      { char: "\u{1F3CC}\uFE0F", name: "person golfing" },
+      { char: "\u{1F3C7}", name: "horse racing" },
+      { char: "\u{1F9D8}", name: "person in lotus position" },
+      { char: "\u{1F3C4}", name: "person surfing" },
+      { char: "\u{1F3CA}", name: "person swimming" },
+      { char: "\u{1F93D}", name: "person playing water polo" },
+      { char: "\u{1F6A3}", name: "person rowing boat" },
+      { char: "\u{1F9D7}", name: "person climbing" },
+      { char: "\u{1F6B4}", name: "person biking" },
+      { char: "\u{1F6B5}", name: "person mountain biking" },
+      { char: "\u{1F3AA}", name: "circus tent" },
+      { char: "\u{1F3AD}", name: "performing arts" },
+      { char: "\u{1F3A8}", name: "artist palette" },
+      { char: "\u{1F3AC}", name: "clapper board" },
+      { char: "\u{1F3A4}", name: "microphone" },
+      { char: "\u{1F3A7}", name: "headphone" },
+      { char: "\u{1F3BC}", name: "musical score" },
+      { char: "\u{1F3B9}", name: "musical keyboard" },
+      { char: "\u{1F941}", name: "drum" },
+      { char: "\u{1F3B7}", name: "saxophone" },
+      { char: "\u{1F3BA}", name: "trumpet" },
+      { char: "\u{1F3B8}", name: "guitar" },
+      { char: "\u{1FA95}", name: "banjo" },
+      { char: "\u{1F3BB}", name: "violin" },
+      { char: "\u{1F3B2}", name: "game die" },
+      { char: "\u265F\uFE0F", name: "chess pawn" },
+      { char: "\u{1F3AF}", name: "direct hit" },
+      { char: "\u{1F3B3}", name: "bowling" },
+      { char: "\u{1F3AE}", name: "video game" },
+      { char: "\u{1F3B0}", name: "slot machine" },
+      { char: "\u{1F9E9}", name: "puzzle piece" },
+      { char: "\u{1F3C6}", name: "trophy" },
+      { char: "\u{1F3C5}", name: "sports medal" },
+      { char: "\u{1F947}", name: "first place medal" },
+      { char: "\u{1F948}", name: "second place medal" },
+      { char: "\u{1F949}", name: "third place medal" }
+    ]
+  },
+  {
+    category: "travel",
+    icon: "\u{1F697}",
+    label: "Travel",
+    emojis: [
+      { char: "\u{1F697}", name: "automobile" },
+      { char: "\u{1F695}", name: "taxi" },
+      { char: "\u{1F699}", name: "sport utility vehicle" },
+      { char: "\u{1F68C}", name: "bus" },
+      { char: "\u{1F68E}", name: "trolleybus" },
+      { char: "\u{1F3CE}\uFE0F", name: "racing car" },
+      { char: "\u{1F693}", name: "police car" },
+      { char: "\u{1F691}", name: "ambulance" },
+      { char: "\u{1F692}", name: "fire engine" },
+      { char: "\u{1F690}", name: "minibus" },
+      { char: "\u{1F6FB}", name: "pickup truck" },
+      { char: "\u{1F69A}", name: "delivery truck" },
+      { char: "\u{1F69B}", name: "articulated lorry" },
+      { char: "\u{1F69C}", name: "tractor" },
+      { char: "\u{1F3CD}\uFE0F", name: "motorcycle" },
+      { char: "\u{1F6F5}", name: "motor scooter" },
+      { char: "\u{1F6B2}", name: "bicycle" },
+      { char: "\u{1F6F4}", name: "kick scooter" },
+      { char: "\u{1F6A8}", name: "police car light" },
+      { char: "\u{1F694}", name: "oncoming police car" },
+      { char: "\u{1F68D}", name: "oncoming bus" },
+      { char: "\u{1F698}", name: "oncoming automobile" },
+      { char: "\u{1F696}", name: "oncoming taxi" },
+      { char: "\u{1F683}", name: "railway car" },
+      { char: "\u{1F68B}", name: "tram car" },
+      { char: "\u{1F69E}", name: "mountain railway" },
+      { char: "\u{1F69D}", name: "monorail" },
+      { char: "\u{1F684}", name: "high-speed train" },
+      { char: "\u{1F685}", name: "bullet train" },
+      { char: "\u{1F688}", name: "light rail" },
+      { char: "\u{1F682}", name: "locomotive" },
+      { char: "\u{1F686}", name: "train" },
+      { char: "\u{1F687}", name: "metro" },
+      { char: "\u{1F68A}", name: "tram" },
+      { char: "\u{1F689}", name: "station" },
+      { char: "\u2708\uFE0F", name: "airplane" },
+      { char: "\u{1F6EB}", name: "airplane departure" },
+      { char: "\u{1F6EC}", name: "airplane arrival" },
+      { char: "\u{1F6E9}\uFE0F", name: "small airplane" },
+      { char: "\u{1F680}", name: "rocket" },
+      { char: "\u{1F6F8}", name: "flying saucer" },
+      { char: "\u{1F681}", name: "helicopter" },
+      { char: "\u{1F6F6}", name: "canoe" },
+      { char: "\u26F5", name: "sailboat" },
+      { char: "\u{1F6A4}", name: "speedboat" },
+      { char: "\u{1F6E5}\uFE0F", name: "motor boat" },
+      { char: "\u{1F6F3}\uFE0F", name: "passenger ship" },
+      { char: "\u26F4\uFE0F", name: "ferry" },
+      { char: "\u{1F6A2}", name: "ship" },
+      { char: "\u2693", name: "anchor" },
+      { char: "\u26FD", name: "fuel pump" },
+      { char: "\u{1F6A7}", name: "construction" },
+      { char: "\u{1F6A6}", name: "vertical traffic light" },
+      { char: "\u{1F6A5}", name: "horizontal traffic light" },
+      { char: "\u{1F68F}", name: "bus stop" },
+      { char: "\u{1F5FA}\uFE0F", name: "world map" },
+      { char: "\u{1F5FF}", name: "moai" },
+      { char: "\u{1F5FD}", name: "Statue of Liberty" },
+      { char: "\u{1F5FC}", name: "Tokyo tower" },
+      { char: "\u{1F3F0}", name: "castle" },
+      { char: "\u{1F3EF}", name: "Japanese castle" },
+      { char: "\u{1F3DF}\uFE0F", name: "stadium" },
+      { char: "\u{1F3A1}", name: "ferris wheel" },
+      { char: "\u{1F3A2}", name: "roller coaster" },
+      { char: "\u{1F3A0}", name: "carousel horse" },
+      { char: "\u26F2", name: "fountain" },
+      { char: "\u26F1\uFE0F", name: "umbrella on ground" },
+      { char: "\u{1F3D6}\uFE0F", name: "beach with umbrella" },
+      { char: "\u{1F3DD}\uFE0F", name: "desert island" },
+      { char: "\u{1F3DC}\uFE0F", name: "desert" },
+      { char: "\u{1F30B}", name: "volcano" },
+      { char: "\u26F0\uFE0F", name: "mountain" },
+      { char: "\u{1F3D4}\uFE0F", name: "snow-capped mountain" },
+      { char: "\u{1F5FB}", name: "mount fuji" },
+      { char: "\u{1F3D5}\uFE0F", name: "camping" },
+      { char: "\u26FA", name: "tent" },
+      { char: "\u{1F3E0}", name: "house" },
+      { char: "\u{1F3E1}", name: "house with garden" },
+      { char: "\u{1F3E2}", name: "office building" },
+      { char: "\u{1F3E3}", name: "Japanese post office" },
+      { char: "\u{1F3E4}", name: "post office" },
+      { char: "\u{1F3E5}", name: "hospital" },
+      { char: "\u{1F3E6}", name: "bank" },
+      { char: "\u{1F3E8}", name: "hotel" },
+      { char: "\u{1F3E9}", name: "love hotel" },
+      { char: "\u{1F3EA}", name: "convenience store" },
+      { char: "\u{1F3EB}", name: "school" },
+      { char: "\u{1F3EC}", name: "department store" },
+      { char: "\u{1F3ED}", name: "factory" },
+      { char: "\u{1F3D7}\uFE0F", name: "building construction" },
+      { char: "\u{1F9F1}", name: "brick" },
+      { char: "\u{1F305}", name: "sunrise" },
+      { char: "\u{1F304}", name: "sunrise over mountains" },
+      { char: "\u{1F320}", name: "shooting star" },
+      { char: "\u{1F387}", name: "sparkler" },
+      { char: "\u{1F386}", name: "fireworks" },
+      { char: "\u{1F307}", name: "sunset" },
+      { char: "\u{1F306}", name: "cityscape at dusk" },
+      { char: "\u{1F3D9}\uFE0F", name: "cityscape" },
+      { char: "\u{1F303}", name: "night with stars" },
+      { char: "\u{1F30C}", name: "milky way" },
+      { char: "\u{1F309}", name: "bridge at night" },
+      { char: "\u{1F301}", name: "foggy" }
+    ]
+  },
+  {
+    category: "symbols",
+    icon: "\u2764\uFE0F",
+    label: "Symbols",
+    emojis: [
+      { char: "\u2764\uFE0F", name: "red heart" },
+      { char: "\u{1F9E1}", name: "orange heart" },
+      { char: "\u{1F49B}", name: "yellow heart" },
+      { char: "\u{1F49A}", name: "green heart" },
+      { char: "\u{1F499}", name: "blue heart" },
+      { char: "\u{1F49C}", name: "purple heart" },
+      { char: "\u{1F5A4}", name: "black heart" },
+      { char: "\u{1F90D}", name: "white heart" },
+      { char: "\u{1F90E}", name: "brown heart" },
+      { char: "\u{1F494}", name: "broken heart" },
+      { char: "\u2763\uFE0F", name: "heart exclamation" },
+      { char: "\u{1F495}", name: "two hearts" },
+      { char: "\u{1F49E}", name: "revolving hearts" },
+      { char: "\u{1F493}", name: "beating heart" },
+      { char: "\u{1F497}", name: "growing heart" },
+      { char: "\u{1F496}", name: "sparkling heart" },
+      { char: "\u{1F498}", name: "heart with arrow" },
+      { char: "\u{1F49D}", name: "heart with ribbon" },
+      { char: "\u{1F49F}", name: "heart decoration" },
+      { char: "\u{1F4B0}", name: "money bag" },
+      { char: "\u{1F4B1}", name: "currency exchange" },
+      { char: "\u{1F4B2}", name: "heavy dollar sign" },
+      { char: "\u{1F4B3}", name: "credit card" },
+      { char: "\u{1F4B4}", name: "yen banknote" },
+      { char: "\u{1F4B5}", name: "dollar banknote" },
+      { char: "\u{1F4B6}", name: "euro banknote" },
+      { char: "\u{1F4B7}", name: "pound banknote" },
+      { char: "\u{1F4B8}", name: "money with wings" },
+      { char: "\u{1F4B9}", name: "chart increasing with yen" },
+      { char: "\u262E\uFE0F", name: "peace symbol" },
+      { char: "\u271D\uFE0F", name: "latin cross" },
+      { char: "\u262A\uFE0F", name: "star and crescent" },
+      { char: "\u{1F549}\uFE0F", name: "om" },
+      { char: "\u2638\uFE0F", name: "wheel of dharma" },
+      { char: "\u2721\uFE0F", name: "star of david" },
+      { char: "\u{1F52F}", name: "dotted six-pointed star" },
+      { char: "\u{1F54E}", name: "menorah" },
+      { char: "\u262F\uFE0F", name: "yin yang" },
+      { char: "\u2626\uFE0F", name: "orthodox cross" },
+      { char: "\u{1F6D0}", name: "place of worship" },
+      { char: "\u26EA", name: "church" },
+      { char: "\u{1F54B}", name: "kaaba" },
+      { char: "\u{1F54C}", name: "mosque" },
+      { char: "\u{1F54D}", name: "synagogue" },
+      { char: "\u{1F6D5}", name: "hindu temple" },
+      { char: "\u{1F4FF}", name: "prayer beads" },
+      { char: "\u26CE", name: "ophiuchus" },
+      { char: "\u2648", name: "aries" },
+      { char: "\u2649", name: "taurus" },
+      { char: "\u264A", name: "gemini" },
+      { char: "\u264B", name: "cancer" },
+      { char: "\u264C", name: "leo" },
+      { char: "\u264D", name: "virgo" },
+      { char: "\u264E", name: "libra" },
+      { char: "\u264F", name: "scorpio" },
+      { char: "\u2650", name: "sagittarius" },
+      { char: "\u2651", name: "capricorn" },
+      { char: "\u2652", name: "aquarius" },
+      { char: "\u2653", name: "pisces" },
+      { char: "\u{1F51F}", name: "keycap ten" },
+      { char: "\u{1F520}", name: "input latin uppercase" },
+      { char: "\u{1F521}", name: "input latin lowercase" },
+      { char: "\u{1F522}", name: "input numbers" },
+      { char: "\u{1F523}", name: "input symbols" },
+      { char: "\u{1F524}", name: "input latin letters" },
+      { char: "\u{1F194}", name: "id button" },
+      { char: "\u{1F19A}", name: "vs button" },
+      { char: "\u{1F170}\uFE0F", name: "A button" },
+      { char: "\u{1F171}\uFE0F", name: "B button" },
+      { char: "\u{1F18E}", name: "AB button" },
+      { char: "\u{1F191}", name: "CL button" },
+      { char: "\u{1F17E}\uFE0F", name: "O button" },
+      { char: "\u{1F198}", name: "SOS button" },
+      { char: "\u269B\uFE0F", name: "atom symbol" },
+      { char: "\u2622\uFE0F", name: "radioactive" },
+      { char: "\u2623\uFE0F", name: "biohazard" },
+      { char: "\u26A0\uFE0F", name: "warning" },
+      { char: "\u{1F51E}", name: "no one under eighteen" },
+      { char: "\u{1F4F5}", name: "no mobile phones" },
+      { char: "\u{1F6AB}", name: "prohibited" },
+      { char: "\u26D4", name: "no entry" },
+      { char: "\u{1F6D1}", name: "stop sign" },
+      { char: "\u{1F6B7}", name: "no pedestrians" },
+      { char: "\u{1F6AF}", name: "no littering" },
+      { char: "\u{1F6B3}", name: "no bicycles" },
+      { char: "\u{1F6B1}", name: "non-potable water" },
+      { char: "\u{1F4AF}", name: "hundred points" },
+      { char: "\u{1F4A2}", name: "anger symbol" },
+      { char: "\u{1F4A5}", name: "collision" },
+      { char: "\u{1F4A6}", name: "sweat droplets" },
+      { char: "\u{1F4A8}", name: "dashing away" },
+      { char: "\u{1F4A0}", name: "diamond with a dot" },
+      { char: "\u{1F4AE}", name: "white flower" },
+      { char: "\u2668\uFE0F", name: "hot springs" },
+      { char: "\u{1F525}", name: "fire" },
+      { char: "\u2728", name: "sparkles" },
+      { char: "\u2B50", name: "star" },
+      { char: "\u{1F31F}", name: "glowing star" },
+      { char: "\u2734\uFE0F", name: "eight-pointed star" },
+      { char: "\u{1F514}", name: "bell" },
+      { char: "\u{1F515}", name: "bell with slash" },
+      { char: "\u{1F3B5}", name: "musical note" },
+      { char: "\u{1F3B6}", name: "musical notes" },
+      { char: "\u{1F4F4}", name: "mobile phone off" },
+      { char: "\u{1F4F3}", name: "vibration mode" },
+      { char: "\u2705", name: "check mark button" },
+      { char: "\u2611\uFE0F", name: "check box with check" },
+      { char: "\u2714\uFE0F", name: "check mark" },
+      { char: "\u274C", name: "cross mark" },
+      { char: "\u274E", name: "cross mark button" },
+      { char: "\u2B55", name: "hollow red circle" },
+      { char: "\u{1F503}", name: "clockwise vertical arrows" },
+      { char: "\u{1F504}", name: "counterclockwise arrows button" },
+      { char: "\u{1F519}", name: "back arrow" },
+      { char: "\u{1F51A}", name: "end arrow" },
+      { char: "\u{1F51B}", name: "on arrow" },
+      { char: "\u{1F51C}", name: "soon arrow" },
+      { char: "\u{1F51D}", name: "top arrow" },
+      { char: "\u2B06\uFE0F", name: "up arrow" },
+      { char: "\u2B07\uFE0F", name: "down arrow" },
+      { char: "\u2B05\uFE0F", name: "left arrow" },
+      { char: "\u27A1\uFE0F", name: "right arrow" },
+      { char: "\u2197\uFE0F", name: "up-right arrow" },
+      { char: "\u2198\uFE0F", name: "down-right arrow" },
+      { char: "\u2199\uFE0F", name: "down-left arrow" },
+      { char: "\u2196\uFE0F", name: "up-left arrow" },
+      { char: "\u2195\uFE0F", name: "up-down arrow" },
+      { char: "\u2194\uFE0F", name: "left-right arrow" },
+      { char: "\u{1F534}", name: "red circle" },
+      { char: "\u{1F7E0}", name: "orange circle" },
+      { char: "\u{1F7E1}", name: "yellow circle" },
+      { char: "\u{1F7E2}", name: "green circle" },
+      { char: "\u{1F535}", name: "blue circle" },
+      { char: "\u{1F7E3}", name: "purple circle" },
+      { char: "\u{1F7E4}", name: "brown circle" },
+      { char: "\u26AB", name: "black circle" },
+      { char: "\u26AA", name: "white circle" },
+      { char: "\u{1F518}", name: "radio button" },
+      { char: "\u{1F7E5}", name: "red square" },
+      { char: "\u{1F7E7}", name: "orange square" },
+      { char: "\u{1F7E8}", name: "yellow square" },
+      { char: "\u{1F7E9}", name: "green square" },
+      { char: "\u{1F7E6}", name: "blue square" },
+      { char: "\u{1F7EA}", name: "purple square" },
+      { char: "\u{1F7EB}", name: "brown square" },
+      { char: "\u2B1B", name: "black large square" },
+      { char: "\u2B1C", name: "white large square" },
+      { char: "\u25FC\uFE0F", name: "black medium square" },
+      { char: "\u25FB\uFE0F", name: "white medium square" },
+      { char: "\u25FE", name: "black medium-small square" },
+      { char: "\u25FD", name: "white medium-small square" },
+      { char: "\u25AA\uFE0F", name: "black small square" },
+      { char: "\u25AB\uFE0F", name: "white small square" },
+      { char: "\u{1F536}", name: "large orange diamond" },
+      { char: "\u{1F537}", name: "large blue diamond" },
+      { char: "\u{1F538}", name: "small orange diamond" },
+      { char: "\u{1F539}", name: "small blue diamond" },
+      { char: "\u{1F53A}", name: "red triangle pointed up" },
+      { char: "\u{1F53B}", name: "red triangle pointed down" },
+      { char: "\u{1F532}", name: "black square button" },
+      { char: "\u{1F533}", name: "white square button" },
+      { char: "\u{1F236}", name: "Japanese not free of charge button" },
+      { char: "\u{1F21A}", name: "Japanese free of charge button" },
+      { char: "\u{1F238}", name: "Japanese application button" },
+      { char: "\u{1F23A}", name: "Japanese open for business button" },
+      { char: "\u{1F237}\uFE0F", name: "Japanese monthly amount button" },
+      { char: "\u{1F251}", name: "Japanese acceptable button" },
+      { char: "\u{1F250}", name: "Japanese bargain button" },
+      { char: "\u3299\uFE0F", name: "Japanese secret button" },
+      { char: "\u3297\uFE0F", name: "Japanese congratulations button" },
+      { char: "\u{1F234}", name: "Japanese passing grade button" },
+      { char: "\u{1F235}", name: "Japanese no vacancy button" },
+      { char: "\u{1F239}", name: "Japanese discount button" },
+      { char: "\u{1F232}", name: "Japanese prohibited button" },
+      { char: "\u{1F4DB}", name: "name badge" },
+      { char: "\u{1F530}", name: "Japanese symbol for beginner" },
+      { char: "\u{1F531}", name: "trident emblem" },
+      { char: "\u269C\uFE0F", name: "fleur-de-lis" },
+      { char: "\u{1F9FF}", name: "nazar amulet" },
+      { char: "\u267E\uFE0F", name: "infinity" },
+      { char: "\xA9\uFE0F", name: "copyright" },
+      { char: "\xAE\uFE0F", name: "registered" },
+      { char: "\u2122\uFE0F", name: "trade mark" }
+    ]
+  },
+  {
+    category: "flags",
+    icon: "\u{1F3F3}\uFE0F",
+    label: "Flags",
+    emojis: [
+      { char: "\u{1F3F3}\uFE0F", name: "white flag" },
+      { char: "\u{1F3F4}", name: "black flag" },
+      { char: "\u{1F3C1}", name: "chequered flag" },
+      { char: "\u{1F6A9}", name: "triangular flag" },
+      { char: "\u{1F3F3}\uFE0F\u200D\u{1F308}", name: "rainbow flag" },
+      { char: "\u{1F3F3}\uFE0F\u200D\u26A7\uFE0F", name: "transgender flag" },
+      { char: "\u{1F1FA}\u{1F1F8}", name: "United States" },
+      { char: "\u{1F1EC}\u{1F1E7}", name: "United Kingdom" },
+      { char: "\u{1F1E8}\u{1F1E6}", name: "Canada" },
+      { char: "\u{1F1E6}\u{1F1FA}", name: "Australia" },
+      { char: "\u{1F1E9}\u{1F1EA}", name: "Germany" },
+      { char: "\u{1F1EB}\u{1F1F7}", name: "France" },
+      { char: "\u{1F1EE}\u{1F1F9}", name: "Italy" },
+      { char: "\u{1F1EA}\u{1F1F8}", name: "Spain" },
+      { char: "\u{1F1EF}\u{1F1F5}", name: "Japan" },
+      { char: "\u{1F1F0}\u{1F1F7}", name: "South Korea" },
+      { char: "\u{1F1E8}\u{1F1F3}", name: "China" },
+      { char: "\u{1F1EE}\u{1F1F3}", name: "India" },
+      { char: "\u{1F1E7}\u{1F1F7}", name: "Brazil" },
+      { char: "\u{1F1F2}\u{1F1FD}", name: "Mexico" },
+      { char: "\u{1F1F7}\u{1F1FA}", name: "Russia" },
+      { char: "\u{1F1FF}\u{1F1E6}", name: "South Africa" },
+      { char: "\u{1F1F3}\u{1F1F1}", name: "Netherlands" },
+      { char: "\u{1F1E7}\u{1F1EA}", name: "Belgium" },
+      { char: "\u{1F1E8}\u{1F1ED}", name: "Switzerland" },
+      { char: "\u{1F1E6}\u{1F1F9}", name: "Austria" },
+      { char: "\u{1F1F8}\u{1F1EA}", name: "Sweden" },
+      { char: "\u{1F1F3}\u{1F1F4}", name: "Norway" },
+      { char: "\u{1F1E9}\u{1F1F0}", name: "Denmark" },
+      { char: "\u{1F1EB}\u{1F1EE}", name: "Finland" },
+      { char: "\u{1F1F5}\u{1F1F1}", name: "Poland" },
+      { char: "\u{1F1FA}\u{1F1E6}", name: "Ukraine" },
+      { char: "\u{1F1F9}\u{1F1F7}", name: "Turkey" },
+      { char: "\u{1F1EC}\u{1F1F7}", name: "Greece" },
+      { char: "\u{1F1F5}\u{1F1F9}", name: "Portugal" },
+      { char: "\u{1F1EE}\u{1F1EA}", name: "Ireland" },
+      { char: "\u{1F1F3}\u{1F1FF}", name: "New Zealand" },
+      { char: "\u{1F1F8}\u{1F1EC}", name: "Singapore" },
+      { char: "\u{1F1ED}\u{1F1F0}", name: "Hong Kong" },
+      { char: "\u{1F1F9}\u{1F1FC}", name: "Taiwan" },
+      { char: "\u{1F1F9}\u{1F1ED}", name: "Thailand" },
+      { char: "\u{1F1FB}\u{1F1F3}", name: "Vietnam" },
+      { char: "\u{1F1EE}\u{1F1E9}", name: "Indonesia" },
+      { char: "\u{1F1F5}\u{1F1ED}", name: "Philippines" },
+      { char: "\u{1F1F2}\u{1F1FE}", name: "Malaysia" },
+      { char: "\u{1F1E6}\u{1F1F7}", name: "Argentina" },
+      { char: "\u{1F1E8}\u{1F1F4}", name: "Colombia" },
+      { char: "\u{1F1E8}\u{1F1F1}", name: "Chile" },
+      { char: "\u{1F1F5}\u{1F1EA}", name: "Peru" },
+      { char: "\u{1F1EA}\u{1F1EC}", name: "Egypt" },
+      { char: "\u{1F1F8}\u{1F1E6}", name: "Saudi Arabia" },
+      { char: "\u{1F1E6}\u{1F1EA}", name: "United Arab Emirates" },
+      { char: "\u{1F1EE}\u{1F1F1}", name: "Israel" }
+    ]
+  }
+];
+var EMOJI_DATA = CATEGORY_DATA.map((cat) => ({
+  category: cat.category,
+  icon: cat.icon,
+  label: cat.label,
+  emojis: cat.emojis.map((e) => e.char)
+}));
+var EMOJI_ENTRIES = CATEGORY_DATA.flatMap(
+  (cat) => cat.emojis.map((e) => ({
+    char: e.char,
+    name: e.name,
+    category: cat.category
+  }))
+);
+
+// src/data/emoji-utils.ts
+function resolve(name) {
+  const lower = name.toLowerCase();
+  const entry = EMOJI_ENTRIES.find((e) => e.name === lower);
+  return entry?.char;
+}
+function search(query) {
+  const lower = query.toLowerCase();
+  return EMOJI_ENTRIES.filter((e) => e.name.includes(lower)).map((e) => e.char);
+}
+function find(char) {
+  return EMOJI_ENTRIES.find((e) => e.char === char);
+}
+var colorClasses = {
+  blue: "bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500",
+  emerald: "bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500",
+  amber: "bg-amber-500 text-white border border-amber-600 hover:bg-amber-600 dark:bg-amber-600 dark:border-amber-500 dark:hover:bg-amber-500",
+  red: "bg-red-500 text-white border border-red-600 hover:bg-red-600 dark:bg-red-600 dark:border-red-500 dark:hover:bg-red-500",
+  violet: "bg-violet-500 text-white border border-violet-600 hover:bg-violet-600 dark:bg-violet-600 dark:border-violet-500 dark:hover:bg-violet-500",
+  indigo: "bg-indigo-500 text-white border border-indigo-600 hover:bg-indigo-600 dark:bg-indigo-600 dark:border-indigo-500 dark:hover:bg-indigo-500",
+  sky: "bg-sky-500 text-white border border-sky-600 hover:bg-sky-600 dark:bg-sky-600 dark:border-sky-500 dark:hover:bg-sky-500",
+  rose: "bg-rose-500 text-white border border-rose-600 hover:bg-rose-600 dark:bg-rose-600 dark:border-rose-500 dark:hover:bg-rose-500",
+  orange: "bg-orange-500 text-white border border-orange-600 hover:bg-orange-600 dark:bg-orange-600 dark:border-orange-500 dark:hover:bg-orange-500",
+  zinc: "bg-zinc-500 text-white border border-zinc-600 hover:bg-zinc-600 dark:bg-zinc-600 dark:border-zinc-500 dark:hover:bg-zinc-500"
+};
+var defaultClasses = "bg-white text-zinc-700 border border-zinc-200 hover:bg-zinc-50 hover:border-zinc-300 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-700 dark:hover:bg-zinc-700";
+var activeClasses = "bg-blue-500 text-white border border-blue-600 hover:bg-blue-600 dark:bg-blue-600 dark:border-blue-500 dark:hover:bg-blue-500";
+var checkedClasses = "bg-emerald-500 text-white border border-emerald-600 hover:bg-emerald-600 dark:bg-emerald-600 dark:border-emerald-500 dark:hover:bg-emerald-500";
+var warnClasses = "bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700 dark:hover:bg-amber-900/50";
+var horizontalSize = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-2 py-1 text-xs",
+  md: "px-3 py-1.5 text-sm",
+  lg: "px-4 py-2.5 text-base",
+  xl: "px-5 py-3 text-lg"
+};
+var verticalSize = {
+  xs: "px-2 pt-5 pb-5 text-xs",
+  sm: "px-2 pt-5 pb-5 text-xs",
+  md: "px-3 pt-6 pb-6 text-sm",
+  lg: "px-4 pt-8 pb-8 text-base",
+  xl: "px-5 pt-9 pb-9 text-lg"
+};
+var circleSize = {
+  xs: "w-7 h-7 text-xs",
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base",
+  xl: "w-14 h-14 text-lg"
+};
+var iconSize = {
+  xs: "w-3 h-3",
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5",
+  xl: "w-6 h-6"
+};
+var avatarSize = {
+  xs: "w-4 h-4",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+};
+var alertIconSize = {
+  xs: "w-2 h-2",
+  sm: "w-2.5 h-2.5",
+  md: "w-3 h-3",
+  lg: "w-4 h-4",
+  xl: "w-4 h-4"
+};
+var badgeSize = {
+  xs: "text-[10px] px-1 min-w-[14px] h-3.5",
+  sm: "text-[10px] px-1.5 min-w-[16px] h-4",
+  md: "text-[11px] px-1.5 min-w-[18px] h-[18px]",
+  lg: "text-xs px-2 min-w-[22px] h-5",
+  xl: "text-xs px-2 min-w-[24px] h-5"
+};
+var verticalGap = {
+  xs: "gap-1",
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2",
+  xl: "gap-2"
+};
+function isColored(color, active, checked) {
+  return !!(color || active || checked);
+}
+function getColorClasses(color, active, checked, warn) {
+  if (color) return colorClasses[color];
+  if (checked) return checkedClasses;
+  if (active) return activeClasses;
+  if (warn) return warnClasses;
+  return defaultClasses;
+}
+function getIconColorClasses(color, active, checked, warn) {
+  if (color || active || checked) return "text-white";
+  if (warn) return "text-amber-600 dark:text-amber-400";
+  return "text-zinc-500 dark:text-zinc-400";
+}
+function getBadgeClasses(color, active, checked, warn) {
+  if (isColored(color, active, checked)) return "bg-white/20 text-white";
+  if (warn) return "bg-amber-200 text-amber-800 dark:bg-amber-800 dark:text-amber-200";
+  return "bg-zinc-200 text-zinc-700 dark:bg-zinc-600 dark:text-zinc-200";
+}
+var DEFAULT_SORT = "eiab";
+function parseSortOrder(sort) {
+  const chars = (sort ?? DEFAULT_SORT).split("");
+  const valid = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const c of chars) {
+    if ("eiab".includes(c) && !seen.has(c)) {
+      valid.push(c);
+      seen.add(c);
+    }
+  }
+  for (const c of DEFAULT_SORT.split("")) {
+    if (!seen.has(c)) valid.push(c);
+  }
+  return valid;
+}
+var Action = forwardRef(
+  ({
+    children,
+    className,
+    variant = "default",
+    color,
+    size = "md",
+    active,
+    checked,
+    warn,
+    alert: alertProp,
+    icon,
+    iconTrailing,
+    iconPlace = "left",
+    alertIcon,
+    alertIconTrailing,
+    emoji,
+    emojiTrailing,
+    avatar,
+    avatarTrailing,
+    badge,
+    badgeTrailing,
+    sort,
+    loading = false,
+    disabled,
+    href,
+    ...props
+  }, ref) => {
+    const isCircle = variant === "circle";
+    const isVertical = iconPlace === "top" || iconPlace === "bottom";
+    const isReversed = iconPlace === "right";
+    const sizeClass = isCircle ? circleSize[size] : isVertical ? verticalSize[size] : horizontalSize[size];
+    const iconColorCls = getIconColorClasses(color, active, checked, warn);
+    const buildElement = (key, trailing) => {
+      switch (key) {
+        case "e": {
+          const slug = trailing ? emojiTrailing : emoji;
+          if (!slug) return null;
+          const char = resolve(slug);
+          if (!char) return null;
+          return /* @__PURE__ */ jsx("span", { "data-action-emoji": true, children: char }, `emoji-${trailing ? "t" : "l"}`);
+        }
+        case "i": {
+          if (loading && !trailing) {
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("animate-spin border-2 border-current border-t-transparent rounded-full", iconSize[size])
+              },
+              "spinner"
+            );
+          }
+          const iconNode = trailing ? iconTrailing : icon;
+          if (!iconNode) return null;
+          if (isVertical) {
+            const posClass = iconPlace === "top" ? "top-1.5" : "bottom-1.5";
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute left-1/2 -translate-x-1/2",
+                  posClass,
+                  iconColorCls
+                ),
+                children: iconNode
+              },
+              `icon-${trailing ? "t" : "l"}`
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("flex-shrink-0", iconColorCls),
+              children: iconNode
+            },
+            `icon-${trailing ? "t" : "l"}`
+          );
+        }
+        case "a": {
+          if (!avatar) return null;
+          const isTrailing = avatarTrailing ?? trailing;
+          if (isTrailing !== trailing) return null;
+          return /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatar,
+              alt: "",
+              className: cn(avatarSize[size], "rounded-full object-cover flex-shrink-0"),
+              "data-action-avatar": true
+            },
+            "avatar"
+          );
+        }
+        case "b": {
+          if (!badge) return null;
+          const isTrailing = badgeTrailing ?? trailing;
+          if (isTrailing !== trailing) return null;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center justify-center font-medium rounded-full",
+                badgeSize[size],
+                getBadgeClasses(color, active, checked, warn)
+              ),
+              "data-action-badge": true,
+              children: badge
+            },
+            "badge"
+          );
+        }
+        default:
+          return null;
+      }
+    };
+    const renderAlertIcon = (trailing) => {
+      if (!alertIcon) return null;
+      const isTrailing = alertIconTrailing ?? false;
+      if (isTrailing !== trailing) return null;
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "relative inline-flex flex-shrink-0",
+          "data-action-alert": true,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(alertIconSize[size], "text-red-500 dark:text-red-400 animate-pulse"), children: alertIcon }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  alertIconSize[size],
+                  "absolute inset-0 text-red-400 dark:text-red-300 animate-ping opacity-75"
+                ),
+                children: alertIcon
+              }
+            )
+          ]
+        },
+        "alert-icon"
+      );
+    };
+    const sortOrder = parseSortOrder(sort);
+    const leadingElements = [];
+    const trailingElements = [];
+    for (const key of sortOrder) {
+      const leading = buildElement(key, false);
+      if (leading) leadingElements.push(leading);
+      const trailing = buildElement(key, true);
+      if (trailing) trailingElements.push(trailing);
+    }
+    const leadingAlert = renderAlertIcon(false);
+    if (leadingAlert) leadingElements.push(leadingAlert);
+    const trailingAlert = renderAlertIcon(true);
+    if (trailingAlert) trailingElements.push(trailingAlert);
+    const classes = cn(
+      "inline-flex items-center justify-center font-medium transition-all duration-200",
+      "focus:outline-none focus:ring-2 focus:ring-offset-1",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      isCircle ? "rounded-full" : "rounded-lg",
+      sizeClass,
+      getColorClasses(color, active, checked, warn),
+      !isCircle && !isVertical && "gap-2",
+      !isCircle && isVertical && cn("relative", verticalGap[size]),
+      isReversed && !isVertical && "flex-row-reverse",
+      alertProp && "animate-pulse",
+      className
+    );
+    const content = isCircle ? /* @__PURE__ */ jsx(Fragment, { children: loading ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "animate-spin border-2 border-current border-t-transparent rounded-full",
+          iconSize[size]
+        )
+      }
+    ) : icon ?? children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      leadingElements,
+      children != null && /* @__PURE__ */ jsx("span", { children }),
+      trailingElements
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx("a", { href, className: classes, children: content });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: classes,
+        disabled: disabled || loading,
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Action.displayName = "Action";
+
+// src/components/inputs/inputs.utils.ts
+var inputSizeClasses = {
+  xs: "px-2 py-1 text-xs rounded",
+  sm: "px-2.5 py-1.5 text-sm rounded-md",
+  md: "px-3 py-2 text-sm rounded-lg",
+  lg: "px-4 py-2.5 text-base rounded-lg",
+  xl: "px-5 py-3 text-lg rounded-xl"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+function dirtyClasses(dirty) {
+  return dirty ? "border-l-[3px] border-l-amber-400" : "";
+}
+function dirtyRingClasses(dirty) {
+  return dirty ? "ring-2 ring-amber-400/50" : "";
+}
+function errorClasses(error) {
+  return error ? "border-red-500 focus:ring-red-500" : "";
+}
+var inputBaseClasses = "border border-zinc-300 bg-white text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500";
+function resolveOption(option) {
+  if (typeof option === "string") {
+    return { value: option, label: option };
+  }
+  return option;
+}
+function Field({
+  label,
+  description,
+  error,
+  required,
+  htmlFor,
+  size = "md",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor,
+        className: cn(
+          "font-medium text-zinc-700 dark:text-zinc-300",
+          labelSizeClasses[size]
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+        ]
+      }
+    ),
+    children,
+    description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: description }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+}
+var Input = forwardRef(
+  ({
+    type = "text",
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    leading,
+    trailing,
+    onValueChange,
+    onChange,
+    ...props
+  }, ref) => {
+    const autoId = useId();
+    const inputId = id ?? autoId;
+    const input = /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+      leading && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 text-zinc-400 dark:text-zinc-500", children: leading }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          type,
+          disabled,
+          required,
+          className: cn(
+            inputBaseClasses,
+            inputSizeClasses[size],
+            dirtyClasses(dirty),
+            errorClasses(error),
+            "w-full",
+            leading && "pl-9",
+            trailing && "pr-9",
+            className
+          ),
+          onChange: (e) => {
+            onChange?.(e);
+            onValueChange?.(e.target.value);
+          },
+          ...props
+        }
+      ),
+      trailing && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 text-zinc-400 dark:text-zinc-500", children: trailing })
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: inputId,
+          size,
+          children: input
+        }
+      );
+    }
+    return input;
+  }
+);
+Input.displayName = "Input";
+var Textarea = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    autoResize,
+    minRows = 3,
+    maxRows,
+    onValueChange,
+    onChange,
+    value,
+    defaultValue,
+    ...props
+  }, ref) => {
+    const autoId = useId();
+    const textareaId = id ?? autoId;
+    const internalRef = useRef(null);
+    useEffect(() => {
+      const el = internalRef.current;
+      if (!autoResize || !el) return;
+      el.style.height = "auto";
+      const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+      const minHeight = minRows * lineHeight;
+      const maxHeight = maxRows ? maxRows * lineHeight : Infinity;
+      el.style.height = `${Math.min(Math.max(el.scrollHeight, minHeight), maxHeight)}px`;
+    }, [autoResize, minRows, maxRows, value, defaultValue]);
+    const textarea = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: (node) => {
+          internalRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        id: textareaId,
+        disabled,
+        required,
+        rows: autoResize ? minRows : minRows,
+        value,
+        defaultValue,
+        className: cn(
+          inputBaseClasses,
+          inputSizeClasses[size],
+          dirtyClasses(dirty),
+          errorClasses(error),
+          "w-full resize-y",
+          autoResize && "resize-none overflow-hidden",
+          className
+        ),
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+        },
+        ...props
+      }
+    );
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: textareaId,
+          size,
+          children: textarea
+        }
+      );
+    }
+    return textarea;
+  }
+);
+Textarea.displayName = "Textarea";
+function isOptionGroup(item) {
+  return typeof item === "object" && "options" in item;
+}
+function renderOption(option, index) {
+  const resolved = resolveOption(option);
+  return /* @__PURE__ */ jsx(
+    "option",
+    {
+      value: resolved.value,
+      disabled: resolved.disabled,
+      children: resolved.label
+    },
+    `${resolved.value}-${index}`
+  );
+}
+var Select = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    list,
+    placeholder,
+    onValueChange,
+    onChange,
+    ...props
+  }, ref) => {
+    const autoId = useId();
+    const selectId = id ?? autoId;
+    const select = /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        id: selectId,
+        disabled,
+        required,
+        className: cn(
+          inputBaseClasses,
+          inputSizeClasses[size],
+          dirtyClasses(dirty),
+          errorClasses(error),
+          "w-full appearance-none bg-no-repeat bg-[length:16px] bg-[right_8px_center]",
+          "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%236b7280%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.23%207.21a.75.75%200%20011.06.02L10%2011.168l3.71-3.938a.75.75%200%20111.08%201.04l-4.25%204.5a.75.75%200%2001-1.08%200l-4.25-4.5a.75.75%200%2001.02-1.06z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E')]",
+          "pr-8",
+          className
+        ),
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+        },
+        ...props,
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          list.map(
+            (item, index) => isOptionGroup(item) ? /* @__PURE__ */ jsx("optgroup", { label: item.label, children: item.options.map(
+              (opt, optIndex) => renderOption(opt, optIndex)
+            ) }, `group-${index}`) : renderOption(item, index)
+          )
+        ]
+      }
+    );
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: selectId,
+          size,
+          children: select
+        }
+      );
+    }
+    return select;
+  }
+);
+Select.displayName = "Select";
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+var Checkbox = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate
+  }, ref) => {
+    const autoId = useId();
+    const checkboxId = id ?? autoId;
+    const internalRef = useRef(null);
+    const [checked, setChecked] = useControllableState(
+      controlledChecked,
+      defaultChecked,
+      onCheckedChange
+    );
+    useEffect(() => {
+      const el = internalRef.current;
+      if (el) {
+        el.indeterminate = indeterminate ?? false;
+      }
+    }, [indeterminate]);
+    const sizeClasses = {
+      xs: "h-3.5 w-3.5",
+      sm: "h-4 w-4",
+      md: "h-[18px] w-[18px]",
+      lg: "h-5 w-5",
+      xl: "h-6 w-6"
+    }[size];
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (node) => {
+            internalRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          id: checkboxId,
+          type: "checkbox",
+          name,
+          disabled,
+          required,
+          checked,
+          onChange: (e) => setChecked(e.target.checked),
+          className: cn(
+            sizeClasses,
+            "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+            dirtyRingClasses(dirty),
+            error && "border-red-500"
+          )
+        }
+      ) }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: checkboxId,
+            className: cn(
+              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+              disabled && "cursor-not-allowed opacity-50"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: description }),
+        error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-500", children: error })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+function CheckboxGroup({
+  size = "md",
+  dirty,
+  error,
+  label,
+  description,
+  required,
+  disabled,
+  className,
+  name,
+  list,
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  orientation = "vertical"
+}) {
+  const groupId = useId();
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onValueChange
+  );
+  const handleToggle = (optionValue) => {
+    const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    setValue(next);
+  };
+  const sizeClasses = {
+    xs: "h-3.5 w-3.5",
+    sm: "h-4 w-4",
+    md: "h-[18px] w-[18px]",
+    lg: "h-5 w-5",
+    xl: "h-6 w-6"
+  }[size];
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex gap-3",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      children: list.map((option, index) => {
+        const resolved = resolveOption(option);
+        const optionId = `${groupId}-${index}`;
+        const isChecked = value.includes(resolved.value);
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: optionId,
+              type: "checkbox",
+              name,
+              value: String(resolved.value),
+              checked: isChecked,
+              disabled: disabled || resolved.disabled,
+              onChange: () => handleToggle(resolved.value),
+              className: cn(
+                sizeClasses,
+                "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+                dirtyRingClasses(dirty),
+                error && "border-red-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: optionId,
+                className: cn(
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+                  (disabled || resolved.disabled) && "cursor-not-allowed opacity-50"
+                ),
+                children: resolved.label
+              }
+            ),
+            resolved.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: resolved.description })
+          ] })
+        ] }, optionId);
+      })
+    }
+  );
+  if (label || error || description) {
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        label,
+        description,
+        error,
+        required,
+        size,
+        children: content
+      }
+    );
+  }
+  return content;
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+function RadioGroup({
+  size = "md",
+  dirty,
+  error,
+  label,
+  description,
+  required,
+  disabled,
+  className,
+  name,
+  list,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical"
+}) {
+  const groupId = useId();
+  const radioName = name ?? groupId;
+  const [value, setValue] = useControllableState(
+    controlledValue,
+    defaultValue,
+    onValueChange
+  );
+  const sizeClasses = {
+    xs: "h-3.5 w-3.5",
+    sm: "h-4 w-4",
+    md: "h-[18px] w-[18px]",
+    lg: "h-5 w-5",
+    xl: "h-6 w-6"
+  }[size];
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn(
+        "flex gap-3",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      children: list.map((option, index) => {
+        const resolved = resolveOption(option);
+        const optionId = `${groupId}-${index}`;
+        const isSelected = value === resolved.value;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: optionId,
+              type: "radio",
+              name: radioName,
+              value: String(resolved.value),
+              checked: isSelected,
+              disabled: disabled || resolved.disabled,
+              onChange: () => setValue(resolved.value),
+              className: cn(
+                sizeClasses,
+                "cursor-pointer border border-zinc-300 bg-white text-blue-600 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-800",
+                dirtyRingClasses(dirty),
+                error && "border-red-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: optionId,
+                className: cn(
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+                  (disabled || resolved.disabled) && "cursor-not-allowed opacity-50"
+                ),
+                children: resolved.label
+              }
+            ),
+            resolved.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: resolved.description })
+          ] })
+        ] }, optionId);
+      })
+    }
+  );
+  if (label || error || description) {
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        label,
+        description,
+        error,
+        required,
+        size,
+        children: content
+      }
+    );
+  }
+  return content;
+}
+RadioGroup.displayName = "RadioGroup";
+var trackColorMap = {
+  zinc: "bg-zinc-500",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500"
+};
+var Switch = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    color = "blue"
+  }, ref) => {
+    const autoId = useId();
+    const switchId = id ?? autoId;
+    const [checked, setChecked] = useControllableState(
+      controlledChecked,
+      defaultChecked,
+      onCheckedChange
+    );
+    const trackSizes = {
+      xs: "h-4 w-7",
+      sm: "h-5 w-9",
+      md: "h-6 w-11",
+      lg: "h-7 w-[52px]",
+      xl: "h-8 w-[60px]"
+    }[size];
+    const knobSizes = {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-7 w-7"
+    }[size];
+    const translateOn = {
+      xs: "translate-x-3",
+      sm: "translate-x-4",
+      md: "translate-x-5",
+      lg: "translate-x-6",
+      xl: "translate-x-7"
+    }[size];
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          id: switchId,
+          type: "button",
+          role: "switch",
+          "aria-checked": checked,
+          disabled,
+          onClick: () => setChecked(!checked),
+          className: cn(
+            "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            trackSizes,
+            checked ? trackColorMap[color] : "bg-zinc-200 dark:bg-zinc-700",
+            dirtyRingClasses(dirty),
+            error && "ring-2 ring-red-500/50"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform",
+                knobSizes,
+                checked ? translateOn : "translate-x-0"
+              )
+            }
+          )
+        }
+      ),
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: checked ? "1" : "0" }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: switchId,
+            className: cn(
+              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-300",
+              disabled && "cursor-not-allowed opacity-50"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: description }),
+        error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-500", children: error })
+      ] })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Slider = forwardRef(
+  (props, ref) => {
+    const {
+      size = "md",
+      dirty,
+      error,
+      label,
+      description,
+      required,
+      disabled,
+      className,
+      id,
+      name,
+      min = 0,
+      max = 100,
+      step = 1,
+      showValue,
+      marks
+    } = props;
+    const autoId = useId();
+    const sliderId = id ?? autoId;
+    if (props.range) {
+      return /* @__PURE__ */ jsx(
+        RangeSlider,
+        {
+          ...props,
+          id: sliderId,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SingleSlider,
+      {
+        ...props,
+        range: false,
+        id: sliderId,
+        ref
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var SingleSlider = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min = 0,
+    max = 100,
+    step = 1,
+    showValue,
+    marks,
+    ...rest
+  }, ref) => {
+    const singleProps = rest;
+    const [value, setValue] = useControllableState(
+      singleProps.value,
+      singleProps.defaultValue ?? min,
+      singleProps.onValueChange
+    );
+    const slider = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            type: "range",
+            name,
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            onChange: (e) => setValue(Number(e.target.value)),
+            className: cn(
+              "w-full cursor-pointer accent-blue-600 disabled:cursor-not-allowed disabled:opacity-50",
+              dirtyRingClasses(dirty),
+              {
+                xs: "h-1",
+                sm: "h-1.5",
+                md: "h-2",
+                lg: "h-2.5",
+                xl: "h-3"
+              }[size]
+            )
+          }
+        ),
+        showValue && /* @__PURE__ */ jsx("span", { className: "min-w-[3ch] text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: value })
+      ] }),
+      marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(Field, { label, description, error, required, htmlFor: id, size, children: slider });
+    }
+    return slider;
+  }
+);
+SingleSlider.displayName = "SingleSlider";
+var RangeSlider = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min = 0,
+    max = 100,
+    step = 1,
+    showValue,
+    marks,
+    ...rest
+  }, ref) => {
+    const rangeProps = rest;
+    const [value, setValue] = useControllableState(
+      rangeProps.value,
+      rangeProps.defaultValue ?? [min, max],
+      rangeProps.onValueChange
+    );
+    const handleMin = (n) => {
+      setValue([Math.min(n, value[1]), value[1]]);
+    };
+    const handleMax = (n) => {
+      setValue([value[0], Math.max(n, value[0])]);
+    };
+    const leftPercent = (value[0] - min) / (max - min) * 100;
+    const rightPercent = (value[1] - min) / (max - min) * 100;
+    const slider = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-1/2 h-1.5 w-full -translate-y-1/2 rounded-full bg-zinc-200 dark:bg-zinc-700" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-blue-500",
+              style: { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "range",
+              min,
+              max,
+              step,
+              value: value[0],
+              disabled,
+              onChange: (e) => handleMin(Number(e.target.value)),
+              className: cn(
+                "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow",
+                dirtyRingClasses(dirty)
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min,
+              max,
+              step,
+              value: value[1],
+              disabled,
+              onChange: (e) => handleMax(Number(e.target.value)),
+              className: "pointer-events-none absolute w-full cursor-pointer appearance-none bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:shadow"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "h-6" })
+        ] }),
+        showValue && /* @__PURE__ */ jsxs("span", { className: "min-w-[6ch] whitespace-nowrap text-right text-sm font-medium text-zinc-700 dark:text-zinc-300", children: [
+          value[0],
+          "\u2013",
+          value[1]
+        ] })
+      ] }),
+      marks && marks.length > 0 && /* @__PURE__ */ jsx(SliderMarks, { marks, min, max })
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(Field, { label, description, error, required, htmlFor: id, size, children: slider });
+    }
+    return slider;
+  }
+);
+RangeSlider.displayName = "RangeSlider";
+function SliderMarks({
+  marks,
+  min,
+  max
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "relative h-5 w-full", children: marks.map((mark) => {
+    const percent = (mark.value - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute -translate-x-1/2 text-xs text-zinc-500 dark:text-zinc-400",
+        style: { left: `${percent}%` },
+        children: mark.label ?? mark.value
+      },
+      mark.value
+    );
+  }) });
+}
+var DatePicker = forwardRef(
+  (props, ref) => {
+    const {
+      size = "md",
+      dirty,
+      error,
+      label,
+      description,
+      required,
+      disabled,
+      className,
+      id,
+      name,
+      min,
+      max,
+      includeTime
+    } = props;
+    const autoId = useId();
+    const pickerId = id ?? autoId;
+    const inputType = includeTime ? "datetime-local" : "date";
+    const inputClasses = cn(
+      inputBaseClasses,
+      inputSizeClasses[size],
+      dirtyClasses(dirty),
+      errorClasses(error),
+      "w-full"
+    );
+    if (props.range) {
+      return /* @__PURE__ */ jsx(
+        RangeDatePicker,
+        {
+          ...props,
+          id: pickerId,
+          inputType,
+          inputClasses,
+          ref
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SingleDatePicker,
+      {
+        ...props,
+        range: false,
+        id: pickerId,
+        inputType,
+        inputClasses,
+        ref
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+var SingleDatePicker = forwardRef(
+  ({
+    size = "md",
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min,
+    max,
+    inputType,
+    inputClasses,
+    ...rest
+  }, ref) => {
+    const singleProps = rest;
+    const [value, setValue] = useControllableState(
+      singleProps.value,
+      singleProps.defaultValue ?? "",
+      singleProps.onValueChange
+    );
+    const input = /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id,
+        type: inputType,
+        name,
+        min,
+        max,
+        value,
+        disabled,
+        required,
+        onChange: (e) => setValue(e.target.value),
+        className: cn(inputClasses, className)
+      }
+    );
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: id,
+          size,
+          children: input
+        }
+      );
+    }
+    return input;
+  }
+);
+SingleDatePicker.displayName = "SingleDatePicker";
+var RangeDatePicker = forwardRef(
+  ({
+    size = "md",
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    min,
+    max,
+    inputType,
+    inputClasses,
+    ...rest
+  }, ref) => {
+    const rangeProps = rest;
+    const [value, setValue] = useControllableState(
+      rangeProps.value,
+      rangeProps.defaultValue ?? ["", ""],
+      rangeProps.onValueChange
+    );
+    const input = /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id,
+          type: inputType,
+          name: name ? `${name}_start` : void 0,
+          min,
+          max: value[1] || max,
+          value: value[0],
+          disabled,
+          required,
+          onChange: (e) => setValue([e.target.value, value[1]]),
+          className: inputClasses
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "to" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: inputType,
+          name: name ? `${name}_end` : void 0,
+          min: value[0] || min,
+          max,
+          value: value[1],
+          disabled,
+          onChange: (e) => setValue([value[0], e.target.value]),
+          className: inputClasses
+        }
+      )
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: id,
+          size,
+          children: input
+        }
+      );
+    }
+    return input;
+  }
+);
+RangeDatePicker.displayName = "RangeDatePicker";
+var CarouselContext = createContext(null);
+function useCarousel() {
+  const ctx = useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel compound components must be used within <Carousel>");
+  }
+  return ctx;
+}
+function CarouselPanels({ children, className }) {
+  const { activeIndex, registerSlides } = useCarousel();
+  const slides = Children.toArray(children);
+  useEffect(() => {
+    registerSlides(slides.length);
+  }, [slides.length, registerSlides]);
+  return /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
+}
+function CarouselSlide({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children });
+}
+function CarouselControls({
+  className,
+  prevLabel = "\u2190",
+  nextLabel = "\u2192"
+}) {
+  const { prev, next, activeIndex, totalSlides } = useCarousel();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: prev,
+        disabled: activeIndex === 0,
+        className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+        children: prevLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: next,
+        disabled: activeIndex === totalSlides - 1,
+        className: "rounded-lg border px-3 py-1 text-sm disabled:opacity-50 dark:border-zinc-600",
+        children: nextLabel
+      }
+    )
+  ] });
+}
+function CarouselSteps({ className }) {
+  const { activeIndex, totalSlides, goTo } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => goTo(i),
+      className: cn(
+        "h-2 w-2 rounded-full transition-colors",
+        i === activeIndex ? "bg-zinc-800 dark:bg-white" : "bg-zinc-300 dark:bg-zinc-600"
+      ),
+      "aria-label": `Go to slide ${i + 1}`
+    },
+    i
+  )) });
+}
+function CarouselRoot({
+  children,
+  defaultIndex = 0,
+  className
+}) {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const [totalSlides, setTotalSlides] = useState(0);
+  const registerSlides = useCallback((count) => {
+    setTotalSlides(count);
+  }, []);
+  const next = useCallback(
+    () => setActiveIndex((i) => Math.min(i + 1, totalSlides - 1)),
+    [totalSlides]
+  );
+  const prev = useCallback(
+    () => setActiveIndex((i) => Math.max(i - 1, 0)),
+    []
+  );
+  const goTo = useCallback((index) => setActiveIndex(index), []);
+  const ctx = useMemo(
+    () => ({ activeIndex, totalSlides, next, prev, goTo, registerSlides }),
+    [activeIndex, totalSlides, next, prev, goTo, registerSlides]
+  );
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), children }) });
+}
+var Carousel = Object.assign(CarouselRoot, {
+  Panels: CarouselPanels,
+  Slide: CarouselSlide,
+  Controls: CarouselControls,
+  Steps: CarouselSteps
+});
+var DEFAULT_COLORS = [
+  "zinc",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var COLOR_MAP = {
+  zinc: "bg-zinc-500",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500"
+};
+function ColorPicker({
+  value,
+  defaultValue = "blue",
+  onChange,
+  colors = DEFAULT_COLORS,
+  size = "md",
+  className
+}) {
+  const [selected, setSelected] = useControllableState(
+    value,
+    defaultValue,
+    onChange
+  );
+  const swatchSize = { sm: "h-6 w-6", md: "h-8 w-8", lg: "h-10 w-10" }[size];
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: colors.map((color) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        swatchSize,
+        "rounded-full transition-transform",
+        COLOR_MAP[color],
+        selected === color ? "ring-2 ring-offset-2 ring-current scale-110" : "hover:scale-110"
+      ),
+      onClick: () => setSelected(color),
+      "aria-label": color,
+      "aria-pressed": selected === color
+    },
+    color
+  )) });
+}
+function Emoji({ name, emoji, size = "md", className }) {
+  const resolved = emoji ?? (name ? resolve(name) : void 0);
+  if (!resolved) return null;
+  const sizeClass = {
+    sm: "text-base",
+    md: "text-2xl",
+    lg: "text-4xl",
+    xl: "text-6xl"
+  }[size];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": name ?? resolved,
+      className: cn("inline-block leading-none", sizeClass, className),
+      children: resolved
+    }
+  );
+}
+function EmojiSelect({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "Search emojis...",
+  className
+}) {
+  const [selected, setSelected] = useControllableState(
+    value,
+    defaultValue ?? "",
+    onChange
+  );
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const filtered = useMemo(() => {
+    if (!query) return EMOJI_DATA;
+    const results = search(query);
+    return [{ category: "Results", emojis: results }];
+  }, [query]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-2 rounded-lg border border-zinc-300 px-3 py-2 text-sm dark:border-zinc-600",
+        onClick: () => setOpen(!open),
+        children: selected ? /* @__PURE__ */ jsx("span", { className: "text-xl", children: selected }) : /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: "Pick emoji" })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 mt-1 w-72 rounded-lg border border-zinc-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 fancy-fade-in", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: "mb-2 w-full rounded-md border border-zinc-200 px-2 py-1 text-sm dark:border-zinc-600 dark:bg-zinc-700",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: filtered.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-1 py-1 text-xs font-semibold text-zinc-500 uppercase", children: group.category }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", children: group.emojis.map((emoji, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "p-1 text-xl hover:bg-zinc-100 rounded dark:hover:bg-zinc-700",
+            onClick: () => {
+              setSelected(emoji);
+              setOpen(false);
+              setQuery("");
+            },
+            children: emoji
+          },
+          `${emoji}-${i}`
+        )) })
+      ] }, group.category)) })
+    ] })
+  ] });
+}
+var TableContext = createContext(null);
+function useTable() {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error("Table compound components must be used within <Table>");
+  }
+  return ctx;
+}
+function TableHead({ children, className }) {
+  return /* @__PURE__ */ jsx("thead", { className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
+}
+function TableBody({ children, className }) {
+  return /* @__PURE__ */ jsx("tbody", { className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
+}
+function TableRow({ children, className, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+        onClick && "cursor-pointer",
+        className
+      ),
+      onClick,
+      children
+    }
+  );
+}
+function TableCell({ children, className, header }) {
+  const Tag = header ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: cn(
+        "px-4 py-3 text-sm",
+        header && "text-left font-medium text-zinc-500 dark:text-zinc-400",
+        className
+      ),
+      children
+    }
+  );
+}
+function TableColumn({ label, sortKey, className }) {
+  const { sortKey: currentSort, sortDir, toggleSort } = useTable();
+  const isSorted = sortKey && currentSort === sortKey;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "px-4 py-3 text-left text-sm font-medium text-zinc-500 dark:text-zinc-400",
+        sortKey && "cursor-pointer select-none",
+        className
+      ),
+      onClick: sortKey ? () => toggleSort(sortKey) : void 0,
+      children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        label,
+        isSorted && /* @__PURE__ */ jsx("span", { className: "text-xs", children: sortDir === "asc" ? "\u25B2" : "\u25BC" })
+      ] })
+    }
+  );
+}
+function TablePagination({
+  className,
+  total,
+  pageSize = 10
+}) {
+  const { page, setPage } = useTable();
+  const totalPages = Math.ceil(total / pageSize);
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-zinc-500", children: [
+      "Page ",
+      page + 1,
+      " of ",
+      totalPages
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page === 0,
+          onClick: () => setPage(page - 1),
+          className: "rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600",
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: page >= totalPages - 1,
+          onClick: () => setPage(page + 1),
+          className: "rounded border px-2 py-1 disabled:opacity-50 dark:border-zinc-600",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function TableSearch({
+  className,
+  placeholder = "Search..."
+}) {
+  const { searchQuery, setSearchQuery } = useTable();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value: searchQuery,
+      onChange: (e) => setSearchQuery(e.target.value),
+      placeholder,
+      className: cn(
+        "rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-600 dark:bg-zinc-800",
+        className
+      )
+    }
+  );
+}
+function TableTray({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between px-4 py-3", className), children });
+}
+function TableRoot({ children, className }) {
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const [page, setPage] = useState(0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const toggleSort = useCallback(
+    (key) => {
+      if (sortKey === key) {
+        setSortDir((d) => d === "asc" ? "desc" : "asc");
+      } else {
+        setSortKey(key);
+        setSortDir("asc");
+      }
+    },
+    [sortKey]
+  );
+  const ctx = useMemo(
+    () => ({
+      sortKey,
+      sortDir,
+      toggleSort,
+      page,
+      setPage,
+      pageSize: 10,
+      totalRows: 0,
+      searchQuery,
+      setSearchQuery
+    }),
+    [sortKey, sortDir, toggleSort, page, searchQuery]
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700", className), children }) });
+}
+var Table = Object.assign(TableRoot, {
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Cell: TableCell,
+  Column: TableColumn,
+  Pagination: TablePagination,
+  Search: TableSearch,
+  Tray: TableTray
+});
+
+export { Action, Carousel, Checkbox, CheckboxGroup, ColorPicker, DatePicker, EMOJI_DATA, EMOJI_ENTRIES, Emoji, EmojiSelect, Field, Input, RadioGroup, Select, Slider, Switch, Table, Textarea, cn, find, resolve, search, useCarousel, useControllableState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map