@alneas/appkit-react 0.1.0 → 0.3.0

package/dist/ui/components/ui/mobile-form.js

@@ -7,36 +7,40 @@ import { Loader2 as o } from "lucide-react";
 import { Button as s } from "@base-ui/react/button";
 import { Input as c } from "@base-ui/react/input";
 //#region src/ui/components/ui/mobile-form.tsx
-var l = a.forwardRef(({ className: t, testId: n, ...i }, a) => /* @__PURE__ */ r("form", {
-	ref: a,
-	"data-slot": "mobile-form",
-	"data-testid": n,
-	className: e("space-y-4 px-4 pb-safe", t),
-	...i
-}));
+function l({ ref: t, className: n, testId: i, ...a }) {
+	return /* @__PURE__ */ r("form", {
+		ref: t,
+		"data-slot": "mobile-form",
+		"data-testid": i,
+		className: e("space-y-4 px-4 pb-safe", n),
+		...a
+	});
+}
 l.displayName = "MobileForm";
-var u = a.forwardRef(({ title: t, description: n, className: a, children: o, ...s }, c) => /* @__PURE__ */ i("div", {
-	ref: c,
-	"data-slot": "mobile-form-section",
-	className: e("space-y-3", a),
-	...s,
-	children: [(t || n) && /* @__PURE__ */ i("div", {
-		className: "space-y-1",
-		children: [t && /* @__PURE__ */ r("h3", {
-			className: "text-sm font-medium text-foreground",
-			children: t
-		}), n && /* @__PURE__ */ r("p", {
-			className: "text-xs text-muted-foreground",
-			children: n
+function u({ ref: t, title: n, description: a, className: o, children: s, ...c }) {
+	return /* @__PURE__ */ i("div", {
+		ref: t,
+		"data-slot": "mobile-form-section",
+		className: e("space-y-3", o),
+		...c,
+		children: [(n || a) && /* @__PURE__ */ i("div", {
+			className: "space-y-1",
+			children: [n && /* @__PURE__ */ r("h3", {
+				className: "text-sm font-medium text-foreground",
+				children: n
+			}), a && /* @__PURE__ */ r("p", {
+				className: "text-xs text-muted-foreground",
+				children: a
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "space-y-3",
+			children: s
 		})]
-	}), /* @__PURE__ */ r("div", {
-		className: "space-y-3",
-		children: o
-	})]
-}));
+	});
+}
 u.displayName = "MobileFormSection";
-var d = a.forwardRef(({ label: t, error: n, helperText: o, icon: s, className: l, testId: u, ...d }, f) => {
-	let p = a.useId(), m = d.id ?? p, h = m + "-description", { children: g, ..._ } = d;
+function d({ ref: t, label: n, error: o, helperText: s, icon: l, className: u, testId: d, ...f }) {
+	let p = a.useId(), m = f.id ?? p, h = m + "-description", { children: g, ..._ } = f;
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-1.5",
 		"data-slot": "mobile-input-wrapper",
@@ -44,40 +48,40 @@ var d = a.forwardRef(({ label: t, error: n, helperText: o, icon: s, className: l
 			/* @__PURE__ */ r("label", {
 				htmlFor: m,
 				className: "text-sm font-medium text-foreground",
-				children: t
+				children: n
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "relative",
-				children: [s && /* @__PURE__ */ r("div", {
+				children: [l && /* @__PURE__ */ r("div", {
 					className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
-					children: s
+					children: l
 				}), /* @__PURE__ */ r(c, {
-					ref: f,
+					ref: t,
 					"data-slot": "mobile-input",
-					"data-testid": u,
-					"aria-invalid": !!n,
-					className: e("w-full h-12 px-4 text-base rounded-lg border bg-background", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "placeholder:text-muted-foreground", s && "pl-10", l),
+					"data-testid": d,
+					"aria-invalid": !!o,
+					className: e("w-full h-12 px-4 text-base rounded-lg border bg-background", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "placeholder:text-muted-foreground", l && "pl-10", u),
 					..._,
 					id: m,
-					"aria-describedby": [d["aria-describedby"], (n || o) && h].filter(Boolean).join(" ") || void 0
+					"aria-describedby": [f["aria-describedby"], (o || s) && h].filter(Boolean).join(" ") || void 0
 				})]
 			}),
-			n && /* @__PURE__ */ r("p", {
+			o && /* @__PURE__ */ r("p", {
 				id: h,
 				className: "text-xs text-destructive",
-				children: n
+				children: o
 			}),
-			o && !n && /* @__PURE__ */ r("p", {
+			s && !o && /* @__PURE__ */ r("p", {
 				id: h,
 				className: "text-xs text-muted-foreground",
-				children: o
+				children: s
 			})
 		]
 	});
-});
+}
 d.displayName = "MobileInput";
-var f = a.forwardRef(({ label: t, options: n, error: o, placeholder: s, className: c, testId: l, ...u }, d) => {
-	let f = a.useId(), p = u.id ?? f, m = p + "-description";
+function f({ ref: t, label: n, options: o, error: s, placeholder: c, className: l, testId: u, ...d }) {
+	let f = a.useId(), p = d.id ?? f, m = p + "-description";
 	return /* @__PURE__ */ i("div", {
 		className: "space-y-1.5",
 		"data-slot": "mobile-select-wrapper",
@@ -85,75 +89,79 @@ var f = a.forwardRef(({ label: t, options: n, error: o, placeholder: s, classNam
 			/* @__PURE__ */ r("label", {
 				htmlFor: p,
 				className: "text-sm font-medium text-foreground",
-				children: t
+				children: n
 			}),
 			/* @__PURE__ */ i("select", {
-				ref: d,
+				ref: t,
 				"data-slot": "mobile-select",
-				"data-testid": l,
-				"aria-invalid": !!o,
-				className: e("w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", c),
-				...u,
+				"data-testid": u,
+				"aria-invalid": !!s,
+				className: e("w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none", "transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive aria-invalid:ring-[3px]", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", l),
+				...d,
 				id: p,
-				"aria-describedby": [u["aria-describedby"], o && m].filter(Boolean).join(" ") || void 0,
-				children: [s && /* @__PURE__ */ r("option", {
+				"aria-describedby": [d["aria-describedby"], s && m].filter(Boolean).join(" ") || void 0,
+				children: [c && /* @__PURE__ */ r("option", {
 					value: "",
 					disabled: !0,
-					children: s
-				}), n.map((e) => /* @__PURE__ */ r("option", {
+					children: c
+				}), o.map((e) => /* @__PURE__ */ r("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))]
 			}),
-			o && /* @__PURE__ */ r("p", {
+			s && /* @__PURE__ */ r("p", {
 				id: m,
 				className: "text-xs text-destructive",
-				children: o
+				children: s
 			})
 		]
 	});
-});
+}
 f.displayName = "MobileSelect";
-var p = a.forwardRef(({ className: t, variant: a, size: c, loading: l, icon: u, disabled: d, children: f, testId: p, ...m }, h) => /* @__PURE__ */ i(s, {
-	ref: h,
-	"data-slot": "mobile-button",
-	"data-testid": p,
-	"data-loading": l || void 0,
-	"aria-busy": l || void 0,
-	disabled: d || l,
-	className: typeof t == "function" ? (r) => e(n({
-		variant: a,
-		size: c
-	}), t(r)) : e(n({
-		variant: a,
-		size: c,
-		className: t
-	})),
-	...m,
-	children: [l ? /* @__PURE__ */ r(o, {
-		className: "animate-spin",
-		"aria-hidden": "true"
-	}) : u, f]
-}));
+function p({ ref: t, className: a, variant: c, size: l, loading: u, icon: d, disabled: f, children: p, testId: m, ...h }) {
+	return /* @__PURE__ */ i(s, {
+		ref: t,
+		"data-slot": "mobile-button",
+		"data-testid": m,
+		"data-loading": u || void 0,
+		"aria-busy": u || void 0,
+		disabled: f || u,
+		className: typeof a == "function" ? (t) => e(n({
+			variant: c,
+			size: l
+		}), a(t)) : e(n({
+			variant: c,
+			size: l,
+			className: a
+		})),
+		...h,
+		children: [u ? /* @__PURE__ */ r(o, {
+			className: "animate-spin",
+			"aria-hidden": "true"
+		}) : d, p]
+	});
+}
 p.displayName = "MobileButton";
-var m = a.forwardRef(({ icon: n, label: a, position: o, extended: c, className: l, testId: u, ...d }, f) => /* @__PURE__ */ i(s, {
-	ref: f,
-	"data-slot": "fab",
-	"data-testid": u,
-	className: typeof l == "function" ? (n) => e(t({
-		position: o,
-		extended: c || !!a
-	}), l(n)) : e(t({
-		position: o,
-		extended: c || !!a,
-		className: l
-	})),
-	...d,
-	children: [n, (c || a) && a && /* @__PURE__ */ r("span", {
-		className: "font-medium",
-		children: a
-	})]
-}));
+function m({ ref: n, icon: a, label: o, position: c, extended: l, className: u, testId: d, ...f }) {
+	return /* @__PURE__ */ i(s, {
+		ref: n,
+		"data-slot": "fab",
+		"data-testid": d,
+		className: typeof u == "function" ? (n) => e(t({
+			position: c,
+			extended: l || !!o
+		}), u(n)) : e(t({
+			position: c,
+			extended: l || !!o,
+			className: u
+		})),
+		...f,
+		children: [a, (l || o) && o && /* @__PURE__ */ r("span", {
+			className: "font-medium",
+			children: o
+		})]
+	});
+}
 m.displayName = "FAB";
 //#endregion
 export { m as FAB, p as MobileButton, l as MobileForm, u as MobileFormSection, d as MobileInput, f as MobileSelect };

package/dist/ui/components/ui/mobile-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-form.js","names":["React","InputPrimitive","ButtonPrimitive","React$1","MobileForm","props","testId","cn","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","Input","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","Button","loading","disabled","mobileButtonVariants","state","Loader2","children","FAB","fabVariants","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/**\n * モバイル最適化フォームコンポーネント\n *\n * shadcn/ui パターンに準拠:\n * - CVA でバリアント管理\n * - @base-ui/react プリミティブ使用\n * - テーマトークン使用\n * - testId prop 対応\n */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  testId?: string;\n}\n\nconst MobileForm = React.forwardRef<HTMLFormElement, MobileFormProps>(\n  ({ className, testId, ...props }, ref) => (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  ),\n);\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  description?: string;\n}\n\nconst MobileFormSection = React.forwardRef<HTMLDivElement, MobileFormSectionProps>(\n  ({ title, description, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  ),\n);\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  label: string;\n  error?: string;\n  helperText?: string;\n  icon?: React.ReactNode;\n  testId?: string;\n}\n\nconst MobileInput = React.forwardRef<HTMLInputElement, MobileInputProps>(\n  ({ label, error, helperText, icon, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    // Exclude children from the void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as MobileInputProps & {\n      children?: React.ReactNode;\n      };\n\n    return (\n      <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n        <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n        <div className='relative'>\n          {icon && (\n            <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n              {icon}\n            </div>\n          )}\n          <InputPrimitive\n            ref={ref}\n            data-slot='mobile-input'\n            data-testid={testId}\n            aria-invalid={!!error}\n            className={cn(\n              // Base styles\n              'w-full h-12 px-4 text-base rounded-lg border bg-background',\n              'transition-colors outline-none',\n              // Focus\n              'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n              // Error\n              'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n              'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n              // Disabled\n              'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n              // Placeholder\n              'placeholder:text-muted-foreground',\n              // Icon padding\n              icon && 'pl-10',\n              className,\n            )}\n            {...restProps}\n            id={controlId}\n            aria-describedby={[props['aria-describedby'], (error || helperText) && descriptionId].filter(Boolean).join(' ') || undefined}\n          />\n        </div>\n        {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n        {helperText && !error && <p id={descriptionId} className='text-xs text-muted-foreground'>{helperText}</p>}\n      </div>\n    );\n  },\n);\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  label: string;\n  options: Array<{ value: string; label: string }>;\n  error?: string;\n  placeholder?: string;\n  testId?: string;\n}\n\nconst MobileSelect = React.forwardRef<HTMLSelectElement, MobileSelectProps>(\n  ({ label, options, error, placeholder, className, testId, ...props }, ref) => {\n    const generatedId = React.useId();\n    const controlId = props.id ?? generatedId;\n    const descriptionId = controlId + '-description';\n    return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>{label}</label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={[props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined}\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && <p id={descriptionId} className='text-xs text-destructive'>{error}</p>}\n    </div>\n  );\n  },\n);\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  loading?: boolean;\n  icon?: React.ReactNode;\n  testId?: string;\n}\n\nconst MobileButton = React.forwardRef<HTMLElement, MobileButtonProps>(\n  ({ className, variant, size, loading, icon, disabled, children, testId, ...props }, ref) => {\n    const isDisabled = disabled || loading;\n\n    return (\n      <ButtonPrimitive\n        ref={ref}\n        data-slot='mobile-button'\n        data-testid={testId}\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        disabled={isDisabled}\n        className={typeof className === 'function' ? state => cn(mobileButtonVariants({ variant, size }), className(state)) : cn(mobileButtonVariants({ variant, size, className }))}\n        {...props}\n      >\n        {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n        {children}\n      </ButtonPrimitive>\n    );\n  },\n);\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  icon: React.ReactNode;\n  label?: string;\n  testId?: string;\n}\n\nconst FAB = React.forwardRef<HTMLElement, FABProps>(\n  ({ icon, label, position, extended, className, testId, ...props }, ref) => (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={typeof className === 'function' ? state => cn(fabVariants({ position, extended: extended || !!label }), className(state)) : cn(fabVariants({ position, extended: extended || !!label, className }))}\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  ),\n);\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}
+{"version":3,"file":"mobile-form.js","names":["React","InputPrimitive","ButtonPrimitive","React$1","MobileForm","props","testId","cn","className","MobileFormSection","title","description","MobileInput","generatedId","controlId","descriptionId","_children","restProps","label","icon","Input","error","helperText","MobileSelect","placeholder","options","opt","MobileButton","Button","loading","disabled","mobileButtonVariants","state","Loader2","children","FAB","fabVariants","extended"],"sources":["../../../../src/ui/components/ui/mobile-form.tsx"],"sourcesContent":["/** Mobile-sized native and Base UI form controls with linked labels and Appkit variants. */\n\nimport * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Loader2 } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { mobileButtonVariants, fabVariants } from './mobile-form-variants';\n\n// ============================================================================\n// Mobile Form Container\n// ============================================================================\n\n/**\n * Native form attributes and a stable selector for MobileForm.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileForm\n */\nexport interface MobileFormProps extends React.FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a mobile-spaced native form without adding a form-state provider.\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 MobileForm composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileForm({\n  ref,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileFormProps> & React.RefAttributes<HTMLFormElement>) {\n  return (\n    <form\n      ref={ref}\n      data-slot='mobile-form'\n      data-testid={testId}\n      className={cn('space-y-4 px-4 pb-safe', className)}\n      {...props}\n    />\n  );\n}\nMobileForm.displayName = 'MobileForm';\n\n// ============================================================================\n// Mobile Form Section\n// ============================================================================\n\n/**\n * Native div attributes and optional section heading/description.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileFormSection\n */\nexport interface MobileFormSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional section heading rendered before its content.\n   */\n  title?: string;\n  /**\n   * Supporting text displayed by the owning component.\n   */\n  description?: string;\n}\n\n/**\n * Groups mobile form controls under an optional title and description.\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 MobileFormSection composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileFormSection({\n  ref,\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: React.PropsWithoutRef<MobileFormSectionProps> & React.RefAttributes<HTMLDivElement>) {\n  return (\n    <div\n      ref={ref}\n      data-slot='mobile-form-section'\n      className={cn('space-y-3', className)}\n      {...props}\n    >\n      {(title || description) && (\n        <div className='space-y-1'>\n          {title && <h3 className='text-sm font-medium text-foreground'>{title}</h3>}\n          {description && <p className='text-xs text-muted-foreground'>{description}</p>}\n        </div>\n      )}\n      <div className='space-y-3'>{children}</div>\n    </div>\n  );\n}\nMobileFormSection.displayName = 'MobileFormSection';\n\n// ============================================================================\n// Mobile Input (uses @base-ui/react Input)\n// ============================================================================\n\n/**\n * Base UI input attributes with required visible label and linked helper/error content.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileInput\n */\nexport interface MobileInputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Supporting text linked through aria-describedby when no error is present.\n   */\n  helperText?: string;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled large-touch input with generated IDs and linked helper/error text.\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 MobileInput composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileInput({\n  ref,\n  label,\n  error,\n  helperText,\n  icon,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileInputProps> & React.RefAttributes<HTMLInputElement>) {\n  const generatedId = React.useId();\n  const controlId = props.id ?? generatedId;\n  const descriptionId = controlId + '-description';\n  // Exclude children from the void element\n  const { children: _children, ...restProps } = props as MobileInputProps & {\n    children?: React.ReactNode;\n  };\n\n  return (\n    <div className='space-y-1.5' data-slot='mobile-input-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>\n        {label}\n      </label>\n      <div className='relative'>\n        {icon && (\n          <div className='absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground'>\n            {icon}\n          </div>\n        )}\n        <InputPrimitive\n          ref={ref}\n          data-slot='mobile-input'\n          data-testid={testId}\n          aria-invalid={!!error}\n          className={cn(\n            // Base styles\n            'w-full h-12 px-4 text-base rounded-lg border bg-background',\n            'transition-colors outline-none',\n            // Focus\n            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n            // Error\n            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n            'aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-[3px]',\n            // Disabled\n            'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n            // Placeholder\n            'placeholder:text-muted-foreground',\n            // Icon padding\n            icon && 'pl-10',\n            className,\n          )}\n          {...restProps}\n          id={controlId}\n          aria-describedby={\n            [props['aria-describedby'], (error || helperText) && descriptionId]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n        />\n      </div>\n      {error && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n      {helperText && !error && (\n        <p id={descriptionId} className='text-xs text-muted-foreground'>\n          {helperText}\n        </p>\n      )}\n    </div>\n  );\n}\nMobileInput.displayName = 'MobileInput';\n\n// ============================================================================\n// Mobile Select\n// ============================================================================\n\n/**\n * Native select attributes with required label and option data.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileSelect\n */\nexport interface MobileSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string;\n  /**\n   * Native option entries in display order; each value must be a stable unique string and label is its visible text.\n   */\n  options: Array<{ /**\n * Identity for this choice within the surrounding group; provide a distinct stable string.\n */\n  /**\n   * Identity for this choice within the surrounding group; provide a distinct stable string.\n   */\n  value: string; /**\n * Visible control/option text or content; does not perform persistence or validation.\n */\n  /**\n   * Visible control/option text or content; does not perform persistence or validation.\n   */\n  label: string }>;\n  /**\n   * Error text displayed and used to mark the control invalid; the host supplies validation results.\n   */\n  error?: string;\n  /**\n   * Text displayed while no value is selected/entered; omitted means no placeholder.\n   */\n  placeholder?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a labeled native select with generated IDs and linked error text.\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 MobileSelect composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileSelect({\n  ref,\n  label,\n  options,\n  error,\n  placeholder,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileSelectProps> & React.RefAttributes<HTMLSelectElement>) {\n  const generatedId = React.useId();\n  const controlId = props.id ?? generatedId;\n  const descriptionId = controlId + '-description';\n  return (\n    <div className='space-y-1.5' data-slot='mobile-select-wrapper'>\n      <label htmlFor={controlId} className='text-sm font-medium text-foreground'>\n        {label}\n      </label>\n      <select\n        ref={ref}\n        data-slot='mobile-select'\n        data-testid={testId}\n        aria-invalid={!!error}\n        className={cn(\n          // Base\n          'w-full h-12 px-4 text-base rounded-lg border bg-background appearance-none',\n          'transition-colors outline-none',\n          // Focus\n          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n          // Error\n          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',\n          'aria-invalid:border-destructive aria-invalid:ring-[3px]',\n          // Disabled\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n        id={controlId}\n        aria-describedby={\n          [props['aria-describedby'], error && descriptionId].filter(Boolean).join(' ') || undefined\n        }\n      >\n        {placeholder && (\n          <option value='' disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {error && (\n        <p id={descriptionId} className='text-xs text-destructive'>\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\nMobileSelect.displayName = 'MobileSelect';\n\n// ============================================================================\n// Mobile Button (CVA variants + @base-ui/react Button)\n// ============================================================================\n\n/**\n * Base UI button attributes with mobile variants, loading state and optional icon.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see MobileButton\n */\nexport interface MobileButtonProps\n  extends ButtonPrimitive.Props, VariantProps<typeof mobileButtonVariants> {\n  /**\n   * Shows the loading spinner and disables activation when true; omitted means not loading. This does not manage an asynchronous task.\n   */\n  loading?: boolean;\n  /**\n   * Leading visual content; provide an accessible name separately when it is the only button content.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a large-touch Base UI button with optional loading spinner or leading icon.\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 MobileButton composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction MobileButton({\n  ref,\n  className,\n  variant,\n  size,\n  loading,\n  icon,\n  disabled,\n  children,\n  testId,\n  ...props\n}: React.PropsWithoutRef<MobileButtonProps> & React.RefAttributes<HTMLElement>) {\n  const isDisabled = disabled || loading;\n\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='mobile-button'\n      data-testid={testId}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      className={\n        typeof className === 'function'\n          ? (state) => cn(mobileButtonVariants({ variant, size }), className(state))\n          : cn(mobileButtonVariants({ variant, size, className }))\n      }\n      {...props}\n    >\n      {loading ? <Loader2 className='animate-spin' aria-hidden='true' /> : icon}\n      {children}\n    </ButtonPrimitive>\n  );\n}\nMobileButton.displayName = 'MobileButton';\n\n// ============================================================================\n// Floating Action Button (FAB)\n// ============================================================================\n\n/**\n * Base UI button attributes and fixed-position floating-action styling.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see FAB\n */\nexport interface FABProps extends ButtonPrimitive.Props, VariantProps<typeof fabVariants> {\n  /**\n   * Required visual content in the floating action button; provide aria-label for icon-only use.\n   */\n  icon: React.ReactNode;\n  /**\n   * Optional visible text; a truthy label forces extended styling even when extended=false.\n   */\n  label?: string;\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a fixed floating action button that expands when label content is supplied.\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 FAB composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The host owns submit effects and values. Input/Select use the caller id or React useId and append -description for help/errors; error text takes precedence over helperText. testId targets the control/form/button. MobileInput uses Base UI Input directly, not Appkit Input numeric normalization. MobileButton loading disables it and replaces icon with a spinner. FAB label forces extended styling even if extended=false; an icon-only FAB needs an accessible name. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><MobileForm onSubmit={event => event.preventDefault()}><MobileFormSection title=\"Contact\"><MobileInput label=\"Name\" /><MobileSelect label=\"Method\" defaultValue=\"email\" options={[{ value: \"email\", label: \"Email\" }]} /><MobileButton type=\"submit\">Save</MobileButton></MobileFormSection></MobileForm><FAB icon={<span>+</span>} label=\"Create\" /></>);\n * }\n * ```\n */\nfunction FAB({\n  ref,\n  icon,\n  label,\n  position,\n  extended,\n  className,\n  testId,\n  ...props\n}: React.PropsWithoutRef<FABProps> & React.RefAttributes<HTMLElement>) {\n  return (\n    <ButtonPrimitive\n      ref={ref}\n      data-slot='fab'\n      data-testid={testId}\n      className={\n        typeof className === 'function'\n          ? (state) =>\n              cn(fabVariants({ position, extended: extended || !!label }), className(state))\n          : cn(fabVariants({ position, extended: extended || !!label, className }))\n      }\n      {...props}\n    >\n      {icon}\n      {(extended || label) && label && <span className='font-medium'>{label}</span>}\n    </ButtonPrimitive>\n  );\n}\nFAB.displayName = 'FAB';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MobileForm, MobileFormSection, MobileInput, MobileSelect, MobileButton, FAB };\n"],"mappings":"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"}

package/dist/ui/components/ui/navigation-menu-components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu-components.cjs","names":["NavigationMenuPrimitive","cn","navigationMenuTriggerStyle","ChevronDown","require_ui_lib_utils","require_ui_components_ui_navigation_menu_variants","react_jsx_runtime","lucide_react","_base_ui_react_navigation_menu","NavigationMenu","props","className","children","NavigationMenuPositioner","NavigationMenuList","NavigationMenuItem","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuLink","NavigationMenuIndicator"],"sources":["../../../../src/ui/components/ui/navigation-menu-components.tsx"],"sourcesContent":["'use client';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { navigationMenuTriggerStyle } from './navigation-menu-variants';\n\n/**\n * ナビゲーションメニューのルートコンポーネント。\n */\nfunction NavigationMenu({ className, children, ...props }: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot='navigation-menu'\n      className={cn(\n        'max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/**\n * ナビゲーションアイテムを横並びにするためのリストコンテナ。\n */\nfunction NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot='navigation-menu-list'\n      className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * ナビゲーションメニュー内の個々の項目。\n */\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot='navigation-menu-item'\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * サブメニューを展開するためのトリガーボタン。\n */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot='navigation-menu-trigger'\n      className={cn(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n    >\n      {children}{' '}\n      <ChevronDown\n        className='relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180'\n        aria-hidden='true'\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/**\n * トリガーによって展開されるサブメニューのコンテンツコンテナ。\n */\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot='navigation-menu-content'\n      className={cn(\n        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * サブメニューのポップアップ位置を制御するポジショナーコンポーネント。\n */\nfunction NavigationMenuPositioner({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className='bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)'>\n          <NavigationMenuPrimitive.Viewport className='relative size-full overflow-hidden' />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\n/**\n * ナビゲーション用のリンクコンポーネント。\n */\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot='navigation-menu-link'\n      className={cn(\n        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * 現在アクティブな項目を指し示すインジケーター。\n */\nfunction NavigationMenuIndicator({ className, ...props }: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot='navigation-menu-indicator'\n      className={cn(\n        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',\n        className,\n      )}\n      {...props}\n    >\n      <div className='bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45' />\n    </NavigationMenuPrimitive.Icon>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuPositioner,\n};\n"],"mappings":"A,yRAWA,SAASS,EAAe,CAAE,YAAW,WAAU,GAAGC,GAA6C,CAC7F,OACE,EAAAJ,EAAA,KAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,kBACV,UAAWC,EAAAA,GACT,6FACAU,CACF,EACA,GAAID,EANN,SAAA,CAQGE,GACD,EAAAN,EAAA,IAAA,CAACO,EAAD,CAA2B,CAAA,CACC,C,EAElC,CAKA,SAASC,EAAmB,CAAE,YAAW,GAAGJ,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GAAG,gEAAiEU,CAAS,EACxF,GAAID,CACL,CAAA,CAEL,CAKA,SAASK,EAAmB,CAAE,YAAW,GAAGL,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GAAG,WAAYU,CAAS,EACnC,GAAID,CACL,CAAA,CAEL,CAKA,SAASM,EAAsB,CAC7B,YACA,WACA,GAAGN,GACqC,CACxC,OACE,EAAAJ,EAAA,KAAA,CAACN,EAAAA,eAAwB,QAAzB,CACE,YAAU,0BACV,UAAWC,EAAAA,GAAGC,EAAAA,2BAA2B,EAAG,QAASS,CAAS,EAC9D,GAAID,EAHN,SAAA,CAKGE,EAAU,KACX,EAAAN,EAAA,IAAA,CAACH,EAAAA,YAAD,CACE,UAAU,qKACV,cAAY,MACb,CAAA,CAC8B,C,EAErC,CAKA,SAASc,EAAsB,CAAE,YAAW,GAAGP,GAAgD,CAC7F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,QAAzB,CACE,YAAU,0BACV,UAAWC,EAAAA,GACT,wuCACAU,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASG,EAAyB,CAChC,YACA,OAAO,SACP,aAAa,EACb,QAAQ,QACR,cAAc,EACd,GAAGH,GACwC,CAC3C,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,OAAzB,CAAA,UACE,EAAAM,EAAA,IAAA,CAACN,EAAAA,eAAwB,WAAzB,CACQ,OACM,aACL,QACM,cACb,UAAWC,EAAAA,GACT,kUACAU,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,MAAzB,CAA+B,UAAU,0YACvC,UAAA,EAAAM,EAAA,IAAA,CAACN,EAAAA,eAAwB,SAAzB,CAAkC,UAAU,oCAAsC,CAAA,CACrD,CAAA,CACG,CAAA,CACN,CAAA,CAEpC,CAKA,SAASkB,EAAmB,CAAE,YAAW,GAAGR,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GACT,6VACAU,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAKA,SAASS,EAAwB,CAAE,YAAW,GAAGT,GAA6C,CAC5F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,4BACV,UAAWC,EAAAA,GACT,+LACAU,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEAA0E,CAAA,CAC7D,CAAA,CAElC,C"}
+{"version":3,"file":"navigation-menu-components.cjs","names":["NavigationMenuPrimitive","cn","navigationMenuTriggerStyle","ChevronDown","require_ui_lib_utils","require_ui_components_ui_navigation_menu_variants","react_jsx_runtime","lucide_react","_base_ui_react_navigation_menu","NavigationMenu","props","className","children","NavigationMenuPositioner","NavigationMenuList","NavigationMenuItem","NavigationMenuTrigger","NavigationMenuContent","NavigationMenuLink","NavigationMenuIndicator"],"sources":["../../../../src/ui/components/ui/navigation-menu-components.tsx"],"sourcesContent":["'use client';\n\nimport { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';\nimport { ChevronDown } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { navigationMenuTriggerStyle } from './navigation-menu-variants';\n\n/**\n * Coordinates navigation items and appends a shared popup positioner.\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 NavigationMenu composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenu({ className, children, ...props }: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot='navigation-menu'\n      className={cn(\n        'max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  );\n}\n\n/**\n * Lays out top-level navigation items in a horizontal list.\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 NavigationMenuList composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot='navigation-menu-list'\n      className={cn('gap-0 group flex flex-1 list-none items-center justify-center', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Associates a navigation trigger/link with its content.\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 NavigationMenuItem composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot='navigation-menu-item'\n      className={cn('relative', className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a navigation popup opener with a chevron.\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 NavigationMenuTrigger composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot='navigation-menu-trigger'\n      className={cn(navigationMenuTriggerStyle(), 'group', className)}\n      {...props}\n    >\n      {children}{' '}\n      <ChevronDown\n        className='relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180'\n        aria-hidden='true'\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\n/**\n * Renders the content associated with its navigation item.\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 NavigationMenuContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot='navigation-menu-content'\n      className={cn(\n        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Portals the shared navigation popup and viewport with configurable alignment.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: side='bottom', sideOffset=8, align='start', alignOffset=0.\n * @returns The rendered NavigationMenuPositioner composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.  children are replaced by the shared popup/viewport composition.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuPositioner({\n  className,\n  side = 'bottom',\n  sideOffset = 8,\n  align = 'start',\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          'transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none',\n          className,\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className='bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)'>\n          <NavigationMenuPrimitive.Viewport className='relative size-full overflow-hidden' />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\n/**\n * Renders an accessible navigation link inside the menu.\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 NavigationMenuLink composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot='navigation-menu-link'\n      className={cn(\n        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Renders a diamond-shaped decoration through the Base UI navigation icon primitive.\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 NavigationMenuIndicator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.  children are replaced by the diamond-shaped marker.\n * @example\n * ```tsx\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href=\"/overview\">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);\n * }\n * ```\n */\nfunction NavigationMenuIndicator({ className, ...props }: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot='navigation-menu-indicator'\n      className={cn(\n        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',\n        className,\n      )}\n      {...props}\n    >\n      <div className='bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45' />\n    </NavigationMenuPrimitive.Icon>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  NavigationMenuPositioner,\n};\n"],"mappings":"A,yRAuBA,SAASS,EAAe,CAAE,YAAW,WAAU,GAAGC,GAA6C,CAC7F,OACE,EAAAJ,EAAA,KAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,kBACV,UAAWC,EAAAA,GACT,6FACAU,CACF,EACA,GAAID,EANN,SAAA,CAQGE,GACD,EAAAN,EAAA,IAAA,CAACO,EAAD,CAA2B,CAAA,CACC,C,EAElC,CAiBA,SAASC,EAAmB,CAAE,YAAW,GAAGJ,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GAAG,gEAAiEU,CAAS,EACxF,GAAID,CACL,CAAA,CAEL,CAiBA,SAASK,EAAmB,CAAE,YAAW,GAAGL,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GAAG,WAAYU,CAAS,EACnC,GAAID,CACL,CAAA,CAEL,CAiBA,SAASM,EAAsB,CAC7B,YACA,WACA,GAAGN,GACqC,CACxC,OACE,EAAAJ,EAAA,KAAA,CAACN,EAAAA,eAAwB,QAAzB,CACE,YAAU,0BACV,UAAWC,EAAAA,GAAGC,EAAAA,2BAA2B,EAAG,QAASS,CAAS,EAC9D,GAAID,EAHN,SAAA,CAKGE,EAAU,KACX,EAAAN,EAAA,IAAA,CAACH,EAAAA,YAAD,CACE,UAAU,qKACV,cAAY,MACb,CAAA,CAC8B,C,EAErC,CAiBA,SAASc,EAAsB,CAAE,YAAW,GAAGP,GAAgD,CAC7F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,QAAzB,CACE,YAAU,0BACV,UAAWC,EAAAA,GACT,wuCACAU,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASG,EAAyB,CAChC,YACA,OAAO,SACP,aAAa,EACb,QAAQ,QACR,cAAc,EACd,GAAGH,GACwC,CAC3C,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,OAAzB,CAAA,UACE,EAAAM,EAAA,IAAA,CAACN,EAAAA,eAAwB,WAAzB,CACQ,OACM,aACL,QACM,cACb,UAAWC,EAAAA,GACT,kUACAU,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,MAAzB,CAA+B,UAAU,0YACvC,UAAA,EAAAM,EAAA,IAAA,CAACN,EAAAA,eAAwB,SAAzB,CAAkC,UAAU,oCAAsC,CAAA,CACrD,CAAA,CACG,CAAA,CACN,CAAA,CAEpC,CAiBA,SAASkB,EAAmB,CAAE,YAAW,GAAGR,GAA6C,CACvF,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,uBACV,UAAWC,EAAAA,GACT,6VACAU,CACF,EACA,GAAID,CACL,CAAA,CAEL,CAiBA,SAASS,EAAwB,CAAE,YAAW,GAAGT,GAA6C,CAC5F,OACE,EAAAJ,EAAA,IAAA,CAACN,EAAAA,eAAwB,KAAzB,CACE,YAAU,4BACV,UAAWC,EAAAA,GACT,+LACAU,CACF,EACA,GAAID,EAEJ,UAAA,EAAAJ,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wEAA0E,CAAA,CAC7D,CAAA,CAElC,C"}

package/dist/ui/components/ui/navigation-menu-components.d.cts

@@ -1,34 +1,130 @@
 import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
 /**
- * ナビゲーションメニューのルートコンポーネント。
+ * Coordinates navigation items and appends a shared popup positioner.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenu composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenu({ className, children, ...props }: NavigationMenuPrimitive.Root.Props): import('react').JSX.Element;
 /**
- * ナビゲーションアイテムを横並びにするためのリストコンテナ。
+ * Lays out top-level navigation items in a horizontal list.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuList composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props): import('react').JSX.Element;
 /**
- * ナビゲーションメニュー内の個々の項目。
+ * Associates a navigation trigger/link with its content.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuItem composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props): import('react').JSX.Element;
 /**
- * サブメニューを展開するためのトリガーボタン。
+ * Renders a navigation popup opener with a chevron.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuTrigger composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props): import('react').JSX.Element;
 /**
- * トリガーによって展開されるサブメニューのコンテンツコンテナ。
+ * Renders the content associated with its navigation item.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuContent composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props): import('react').JSX.Element;
 /**
- * サブメニューのポップアップ位置を制御するポジショナーコンポーネント。
+ * Portals the shared navigation popup and viewport with configurable alignment.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: side='bottom', sideOffset=8, align='start', alignOffset=0.
+ * @returns The rendered NavigationMenuPositioner composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.  children are replaced by the shared popup/viewport composition.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, ...props }: NavigationMenuPrimitive.Positioner.Props): import('react').JSX.Element;
 /**
- * ナビゲーション用のリンクコンポーネント。
+ * Renders an accessible navigation link inside the menu.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuLink composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props): import('react').JSX.Element;
 /**
- * 現在アクティブな項目を指し示すインジケーター。
+ * Renders a diamond-shaped decoration through the Base UI navigation icon primitive.
+ * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.
+ * @returns The rendered NavigationMenuIndicator composition.
+ * @remarks Import @alneas/appkit-react/styles in the rendering host. Compose List/Item/Trigger/Content under NavigationMenu. The root already appends NavigationMenuPositioner; adding another creates another popup composition. Content is routed through the shared viewport by Base UI. The host supplies destinations and authorization; the Indicator export wraps Icon rather than computing active-item geometry.  children are replaced by the diamond-shaped marker.
+ * @example
+ * ```tsx
+ * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@alneas/appkit-react/ui';
+ * import '@alneas/appkit-react/styles';
+ *
+ * export function Example() {
+ *   return (<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Project</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="/overview">Overview</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu>);
+ * }
+ * ```
  */
 declare function NavigationMenuIndicator({ className, ...props }: NavigationMenuPrimitive.Icon.Props): import('react').JSX.Element;
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuPositioner, };