{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emoji-icon-picker",
  "type": "registry:ui",
  "title": "Emoji Icon Picker",
  "description": "Emoji and icon selection in one popover with an animated height between panels.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json",
    "https://control-ui.dev/r/emoji-picker.json",
    "https://control-ui.dev/r/icon-picker.json",
    "https://control-ui.dev/r/popover.json",
    "https://control-ui.dev/r/tabs.json"
  ],
  "files": [
    {
      "path": "src/registry/sources/control-ui/recipes/tabs.css",
      "target": "@components/control-ui/styles/recipes/tabs.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"tabs\"][data-slot=\"root\"]) {\n    position: relative;\n    --cui-tabs-trigger-radius: var(--radius-control);\n    --cui-tabs-list-padding: calc(var(--spacing) * 1);\n    --cui-tabs-list-radius: calc(\n      var(--cui-tabs-trigger-radius) +\n      clamp(0px, calc(var(--cui-tabs-trigger-radius) * 1000), var(--cui-tabs-list-padding))\n    );\n    --cui-tabs-list-background: var(--hover-fill);\n    --cui-tabs-list-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-inset);\n    --cui-tabs-list-backdrop-filter: none;\n    --cui-tabs-indicator-background: var(--background);\n    --cui-tabs-foreground: var(--muted-foreground);\n    --cui-tabs-active-foreground: var(--foreground);\n    --cui-tabs-hover-foreground: var(--foreground);\n    --cui-tabs-indicator-shadow: var(--shadow-sm);\n    --cui-tabs-border-color: var(--border);\n    --cui-tabs-border-width: var(--control-rim-width);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"root\"][data-orientation=\"vertical\"]) {\n    display: flex;\n    gap: calc(var(--spacing) * 4);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"]) {\n    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));\n    position: relative;\n    display: flex;\n    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));\n    width: fit-content;\n    align-items: center;\n    gap: calc(var(--spacing) * 1);\n    border-radius: min(var(--cui-tabs-list-radius), calc(var(--_tabs-trigger-h) / 2 + var(--cui-tabs-list-padding)));\n    background: var(--cui-tabs-list-background);\n    box-shadow: var(--cui-tabs-list-shadow);\n    padding: var(--cui-tabs-list-padding);\n    -webkit-backdrop-filter: var(--cui-tabs-list-backdrop-filter);\n    backdrop-filter: var(--cui-tabs-list-backdrop-filter);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"indicator\"]) {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    z-index: 0;\n    height: var(--_tabs-trigger-h);\n    width: var(--active-tab-width);\n    transform: translateX(var(--active-tab-left)) translateY(-50%);\n    border-radius: var(--_tabs-trigger-radius-fit);\n    background: var(--cui-tabs-indicator-background);\n    box-shadow: var(--cui-tabs-indicator-shadow);\n    /* Compositor transforms tear the strip while its width resizes. */\n    transition:\n      width var(--duration-base) var(--ease-standard),\n      left var(--duration-base) var(--ease-standard),\n      transform var(--duration-base) var(--ease-standard),\n      background-color var(--duration-fast) var(--ease-standard),\n      box-shadow var(--duration-fast) var(--ease-standard);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-orientation=\"vertical\"]) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-orientation=\"vertical\"] [data-slot=\"indicator\"]) {\n    top: 0;\n    height: var(--active-tab-height);\n    transform: translate(var(--active-tab-left), var(--active-tab-top));\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"tab\"]) {\n    position: relative;\n    z-index: 1;\n    display: inline-flex;\n    height: var(--_tabs-trigger-h);\n    flex-shrink: 0;\n    cursor: pointer;\n    align-items: center;\n    justify-content: center;\n    gap: calc(var(--spacing) * 1.5);\n    white-space: nowrap;\n    border-radius: var(--_tabs-trigger-radius-fit);\n    padding-inline: calc(var(--spacing) * 3.5);\n    color: var(--cui-tabs-foreground);\n    font-size: var(--text-label);\n    font-weight: var(--font-weight-medium);\n  }\n\n  @media (hover: hover) {\n    :where([data-control-family=\"tabs\"][data-slot=\"tab\"]:hover:not([data-disabled])) {\n      color: var(--cui-tabs-hover-foreground);\n    }\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"tab\"]:is([aria-selected=\"true\"], [data-active])) {\n    color: var(--cui-tabs-active-foreground);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"tab\"][data-disabled]) {\n    cursor: not-allowed;\n    opacity: var(--disabled-opacity);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"]) {\n    --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));\n    --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--radius-panel));\n    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));\n    width: auto;\n    align-items: flex-end;\n    isolation: isolate;\n    z-index: 1;\n    --cui-tabs-list-background: transparent;\n    --cui-tabs-list-shadow: inset 0 -1px 0 var(--cui-tabs-border-color);\n    --cui-tabs-indicator-background: var(--background);\n    --cui-tabs-active-foreground: var(--foreground);\n    border-radius: var(--cui-tabs-list-radius) var(--cui-tabs-list-radius) 0 0;\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"] [data-slot=\"indicator\"]) {\n    --_tabs-browser-indicator-width: calc(var(--active-tab-width) + var(--_tabs-browser-corner-double));\n    --_tabs-browser-indicator-x: calc(var(--active-tab-left) - var(--_tabs-trigger-radius-fit));\n    background: none;\n    box-shadow: none;\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"] [data-slot=\"indicator\"])::before {\n    content: \"\";\n    position: absolute;\n    inset: 0 var(--_tabs-trigger-radius-fit);\n    border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);\n    border-bottom: none;\n    border-radius: var(--_tabs-trigger-radius-fit) var(--_tabs-trigger-radius-fit) 0 0;\n    background: var(--cui-tabs-indicator-background);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"] [data-slot=\"indicator\"])::after {\n    content: \"\";\n    position: absolute;\n    inset: auto 0 0;\n    height: var(--_tabs-trigger-radius-fit);\n    background:\n      radial-gradient(\n        circle at 0 -1px,\n        transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),\n        var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),\n        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)\n      )\n      left / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,\n      radial-gradient(\n        circle at 100% -1px,\n        transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),\n        var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),\n        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)\n      )\n      right / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,\n      linear-gradient(var(--cui-tabs-indicator-background) 0 0) center / calc(100% - var(--_tabs-browser-corner-double)) 100% no-repeat;\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-single=\"true\"]) {\n    min-height: auto;\n    gap: 0;\n    border-radius: 0;\n    background: transparent;\n    padding: 0;\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-single=\"true\"] [data-slot=\"tab\"]) {\n    height: auto;\n    cursor: default;\n    border-radius: 0;\n    padding-inline: 0;\n    color: var(--muted-foreground);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"panel\"]) {\n    outline-style: none;\n  }\n\n  @supports ((anchor-name: --aui-slide-panel) and (anchor-scope: --aui-slide-panel)) {\n    :where([data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-slide-exiting][data-ending-style]) {\n      display: block;\n      position: absolute;\n      top: var(--_tabs-panel-top);\n      left: var(--_tabs-panel-left);\n      right: auto;\n      bottom: auto;\n      width: var(--_tabs-panel-width);\n      height: var(--_tabs-panel-height);\n      margin: 0;\n      overflow: clip;\n      animation: aui-slide-exit-hold var(--duration-slow) var(--ease-emphasized) both;\n    }\n\n    @supports (height: anchor-size(height)) {\n      :where([data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-slide-exiting][data-ending-style]) {\n        height: anchor-size(height);\n      }\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-ending-style][data-activation-direction=\"right\"]\n      ) {\n      translate: -100% 0;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-ending-style][data-activation-direction=\"left\"]\n      ) {\n      translate: 100% 0;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-ending-style][data-activation-direction=\"down\"]\n      ) {\n      translate: 0 -100%;\n    }\n\n    :where([data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][inert][data-ending-style][data-activation-direction=\"up\"]) {\n      translate: 0 100%;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"root\"]:has(> [data-slot=\"panel\"][data-starting-style])\n          > [data-slot=\"panel\"][inert][data-ending-style]\n      ) {\n      translate: 0 0;\n      transition: none;\n    }\n\n    :where([data-control-family=\"tabs\"][data-slot=\"panel\"][data-slide=\"panel\"][data-starting-style]) {\n      transition: none;\n    }\n\n    :where([data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting] > [data-slot=\"panel\"][data-slide=\"panel\"]) {\n      transition: none;\n    }\n\n    :where([data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting] > [data-slot=\"panel\"][inert]) {\n      translate: 0 0;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting]\n          > [data-slot=\"panel\"]:not([inert])[data-activation-direction=\"right\"]\n      ) {\n      translate: 100% 0;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting]\n          > [data-slot=\"panel\"]:not([inert])[data-activation-direction=\"left\"]\n      ) {\n      translate: -100% 0;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting]\n          > [data-slot=\"panel\"]:not([inert])[data-activation-direction=\"down\"]\n      ) {\n      translate: 0 100%;\n    }\n\n    :where(\n        [data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting]\n          > [data-slot=\"panel\"]:not([inert])[data-activation-direction=\"up\"]\n      ) {\n      translate: 0 -100%;\n    }\n\n    @supports (height: calc-size(auto, size)) {\n      :where([data-control-family=\"tabs\"][data-slot=\"root\"][data-slide-starting] > [data-slot=\"panel\"][data-slide=\"panel\"]:not([inert])) {\n        height: var(--aui-slide-prev-height, calc-size(auto, size));\n      }\n    }\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"root\"][data-orientation=\"vertical\"] > [data-slot=\"panel\"]) {\n    min-width: 0;\n    flex: 1;\n  }\n\n  :where(\n    [data-control-family=\"tabs\"][data-slot=\"list\"][data-orientation=\"horizontal\"]:not([data-variant=\"browser\"]) ~ [data-slot=\"panel\"]\n  ) {\n    margin-block-start: calc(var(--spacing) * 3);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"] ~ [data-slot=\"panel\"]) {\n    border: var(--cui-tabs-border-width) solid var(--cui-tabs-border-color);\n    border-top: none;\n    border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n    background: var(--cui-tabs-indicator-background);\n    padding: calc(var(--spacing) * 4);\n  }\n\n  :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-variant=\"browser\"] [data-control-family=\"tabs\"][data-slot=\"tab\"]) {\n    border-top-left-radius: var(--_tabs-trigger-radius-fit);\n    border-top-right-radius: var(--_tabs-trigger-radius-fit);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  @media (pointer: coarse) {\n    :where([data-control-family=\"tabs\"][data-slot=\"list\"]:not([data-single=\"true\"]) [data-slot=\"tab\"])::after {\n      content: \"\";\n      position: absolute;\n      inset: 50% 50%;\n      translate: -50% -50%;\n      inline-size: 100%;\n      block-size: max(100%, var(--touch-target));\n    }\n\n    :where([data-control-family=\"tabs\"][data-slot=\"list\"][data-orientation=\"vertical\"]:not([data-single=\"true\"]) [data-slot=\"tab\"])::after {\n      inline-size: max(100%, var(--touch-target));\n      block-size: 100%;\n    }\n  }\n}\n\n@property --cui-tabs-trigger-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-tabs-list-padding {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-tabs-list-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-tabs-list-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-list-backdrop-filter {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n\n@property --cui-tabs-indicator-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-active-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-hover-foreground {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-indicator-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n\n@property --cui-tabs-list-shadow {\n  syntax: \"*\";\n  inherits: true;\n}\n\n@property --cui-tabs-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-tabs-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/emoji-icon-picker.tsx",
      "target": "@components/control-ui/ui/emoji-icon-picker.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { EmojiPicker } from \"@/components/control-ui/ui/emoji-picker\";\nimport { IconPicker } from \"@/components/control-ui/ui/icon-picker\";\nimport { PopoverViewport } from \"@/components/control-ui/ui/popover\";\nimport { Tabs, TabsList, TabsPanel, TabsTab } from \"@/components/control-ui/ui/tabs\";\n\nexport function EmojiIconPicker({ children, defaultValue = \"emoji\", ...props }: ComponentProps<typeof Tabs<\"emoji\" | \"icons\">>) {\n  return (\n    <Tabs data-control-ui=\"emoji-icon-picker\" data-control-family=\"tabs\" data-slot=\"root\" defaultValue={defaultValue} {...props}>\n      <PopoverViewport>{children}</PopoverViewport>\n    </Tabs>\n  );\n}\n\nexport function EmojiIconPickerTabs({\n  emojiLabel = \"Emoji\",\n  iconsLabel = \"Icons\",\n  ...props\n}: Omit<ComponentProps<typeof TabsList>, \"children\"> & { emojiLabel?: string; iconsLabel?: string }) {\n  return (\n    <TabsList size=\"xs\" className=\"mx-2 mt-2\" aria-label=\"Choose emoji or icon\" {...props}>\n      <TabsTab value=\"emoji\">{emojiLabel}</TabsTab>\n      <TabsTab value=\"icons\">{iconsLabel}</TabsTab>\n    </TabsList>\n  );\n}\n\nexport function EmojiIconPickerEmoji(props: ComponentProps<typeof EmojiPicker>) {\n  return (\n    <TabsPanel value=\"emoji\" data-slide={undefined} className=\"mt-0\">\n      <EmojiPicker {...props} />\n    </TabsPanel>\n  );\n}\n\nexport function EmojiIconPickerIcons(props: ComponentProps<typeof IconPicker>) {\n  return (\n    <TabsPanel value=\"icons\" data-slide={undefined} className=\"mt-0\">\n      <IconPicker {...props} />\n    </TabsPanel>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/tabs.css\"": {}
  }
}