{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "action-bar",
  "title": "Action Bar",
  "description": "Icon toolbar whose labels appear on hover or focus; saves room in dense headers.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/action-bar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { springOrInstant } from \"@/lib/motion\"\n\ntype ActionBarItem = {\n  id: string\n  label: string\n  icon: React.ReactNode\n  onClick?: () => void\n  /** Small counter shown next to the icon, e.g. drafts waiting. */\n  badge?: number\n  /** \"solid\" is the one main action of the bar. Use at most once. */\n  variant?: \"ghost\" | \"solid\"\n  disabled?: boolean\n}\n\ntype ActionBarProps = {\n  items: ActionBarItem[]\n  /** Accessible name of the toolbar. */\n  label: string\n  className?: string\n}\n\n/** Icon toolbar whose labels open on hover or keyboard focus. Saves room in dense headers. */\nfunction ActionBar({ items, label, className }: ActionBarProps) {\n  const [expanded, setExpanded] = React.useState(false)\n  const [hovered, setHovered] = React.useState<string | null>(null)\n  const reduce = useReducedMotion()\n  const groupId = React.useId()\n  const collapseTimer = React.useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  function open() {\n    clearTimeout(collapseTimer.current)\n    setExpanded(true)\n  }\n\n  function scheduleClose() {\n    clearTimeout(collapseTimer.current)\n    collapseTimer.current = setTimeout(() => {\n      setExpanded(false)\n      setHovered(null)\n    }, 90)\n  }\n\n  React.useEffect(() => () => clearTimeout(collapseTimer.current), [])\n\n  return (\n    <LayoutGroup id={groupId}>\n      <div\n        role=\"toolbar\"\n        aria-label={label}\n        data-slot=\"action-bar\"\n        onPointerEnter={open}\n        onPointerLeave={scheduleClose}\n        onFocus={open}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) scheduleClose()\n        }}\n        className={cn(\n          \"inline-flex h-9 w-fit max-w-full items-center gap-0.5 overflow-x-auto rounded-lg bg-foreground/[0.05] p-[3px] shadow-[inset_0_1px_2px_0_var(--shade-1)] [scrollbar-width:none]\",\n          className\n        )}\n      >\n        {items.map((item) => {\n          const solid = item.variant === \"solid\"\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-label={item.badge ? `${item.label} (${item.badge})` : item.label}\n              disabled={item.disabled}\n              onClick={item.onClick}\n              onPointerEnter={() => setHovered(item.id)}\n              onFocus={() => setHovered(item.id)}\n              className={cn(\n                \"group/action relative isolate inline-flex h-[30px] min-w-[30px] shrink-0 items-center justify-center rounded-md px-[8px] text-[13px] font-medium whitespace-nowrap outline-none transition-[color,scale] duration-150 ease-out focus-visible:ring-3 focus-visible:ring-ring/30 active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:size-3.5 [&_svg]:shrink-0\",\n                solid\n                  ? \"bg-(--c) bg-linear-to-b from-white/14 to-transparent text-(--c-fg) shadow-solid [--c-fg:var(--neutral-foreground)] [--c:var(--neutral)] hover:shadow-solid-hover\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n            >\n              {!solid && hovered === item.id && (\n                <motion.span\n                  layoutId=\"action-bar-highlight\"\n                  aria-hidden\n                  transition={springOrInstant(reduce)}\n                  className=\"absolute inset-0 -z-10 rounded-md bg-card shadow-raised\"\n                />\n              )}\n              {item.icon}\n              <motion.span\n                aria-hidden={!expanded}\n                initial={false}\n                animate={{\n                  width: expanded ? \"auto\" : 0,\n                  opacity: expanded ? 1 : 0,\n                  x: expanded ? 0 : -4,\n                  marginLeft: expanded ? 6 : 0,\n                  filter: expanded ? \"blur(0px)\" : \"blur(3px)\",\n                }}\n                transition={springOrInstant(reduce)}\n                className=\"overflow-hidden\"\n              >\n                {item.label}\n              </motion.span>\n              {item.badge ? (\n                <span\n                  className={cn(\n                    \"flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] tabular-nums transition-[margin] duration-150\",\n                    solid ? \"ml-1.5 bg-white/20\" : \"ml-1.5 bg-foreground text-background\"\n                  )}\n                >\n                  {item.badge}\n                </span>\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n    </LayoutGroup>\n  )\n}\n\nexport { ActionBar, type ActionBarItem, type ActionBarProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/action-bar.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/action-bar",
  "categories": [
    "navigation"
  ],
  "type": "registry:component"
}