50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T59c,.cr-feedback { display: grid; gap: var(--cr-space-4); margin: 0; color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-feedback__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-space-3); } .cr-feedback__question { font-weight: var(--cr-font-weight-semibold); } .cr-feedback__thumb { display: grid; place-items: center; width: var(--cr-control-height-sm); height: var(--cr-control-height-sm); border: 1px solid var(--cr-color-glass-edge); border-radius: var(--cr-radius-full); background: var(--cr-color-glass-control); color: var(--cr-color-text-default); font-size: 16px; cursor: pointer; } .cr-feedback__thumb[data-down] .cr-icon { transform: rotate(180deg); } .cr-feedback__thumb[aria-pressed='true'] { border-color: transparent; background: var(--cr-color-ink-bg); color: var(--cr-color-ink-fg); } .cr-feedback__thumb:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-feedback__more { display: grid; gap: var(--cr-space-2); } .cr-feedback__label { font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-feedback__actions { display: flex; gap: var(--cr-space-2); margin-top: var(--cr-space-1); } .cr-feedback__thanks { color: var(--cr-color-text-secondary); } 53:Tc88,'use client'; import { useId, useRef, useState, type ReactNode } from 'react'; import { Button } from '@/components/creance/button/Button'; import { Textarea } from '@/components/creance/textarea/Textarea'; import { cx } from '@/lib/creance/cx'; import { ThumbIcon } from '@/lib/creance/icons'; import './Feedback.css'; export type FeedbackRating = 'up' | 'down'; export interface FeedbackProps { /** Default "Was this useful?" */ question?: ReactNode; /** Label of the comment box, per rating. */ commentLabel?: (rating: FeedbackRating) => ReactNode; onSubmit: (feedback: { rating: FeedbackRating; comment: string }) => void; /** Shown after sending. Default "Thanks for the feedback." */ thanks?: ReactNode; className?: string; } /** Thumbs up or down, then an optional comment. Sends nothing until the person presses Send. */ export function Feedback({ question = 'Was this useful?', commentLabel = (r) => (r === 'up' ? 'What worked?' : 'What went wrong?'), onSubmit, thanks = 'Thanks for the feedback.', className, }: FeedbackProps) { const qId = useId(); const [rating, setRating] = useState(null); const [comment, setComment] = useState(''); const [sent, setSent] = useState(false); const box = useRef(null); if (sent) { return (

{thanks}

); } const choose = (r: FeedbackRating) => { setRating(r); requestAnimationFrame(() => box.current?.focus()); }; return (

{ e.preventDefault(); if (!rating) return; onSubmit({ rating, comment: comment.trim() }); setSent(true); }} >

{question}

{rating && (

{commentLabel(rating)}

setComment(e.currentTarget.value)} />
          <div className="cr-feedback__actions">
            <Button type="submit" variant="primary">
              Send feedback
            </Button>
            <Button
              variant="ghost"
              onClick={() => {
                setRating(null);
                setComment('');
              }}
            >
              Cancel
            </Button>
          </div>
        </div>
      )}
    </form>
  );
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/textarea.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"feedback/Feedback.css","content":"$52","type":"registry:file","target":"@components/creance/feedback/Feedback.css"},{"path":"feedback/Feedback.tsx","content":"$53","type":"registry:ui","target":"@components/creance/feedback/Feedback.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>