@alneas/appkit-react 0.1.0 → 0.2.0

package/dist/ui/components/ui/empty.d.ts

@@ -1,29 +1,101 @@
 import { VariantProps } from 'class-variance-authority';
 /**
- * データが空であることを示すプレースホルダー全体のコンテナ。
+ * Lays out an empty-state panel with centered content.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered Empty composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function Empty({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 /**
- * 空の状態で表示される見出しやアイコンをグループ化するヘッダー領域。
+ * Groups the empty-state media, title and explanation.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered EmptyHeader composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 declare const emptyMediaVariants: (props?: ({
     variant?: "default" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * 空の状態を視覚的に表すアイコンや画像を表示するコンポーネント。
+ * Styles empty-state media with an optional icon treatment.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.
+ * @returns The rendered EmptyMedia composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import('react').JSX.Element;
 /**
- * 空の状態で表示されるタイトル（件名）。
+ * Styles an empty-state title without imposing a heading level.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered EmptyTitle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 /**
- * 空の状態に関する詳細な説明テキスト。
+ * Styles the empty-state explanation and links.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered EmptyDescription composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>): import('react').JSX.Element;
 /**
- * ユーザーが次のアクションを実行するためのコンテンツ領域（ボタンなど）。
+ * Constrains the width of empty-state actions or supplemental content.
+ * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.
+ * @returns The rendered EmptyContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.
+ * @example
+ * ```tsx
+ * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<Empty><EmptyHeader><EmptyMedia variant="icon">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type="button">Create</button></EmptyContent></Empty>);
+ * }
+ * ```
  */
 declare function EmptyContent({ className, ...props }: React.ComponentProps<'div'>): import('react').JSX.Element;
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };

