, 'children'> {\n /** The highest score. The scores run from 1 to this. Default 5. */\n max?: number;\n /** Called with the score that was pressed. */\n onValueChange?: (value: number) => void;\n /** The word under the lowest score. */\n startLabel?: ReactNode;\n /** The word under the highest score. */\n endLabel?: ReactNode;\n /**\n * The least height it takes, in pixels. Match the field's `minHeight` on the\n * step that follows, so the dialog keeps its size between the two.\n */\n minHeight?: number;\n}\n\n/**\n * A row of round buttons, one per score, with a word under each end. Use it\n * as the first step of a dialog, and ask for the words once a score is in.\n */\nfunction FeedbackRating({\n max = 5,\n onValueChange,\n startLabel,\n endLabel,\n minHeight,\n className,\n style,\n render,\n ...props\n}: FeedbackRatingProps & RenderProp<'div'>) {\n const slots = feedbackVariants();\n return useRender({\n defaultTagName: 'div',\n render,\n props: mergeProps(\n {\n className: slots.rating({ className }),\n style: { minHeight, ...style },\n children: (\n <>\n \n {Array.from({ length: max }, (_, index) => index + 1).map((value) => (\n onValueChange?.(value)}\n className={slots.ratingScore()}\n >\n {value}\n \n ))}\n
\n {startLabel !== undefined || endLabel !== undefined ? (\n \n {startLabel}\n {endLabel}\n
\n ) : null}\n \n ),\n },\n props\n ),\n });\n}\nFeedbackRating.displayName = 'Feedback.Rating';\n\nexport interface FeedbackFooterProps extends ComponentProps<'div'> {}\n\n/** The action row, in the band under the panel. */\nfunction FeedbackFooter({ className, render, ...props }: FeedbackFooterProps & RenderProp<'div'>) {\n const slots = feedbackVariants();\n return useRender({\n defaultTagName: 'div',\n render,\n props: mergeProps({ className: slots.footer({ className }) }, props),\n });\n}\nFeedbackFooter.displayName = 'Feedback.Footer';\n\nexport interface FeedbackActionProps extends ComponentProps<'button'> {}\n\n/** Discards and closes. Call `preventDefault` in `onClick` to keep it open. */\nfunction FeedbackCancel({\n children = 'Cancel',\n className,\n disabled,\n onClick,\n render,\n ...props\n}: FeedbackActionProps & RenderProp<'button'>) {\n const { setOpen } = useFeedback('Feedback.Cancel');\n const slots = feedbackVariants({ tone: 'cancel', disabled: !!disabled });\n return useRender({\n defaultTagName: 'button',\n render,\n props: mergeProps(\n {\n type: 'button',\n disabled: disabled,\n className: slots.action({ className }),\n onClick: (event: ReactTypes.MouseEvent) => {\n onClick?.(event);\n if (!event.defaultPrevented) setOpen(false);\n },\n children: <>{children},\n },\n props\n ),\n });\n}\nFeedbackCancel.displayName = 'Feedback.Cancel';\n\nexport interface FeedbackSubmitProps extends Omit {\n /**\n * Called with the message. The dialog stays open: close it yourself once\n * the message has been sent, so a failure still has somewhere to be shown.\n */\n onSubmit?: (value: string) => void;\n}\n\n/** Sends. Inert while the field is empty, unless `disabled` says otherwise. */\nfunction FeedbackSubmit({\n children = 'Submit',\n className,\n disabled,\n onClick,\n onSubmit,\n render,\n ...props\n}: FeedbackSubmitProps & RenderProp<'button'>) {\n const feedback = useFeedback('Feedback.Submit');\n // Empty feedback is worse than none: it is sent by somebody who believes\n // they said something.\n const inert = disabled ?? feedback.value.trim().length === 0;\n const slots = feedbackVariants({ tone: 'submit', disabled: inert });\n\n // What the field's shortcut calls. Kept current on every render, so it\n // sends what is in the field now and not what was there when it mounted.\n feedback.submit.current = inert ? null : () => onSubmit?.(feedback.value);\n\n return useRender({\n defaultTagName: 'button',\n render,\n props: mergeProps(\n {\n type: 'button',\n disabled: inert,\n className: slots.action({ className }),\n onClick: (event: ReactTypes.MouseEvent) => {\n onClick?.(event);\n if (!event.defaultPrevented) onSubmit?.(feedback.value);\n },\n children: <>{children},\n },\n props\n ),\n });\n}\nFeedbackSubmit.displayName = 'Feedback.Submit';\n\nexport const Feedback = Object.assign(FeedbackRoot, {\n Trigger: FeedbackTrigger,\n Content: FeedbackContent,\n Panel: FeedbackPanel,\n Title: FeedbackTitle,\n Close: FeedbackClose,\n Field: FeedbackField,\n Description: FeedbackDescription,\n Message: FeedbackMessage,\n Rating: FeedbackRating,\n Footer: FeedbackFooter,\n Cancel: FeedbackCancel,\n Submit: FeedbackSubmit,\n});\n\n/* The parts by name, for a Server Component, which cannot dot into a client\n module. `` there is `` everywhere else. */\nexport {\n FeedbackTrigger,\n FeedbackContent,\n FeedbackPanel,\n FeedbackTitle,\n FeedbackClose,\n FeedbackField,\n FeedbackDescription,\n FeedbackMessage,\n FeedbackRating,\n FeedbackFooter,\n FeedbackCancel,\n FeedbackSubmit,\n};\n"
}
]
}