{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-emoji-picker-1","type":"registry:block","title":"Inline emoji picker","description":"The full picker inline on a card: search, category tabs, the grid and a footer with the preview and skin tone.","dependencies":[],"registryDependencies":["card","@reui/emoji-picker"],"files":[{"path":"c-emoji-picker-1.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  EmojiPicker,\n  EmojiPickerPanel,\n} from \"@/components/reui/emoji-picker\"\n\nimport { Card } from \"@/components/ui/card\"\n\nexport function Pattern() {\n  // Controlled, as an inline picker usually feeds a form. Nothing echoes it:\n  // the footer preview falls back to it and the panel announces each pick.\n  const [value, setValue] = useState<string | null>(null)\n\n  return (\n    // Card has no flush size, so `py-0` keeps its padding off the panel's own\n    // insets; `w-fit` hugs the panel when the parent is not a flex row.\n    <Card className=\"w-fit py-0\">\n      <EmojiPicker value={value} onValueChange={setValue}>\n        <EmojiPickerPanel />\n      </EmojiPicker>\n    </Card>\n  )\n}","target":"components/examples/c-emoji-picker-1.tsx"}],"meta":{"order":1,"label":"Inline"}}