package/dist/ui/components/ui/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","names":["Empty","props","cn","className","EmptyHeader","emptyMediaVariants","cva","EmptyMedia","variant","EmptyTitle","EmptyDescription","EmptyContent"],"sources":["../../../../src/ui/components/ui/empty.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * データが空であることを示すプレースホルダー全体のコンテナ。\n */\nfunction Empty({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty'\n      className={cn(\n        'gap-4 rounded-lg border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 空の状態で表示される見出しやアイコンをグループ化するヘッダー領域。\n */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-header'\n      className={cn('gap-2 flex max-w-sm flex-col items-center', className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * 空の状態を視覚的に表すアイコンや画像を表示するコンポーネント。\n */\nfunction EmptyMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot='empty-icon'\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * 空の状態で表示されるタイトル（件名）。\n */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-title'\n      className={cn('text-sm font-medium tracking-tight', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * 空の状態に関する詳細な説明テキスト。\n */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot='empty-description'\n      className={cn(\n        'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * ユーザーが次のアクションを実行するためのコンテンツ領域（ボタンなど）。\n */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-content'\n      className={cn(\n        'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n"],"mappings":";;;;;AAOA,SAASA,EAAM,EAAE,cAAW,GAAGC,KAAsC;CACnE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,+HACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASG,EAAY,EAAE,cAAW,GAAGH,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,6CAA6CC,CAAS;EACpE,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMI,IAAqBC,EACzB,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAKA,SAASC,EAAW,EAClB,cACA,aAAU,WACV,GAAGN,KACqE;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAcO;EACd,WAAWN,EAAGG,EAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAIJ;CACL,CAAA;AAEL;AAKA,SAASQ,EAAW,EAAE,cAAW,GAAGR,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sCAAsCC,CAAS;EAC7D,GAAIF;CACL,CAAA;AAEL;AAKA,SAASS,EAAiB,EAAE,cAAW,GAAGT,KAAoC;CAC5E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,2GACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAKA,SAASU,EAAa,EAAE,cAAW,GAAGV,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,mFACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL"}
+{"version":3,"file":"empty.js","names":["Empty","props","cn","className","EmptyHeader","emptyMediaVariants","cva","EmptyMedia","variant","EmptyTitle","EmptyDescription","EmptyContent"],"sources":["../../../../src/ui/components/ui/empty.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Lays out an empty-state panel with centered content.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Empty composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction Empty({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty'\n      className={cn(\n        'gap-4 rounded-lg border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Groups the empty-state media, title and explanation.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered EmptyHeader composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-header'\n      className={cn('gap-2 flex max-w-sm flex-col items-center', className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      /**\n       * Visual treatment selected by the consumer; these values change CSS classes only.\n       * Accepted values: default, icon.\n       * @defaultValue 'default'\n       * @see emptyMediaVariants\n       */\n      variant: {\n        default: 'bg-transparent',\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * Styles empty-state media with an optional icon treatment.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: variant='default'.\n * @returns The rendered EmptyMedia composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction EmptyMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot='empty-icon'\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles an empty-state title without imposing a heading level.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered EmptyTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-title'\n      className={cn('text-sm font-medium tracking-tight', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Styles the empty-state explanation and links.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered EmptyDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot='empty-description'\n      className={cn(\n        'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Constrains the width of empty-state actions or supplemental content.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered EmptyContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. These presentational slots do not fetch data or detect empty collections. The host decides whether to render them. EmptyMedia variant defaults to default; icon adds a muted icon surface.\n * @example\n * ```tsx\n * import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Empty><EmptyHeader><EmptyMedia variant=\"icon\">?</EmptyMedia><EmptyTitle>No documents</EmptyTitle><EmptyDescription>Create your first document.</EmptyDescription></EmptyHeader><EmptyContent><button type=\"button\">Create</button></EmptyContent></Empty>);\n * }\n * ```\n */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='empty-content'\n      className={cn(\n        'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n"],"mappings":";;;;;AAmBA,SAASA,EAAM,EAAE,cAAW,GAAGC,KAAsC;CACnE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,+HACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASG,EAAY,EAAE,cAAW,GAAGH,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,6CAA6CC,CAAS;EACpE,GAAIF;CACL,CAAA;AAEL;AAEA,IAAMI,IAAqBC,EACzB,+FACA;CACE,UAAU,EAOR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAiBA,SAASC,EAAW,EAClB,cACA,aAAU,WACV,GAAGN,KACqE;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAcO;EACd,WAAWN,EAAGG,EAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAIJ;CACL,CAAA;AAEL;AAiBA,SAASQ,EAAW,EAAE,cAAW,GAAGR,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EAAG,sCAAsCC,CAAS;EAC7D,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASS,EAAiB,EAAE,cAAW,GAAGT,KAAoC;CAC5E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,2GACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AAiBA,SAASU,EAAa,EAAE,cAAW,GAAGV,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWC,EACT,mFACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL"}

package/dist/ui/components/ui/field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.cjs","names":["FieldsetPrimitive","cn","cva","React","FieldPrimitive","Separator","useMemo","require_runtime","require_ui_lib_utils","require_ui_components_ui_separator","react_jsx_runtime","react","class_variance_authority","_base_ui_react_field","_base_ui_react_fieldset","FieldSet","props","className","FieldLegend","variant","FieldGroup","fieldVariants","Field","orientation","FieldContent","FieldLabel","FieldTitle","FieldDescription","FieldSeparator","children","FieldError","content","errors","uniqueErrors","error","index","FieldValidity","FieldControl"],"sources":["../../../../src/ui/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMemo } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n// ============================================================================\n// FieldSet (Fieldset.Root)\n// ============================================================================\n\n/**\n * フォーム内で関連する入力フィールドをグループ化するためのコンテナ。\n */\nfunction FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot='field-set'\n      className={cn(\n        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLegend (Fieldset.Legend)\n// ============================================================================\n\n/**\n * FieldSet グループのタイトル（見出し）を指定するコンポーネント。\n */\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldsetPrimitive.Legend.Props & { variant?: 'legend' | 'label' }) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot='field-legend'\n      data-variant={variant}\n      className={cn(\n        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldGroup\n// ============================================================================\n\n/**\n * 複数のフィールドをまとめて配置・整理するためのグループコンテナ。\n */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-group'\n      className={cn(\n        'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Field (Field.Root)\n// Primtive Field Component (was FieldRoot)\n// ============================================================================\n\nconst fieldVariants = cva('data-[invalid]:text-destructive gap-2 group/field flex w-full', {\n  variants: {\n    orientation: {\n      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px max-sm:flex-col max-sm:[&>*]:w-full max-sm:[&>[data-slot=field-label]]:w-full max-sm:[&>[data-slot=field-label]]:text-left',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\nconst Field = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>\n>(({ className, orientation = 'vertical', ...props }, ref) => {\n  return (\n    <FieldPrimitive.Root\n      ref={ref}\n      data-slot='field'\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\nField.displayName = 'Field';\n\n// ============================================================================\n// FieldContent\n// ============================================================================\n\n/**\n * フィールド内のコントロールや説明、エラーメッセージを囲むコンテンツ領域。\n */\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-content'\n      className={cn('gap-0.5 group/field-content flex flex-1 flex-col leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLabel (Field.Label)\n// ============================================================================\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldPrimitive.Label.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Label\n        ref={ref}\n        data-slot='field-label'\n        className={cn(\n          'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug text-sm font-medium',\n          'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n          'data-[invalid]:text-destructive',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldLabel.displayName = 'FieldLabel';\n\n// ============================================================================\n// FieldTitle\n// ============================================================================\n\n/**\n * フィールドのタイトル（ラベル）用のコンポーネント。\n */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-label'\n      className={cn(\n        'gap-2 text-sm font-medium group-data-[disabled]/field:opacity-50 flex w-fit items-center leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldDescription (Field.Description)\n// ============================================================================\n\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, FieldPrimitive.Description.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Description\n        ref={ref}\n        data-slot='field-description'\n        className={cn(\n          'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n          'last:mt-0 nth-last-2:-mt-1',\n          '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldDescription.displayName = 'FieldDescription';\n\n// ============================================================================\n// FieldSeparator\n// ============================================================================\n\n/**\n * フォームセクションやフィールド間を区切るためのセパレーター（区切り線）。\n */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot='field-separator'\n      data-content={!!children}\n      className={cn(\n        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',\n        className,\n      )}\n      {...props}\n    >\n      <Separator className='absolute inset-0 top-1/2' />\n      {children && (\n        <span\n          className='text-muted-foreground px-2 bg-background relative mx-auto block w-fit'\n          data-slot='field-separator-content'\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// FieldError (Field.Error)\n// ============================================================================\n\nconst FieldError = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Error.Props & {\n    errors?: Array<{ message?: string } | undefined>;\n  }\n>(({ className, children, errors, ...props }, ref) => {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      ref={ref}\n      data-slot='field-error'\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n});\nFieldError.displayName = 'FieldError';\n\n// ============================================================================\n// FieldValidity (Field.Validity)\n// ============================================================================\n\nconst FieldValidity = FieldPrimitive.Validity;\n\n// ============================================================================\n// FieldControl (Helper for Smart Field / Legacy)\n// ============================================================================\n\nconst FieldControl = FieldPrimitive.Control;\n\n\nexport { Field, FieldLabel, FieldControl, FieldError, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, FieldValidity };\n"],"mappings":"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"}
+{"version":3,"file":"field.cjs","names":["FieldsetPrimitive","cn","cva","React","FieldPrimitive","Separator","useMemo","require_runtime","require_ui_lib_utils","require_ui_components_ui_separator","react_jsx_runtime","react","class_variance_authority","_base_ui_react_field","_base_ui_react_fieldset","FieldSet","props","className","FieldLegend","variant","FieldGroup","fieldVariants","Field","orientation","FieldContent","FieldLabel","FieldTitle","FieldDescription","FieldSeparator","children","FieldError","content","errors","uniqueErrors","error","index","FieldValidity","FieldControl"],"sources":["../../../../src/ui/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMemo } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n// ============================================================================\n// FieldSet (Fieldset.Root)\n// ============================================================================\n\n/**\n * Groups related form fields using the Base UI fieldset root.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSet composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot='field-set'\n      className={cn(\n        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLegend (Fieldset.Legend)\n// ============================================================================\n\n/**\n * Labels the fieldset with legend or compact label styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='legend'.\n * @returns The rendered FieldLegend composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. variant defaults to legend; label selects smaller typography.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldsetPrimitive.Legend.Props & { /**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\n/**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\nvariant?: 'legend' | 'label' }) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot='field-legend'\n      data-variant={variant}\n      className={cn(\n        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldGroup\n// ============================================================================\n\n/**\n * Lays out a vertical group of fields and nested field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-group'\n      className={cn(\n        'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Field (Field.Root)\n// Primtive Field Component (was FieldRoot)\n// ============================================================================\n\nconst fieldVariants = cva('data-[invalid]:text-destructive gap-2 group/field flex w-full', {\n  variants: {\n    /**\n     * Axis used to join/group controls or arrange field content.\n     * Accepted values: vertical, horizontal, responsive.\n     * @defaultValue 'vertical'\n     * @see fieldVariants\n     */\n    orientation: {\n      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px max-sm:flex-col max-sm:[&>*]:w-full max-sm:[&>[data-slot=field-label]]:w-full max-sm:[&>[data-slot=field-label]]:text-left',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\n/**\n * Coordinates one field control, label, description and validation state.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered Field composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type. orientation defaults to vertical; horizontal/responsive change layout rather than field validation.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst Field = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>\n>(({ className, orientation = 'vertical', ...props }, ref) => {\n  return (\n    <FieldPrimitive.Root\n      ref={ref}\n      data-slot='field'\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\nField.displayName = 'Field';\n\n// ============================================================================\n// FieldContent\n// ============================================================================\n\n/**\n * Groups the textual content adjacent to a field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-content'\n      className={cn('gap-0.5 group/field-content flex flex-1 flex-col leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLabel (Field.Label)\n// ============================================================================\n\n/**\n * Associates a visible label with its Base UI field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldLabel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldPrimitive.Label.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Label\n        ref={ref}\n        data-slot='field-label'\n        className={cn(\n          'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug text-sm font-medium',\n          'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n          'data-[invalid]:text-destructive',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldLabel.displayName = 'FieldLabel';\n\n// ============================================================================\n// FieldTitle\n// ============================================================================\n\n/**\n * Styles label-like title content without creating a label association.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-label'\n      className={cn(\n        'gap-2 text-sm font-medium group-data-[disabled]/field:opacity-50 flex w-fit items-center leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldDescription (Field.Description)\n// ============================================================================\n\n/**\n * Provides descriptive text associated with the surrounding field.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, FieldPrimitive.Description.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Description\n        ref={ref}\n        data-slot='field-description'\n        className={cn(\n          'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n          'last:mt-0 nth-last-2:-mt-1',\n          '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldDescription.displayName = 'FieldDescription';\n\n// ============================================================================\n// FieldSeparator\n// ============================================================================\n\n/**\n * Draws a divider with optional centered text between field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /**\n   * Content rendered in the wrapper's child region.\n   */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot='field-separator'\n      data-content={!!children}\n      className={cn(\n        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',\n        className,\n      )}\n      {...props}\n    >\n      <Separator className='absolute inset-0 top-1/2' />\n      {children && (\n        <span\n          className='text-muted-foreground px-2 bg-background relative mx-auto block w-fit'\n          data-slot='field-separator-content'\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// FieldError (Field.Error)\n// ============================================================================\n\n/**\n * Renders supplied children or deduplicated error messages when content exists.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldError composition, or null when it has no visible content.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldError = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Error.Props & {\n    /**\n     * Explicit validation messages; duplicate message strings are collapsed and missing/empty messages may yield no content.\n     */\n    errors?: Array<{ /**\n * Optional error message used for deduplication and display; missing messages do not render a list item.\n */\n    /**\n     * Optional error message used for deduplication and display; missing messages do not render a list item.\n     */\n    message?: string } | undefined>;\n  }\n>(({ className, children, errors, ...props }, ref) => {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      ref={ref}\n      data-slot='field-error'\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n});\nFieldError.displayName = 'FieldError';\n\n// ============================================================================\n// FieldValidity (Field.Validity)\n// ============================================================================\n\n/**\n * Exposes the surrounding Base UI field validity state to its child renderer.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldValidity composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldValidity = FieldPrimitive.Validity;\n\n// ============================================================================\n// FieldControl (Helper for Smart Field / Legacy)\n// ============================================================================\n\n/**\n * Renders a Base UI control bound to its surrounding field context.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldControl composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldControl = FieldPrimitive.Control;\n\n\nexport { Field, FieldLabel, FieldControl, FieldError, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, FieldValidity };\n"],"mappings":"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"}

package/dist/ui/components/ui/field.d.cts

@@ -2,43 +2,217 @@ import { VariantProps } from 'class-variance-authority';
 import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
 import * as React from 'react';
 /**
- * フォーム内で関連する入力フィールドをグループ化するためのコンテナ。
+ * Groups related form fields using the Base UI fieldset root.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldSet composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props): React.JSX.Element;
 /**
- * FieldSet グループのタイトル（見出し）を指定するコンポーネント。
+ * Labels the fieldset with legend or compact label styling.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='legend'.
+ * @returns The rendered FieldLegend composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. variant defaults to legend; label selects smaller typography.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldLegend({ className, variant, ...props }: FieldsetPrimitive.Legend.Props & {
+    /**
+     * Visual treatment from the declared variant union; changing it does not alter host action semantics.
+     */
     variant?: 'legend' | 'label';
 }): React.JSX.Element;
 /**
- * 複数のフィールドをまとめて配置・整理するためのグループコンテナ。
+ * Lays out a vertical group of fields and nested field groups.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldGroup composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/**
+ * Coordinates one field control, label, description and validation state.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.
+ * @returns The rendered Field composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type. orientation defaults to vertical; horizontal/responsive change layout rather than field validation.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const Field: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').FieldRootProps & VariantProps<(props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * フィールド内のコントロールや説明、エラーメッセージを囲むコンテンツ領域。
+ * Groups the textual content adjacent to a field control.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/**
+ * Associates a visible label with its Base UI field control.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldLabel composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const FieldLabel: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').FieldLabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 /**
- * フィールドのタイトル（ラベル）用のコンポーネント。
+ * Styles label-like title content without creating a label association.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldTitle composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/**
+ * Provides descriptive text associated with the surrounding field.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldDescription composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const FieldDescription: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 /**
- * フォームセクションやフィールド間を区切るためのセパレーター（区切り線）。
+ * Draws a divider with optional centered text between field groups.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldSeparator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
  */
 declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<'div'> & {
+    /**
+     * Content rendered in the wrapper's child region.
+     */
     children?: React.ReactNode;
 }): React.JSX.Element;
+/**
+ * Renders supplied children or deduplicated error messages when content exists.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered FieldError composition, or null when it has no visible content.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const FieldError: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').FieldErrorProps & {
+    /**
+     * Explicit validation messages; duplicate message strings are collapsed and missing/empty messages may yield no content.
+     */
     errors?: Array<{
+        /**
+         * Optional error message used for deduplication and display; missing messages do not render a list item.
+         */
         message?: string;
     } | undefined>;
 }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Exposes the surrounding Base UI field validity state to its child renderer.
+ * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.
+ * @returns The rendered FieldValidity composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const FieldValidity: React.FC<import('@base-ui/react').FieldValidityProps>;
+/**
+ * Renders a Base UI control bound to its surrounding field context.
+ * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.
+ * @returns The rendered FieldControl composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.
+ * @example
+ * ```tsx
+ * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name="email"><FieldLabel>Email</FieldLabel><FieldControl type="email" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);
+ * }
+ * ```
+ */
 declare const FieldControl: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Field, FieldLabel, FieldControl, FieldError, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, FieldValidity };