52: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"] 53: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"] 54:T22d3,'use client'; import { Angry, Frown, Laugh, Meh, Smile } from 'lucide-react'; import { ComponentProps, FormEvent, ReactNode, useCallback, useId, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Input, InputMessage } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '@/components/ui/modal'; import { Textarea } from '@/components/ui/textarea'; import { Body3, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G feedback widget: a vertical tab pinned to the right edge opening a form * with a five-point rating, a message and a character counter. * * The kit draws the rating as illustrated yellow emoji. Those would be image * assets a registry component cannot ship, and they cannot be recoloured or * themed, so this uses the matching line faces instead. */ const RATINGS = [ { value: 1, label: 'Very dissatisfied', Icon: Angry }, { value: 2, label: 'Dissatisfied', Icon: Frown }, { value: 3, label: 'Neutral', Icon: Meh }, { value: 4, label: 'Satisfied', Icon: Smile }, { value: 5, label: 'Very satisfied', Icon: Laugh }, ] as const; interface IFeedbackRatingProps { value: number | null; onChange: (value: number) => void; className?: string; } /** * Five-point rating scale. * * A radio group rather than five buttons, so arrow keys move between options * and a screen reader announces "3 of 5" instead of five unrelated controls. */ function FeedbackRating({ value, onChange, className }: IFeedbackRatingProps) { return (

{RATINGS.map(({ value: option, label, Icon }) => ( ))}

); } /** One face in the scale. Split out so its handler is stable. */ function FeedbackRatingOption({ option, label, Icon, selected, onChange, }: { option: number; label: string; Icon: typeof Angry; selected: boolean; onChange: (value: number) => void; }) { const handleClick = useCallback(() => onChange(option), [onChange, option]); return ( ); } interface IFeedbackValue { name: string; email: string; rating: number | null; message: string; } interface IFeedbackWidgetProps extends Omit, 'onSubmit' | 'children'> { onSubmit: (value: IFeedbackValue) => void | Promise; title?: string; description?: string; maxLength?: number; /** Replaces the tab label. */ triggerLabel?: string; footer?: ReactNode; } /** * Feedback tab and form. * * Rating and message are required, matching the asterisks in the kit. The * form refuses to submit without them and says which one is missing rather * than disabling the button with no explanation. */ function FeedbackWidget({ className, onSubmit, title = 'We value your feedback', description = 'Share your thoughts to help us improve this service.', maxLength = 200, triggerLabel = 'Feedback', footer, ...props }: IFeedbackWidgetProps) { const [open, setOpen] = useState(false); const [value, setValue] = useState({ name: '', email: '', rating: null, message: '', }); const [showErrors, setShowErrors] = useState(false); const formId = useId(); const missingRating = value.rating === null; const missingMessage = value.message.trim() === ''; const setName = useCallback( (e: React.ChangeEvent) => setValue(current => ({ ...current, name: e.target.value })), [], ); const setEmail = useCallback( (e: React.ChangeEvent) => setValue(current => ({ ...current, email: e.target.value })), [], ); const setMessage = useCallback( (e: React.ChangeEvent) => setValue(current => ({ ...current, message: e.target.value })), [], ); const setRating = useCallback( (rating: number) => setValue(current => ({ ...current, rating })), [], ); const close = useCallback(() => setOpen(false), []); const openForm = useCallback(() => setOpen(true), []); const handleSubmit = useCallback( (e: FormEvent) => { e.preventDefault(); if (missingRating || missingMessage) { setShowErrors(true); return; } void onSubmit(value); setOpen(false); setShowErrors(false); setValue({ name: '', email: '', rating: null, message: '' }); }, [missingRating, missingMessage, onSubmit, value], ); return (

{title} {description}

Full name

Rating (required) {showErrors && missingRating && ( Choose a rating. )}

Feedback (required)

{showErrors && missingMessage && (
                  <InputMessage state='error'>Tell us what you would change.</InputMessage>
                )}
              </div>
            </form>
          </ModalBody>
          <ModalFooter className='flex-col items-stretch gap-3 sm:flex-row sm:items-center'>
            <Button type='button' variant='outlined' onClick={close} className='sm:flex-1'>
              Cancel
            </Button>
            <Button type='submit' form={formId} className='sm:flex-1'>
              Submit
            </Button>
          </ModalFooter>
          {footer && <Body3 className='pb-4 text-center text-neutral-500'>{footer}</Body3>}
        </ModalContent>
      </Modal>
    </div>
  );
}

export type { IFeedbackValue };

export { FeedbackWidget, FeedbackRating };
51:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json","https://indiacn.in/r/button.json","https://indiacn.in/r/input.json","https://indiacn.in/r/textarea.json","https://indiacn.in/r/label.json","https://indiacn.in/r/modal.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/feedback-widget.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>