{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suggestions",
  "title": "Suggestions",
  "description": "Follow-up prompt chips that scroll sideways on small screens.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/suggestions.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { enterChildren, motionScale } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\n/** A row of follow-up prompts that scrolls sideways on small screens, fading at the edges; chips arrive in a stagger. */\nfunction Suggestions({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (el && motionScale(el)) enterChildren(el.children, { opacity: 0, y: 6 }, { stagger: 0.05, duration: 0.3 });\n  }, []);\n  return (\n    <div\n      ref={ref}\n      data-slot=\"suggestions\"\n      className={cn(\"flex gap-2 overflow-x-auto pb-1 [mask-image:linear-gradient(to_right,black_calc(100%-24px),transparent)] [scrollbar-width:none]\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Suggestion({ className, children, ...props }: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"suggestion\"\n      className={cn(\n        \"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border border-border bg-card px-3.5 text-sm whitespace-nowrap shadow-control outline-none transition-[background-color,border-color,scale] duration-150 hover:border-foreground/20 hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.97] [&_svg]:size-3.5 [&_svg]:text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport { Suggestions, Suggestion };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/suggestions",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}