@gv-tech/design-system 2.4.0 → 2.5.0

package/dist/registry/form.json

@@ -1,13 +0,0 @@
-{
-  "name": "form",
-  "type": "registry:ui",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "ui/form.tsx",
-      "content": "'use client';\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\n\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  if (!itemContext) {\n    throw new Error('useFormField should be used within <FormItem>');\n  }\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId();\n\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn('space-y-2', className)} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(\n  ({ ...props }, ref) => {\n    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n        aria-invalid={!!error}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => {\n    const { formDescriptionId } = useFormField();\n\n    return (\n      <p ref={ref} id={formDescriptionId} className={cn('text-[0.8rem] text-muted-foreground', className)} {...props} />\n    );\n  },\n);\nFormDescription.displayName = 'FormDescription';\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n\n    if (!body) {\n      return null;\n    }\n\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn('text-[0.8rem] font-medium text-destructive', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormMessage.displayName = 'FormMessage';\n\nexport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/registry/form.test.json

@@ -1,13 +0,0 @@
-{
-  "name": "form.test",
-  "type": "registry:ui",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "ui/form.test.tsx",
-      "content": "import { zodResolver } from '@hookform/resolvers/zod';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useForm } from 'react-hook-form';\nimport { describe, expect, it } from 'vitest';\nimport { z } from 'zod';\nimport { Button } from './button';\nimport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form';\nimport { Input } from './input';\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: 'Username must be at least 2 characters.',\n  }),\n});\n\nfunction TestForm({ onSubmit }: { onSubmit: (values: z.infer<typeof formSchema>) => void }) {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\ndescribe('Form', () => {\n  it('renders form fields correctly', () => {\n    render(<TestForm onSubmit={() => {}} />);\n\n    expect(screen.getByLabelText('Username')).toBeInTheDocument();\n    expect(screen.getByPlaceholderText('shadcn')).toBeInTheDocument();\n    expect(screen.getByText('This is your public display name.')).toBeInTheDocument();\n    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();\n  });\n\n  it('validates input and displays error message', async () => {\n    const user = userEvent.setup();\n    render(<TestForm onSubmit={() => {}} />);\n\n    const submitButton = screen.getByRole('button', { name: 'Submit' });\n    await user.click(submitButton);\n\n    await waitFor(() => {\n      expect(screen.getByText('Username must be at least 2 characters.')).toBeVisible();\n    });\n  });\n\n  it('submits valid data', async () => {\n    const user = userEvent.setup();\n    const { vi } = await import('vitest');\n    const mockSubmit = vi.fn();\n\n    render(<TestForm onSubmit={mockSubmit} />);\n\n    const input = screen.getByLabelText('Username');\n    await user.type(input, 'johndoe');\n    await user.click(screen.getByRole('button', { name: 'Submit' }));\n\n    await waitFor(() => {\n      expect(mockSubmit).toHaveBeenCalledWith({ username: 'johndoe' }, expect.anything());\n    });\n  });\n});\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/registry/hover-card.json

@@ -1,13 +0,0 @@
-{
-  "name": "hover-card",
-  "type": "registry:ui",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "ui/hover-card.tsx",
-      "content": "import * as HoverCardPrimitive from '@radix-ui/react-hover-card';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst HoverCard = HoverCardPrimitive.Root;\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]',\n      className,\n    )}\n    {...props}\n  />\n));\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\n\nexport { HoverCard, HoverCardContent, HoverCardTrigger };\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/dist/registry/hover-card.test.json

@@ -1,13 +0,0 @@
-{
-  "name": "hover-card.test",
-  "type": "registry:ui",
-  "dependencies": [],
-  "registryDependencies": [],
-  "files": [
-    {
-      "path": "ui/hover-card.test.tsx",
-      "content": "import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';\n\ndescribe('HoverCard', () => {\n  it('renders trigger correctly', () => {\n    render(\n      <HoverCard>\n        <HoverCardTrigger>Hover me</HoverCardTrigger>\n        <HoverCardContent>Content</HoverCardContent>\n      </HoverCard>,\n    );\n\n    expect(screen.getByText('Hover me')).toBeInTheDocument();\n  });\n\n  it('shows content on hover', async () => {\n    const user = userEvent.setup();\n    render(\n      <HoverCard openDelay={0} closeDelay={0}>\n        <HoverCardTrigger>Hover me</HoverCardTrigger>\n        <HoverCardContent>Content</HoverCardContent>\n      </HoverCard>,\n    );\n\n    const trigger = screen.getByText('Hover me');\n\n    // Initial state\n    expect(screen.queryByText('Content')).not.toBeInTheDocument();\n\n    // Hover\n    await user.hover(trigger);\n\n    // Should be visible\n    await waitFor(() => {\n      expect(screen.getByText('Content')).toBeVisible();\n    });\n\n    // Unhover\n    await user.unhover(trigger);\n\n    // Should be hidden\n    await waitFor(() => {\n      expect(screen.queryByText('Content')).not.toBeInTheDocument();\n    });\n  });\n});\n",
-      "type": "registry:ui"
-    }
-  ]
-}