softnetics · SupakornNetsuwan · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/.changeset/dry-worms-nail.md b/.changeset/dry-worms-nail.md
@@ -0,0 +1,5 @@
+---
+"@genseki/react": patch
+---
+
+fix: remove leading `Aria` from field.tsx components, add `use client` directive
diff --git a/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx b/packages/react/src/react/components/compound/editor/components/rich-text-editor.tsx
@@ -10,7 +10,7 @@ import { EditorProvider } from './rich-text-provider'
 import { cn } from '../../../../utils/cn'
 import { focusStyles } from '../../../primitives'
 import { CustomFieldError } from '../../../primitives/custom-field-error'
-import { AriaDescription, AriaFieldGroup } from '../../../primitives/field'
+import { Description, FieldGroup } from '../../../primitives/field'
 export interface RichTextEditorProps {
   editorProviderProps: EditorProviderProps
   value?: string | Content | Content[]
@@ -42,7 +42,7 @@ export const RichTextEditor = (props: RichTextEditorProps) => {
 
   return (
     <div className="flex flex-col gap-y-4" data-invalid={true}>
-      <AriaFieldGroup
+      <FieldGroup
         isDisabled={props.isDisabled}
         isInvalid={isInvalid}
         data-loading={props.isPending ? 'true' : undefined}
@@ -57,8 +57,8 @@ export const RichTextEditor = (props: RichTextEditorProps) => {
         >
           <EditorProvider {...props.editorProviderProps} editor={editor} />
         </div>
-      </AriaFieldGroup>
-      {props.description && <AriaDescription>{props.description}</AriaDescription>}
+      </FieldGroup>
+      {props.description && <Description>{props.description}</Description>}
       <CustomFieldError errorMessage={props.errorMessage} />
     </div>
   )

diff --git a/packages/react/src/react/components/compound/file-upload-field.tsx b/packages/react/src/react/components/compound/file-upload-field.tsx
@@ -16,10 +16,10 @@ import { mimeTypeValidate } from '../../../core/utils'
 import { useStorageAdapter } from '../../providers/root'
 import { isImageKey } from '../../utils/is-image-key'
 import {
-  AriaDescription,
-  AriaLabel,
   BaseIcon,
   Button,
+  Description,
+  Label,
   Modal,
   ModalClose,
   ModalContent,
@@ -417,9 +417,9 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
   return (
     <div className="group flex flex-col gap-y-4">
       {props.label && (
-        <AriaLabel htmlFor={props.name}>
+        <Label htmlFor={props.name}>
           {props.label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
-        </AriaLabel>
+        </Label>
       )}
       {fileKey ? (
         <FileDisplayer
@@ -492,7 +492,7 @@ export const FileUploadField = (props: FileUploadFieldProps) => {
           )}
         </div>
       )}
-      {props.description && <AriaDescription>{props.description}</AriaDescription>}
+      {props.description && <Description>{props.description}</Description>}
       <CustomFieldError errorMessage={props.errorMessage} />
     </div>
   )

diff --git a/packages/react/src/react/components/primitives/checkbox.tsx b/packages/react/src/react/components/primitives/checkbox.tsx
@@ -16,7 +16,7 @@ import { CheckIcon, MinusIcon } from '@phosphor-icons/react'
 import { twMerge } from 'tailwind-merge'
 import { tv } from 'tailwind-variants'
 
-import { AriaDescription, AriaFieldError, AriaLabel } from './field'
+import { Description, FieldError, Label } from './field'
 import { composeTailwindRenderProps } from './primitive'
 
 import { cn } from '../../utils/cn'
@@ -37,12 +37,10 @@ const CheckboxGroup = forwardRef(function CheckboxGroup(
       {...props}
       className={composeTailwindRenderProps(className, 'flex flex-col gap-y-2')}
     >
-      {props.label && <AriaLabel>{props.label}</AriaLabel>}
+      {props.label && <Label>{props.label}</Label>}
       <>{props.children as React.ReactNode}</>
-      {props.description && (
-        <AriaDescription className="block">{props.description}</AriaDescription>
-      )}
-      <AriaFieldError>{props.errorMessage}</AriaFieldError>
+      {props.description && <Description className="block">{props.description}</Description>}
+      <FieldError>{props.errorMessage}</FieldError>
     </CheckboxGroupPrimitive>
   )
 })
@@ -139,14 +137,14 @@ const Checkbox = forwardRef(function Checkbox(
             <div className="flex flex-col gap-1">
               <>
                 {props.label ? (
-                  <AriaLabel className={cn(props.description, sizeClasses[size].label)}>
+                  <Label className={cn(props.description, sizeClasses[size].label)}>
                     {props.label}
                     {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
-                  </AriaLabel>
+                  </Label>
                 ) : (
                   (props.children as React.ReactNode)
                 )}
-                {props.description && <AriaDescription>{props.description}</AriaDescription>}
+                {props.description && <Description>{props.description}</Description>}
               </>
             </div>
           </div>

diff --git a/packages/react/src/react/components/primitives/color-field.tsx b/packages/react/src/react/components/primitives/color-field.tsx
@@ -11,7 +11,7 @@ import { twJoin } from 'tailwind-merge'
 
 import { ColorPicker } from './color-picker'
 import { ColorSwatch } from './color-swatch'
-import { AriaDescription, AriaFieldError, AriaFieldGroup, AriaInput, AriaLabel } from './field'
+import { Description, FieldError, FieldGroup, Input, Label } from './field'
 import { composeTailwindRenderProps } from './primitive'
 
 import { Typography } from '../../components/primitives/typography'
@@ -55,8 +55,8 @@ const ColorField = forwardRef<HTMLInputElement, ColorFieldProps>(
           '**:data-[slot=color-swatch]:-ml-0.5 group flex w-full flex-col gap-y-1'
         )}
       >
-        {label && <AriaLabel>{label}</AriaLabel>}
-        <AriaFieldGroup data-loading={isLoading ? 'true' : undefined}>
+        {label && <Label>{label}</Label>}
+        <FieldGroup data-loading={isLoading ? 'true' : undefined}>
           {prefix && typeof prefix === 'string' ? (
             <Typography
               data-slot="prefix"
@@ -83,7 +83,7 @@ const ColorField = forwardRef<HTMLInputElement, ColorFieldProps>(
                 )}
               </span>
             )}
-            <AriaInput placeholder={placeholder} />
+            <Input placeholder={placeholder} />
           </div>
           {suffix && typeof suffix === 'string' ? (
             <Typography
@@ -97,9 +97,9 @@ const ColorField = forwardRef<HTMLInputElement, ColorFieldProps>(
           ) : (
             suffix
           )}
-        </AriaFieldGroup>
-        {description && <AriaDescription>{description}</AriaDescription>}
-        <AriaFieldError>{errorMessage}</AriaFieldError>
+        </FieldGroup>
+        {description && <Description>{description}</Description>}
+        <FieldError>{errorMessage}</FieldError>
       </ColorFieldPrimitive>
     )
   }

diff --git a/packages/react/src/react/components/primitives/color-picker.tsx b/packages/react/src/react/components/primitives/color-picker.tsx
@@ -16,7 +16,7 @@ import { ColorArea } from './color-area'
 import { ColorField } from './color-field'
 import { ColorSlider } from './color-slider'
 import { ColorSwatch } from './color-swatch'
-import { AriaDescription } from './field'
+import { Description } from './field'
 import { Popover, PopoverContent, type PopoverContentProps } from './popover'
 
 import { BaseIcon } from '../../components/primitives/base-icon'
@@ -96,7 +96,7 @@ const ColorPicker = ({
           </PopoverContent>
         </Popover>
       </ColorPickerPrimitive>
-      {description && <AriaDescription>{description}</AriaDescription>}
+      {description && <Description>{description}</Description>}
     </div>
   )
 }

diff --git a/packages/react/src/react/components/primitives/color-slider.tsx b/packages/react/src/react/components/primitives/color-slider.tsx
@@ -11,7 +11,7 @@ import {
 import { tv } from 'tailwind-variants'
 
 import { ColorThumb } from './color-thumb'
-import { AriaLabel } from './field'
+import { Label } from './field'
 
 const trackStyles = tv({
   base: 'group col-span-2 rounded-lg',
@@ -53,7 +53,7 @@ const ColorSlider = ({ showOutput = true, label, className, ...props }: ColorSli
       )}
     >
       <div className="flex items-center">
-        {label && <AriaLabel className="text-sm [grid-area:label]">{label}</AriaLabel>}
+        {label && <Label className="text-sm [grid-area:label]">{label}</Label>}
         {showOutput && (
           <SliderOutput className="text-sm [grid-area:output] data-[orientation=horizontal]:ml-auto" />
         )}

diff --git a/packages/react/src/react/components/primitives/combobox.tsx b/packages/react/src/react/components/primitives/combobox.tsx
@@ -12,7 +12,7 @@ import {
 import { tv } from 'tailwind-variants'
 
 import { BaseIcon } from './base-icon'
-import { AriaDescription, AriaFieldError } from './field'
+import { Description, FieldError } from './field'
 import { focusStyles } from './primitive'
 
 import { Label } from '../../../../v2'
@@ -410,8 +410,8 @@ const Combobox = ({
         )}
         <div>
           {children}
-          {description && <AriaDescription>{description}</AriaDescription>}
-          <AriaFieldError>{errorMessage}</AriaFieldError>
+          {description && <Description>{description}</Description>}
+          <FieldError>{errorMessage}</FieldError>
         </div>
       </div>
     </ComboboxContext.Provider>

diff --git a/packages/react/src/react/components/primitives/custom-field-error.tsx b/packages/react/src/react/components/primitives/custom-field-error.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { FieldErrorContext } from 'react-aria-components'
 
-import { AriaFieldError } from './field'
+import { FieldError } from './field'
 
 export const CustomFieldError = (props: { errorMessage?: string }) => {
   return (
@@ -24,7 +24,7 @@ export const CustomFieldError = (props: { errorMessage?: string }) => {
         },
       }}
     >
-      <AriaFieldError>{props.errorMessage}</AriaFieldError>
+      <FieldError>{props.errorMessage}</FieldError>
     </FieldErrorContext>
   )
 }
diff --git a/packages/react/src/react/components/primitives/date-field.tsx b/packages/react/src/react/components/primitives/date-field.tsx
@@ -12,7 +12,7 @@ import {
 
 import { tv, type VariantProps } from 'tailwind-variants'
 
-import { AriaDescription, AriaFieldError, AriaFieldGroup, AriaLabel } from './field'
+import { Description, FieldError, FieldGroup, Label } from './field'
 import { composeTailwindRenderProps } from './primitive'
 
 import { cn } from '../../utils/cn'
@@ -56,11 +56,11 @@ const DateField = <T extends DateValue>({
       {...props}
     >
       {label && (
-        <AriaLabel>
+        <Label>
           {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
-        </AriaLabel>
+        </Label>
       )}
-      <AriaFieldGroup>
+      <FieldGroup>
         {prefix && typeof prefix === 'string' ? (
           <span className="ml-2 text-muted-fg">{prefix}</span>
         ) : (
@@ -74,9 +74,9 @@ const DateField = <T extends DateValue>({
             suffix
           )
         ) : null}
-      </AriaFieldGroup>
-      {description && <AriaDescription>{description}</AriaDescription>}
-      <AriaFieldError>{errorMessage}</AriaFieldError>
+      </FieldGroup>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
     </DateFieldPrimitive>
   )
 }

diff --git a/packages/react/src/react/components/primitives/date-picker.tsx b/packages/react/src/react/components/primitives/date-picker.tsx
@@ -18,7 +18,7 @@ import type { DateDuration } from '@internationalized/date'
 import { Button } from './button'
 import { Calendar } from './calendar'
 import { DateInput } from './date-field'
-import { AriaDescription, AriaFieldError, AriaFieldGroup, AriaLabel } from './field'
+import { Description, FieldError, FieldGroup, Label } from './field'
 import { PopoverClose, PopoverContent } from './popover'
 import { composeTailwindRenderProps } from './primitive'
 import { RangeCalendar } from './range-calendar'
@@ -101,16 +101,16 @@ const DatePicker = <T extends DateValue>({
         className={composeTailwindRenderProps(className, 'group/date-picker flex flex-col gap-y-4')}
       >
         {label && (
-          <AriaLabel>
+          <Label>
             {label} {props.isRequired && <span className="ml-1 text-text-brand">*</span>}
-          </AriaLabel>
+          </Label>
         )}
-        <AriaFieldGroup className="min-w-40">
+        <FieldGroup className="min-w-40">
           <DateInput size="md" className="w-full pr-16" />
           <DatePickerIcon />
-        </AriaFieldGroup>
-        {description && <AriaDescription>{description}</AriaDescription>}
-        <AriaFieldError>{errorMessage}</AriaFieldError>
+        </FieldGroup>
+        {description && <Description>{description}</Description>}
+        <FieldError>{errorMessage}</FieldError>
         <DatePickerOverlay />
       </DatePickerPrimitive>
     </I18nProvider>

diff --git a/packages/react/src/react/components/primitives/field.tsx b/packages/react/src/react/components/primitives/field.tsx
@@ -26,7 +26,7 @@ import { composeTailwindRenderProps, focusStyles } from './primitive'
 /**
  * @deprecated
  */
-interface AriaFieldProps {
+interface FieldProps {
   label?: string
   placeholder?: string
   description?: string
@@ -38,7 +38,7 @@ interface AriaFieldProps {
 /**
  * @deprecated
  */
-const ariaFieldStyles = tv({
+const FieldStyles = tv({
   slots: {
     description: 'text-pretty text-secondary-fg text-sm',
     label: 'w-fit cursor-default font-semibold text-fg text-base',
@@ -49,16 +49,12 @@ const ariaFieldStyles = tv({
 /**
  * @deprecated
  */
-const {
-  description: ariaDescription,
-  label: ariaLabel,
-  fieldError: ariaFieldError,
-} = ariaFieldStyles()
+const { description: ariaDescription, label: ariaLabel, fieldError: ariaFieldError } = FieldStyles()
 
 /**
  * @deprecated
  */
-const AriaLabel = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   { className, ...props },
   ref
 ) {
@@ -76,7 +72,7 @@ interface AriaDescriptionProps extends TextProps {
 /**
  * @deprecated
  */
-const AriaDescription = forwardRef<HTMLElement, AriaDescriptionProps>(function Description(
+const Description = forwardRef<HTMLElement, AriaDescriptionProps>(function Description(
   { className, isWarning, ...props },
   ref
 ) {
@@ -93,14 +89,14 @@ const AriaDescription = forwardRef<HTMLElement, AriaDescriptionProps>(function D
 /**
  * @deprecated
  */
-interface AriaFieldErrorProps extends FieldErrorPrimitiveProps {
+interface FieldErrorProps extends FieldErrorPrimitiveProps {
   ref?: React.RefObject<HTMLElement>
 }
 
 /**
  * @deprecated
  */
-const AriaFieldError = forwardRef<HTMLElement, AriaFieldErrorProps>(function FieldError(
+const FieldError = forwardRef<HTMLElement, FieldErrorProps>(function FieldError(
   { className, ...props },
   ref
 ) {
@@ -149,7 +145,7 @@ interface AriaFieldGroupProps extends GroupProps {
 /**
  * @deprecated
  */
-const AriaFieldGroup = forwardRef<HTMLDivElement, AriaFieldGroupProps>(function FieldGroup(
+const FieldGroup = forwardRef<HTMLDivElement, AriaFieldGroupProps>(function FieldGroup(
   { className, ...props },
   ref
 ) {
@@ -170,12 +166,12 @@ const AriaFieldGroup = forwardRef<HTMLDivElement, AriaFieldGroupProps>(function
 /**
  * @deprecated
  */
-interface AriaInputProps extends InputPrimitiveProps {}
+interface InputProps extends InputPrimitiveProps {}
 
 /**
  * @deprecated
  */
-const AriaInput = forwardRef<HTMLInputElement, AriaInputProps>(function Input(
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   { className, ...props },
   ref
 ) {
@@ -191,5 +187,5 @@ const AriaInput = forwardRef<HTMLInputElement, AriaInputProps>(function Input(
   )
 })
 
-export type { AriaFieldErrorProps, AriaFieldProps, AriaInputProps }
-export { AriaDescription, AriaFieldError, AriaFieldGroup, ariaFieldStyles, AriaInput, AriaLabel }
+export type { FieldErrorProps, FieldProps, InputProps }
+export { Description, FieldError, FieldGroup, FieldStyles, Input, Label }