feat(form): add form components & variants, support type exports, improve input styles

Author: Ohh-889

packages/ui/package.json

@@ -5,7 +5,19 @@
   "private": false,
   "exports": {
     ".": {
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "require": "./dist/components/*/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js",
+      "require": "./dist/lib/index.js"
     }
   },
   "main": "./dist/index.js",

packages/ui/registry.json

@@ -1086,6 +1086,33 @@
       "title": "Dropdown Menu",
       "type": "registry:block"
     },
+    {
+      "files": [
+        {
+          "path": "src/components/form/FormField.tsx",
+          "target": "components/form/FormField.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/form/form-variants.ts",
+          "target": "components/form/form-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/form/index.ts",
+          "target": "components/form/index.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/form/types.ts",
+          "target": "components/form/types.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "name": "form",
+      "title": "Form",
+      "type": "registry:block"
+    },
     {
       "files": [
         {

playground/public/r/carousel.json

@@ -26,13 +26,13 @@
     },
     {
       "path": "src/components/carousel/CarouselNext.tsx",
-      "content": "'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { Button } from '../button';\n\nimport { carouselVariants } from './carousel-variants';\nimport { useCarousel } from './context';\nimport type { CarouselNextProps } from './types';\n\nconst CarouselNext = forwardRef<HTMLButtonElement, CarouselNextProps>((props, ref) => {\n  const { children, className, disabled, shape = 'circle', size, variant = 'pure', ...rest } = props;\n\n  const { canScrollNext, orientation, scrollNext } = useCarousel();\n\n  const { next } = carouselVariants({ orientation, size });\n\n  const nextClassName = cn(next(), className);\n\n  return (\n    <Button\n      className={nextClassName}\n      disabled={!canScrollNext || disabled}\n      ref={ref}\n      shape={shape}\n      size={size}\n      variant={variant}\n      onClick={scrollNext}\n      {...rest}\n    >\n      {children || <ChevronRight />}\n    </Button>\n  );\n});\n\nCarouselNext.displayName = 'CarouselNext';\n\nexport default CarouselNext;\n",
+      "content": "'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button';\n\nimport { carouselVariants } from './carousel-variants';\nimport { useCarousel } from './context';\nimport type { CarouselNextProps } from './types';\n\nconst CarouselNext = forwardRef<HTMLButtonElement, CarouselNextProps>((props, ref) => {\n  const { children, className, disabled, shape = 'circle', size, variant = 'pure', ...rest } = props;\n\n  const { canScrollNext, orientation, scrollNext } = useCarousel();\n\n  const { next } = carouselVariants({ orientation, size });\n\n  const nextClassName = cn(next(), className);\n\n  return (\n    <ButtonIcon\n      className={nextClassName}\n      disabled={!canScrollNext || disabled}\n      ref={ref}\n      shape={shape}\n      size={size}\n      variant={variant}\n      onClick={scrollNext}\n      {...rest}\n    >\n      {children || <ChevronRight />}\n    </ButtonIcon>\n  );\n});\n\nCarouselNext.displayName = 'CarouselNext';\n\nexport default CarouselNext;\n",
       "type": "registry:ui",
       "target": "components/carousel/CarouselNext.tsx"
     },
     {
       "path": "src/components/carousel/CarouselPrevious.tsx",
-      "content": "'use client';\n\nimport { ChevronLeft } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { Button } from '../button';\n\nimport { carouselVariants } from './carousel-variants';\nimport { useCarousel } from './context';\nimport type { CarouselNextProps } from './types';\n\nconst CarouselNext = forwardRef<HTMLButtonElement, CarouselNextProps>((props, ref) => {\n  const { children, className, disabled, shape = 'circle', size, variant = 'pure', ...rest } = props;\n\n  const { canScrollPrev, orientation, scrollPrev } = useCarousel();\n\n  const { previous } = carouselVariants({ orientation, size });\n\n  const previousClassName = cn(previous(), className);\n\n  return (\n    <Button\n      className={previousClassName}\n      disabled={!canScrollPrev || disabled}\n      ref={ref}\n      shape={shape}\n      size={size}\n      variant={variant}\n      onClick={scrollPrev}\n      {...rest}\n    >\n      {children || <ChevronLeft />}\n    </Button>\n  );\n});\n\nCarouselNext.displayName = 'CarouselNext';\n\nexport default CarouselNext;\n",
+      "content": "'use client';\n\nimport { ChevronLeft } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button';\n\nimport { carouselVariants } from './carousel-variants';\nimport { useCarousel } from './context';\nimport type { CarouselNextProps } from './types';\n\nconst CarouselNext = forwardRef<HTMLButtonElement, CarouselNextProps>((props, ref) => {\n  const { children, className, disabled, shape = 'circle', size, variant = 'pure', ...rest } = props;\n\n  const { canScrollPrev, orientation, scrollPrev } = useCarousel();\n\n  const { previous } = carouselVariants({ orientation, size });\n\n  const previousClassName = cn(previous(), className);\n\n  return (\n    <ButtonIcon\n      className={previousClassName}\n      disabled={!canScrollPrev || disabled}\n      ref={ref}\n      shape={shape}\n      size={size}\n      variant={variant}\n      onClick={scrollPrev}\n      {...rest}\n    >\n      {children || <ChevronLeft />}\n    </ButtonIcon>\n  );\n});\n\nCarouselNext.displayName = 'CarouselNext';\n\nexport default CarouselNext;\n",
       "type": "registry:ui",
       "target": "components/carousel/CarouselPrevious.tsx"
     },

playground/public/r/form.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:block",
+  "title": "Form",
+  "files": [
+    {
+      "path": "src/components/form/FormField.tsx",
+      "content": "'use client';\n\nimport { useId } from 'react';\nimport type { AllPathsKeys } from 'skyroc-form';\nimport { Field, useFieldError } from 'skyroc-form';\n\nimport { cn } from '@/lib/utils';\n\nimport FormLabel from '../label/Label';\n\nimport { formVariants } from './form-variants';\nimport type { FormFieldProps } from './types';\n\nconst FormField = <Values = any,>(props: FormFieldProps<Values>) => {\n  const { children, className, description, label, name, size, ...rest } = props;\n\n  const id = useId();\n\n  const errors = useFieldError<Values, AllPathsKeys<Values>>(name);\n\n  const hasError = errors.length > 0;\n\n  const formItemId = `${id}-form-item`;\n  const formDescriptionId = `${id}-form-item-description`;\n  const formMessageId = `${id}-form-item-message`;\n\n  const {\n    description: descriptionCls,\n    item,\n    label: labelCls,\n    message\n  } = formVariants({ error: errors.length > 0, size });\n\n  const mergedCls = {\n    description: cn(descriptionCls(), className),\n    item: cn(item(), className),\n    label: cn(labelCls()),\n    message: cn(message(), className)\n  };\n\n  return (\n    <div className={mergedCls.item}>\n      <FormLabel\n        className={mergedCls.label}\n        data-error={hasError}\n        data-slot=\"form-label\"\n        htmlFor={id}\n        size={size}\n      >\n        {label}\n      </FormLabel>\n\n      <Field\n        {...rest}\n        aria-describedby={!hasError ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n        aria-invalid={hasError}\n        id={id}\n        name={name}\n      >\n        {children}\n      </Field>\n\n      {description && (\n        <p\n          className={mergedCls.description}\n          id={formDescriptionId}\n        >\n          {description}\n        </p>\n      )}\n\n      {hasError && (\n        <p\n          className={mergedCls.message}\n          id={formMessageId}\n        >\n          {errors[0]}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default FormField;\n",
+      "type": "registry:ui",
+      "target": "components/form/FormField.tsx"
+    },
+    {
+      "path": "src/components/form/form-variants.ts",
+      "content": "import { tv } from 'tailwind-variants';\n\nexport const formVariants = tv({\n  defaultVariants: {\n    error: false,\n    size: 'md'\n  },\n  slots: {\n    description: `text-muted-foreground`,\n    item: `form-item`,\n    label: 'flex items-center data-[error=true]:text-destructive',\n    message: `font-medium text-destructive`\n  },\n  variants: {\n    error: {\n      true: {\n        message: `text-destructive`\n      }\n    },\n    size: {\n      '2xl': {\n        item: 'text-xl space-y-3.5',\n        label: 'gap-3.5'\n      },\n      lg: {\n        item: 'text-base space-y-2.5',\n        label: 'gap-2.5'\n      },\n      md: {\n        item: 'text-sm space-y-2',\n        label: 'gap-2'\n      },\n      sm: {\n        item: 'text-xs space-y-1.75',\n        label: 'gap-1.75'\n      },\n      xl: {\n        item: 'text-lg space-y-3',\n        label: 'gap-3'\n      },\n      xs: {\n        item: 'text-2xs space-y-1.5',\n        label: 'gap-1.5'\n      }\n    }\n  }\n});\n\nexport type FormSlots = keyof typeof formVariants.slots;\n",
+      "type": "registry:ui",
+      "target": "components/form/form-variants.ts"
+    },
+    {
+      "path": "src/components/form/index.ts",
+      "content": "'use client';\n\nexport {\n  ComputedField as FormComputedField,\n  Form,\n  List as FormList,\n  useEffectField,\n  useFieldError,\n  useFieldState,\n  useForm,\n  useSelector,\n  useUndoRedo,\n  useWatch\n} from 'skyroc-form';\n\nexport type { Action as FormAction, FormInstance } from 'skyroc-form';\n\nexport { default as FormField } from './FormField';\n\nexport type { FormFieldProps } from './types';\n",
+      "type": "registry:ui",
+      "target": "components/form/index.ts"
+    },
+    {
+      "path": "src/components/form/types.ts",
+      "content": "import type { ReactNode } from 'react';\nimport type { FieldProps } from 'skyroc-form';\n\nimport type { BaseProps } from '@/types/other';\n\nexport type FormFieldProps<Values = any> = FieldProps<Values> &\n  BaseProps<{\n    description?: string;\n    error?: string;\n    label?: ReactNode;\n    required?: boolean;\n  }>;\n",
+      "type": "registry:ui",
+      "target": "components/form/types.ts"
+    }
+  ]
+}

playground/public/r/input.json

@@ -18,7 +18,7 @@
     },
     {
       "path": "src/components/input/input-variants.ts",
-      "content": "import { tv } from 'tailwind-variants';\n\nexport const inputVariants = tv({\n  base: [\n    `flex w-full rounded-md border border-solid border-input bg-background`,\n    `file:border-0 file:bg-transparent file:font-medium`,\n    `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,\n    `disabled:cursor-not-allowed disabled:opacity-50`\n  ],\n  defaultVariants: {\n    size: 'md'\n  },\n  variants: {\n    size: {\n      '2xl': 'h-12 px-4 text-xl file:py-2',\n      lg: 'h-9 px-3 text-base file:py-1.25',\n      md: 'h-8 px-2.5 text-sm file:py-1.25',\n      sm: 'h-7 px-2 text-xs file:py-1.25',\n      xl: 'h-10 px-3.5 text-lg file:py-1.25',\n      xs: 'h-6 px-1.5 text-2xs file:py-1.25'\n    }\n  }\n});\n",
+      "content": "import { tv } from 'tailwind-variants';\n\nexport const inputVariants = tv({\n  base: [\n    `flex w-full rounded-md border border-solid border-input bg-background`,\n    `file:border-0 file:bg-transparent file:font-medium`,\n    'placeholder:text-muted-foreground selection:bg-primary',\n    `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,\n    `disabled:cursor-not-allowed disabled:opacity-50`,\n    `aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive`\n  ],\n  defaultVariants: {\n    size: 'md'\n  },\n  variants: {\n    size: {\n      '2xl': 'h-12 px-4 text-xl file:py-2',\n      lg: 'h-9 px-3 text-base file:py-1.25',\n      md: 'h-8 px-2.5 text-sm file:py-1.25',\n      sm: 'h-7 px-2 text-xs file:py-1.25',\n      xl: 'h-10 px-3.5 text-lg file:py-1.25',\n      xs: 'h-6 px-1.5 text-2xs file:py-1.25'\n    }\n  }\n});\n",
       "type": "registry:ui",
       "target": "components/input/input-variants.ts"
     },

playground/public/r/resizable.json

@@ -12,7 +12,7 @@
     },
     {
       "path": "src/components/resizable/ResizablePanelGroup.tsx",
-      "content": "import { PanelGroup } from 'react-resizable-panels';\n\nimport { cn } from '@/lib/utils';\n\nimport { resizableVariants } from './resizable-variants';\nimport type { ResizablePanelGroupProps } from './types';\n\nconst ResizablePanelGroup = (props: ResizablePanelGroupProps) => {\n  const { className, size, ...rest } = props;\n\n  const { panelGroup } = resizableVariants({ size });\n\n  const mergedCls = cn(panelGroup(), className);\n\n  return (\n    <PanelGroup\n      className={mergedCls}\n      {...rest}\n    />\n  );\n};\n\nexport default ResizablePanelGroup;\n",
+      "content": "'use client';\n\nimport { PanelGroup } from 'react-resizable-panels';\n\nimport { cn } from '@/lib/utils';\n\nimport { resizableVariants } from './resizable-variants';\nimport type { ResizablePanelGroupProps } from './types';\n\nconst ResizablePanelGroup = (props: ResizablePanelGroupProps) => {\n  const { className, size, ...rest } = props;\n\n  const { panelGroup } = resizableVariants({ size });\n\n  const mergedCls = cn(panelGroup(), className);\n\n  return (\n    <PanelGroup\n      className={mergedCls}\n      {...rest}\n    />\n  );\n};\n\nexport default ResizablePanelGroup;\n",
       "type": "registry:ui",
       "target": "components/resizable/ResizablePanelGroup.tsx"
     },