{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suggestions",
  "title": "Suggestions",
  "description": "Starter prompts as a scrolling row of pills, for an empty chat.",
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json",
    "https://constella.aayush.cv/r/button.json",
    "https://constella.aayush.cv/r/scroll-area.json",
    "https://constella.aayush.cv/r/scroll-fade.json"
  ],
  "files": [
    {
      "path": "src/components/ai/suggestions.tsx",
      "content": "\"use client\";\n\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/primitives/button\";\nimport { ScrollArea } from \"@/components/primitives/scroll-area\";\nimport { scrollFade } from \"@/lib/constella/scroll-fade\";\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { space } from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst styles = stylex.create({\n  list: {\n    display: \"flex\",\n    gap: space.xs,\n    // Room for the focus ring, which the viewport would clip.\n    paddingBlockStart: space.xxs,\n    paddingBlockEnd: space.xxs,\n    paddingInlineStart: space.xxs,\n    paddingInlineEnd: space.xxs,\n    width: \"max-content\",\n  },\n});\n\n/** A row that scrolls sideways with no scrollbar; its edges fade while there's more. */\nfunction Suggestions({ sx, ...props }: Styled<ComponentProps<\"div\">>) {\n  return (\n    <ScrollArea viewportSx={scrollFade.x}>\n      <div\n        data-slot=\"suggestions\"\n        // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a fieldset brings its own border and padding into a flex row\n        role=\"group\"\n        {...props}\n        {...stylex.props(styles.list, sx)}\n      />\n    </ScrollArea>\n  );\n}\n\ntype SuggestionProps = Omit<ComponentProps<typeof Button>, \"onClick\"> & {\n  onClick?: (suggestion: string) => void;\n  suggestion: string;\n};\n\n/** Shows `suggestion` unless given children, and passes it to `onClick`. */\nfunction Suggestion({\n  children,\n  onClick,\n  size = \"sm\",\n  suggestion,\n  variant = \"outline\",\n  ...props\n}: SuggestionProps) {\n  return (\n    <Button\n      onClick={() => {\n        onClick?.(suggestion);\n      }}\n      size={size}\n      variant={variant}\n      {...props}\n    >\n      {children ?? suggestion}\n    </Button>\n  );\n}\n\nexport { Suggestion, Suggestions };\nexport type { SuggestionProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/suggestions/index.md",
  "type": "registry:ui"
}