{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feedback",
  "title": "Feedback",
  "description": "Thumbs up or down, then an optional comment.",
  "registryDependencies": [
    "https://creance.pages.dev/r/button.json",
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/textarea.json"
  ],
  "files": [
    {
      "path": "feedback/Feedback.css",
      "content": ".cr-feedback {\n  display: grid;\n  gap: var(--cr-space-4);\n  margin: 0;\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n}\n\n.cr-feedback__row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--cr-space-3);\n}\n\n.cr-feedback__question {\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-feedback__thumb {\n  display: grid;\n  place-items: center;\n  width: var(--cr-control-height-sm);\n  height: var(--cr-control-height-sm);\n  border: 1px solid var(--cr-color-glass-edge);\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-glass-control);\n  color: var(--cr-color-text-default);\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.cr-feedback__thumb[data-down] .cr-icon {\n  transform: rotate(180deg);\n}\n\n.cr-feedback__thumb[aria-pressed='true'] {\n  border-color: transparent;\n  background: var(--cr-color-ink-bg);\n  color: var(--cr-color-ink-fg);\n}\n\n.cr-feedback__thumb:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-feedback__more {\n  display: grid;\n  gap: var(--cr-space-2);\n}\n\n.cr-feedback__label {\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-feedback__actions {\n  display: flex;\n  gap: var(--cr-space-2);\n  margin-top: var(--cr-space-1);\n}\n\n.cr-feedback__thanks {\n  color: var(--cr-color-text-secondary);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/feedback/Feedback.css"
    },
    {
      "path": "feedback/Feedback.tsx",
      "content": "'use client';\n\nimport { useId, useRef, useState, type ReactNode } from 'react';\nimport { Button } from '@/components/creance/button/Button';\nimport { Textarea } from '@/components/creance/textarea/Textarea';\nimport { cx } from '@/lib/creance/cx';\nimport { ThumbIcon } from '@/lib/creance/icons';\nimport './Feedback.css';\n\nexport type FeedbackRating = 'up' | 'down';\n\nexport interface FeedbackProps {\n  /** Default \"Was this useful?\" */\n  question?: ReactNode;\n  /** Label of the comment box, per rating. */\n  commentLabel?: (rating: FeedbackRating) => ReactNode;\n  onSubmit: (feedback: { rating: FeedbackRating; comment: string }) => void;\n  /** Shown after sending. Default \"Thanks for the feedback.\" */\n  thanks?: ReactNode;\n  className?: string;\n}\n\n/** Thumbs up or down, then an optional comment. Sends nothing until the person presses Send. */\nexport function Feedback({\n  question = 'Was this useful?',\n  commentLabel = (r) => (r === 'up' ? 'What worked?' : 'What went wrong?'),\n  onSubmit,\n  thanks = 'Thanks for the feedback.',\n  className,\n}: FeedbackProps) {\n  const qId = useId();\n  const [rating, setRating] = useState<FeedbackRating | null>(null);\n  const [comment, setComment] = useState('');\n  const [sent, setSent] = useState(false);\n  const box = useRef<HTMLTextAreaElement>(null);\n\n  if (sent) {\n    return (\n      <p role=\"status\" className={cx('cr-feedback cr-feedback__thanks', className)}>\n        {thanks}\n      </p>\n    );\n  }\n\n  const choose = (r: FeedbackRating) => {\n    setRating(r);\n    requestAnimationFrame(() => box.current?.focus());\n  };\n\n  return (\n    <form\n      className={cx('cr-feedback', className)}\n      aria-labelledby={qId}\n      onSubmit={(e) => {\n        e.preventDefault();\n        if (!rating) return;\n        onSubmit({ rating, comment: comment.trim() });\n        setSent(true);\n      }}\n    >\n      <div className=\"cr-feedback__row\">\n        <span id={qId} className=\"cr-feedback__question\">\n          {question}\n        </span>\n        <button type=\"button\" className=\"cr-feedback__thumb\" aria-label=\"Useful\" aria-pressed={rating === 'up'} onClick={() => choose('up')}>\n          <ThumbIcon />\n        </button>\n        <button\n          type=\"button\"\n          className=\"cr-feedback__thumb\"\n          data-down=\"\"\n          aria-label=\"Not useful\"\n          aria-pressed={rating === 'down'}\n          onClick={() => choose('down')}\n        >\n          <ThumbIcon />\n        </button>\n      </div>\n      {rating && (\n        <div className=\"cr-feedback__more\">\n          <label className=\"cr-feedback__label\" htmlFor={`${qId}-comment`}>\n            {commentLabel(rating)}\n          </label>\n          <Textarea ref={box} id={`${qId}-comment`} rows={3} value={comment} onChange={(e) => setComment(e.currentTarget.value)} />\n          <div className=\"cr-feedback__actions\">\n            <Button type=\"submit\" variant=\"primary\">\n              Send feedback\n            </Button>\n            <Button\n              variant=\"ghost\"\n              onClick={() => {\n                setRating(null);\n                setComment('');\n              }}\n            >\n              Cancel\n            </Button>\n          </div>\n        </div>\n      )}\n    </form>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/feedback/Feedback.tsx"
    }
  ],
  "categories": [
    "molecule",
    "forms"
  ],
  "type": "registry:ui"
}