admin-ui-starter-kit 0.1.0

package/dist/_shared/hooks-CX-SICd4.js

@@ -0,0 +1,118 @@
+import { cn as e } from "../lib/utils.js";
+import { t } from "./badge-BbUN6W7E.js";
+import * as n from "react";
+import { useCallback as r, useEffect as i, useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/layout/layout.types.tsx
+var s = ({ href: e, children: t, disabled: n, external: r, rel: i, target: a, ...s }) => !e || n ? /* @__PURE__ */ o("span", {
+	...s,
+	children: t
+}) : /* @__PURE__ */ o("a", {
+	href: e,
+	target: a ?? (r ? "_blank" : void 0),
+	rel: i ?? (r ? "noopener noreferrer" : void 0),
+	...s,
+	children: t
+}), c = ({ children: e, ...t }) => /* @__PURE__ */ o("a", {
+	...t,
+	children: e
+});
+function l({ renderLink: e, LinkComponent: t } = {}) {
+	return e || (t ? ({ active: e, disabled: n, external: r, children: i, ...a }) => n || !a.href ? /* @__PURE__ */ o("span", {
+		className: a.className,
+		children: i
+	}) : /* @__PURE__ */ o(t, {
+		...a,
+		children: i
+	}) : s);
+}
+//#endregion
+//#region src/components/layout/hooks/use-layout-link.tsx
+function u({ renderLink: e, LinkComponent: t } = {}) {
+	return a(() => l({
+		renderLink: e,
+		LinkComponent: t
+	}), [e, t]);
+}
+//#endregion
+//#region src/components/layout/sidebar/sidebar.utils.tsx
+function d(e) {
+	if (e.startsWith("#/")) return e.slice(1).split("?")[0]?.split("#")[0] || "/";
+	try {
+		return new URL(e, "http://local.invalid").pathname;
+	} catch {
+		return e;
+	}
+}
+function f(e, t) {
+	let n = d(e);
+	return n === t || n.startsWith(t + "/") || n.startsWith(t + "?");
+}
+function p(e) {
+	return e.label ?? e.title ?? "";
+}
+function m(e, t) {
+	let n = p(e);
+	return e.handle ?? e.href ?? (typeof n == "string" || typeof n == "number" ? n : `nav-${t ?? 0}`);
+}
+function h({ value: n, size: r = "default" }) {
+	return /* @__PURE__ */ o(t, {
+		variant: "secondary",
+		className: e("ml-auto rounded-full tabular-nums text-sidebar-foreground", r === "small" ? "h-4 min-w-4 px-1.5" : "h-5 min-w-5 px-1.5"),
+		children: n
+	});
+}
+function g(e, t, n) {
+	return e && n && n[e] != null ? n[e] : t;
+}
+function _({ icon: t, iconMap: r = {}, size: i = 20, className: a = "size-4", ...s }) {
+	if (!t) return null;
+	if (typeof t == "string") {
+		let e = r[t];
+		return e ? /* @__PURE__ */ o(e, { className: a }) : null;
+	}
+	return n.isValidElement(t) ? n.cloneElement(t, {
+		className: e(a, t.props.className),
+		...s
+	}) : typeof t == "function" || typeof t == "object" && t && "$$typeof" in t ? /* @__PURE__ */ o(t, {
+		className: a,
+		width: i,
+		height: i,
+		...s
+	}) : null;
+}
+function v(e, t, n, r, i) {
+	return e({
+		href: t.href,
+		children: n,
+		className: r,
+		active: i,
+		disabled: t.disabled || !t.href,
+		external: t.external
+	});
+}
+//#endregion
+//#region src/components/layout/hooks/use-active-path.ts
+function y(e = "/") {
+	return r((t) => !!t && f(e, d(t)), [e]);
+}
+//#endregion
+//#region src/components/layout/hooks/use-command-shortcut.ts
+function b({ key: e, enabled: t = !0, onTrigger: n, preventDefault: r = !0 }) {
+	i(() => {
+		if (!t || !n || typeof document > "u") return;
+		let i = (t) => {
+			(t.metaKey || t.ctrlKey) && t.key.toLowerCase() === e.toLowerCase() && (r && t.preventDefault(), n());
+		};
+		return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+	}, [
+		t,
+		e,
+		n,
+		r
+	]);
+}
+//#endregion
+export { m as a, v as c, u as d, c as f, h as i, g as l, l as m, y as n, p as o, s as p, _ as r, f as s, b as t, d as u };
+
+//# sourceMappingURL=hooks-CX-SICd4.js.map

package/dist/_shared/hooks-CX-SICd4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks-CX-SICd4.js","names":[],"sources":["../../src/components/layout/layout.types.tsx","../../src/components/layout/hooks/use-layout-link.tsx","../../src/components/layout/sidebar/sidebar.utils.tsx","../../src/components/layout/hooks/use-active-path.ts","../../src/components/layout/hooks/use-command-shortcut.ts"],"sourcesContent":[" \n/**\n * Shared layout types used across page, header, and sidebar.\n *\n * The layout layer is framework-agnostic by contract. It never imports a\n * router package. Navigation is delegated to the consumer through\n * `renderLink`, with a backwards-compatible `LinkComponent` bridge for older\n * call sites.\n */\nimport type { ComponentType, MouseEvent, ReactNode } from 'react';\n\nexport interface LayoutLinkRenderProps {\n\t/** Destination URL. When omitted, render non-interactive content. */\n\thref?: string;\n\tchildren: ReactNode;\n\tclassName?: string;\n\ttarget?: string;\n\trel?: string;\n\tonClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n\t'aria-label'?: string;\n\t/** Consumer hint for active styling; renderers may ignore it. */\n\tactive?: boolean;\n\t/** Consumer hint to render as muted/non-interactive. */\n\tdisabled?: boolean;\n\t/** Consumer hint for external-link behavior. */\n\texternal?: boolean;\n}\n\n/**\n * Primary navigation seam. Consumers can wire Inertia, Next, React Router,\n * TanStack Router, or a plain anchor without this package importing them.\n *\n * Example:\n *   renderLink={({ href, children, className }) => (\n *     <Link href={href ?? '#'} className={className}>{children}</Link>\n *   )}\n */\nexport type LayoutLinkRenderer = (props: LayoutLinkRenderProps) => ReactNode;\n\n/** Backwards-compatible component style. Prefer `renderLink` for new code. */\nexport type LinkComponent = ComponentType<{\n\thref?: string;\n\tclassName?: string;\n\tchildren?: ReactNode;\n\ttarget?: string;\n\trel?: string;\n\tonClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n\t'aria-label'?: string;\n}>;\n\nexport interface LayoutNavigationAdapter {\n\t/** Preferred renderer for framework-native links. */\n\trenderLink?: LayoutLinkRenderer;\n\t/** Compatibility bridge for old call sites. Prefer `renderLink`. */\n\tLinkComponent?: LinkComponent;\n}\n\n/** Default link renderer — native anchor with disabled fallback. */\nexport const defaultRenderLink: LayoutLinkRenderer = ({\n\thref,\n\tchildren,\n\tdisabled,\n\texternal,\n\trel,\n\ttarget,\n\t...props\n}) => {\n\tif (!href || disabled) {\n\t\treturn <span {...props}>{children}</span>;\n\t}\n\n\tconst resolvedTarget = target ?? (external ? '_blank' : undefined);\n\tconst resolvedRel = rel ?? (external ? 'noopener noreferrer' : undefined);\n\n\treturn (\n\t\t<a href={href} target={resolvedTarget} rel={resolvedRel} {...props}>\n\t\t\t{children}\n\t\t</a>\n\t);\n};\n\nexport const DefaultLinkComponent: LinkComponent = ({ children, ...props }) => (\n\t<a {...props}>{children}</a>\n);\n\n/** Resolve the final renderer while preserving `LinkComponent` compatibility. */\nexport function resolveLayoutLinkRenderer({\n\trenderLink,\n\tLinkComponent,\n}: LayoutNavigationAdapter = {}): LayoutLinkRenderer {\n\tif (renderLink) return renderLink;\n\tif (LinkComponent) {\n\t\treturn ({ active, disabled, external, children, ...props }) => {\n\t\t\tvoid active;\n\t\t\tvoid external;\n\t\t\tif (disabled || !props.href) return <span className={props.className}>{children}</span>;\n\t\t\treturn <LinkComponent {...props}>{children}</LinkComponent>;\n\t\t};\n\t}\n\treturn defaultRenderLink;\n}\n\n/** Plain navigation item used by sidebar / breadcrumbs / page header. */\nexport interface NavLink {\n\tlabel: ReactNode;\n\thref?: string;\n\thandle?: string;\n\tbadge?: string | number;\n\tdisabled?: boolean;\n\texternal?: boolean;\n}\n\n/** Hierarchical navigation item — extends `NavLink` with optional children. */\nexport interface NavItem extends NavLink {\n\ticon?: LayoutIconSource;\n\tchildren?: NavItem[];\n\tgroup?: string;\n}\n\n/** Breadcrumb entry. The last item with no `href` renders as the current page. */\nexport interface BreadcrumbItem {\n\tlabel: ReactNode;\n\thref?: string;\n\thandle?: string;\n}\n\nexport type LayoutIconSource =\n\t| ComponentType<{ className?: string }>\n\t| ComponentType<React.SVGProps<SVGSVGElement>>\n\t| ReactNode\n\t| string;\n\nexport interface LayoutUser {\n\tname: string;\n\temail?: string;\n\tavatar?: string;\n\trole?: string;\n}\n\nexport interface ExternalLinkItem {\n\tlabel: ReactNode;\n\turl: string;\n\ticon?: ComponentType<{ className?: string }>;\n}\n","import { useMemo } from 'react';\n\nimport {\n\tresolveLayoutLinkRenderer,\n\ttype LayoutLinkRenderer,\n\ttype LayoutNavigationAdapter,\n} from '../layout.types';\n\nexport function useLayoutLinkRenderer({\n\trenderLink,\n\tLinkComponent,\n}: LayoutNavigationAdapter = {}): LayoutLinkRenderer {\n\treturn useMemo(\n\t\t() => resolveLayoutLinkRenderer({ renderLink, LinkComponent }),\n\t\t[renderLink, LinkComponent],\n\t);\n}\n"," \n/** Sidebar utilities — pure path helpers, labels, icon rendering, badge pill. */\nimport * as React from 'react';\n\nimport { Badge } from '@/components/base/badge';\nimport { cn } from '@/lib/utils';\n\nimport type { LayoutIconSource, LayoutLinkRenderer } from '../layout.types';\nimport type { SidebarNavItem } from './sidebar.types';\n\nexport function toPath(href: string): string {\n\tif (href.startsWith('#/')) {\n\t\treturn href.slice(1).split('?')[0]?.split('#')[0] || '/';\n\t}\n\n\ttry {\n\t\treturn new URL(href, 'http://local.invalid').pathname;\n\t} catch {\n\t\treturn href;\n\t}\n}\n\nexport function isPathMatch(currentUrl: string, path: string): boolean {\n\tconst currentPath = toPath(currentUrl);\n\treturn currentPath === path || currentPath.startsWith(path + '/') || currentPath.startsWith(path + '?');\n}\n\nexport function getNavLabel(item: Pick<SidebarNavItem, 'label' | 'title'>): React.ReactNode {\n\treturn item.label ?? item.title ?? '';\n}\n\nexport function getNavKey(item: SidebarNavItem, fallbackIndex?: number): React.Key {\n\tconst label = getNavLabel(item);\n\treturn item.handle ?? item.href ?? (typeof label === 'string' || typeof label === 'number' ? label : `nav-${fallbackIndex ?? 0}`);\n}\n\nexport function NavBadge({\n\tvalue,\n\tsize = 'default',\n}: {\n\tvalue: string | number;\n\tsize?: 'default' | 'small';\n}) {\n\treturn (\n\t\t<Badge\n\t\t\tvariant=\"secondary\"\n\t\t\tclassName={cn(\n\t\t\t\t'ml-auto rounded-full tabular-nums text-sidebar-foreground',\n\t\t\t\tsize === 'small' ? 'h-4 min-w-4 px-1.5' : 'h-5 min-w-5 px-1.5',\n\t\t\t)}\n\t\t>\n\t\t\t{value}\n\t\t</Badge>\n\t);\n}\n\nexport function resolveNavBadge(\n\thandle: string | undefined,\n\titemBadge: string | number | undefined,\n\tliveBadges: Record<string, string | number> | undefined,\n): string | number | undefined {\n\tif (handle && liveBadges && liveBadges[handle] != null) {\n\t\treturn liveBadges[handle];\n\t}\n\treturn itemBadge;\n}\n\nexport interface DynamicIconProps extends React.SVGProps<SVGSVGElement> {\n\ticon: LayoutIconSource;\n\ticonMap?: Record<string, React.ComponentType<{ className?: string }>>;\n\tsize?: number;\n\tclassName?: string;\n}\n\nexport function DynamicIcon({\n\ticon,\n\ticonMap = {},\n\tsize = 20,\n\tclassName = 'size-4',\n\t...props\n}: DynamicIconProps) {\n\tif (!icon) return null;\n\n\tif (typeof icon === 'string') {\n\t\tconst IconComponent = iconMap[icon];\n\t\treturn IconComponent ? <IconComponent className={className} /> : null;\n\t}\n\n\tif (React.isValidElement(icon)) {\n\t\treturn React.cloneElement(icon as React.ReactElement<React.SVGProps<SVGSVGElement>>, {\n\t\t\tclassName: cn(className, (icon.props as { className?: string }).className),\n\t\t\t...props,\n\t\t});\n\t}\n\n\tif (\n\t\ttypeof icon === 'function'\n\t\t|| (typeof icon === 'object' && icon !== null && '$$typeof' in icon)\n\t) {\n\t\tconst IconComponent = icon as React.ElementType<React.SVGProps<SVGSVGElement>>;\n\t\treturn <IconComponent className={className} width={size} height={size} {...props} />;\n\t}\n\n\treturn null;\n}\n\nexport function renderSidebarLink(\n\trenderLink: LayoutLinkRenderer,\n\titem: SidebarNavItem,\n\tchildren: React.ReactNode,\n\tclassName?: string,\n\tactive?: boolean,\n) {\n\treturn renderLink({\n\t\thref: item.href,\n\t\tchildren,\n\t\tclassName,\n\t\tactive,\n\t\tdisabled: item.disabled || !item.href,\n\t\texternal: item.external,\n\t});\n}\n","import { useCallback } from 'react';\n\nimport { isPathMatch, toPath } from '../sidebar/sidebar.utils';\n\nexport function useActivePath(currentUrl = '/') {\n\treturn useCallback(\n\t\t(href?: string) => !!href && isPathMatch(currentUrl, toPath(href)),\n\t\t[currentUrl],\n\t);\n}\n","import { useEffect } from 'react';\n\nexport interface UseCommandShortcutOptions {\n\tkey: string;\n\tenabled?: boolean;\n\tonTrigger?: () => void;\n\tpreventDefault?: boolean;\n}\n\nexport function useCommandShortcut({\n\tkey,\n\tenabled = true,\n\tonTrigger,\n\tpreventDefault = true,\n}: UseCommandShortcutOptions) {\n\tuseEffect(() => {\n\t\tif (!enabled || !onTrigger || typeof document === 'undefined') return;\n\n\t\tconst handler = (event: KeyboardEvent) => {\n\t\t\tif (!(event.metaKey || event.ctrlKey)) return;\n\t\t\tif (event.key.toLowerCase() !== key.toLowerCase()) return;\n\t\t\tif (preventDefault) event.preventDefault();\n\t\t\tonTrigger();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handler);\n\t\treturn () => document.removeEventListener('keydown', handler);\n\t}, [enabled, key, onTrigger, preventDefault]);\n}\n"],"mappings":"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"}

package/dist/_shared/icon-badge-DGKpbo9_.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-D3uCBrYO.cjs`);const e=require(`../lib/utils.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r={xs:{box:`size-6`,icon:`size-3`},sm:{box:`size-8`,icon:`size-3.5`},md:{box:`size-9`,icon:`size-4`},lg:{box:`size-12`,icon:`size-5`}},i={primary:`bg-primary/15 text-primary`,secondary:`bg-foreground/8 text-muted-foreground`,success:`bg-success/15 text-success`,warning:`bg-warning/20 text-warning-foreground`,destructive:`bg-destructive/12 text-destructive`,info:`bg-info/15 text-info`,muted:`bg-muted text-muted-foreground`},a={primary:`bg-primary text-primary-foreground`,secondary:`bg-secondary text-secondary-foreground`,success:`bg-success text-success-foreground`,warning:`bg-warning text-warning-foreground`,destructive:`bg-destructive text-destructive-foreground`,info:`bg-info text-info-foreground`,muted:`bg-foreground/70 text-background`};function o({icon:o,children:s,size:c=`md`,shape:l=`circle`,tone:u=`primary`,solid:d=!1,bordered:f=!1,className:p,...m}){let h=r[c],g=d?a[u]:i[u];return(0,n.jsx)(`span`,{"aria-hidden":!m[`aria-label`],className:e.cn(`icon-badge--component`,`inline-flex shrink-0 items-center justify-center`,l===`circle`?`rounded-full`:`rounded-md`,h.box,g,f&&`border border-border/60`,p),...m,children:o?(0,t.createElement)(o,{className:h.icon}):s})}o.displayName=`IconBadge`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=icon-badge-DGKpbo9_.cjs.map

package/dist/_shared/icon-badge-DGKpbo9_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-badge-DGKpbo9_.cjs","names":[],"sources":["../../src/components/base/display/icon-badge/icon-badge.tsx"],"sourcesContent":["/**\n * IconBadge — circular or square icon container with a tinted background.\n * Workhorse for \"row leading icon\" and \"feature illustration\" patterns —\n * coupon checks, conversation initials, search-result tones, AI-bot avatars.\n *\n * Tones reuse the shadcn semantic tokens, with the foreground colour picked\n * to read against a 10–15% background tint (e.g. `bg-success/15 text-success`).\n * For a fully-saturated mark (primary fill, inverse foreground), use\n * `tone=\"primary\"` and pass `solid`.\n */\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport { createElement } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type IconBadgeSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type IconBadgeShape = 'circle' | 'square';\nexport type IconBadgeTone =\n\t| 'primary'\n\t| 'secondary'\n\t| 'success'\n\t| 'warning'\n\t| 'destructive'\n\t| 'info'\n\t| 'muted';\n\nexport interface IconBadgeProps extends Omit<ComponentProps<'span'>, 'children'> {\n\ticon?: ElementType;\n\tchildren?: ReactNode;\n\tsize?: IconBadgeSize;\n\tshape?: IconBadgeShape;\n\ttone?: IconBadgeTone;\n\t/** When true, fills the badge with the tone color and inverts the icon. */\n\tsolid?: boolean;\n\t/**\n\t * When true, renders a hairline `border-border/60` around the badge.\n\t * Useful for compact \"secret list\" / \"key list\" rows where the icon\n\t * needs a subtle outline against the surrounding card surface\n\t * (see `composed/admin/api-key-list`).\n\t */\n\tbordered?: boolean;\n}\n\nconst SIZE_MAP: Record<IconBadgeSize, { box: string; icon: string }> = {\n\txs: { box: 'size-6', icon: 'size-3' },\n\tsm: { box: 'size-8', icon: 'size-3.5' },\n\tmd: { box: 'size-9', icon: 'size-4' },\n\tlg: { box: 'size-12', icon: 'size-5' },\n};\n\nconst TONE_TINT: Record<IconBadgeTone, string> = {\n\tprimary: 'bg-primary/15 text-primary',\n\tsecondary: 'bg-foreground/8 text-muted-foreground',\n\tsuccess: 'bg-success/15 text-success',\n\twarning: 'bg-warning/20 text-warning-foreground',\n\tdestructive: 'bg-destructive/12 text-destructive',\n\tinfo: 'bg-info/15 text-info',\n\tmuted: 'bg-muted text-muted-foreground',\n};\n\nconst TONE_SOLID: Record<IconBadgeTone, string> = {\n\tprimary: 'bg-primary text-primary-foreground',\n\tsecondary: 'bg-secondary text-secondary-foreground',\n\tsuccess: 'bg-success text-success-foreground',\n\twarning: 'bg-warning text-warning-foreground',\n\tdestructive: 'bg-destructive text-destructive-foreground',\n\tinfo: 'bg-info text-info-foreground',\n\tmuted: 'bg-foreground/70 text-background',\n};\n\nexport function IconBadge({\n\ticon: Icon,\n\tchildren,\n\tsize = 'md',\n\tshape = 'circle',\n\ttone = 'primary',\n\tsolid = false,\n\tbordered = false,\n\tclassName,\n\t...props\n}: IconBadgeProps) {\n\tconst sizes = SIZE_MAP[size];\n\tconst tones = solid ? TONE_SOLID[tone] : TONE_TINT[tone];\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden={!props['aria-label']}\n\t\t\tclassName={cn('icon-badge--component', \n\t\t\t\t'inline-flex shrink-0 items-center justify-center',\n\t\t\t\tshape === 'circle' ? 'rounded-full' : 'rounded-md',\n\t\t\t\tsizes.box,\n\t\t\t\ttones,\n\t\t\t\tbordered && 'border border-border/60',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{Icon ? createElement(Icon, { className: sizes.icon }) : children}\n\t\t</span>\n\t);\n}\n\nIconBadge.displayName = 'IconBadge';\n"],"mappings":"0HA2CA,IAAM,EAAiE,CACtE,GAAI,CAAE,IAAK,SAAU,KAAM,SAAU,CACrC,GAAI,CAAE,IAAK,SAAU,KAAM,WAAY,CACvC,GAAI,CAAE,IAAK,SAAU,KAAM,SAAU,CACrC,GAAI,CAAE,IAAK,UAAW,KAAM,SAAU,CACtC,CAEK,EAA2C,CAChD,QAAS,6BACT,UAAW,wCACX,QAAS,6BACT,QAAS,wCACT,YAAa,qCACb,KAAM,uBACN,MAAO,iCACP,CAEK,EAA4C,CACjD,QAAS,qCACT,UAAW,yCACX,QAAS,qCACT,QAAS,qCACT,YAAa,6CACb,KAAM,+BACN,MAAO,mCACP,CAED,SAAgB,EAAU,CACzB,KAAM,EACN,WACA,OAAO,KACP,QAAQ,SACR,OAAO,UACP,QAAQ,GACR,WAAW,GACX,YACA,GAAG,GACe,CAClB,IAAM,EAAQ,EAAS,GACjB,EAAQ,EAAQ,EAAW,GAAQ,EAAU,GAEnD,OACC,EAAA,EAAA,KAAC,OAAD,CACC,cAAa,CAAC,EAAM,cACpB,UAAW,EAAA,GAAG,wBACb,mDACA,IAAU,SAAW,eAAiB,aACtC,EAAM,IACN,EACA,GAAY,0BACZ,EACA,CACD,GAAI,WAEH,GAAA,EAAA,EAAA,eAAqB,EAAM,CAAE,UAAW,EAAM,KAAM,CAAC,CAAG,EACnD,CAAA,CAIT,EAAU,YAAc"}

package/dist/_shared/icon-badge-DoClA_9q.js

@@ -0,0 +1,52 @@
+import { cn as e } from "../lib/utils.js";
+import { createElement as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/base/display/icon-badge/icon-badge.tsx
+var r = {
+	xs: {
+		box: "size-6",
+		icon: "size-3"
+	},
+	sm: {
+		box: "size-8",
+		icon: "size-3.5"
+	},
+	md: {
+		box: "size-9",
+		icon: "size-4"
+	},
+	lg: {
+		box: "size-12",
+		icon: "size-5"
+	}
+}, i = {
+	primary: "bg-primary/15 text-primary",
+	secondary: "bg-foreground/8 text-muted-foreground",
+	success: "bg-success/15 text-success",
+	warning: "bg-warning/20 text-warning-foreground",
+	destructive: "bg-destructive/12 text-destructive",
+	info: "bg-info/15 text-info",
+	muted: "bg-muted text-muted-foreground"
+}, a = {
+	primary: "bg-primary text-primary-foreground",
+	secondary: "bg-secondary text-secondary-foreground",
+	success: "bg-success text-success-foreground",
+	warning: "bg-warning text-warning-foreground",
+	destructive: "bg-destructive text-destructive-foreground",
+	info: "bg-info text-info-foreground",
+	muted: "bg-foreground/70 text-background"
+};
+function o({ icon: o, children: s, size: c = "md", shape: l = "circle", tone: u = "primary", solid: d = !1, bordered: f = !1, className: p, ...m }) {
+	let h = r[c], g = d ? a[u] : i[u];
+	return /* @__PURE__ */ n("span", {
+		"aria-hidden": !m["aria-label"],
+		className: e("icon-badge--component", "inline-flex shrink-0 items-center justify-center", l === "circle" ? "rounded-full" : "rounded-md", h.box, g, f && "border border-border/60", p),
+		...m,
+		children: o ? t(o, { className: h.icon }) : s
+	});
+}
+o.displayName = "IconBadge";
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=icon-badge-DoClA_9q.js.map

package/dist/_shared/icon-badge-DoClA_9q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-badge-DoClA_9q.js","names":[],"sources":["../../src/components/base/display/icon-badge/icon-badge.tsx"],"sourcesContent":["/**\n * IconBadge — circular or square icon container with a tinted background.\n * Workhorse for \"row leading icon\" and \"feature illustration\" patterns —\n * coupon checks, conversation initials, search-result tones, AI-bot avatars.\n *\n * Tones reuse the shadcn semantic tokens, with the foreground colour picked\n * to read against a 10–15% background tint (e.g. `bg-success/15 text-success`).\n * For a fully-saturated mark (primary fill, inverse foreground), use\n * `tone=\"primary\"` and pass `solid`.\n */\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport { createElement } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport type IconBadgeSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type IconBadgeShape = 'circle' | 'square';\nexport type IconBadgeTone =\n\t| 'primary'\n\t| 'secondary'\n\t| 'success'\n\t| 'warning'\n\t| 'destructive'\n\t| 'info'\n\t| 'muted';\n\nexport interface IconBadgeProps extends Omit<ComponentProps<'span'>, 'children'> {\n\ticon?: ElementType;\n\tchildren?: ReactNode;\n\tsize?: IconBadgeSize;\n\tshape?: IconBadgeShape;\n\ttone?: IconBadgeTone;\n\t/** When true, fills the badge with the tone color and inverts the icon. */\n\tsolid?: boolean;\n\t/**\n\t * When true, renders a hairline `border-border/60` around the badge.\n\t * Useful for compact \"secret list\" / \"key list\" rows where the icon\n\t * needs a subtle outline against the surrounding card surface\n\t * (see `composed/admin/api-key-list`).\n\t */\n\tbordered?: boolean;\n}\n\nconst SIZE_MAP: Record<IconBadgeSize, { box: string; icon: string }> = {\n\txs: { box: 'size-6', icon: 'size-3' },\n\tsm: { box: 'size-8', icon: 'size-3.5' },\n\tmd: { box: 'size-9', icon: 'size-4' },\n\tlg: { box: 'size-12', icon: 'size-5' },\n};\n\nconst TONE_TINT: Record<IconBadgeTone, string> = {\n\tprimary: 'bg-primary/15 text-primary',\n\tsecondary: 'bg-foreground/8 text-muted-foreground',\n\tsuccess: 'bg-success/15 text-success',\n\twarning: 'bg-warning/20 text-warning-foreground',\n\tdestructive: 'bg-destructive/12 text-destructive',\n\tinfo: 'bg-info/15 text-info',\n\tmuted: 'bg-muted text-muted-foreground',\n};\n\nconst TONE_SOLID: Record<IconBadgeTone, string> = {\n\tprimary: 'bg-primary text-primary-foreground',\n\tsecondary: 'bg-secondary text-secondary-foreground',\n\tsuccess: 'bg-success text-success-foreground',\n\twarning: 'bg-warning text-warning-foreground',\n\tdestructive: 'bg-destructive text-destructive-foreground',\n\tinfo: 'bg-info text-info-foreground',\n\tmuted: 'bg-foreground/70 text-background',\n};\n\nexport function IconBadge({\n\ticon: Icon,\n\tchildren,\n\tsize = 'md',\n\tshape = 'circle',\n\ttone = 'primary',\n\tsolid = false,\n\tbordered = false,\n\tclassName,\n\t...props\n}: IconBadgeProps) {\n\tconst sizes = SIZE_MAP[size];\n\tconst tones = solid ? TONE_SOLID[tone] : TONE_TINT[tone];\n\n\treturn (\n\t\t<span\n\t\t\taria-hidden={!props['aria-label']}\n\t\t\tclassName={cn('icon-badge--component', \n\t\t\t\t'inline-flex shrink-0 items-center justify-center',\n\t\t\t\tshape === 'circle' ? 'rounded-full' : 'rounded-md',\n\t\t\t\tsizes.box,\n\t\t\t\ttones,\n\t\t\t\tbordered && 'border border-border/60',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{Icon ? createElement(Icon, { className: sizes.icon }) : children}\n\t\t</span>\n\t);\n}\n\nIconBadge.displayName = 'IconBadge';\n"],"mappings":";;;;AA2CA,IAAM,IAAiE;CACtE,IAAI;EAAE,KAAK;EAAU,MAAM;EAAU;CACrC,IAAI;EAAE,KAAK;EAAU,MAAM;EAAY;CACvC,IAAI;EAAE,KAAK;EAAU,MAAM;EAAU;CACrC,IAAI;EAAE,KAAK;EAAW,MAAM;EAAU;CACtC,EAEK,IAA2C;CAChD,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,aAAa;CACb,MAAM;CACN,OAAO;CACP,EAEK,IAA4C;CACjD,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,aAAa;CACb,MAAM;CACN,OAAO;CACP;AAED,SAAgB,EAAU,EACzB,MAAM,GACN,aACA,UAAO,MACP,WAAQ,UACR,UAAO,WACP,WAAQ,IACR,cAAW,IACX,cACA,GAAG,KACe;CAClB,IAAM,IAAQ,EAAS,IACjB,IAAQ,IAAQ,EAAW,KAAQ,EAAU;AAEnD,QACC,kBAAC,QAAD;EACC,eAAa,CAAC,EAAM;EACpB,WAAW,EAAG,yBACb,oDACA,MAAU,WAAW,iBAAiB,cACtC,EAAM,KACN,GACA,KAAY,2BACZ,EACA;EACD,GAAI;YAEH,IAAO,EAAc,GAAM,EAAE,WAAW,EAAM,MAAM,CAAC,GAAG;EACnD,CAAA;;AAIT,EAAU,cAAc"}

package/dist/_shared/input-BXt-YtVs.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-D3uCBrYO.cjs`),t=require(`../lib/utils.cjs`);let n=require(`react`);n=e.t(n,1);let r=require(`react/jsx-runtime`),i=require(`@base-ui/react/input`);function a({className:e,type:n,...a}){return(0,r.jsx)(i.Input,{type:n,"data-slot":`input`,className:t.cn(`border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,e),...a})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=input-BXt-YtVs.cjs.map

package/dist/_shared/input-BXt-YtVs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-BXt-YtVs.cjs","names":[],"sources":["../../src/components/ui/input.tsx"],"sourcesContent":["import { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":"6KAKA,SAAS,EAAM,CAAE,YAAW,OAAM,GAAG,GAAwC,CAC3E,OACE,EAAA,EAAA,KAAC,EAAA,MAAD,CACQ,OACN,YAAU,QACV,UAAW,EAAA,GACT,8hBACA,EACD,CACD,GAAI,EACJ,CAAA"}

package/dist/_shared/input-Bx4LeLhn.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Input as n } from "@base-ui/react/input";
+//#region src/components/ui/input.tsx
+function r({ className: r, type: i, ...a }) {
+	return /* @__PURE__ */ t(n, {
+		type: i,
+		"data-slot": "input",
+		className: e("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", r),
+		...a
+	});
+}
+//#endregion
+export { r as t };
+
+//# sourceMappingURL=input-Bx4LeLhn.js.map

package/dist/_shared/input-Bx4LeLhn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Bx4LeLhn.js","names":[],"sources":["../../src/components/ui/input.tsx"],"sourcesContent":["import { Input as InputPrimitive } from \"@base-ui/react/input\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";;;;;AAKA,SAAS,EAAM,EAAE,cAAW,SAAM,GAAG,KAAwC;AAC3E,QACE,kBAAC,GAAD;EACQ;EACN,aAAU;EACV,WAAW,EACT,+hBACA,EACD;EACD,GAAI;EACJ,CAAA"}

package/dist/_shared/input-ChZGIhtS.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-D3uCBrYO.cjs`),t=require(`../lib/strings.cjs`),n=require(`./ui-provider-uiQgATj1.cjs`),r=require(`../lib/utils.cjs`),i=require(`./text-DBnY6fcL.cjs`),a=require(`./form-sizing--bs_xPe2.cjs`);let o=require(`react`);o=e.t(o,1);let s=require(`react/jsx-runtime`),c=require(`lucide-react`);function l({controlledValue:e,defaultValue:t,maxLength:n,showCharacterCount:r,providedId:i,idPrefix:a=`field`,hasOnChange:s}){let c=(0,o.useId)(),l=i||`${a}${c}`,[u,d]=(0,o.useState)(t||``),f=e!==void 0,p=(f?e:u)??``,m=!!(s&&!f&&!t),h=p.length,g=n!==void 0,_=r===!1?!1:!!(r||g),v=p!==``,y=(0,o.useCallback)(e=>g&&e.length>n,[g,n]),b=(0,o.useCallback)(e=>y(e)?!1:(f||d(e),!0),[f,y]),x=(0,o.useCallback)(()=>{f||d(``)},[f]);return(0,o.useMemo)(()=>({id:l,value:p,isControlled:f,isReactHookForm:m,characterCount:h,hasCharacterLimit:g,showCount:_,hasValue:v,updateValue:b,clearValue:x,wouldExceedLimit:y}),[l,p,f,m,h,g,_,v,b,x,y])}var u={clear:`Clear input`},d=(e,t,n)=>{let r=e||``;return t&&r&&(r=t+r),n&&r&&(r+=n),r};function f({className:e,type:f=`text`,startIcon:p,endIcon:m,startAddon:h,endAddon:g,maxLength:_,showCharacterCount:v,clearable:y,onClear:b,isLoading:x,returnValueWithAddons:S,invalid:C,size:w,onChange:T,value:E,defaultValue:D,id:O,strings:k,...A},j){let M=(0,o.useRef)(null),N=t.useStrings(u,k),{defaultControlSize:P}=n.s(),F=a.i(w,P),I=(0,o.useCallback)(e=>{typeof j==`function`?j(e):j&&(j.current=e),M.current=e},[j]),{id:L,value:R,isReactHookForm:z,characterCount:B,hasCharacterLimit:V,showCount:H,hasValue:U,updateValue:W,clearValue:G,wouldExceedLimit:K}=l({controlledValue:E,defaultValue:D,maxLength:_,showCharacterCount:v,providedId:O,idPrefix:`input`,hasOnChange:T!==void 0}),q=!!y,J=!!x,Y=!!m,X=!!g,Z=f===`file`,Q=!!C,$=(0,o.useMemo)(()=>{let e=`px-3`,t=`px-3`;return p&&(e=`ps-9`),h&&(e=`ps-10`),m&&(t=`pe-9`),g&&(t=`pe-10`),(q&&U||J)&&(t=`pe-9`),H&&(t=`pe-14`),`${e} ${t}`},[p,h,m,g,q,U,J,H]),ee=(0,o.useCallback)(e=>{let t=e.target.value;if(!K(t)&&(W(t),T))if(S){let n=d(t,h,g);T({...e,target:{...e.target,value:n},currentTarget:{...e.currentTarget,value:n}})}else T(e)},[T,S,h,g,W,K]),te=(0,o.useCallback)(()=>{let e=S?d(``,h,g):``,t={target:{value:e},currentTarget:{value:e}};G(),T?.(t),b?.(),M.current?.focus()},[S,h,g,G,T,b]),ne=q&&U&&!H&&!J,re=J&&!H,ie=Y&&!q&&!H&&!J,ae=X&&!q&&!H&&!J;return(0,s.jsxs)(`div`,{className:r.cn(`input--component`,`relative`),children:[(0,s.jsx)(`input`,{ref:I,id:L,type:f,...!z&&{value:R},onChange:ee,maxLength:_,"aria-invalid":Q||void 0,disabled:A.disabled||x,className:r.cn(`file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground`,`border-input flex w-full min-w-0 rounded-md border py-1`,`transition-[color,box-shadow] outline-none`,`disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,a.n[F],`file:inline-flex file:h-7 file:border file:bg-transparent file:px-3 file:text-sm file:font-medium`,Z?`cursor-pointer bg-background text-foreground file:cursor-pointer file:rounded-md file:border-input file:bg-background file:text-foreground`:`bg-transparent`,`focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]`,`aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:text-destructive`,`aria-invalid:placeholder:text-destructive/40`,Z?`read-only:bg-background`:`read-only:bg-muted`,$,e),...A}),!!p&&(0,s.jsx)(`div`,{className:r.cn(`pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3`,A.disabled&&`opacity-50`,Q?`text-destructive`:`text-muted-foreground/80`),children:(0,s.jsx)(p,{size:16,"aria-hidden":`true`})}),!!h&&(0,s.jsx)(`span`,{className:r.cn(`pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm`,A.disabled&&`opacity-50`,Q?`text-destructive`:`text-muted-foreground`),children:h}),!!ie&&!!m&&(0,s.jsx)(`div`,{className:r.cn(`pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3`,A.disabled&&`opacity-50`,Q?`text-destructive`:`text-muted-foreground/80`),children:(0,s.jsx)(m,{size:16,"aria-hidden":`true`})}),!!ae&&(0,s.jsx)(`span`,{className:r.cn(`pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm`,A.disabled&&`opacity-50`,Q?`text-destructive`:`text-muted-foreground`),children:g}),!!H&&(0,s.jsx)(`div`,{className:r.cn(`pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums`,A.disabled&&`opacity-50`,Q?`text-destructive`:`text-muted-foreground`),"aria-live":`polite`,role:`status`,children:(0,s.jsxs)(i.t,{tag:`span`,size:`xs`,type:Q?`error`:`secondary`,children:[B,V?`/${_}`:``]})}),!!re&&(0,s.jsx)(`div`,{className:r.cn(`pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3`,Q?`text-destructive`:`text-muted-foreground/80`),children:(0,s.jsx)(c.Loader2Icon,{size:16,className:`animate-spin`,"aria-hidden":`true`})}),!!ne&&(0,s.jsx)(`button`,{type:`button`,className:`text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":N.clear,onClick:te,disabled:x,children:(0,s.jsx)(c.CircleXIcon,{size:16,"aria-hidden":`true`})})]})}var p=(0,o.memo)(o.forwardRef(f));p.displayName=`Input`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
+//# sourceMappingURL=input-ChZGIhtS.cjs.map

package/dist/_shared/input-ChZGIhtS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-ChZGIhtS.cjs","names":[],"sources":["../../src/components/base/forms/fields/hooks/use-form-field-state.ts","../../src/components/base/forms/fields/input.tsx"],"sourcesContent":["import { useState, useCallback, useMemo, useId } from 'react';\n\nexport interface UseFormFieldStateOptions {\n    /** Controlled value from parent */\n    controlledValue?: string;\n    /** Default value for uncontrolled mode */\n    defaultValue?: string;\n    /** Maximum character length */\n    maxLength?: number;\n    /** Whether to show character count */\n    showCharacterCount?: boolean;\n    /** Provided ID or auto-generate */\n    providedId?: string;\n    /** Prefix for auto-generated ID */\n    idPrefix?: string;\n    /** Whether onChange is provided (for react-hook-form detection) */\n    hasOnChange?: boolean;\n}\n\nexport interface UseFormFieldStateReturn {\n    /** Generated or provided ID */\n    id: string;\n    /** Current value (controlled or internal) */\n    value: string;\n    /** Whether component is in controlled mode */\n    isControlled: boolean;\n    /** Whether using react-hook-form (has onChange but no controlled value) */\n    isReactHookForm: boolean;\n    /** Current character count */\n    characterCount: number;\n    /** Whether a character limit is set */\n    hasCharacterLimit: boolean;\n    /** Whether to show character count UI */\n    showCount: boolean;\n    /** Whether the field has a value */\n    hasValue: boolean;\n    /** Update value - returns false if blocked by character limit */\n    updateValue: (newValue: string) => boolean;\n    /** Clear the value */\n    clearValue: () => void;\n    /** Check if a new value would exceed the character limit */\n    wouldExceedLimit: (newValue: string) => boolean;\n}\n\n/**\n * Shared hook for managing form field state including:\n * - Controlled vs uncontrolled value handling\n * - Character counting and limits\n * - React Hook Form compatibility detection\n * - ID generation\n */\nexport function useFormFieldState({\n    controlledValue,\n    defaultValue,\n    maxLength,\n    showCharacterCount,\n    providedId,\n    idPrefix = 'field',\n    hasOnChange,\n}: UseFormFieldStateOptions): UseFormFieldStateReturn {\n    // Generate stable ID using React 18's useId (SSR-safe)\n    const reactId = useId();\n    const id = providedId || `${idPrefix}${reactId}`;\n\n    // Internal state for uncontrolled mode\n    const [internalValue, setInternalValue] = useState(defaultValue || '');\n\n    // Determine control mode\n    const isControlled = controlledValue !== undefined;\n\n    // Normalize value (handle null from backend)\n    const rawValue = isControlled ? controlledValue : internalValue;\n    const value = rawValue ?? '';\n\n    // React Hook Form detection: has onChange but no controlled value or defaultValue\n    const isReactHookForm = Boolean(hasOnChange && !isControlled && !defaultValue);\n\n    // Character counting\n    const characterCount = value.length;\n    const hasCharacterLimit = maxLength !== undefined;\n    const showCount = showCharacterCount === false ? false : Boolean(showCharacterCount || hasCharacterLimit);\n    const hasValue = value !== '';\n\n    // Check if value would exceed limit\n    const wouldExceedLimit = useCallback(\n        (newValue: string) => {\n            return hasCharacterLimit && newValue.length > maxLength;\n        },\n        [hasCharacterLimit, maxLength]\n    );\n\n    // Update value (respects character limit, updates internal state if uncontrolled)\n    const updateValue = useCallback(\n        (newValue: string): boolean => {\n            if (wouldExceedLimit(newValue)) {\n                return false;\n            }\n            if (!isControlled) {\n                setInternalValue(newValue);\n            }\n            return true;\n        },\n        [isControlled, wouldExceedLimit]\n    );\n\n    // Clear value\n    const clearValue = useCallback(() => {\n        if (!isControlled) {\n            setInternalValue('');\n        }\n    }, [isControlled]);\n\n    return useMemo(\n        () => ({\n            id,\n            value,\n            isControlled,\n            isReactHookForm,\n            characterCount,\n            hasCharacterLimit,\n            showCount,\n            hasValue,\n            updateValue,\n            clearValue,\n            wouldExceedLimit,\n        }),\n        [\n            id,\n            value,\n            isControlled,\n            isReactHookForm,\n            characterCount,\n            hasCharacterLimit,\n            showCount,\n            hasValue,\n            updateValue,\n            clearValue,\n            wouldExceedLimit,\n        ]\n    );\n}\n","import { CircleXIcon, Loader2Icon, type LucideIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { useRef, useCallback, useMemo, memo } from 'react';\nimport { Text } from '@/components/typography';\nimport { useFormsConfig, type FormControlSize } from '@/lib/ui-provider';\nimport { useStrings, type StringsProp } from '@/lib/strings';\nimport { cn } from '@/lib/utils';\nimport { formControlSizeClasses, resolveFormControlSize } from '../form-sizing';\nimport { useFormFieldState } from './hooks';\n\nexport interface InputStrings {\n    clear: string;\n}\n\nexport const defaultInputStrings: InputStrings = {\n    clear: 'Clear input',\n};\n\n/**\n * Helper function to get value with prefix/suffix\n */\nconst getValueWithAddons = (value: string, startAddon?: string, endAddon?: string): string => {\n    let result = value || '';\n    if (startAddon && result) result = startAddon + result;\n    if (endAddon && result) result = result + endAddon;\n    return result;\n};\n\nexport interface InputProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'size'> {\n    // Icon props\n    startIcon?: LucideIcon;\n    endIcon?: LucideIcon;\n\n    // Add-on props (visual prefix/suffix inside input)\n    startAddon?: string;\n    endAddon?: string;\n\n    // Character limit\n    maxLength?: number;\n    showCharacterCount?: boolean;\n\n    // Clear button\n    clearable?: boolean;\n    onClear?: () => void;\n\n    // Loading state\n    isLoading?: boolean;\n\n    // Return value with addons in onChange\n    returnValueWithAddons?: boolean;\n\n    // Error state for styling (passed from FormField)\n    invalid?: boolean;\n\n    // Visual size\n    size?: FormControlSize;\n\n    // Value props\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    value?: string;\n    defaultValue?: string;\n\n    // String overrides (e.g. clear button aria-label)\n    strings?: StringsProp<InputStrings>;\n}\n\nfunction InputImpl(\n\t{\n\t\tclassName,\n\t\ttype = 'text',\n\t\tstartIcon: StartIcon,\n\t\tendIcon: EndIcon,\n\t\tstartAddon,\n\t\tendAddon,\n\t\tmaxLength,\n\t\tshowCharacterCount,\n\t\tclearable,\n\t\tonClear,\n\t\tisLoading,\n\t\treturnValueWithAddons,\n\t\tinvalid,\n\t\tsize: sizeProp,\n\t\tonChange,\n\t\tvalue: controlledValue,\n\t\tdefaultValue,\n\t\tid: providedId,\n\t\tstrings: stringsProp,\n\t\t...props\n\t}: InputProps,\n\tforwardedRef: React.ForwardedRef<HTMLInputElement>,\n) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const strings = useStrings(defaultInputStrings, stringsProp);\n    const { defaultControlSize } = useFormsConfig();\n    const size = resolveFormControlSize(sizeProp, defaultControlSize);\n\n    // Memoize ref callback to avoid recreation on every render\n    const setRefs = useCallback(\n        (node: HTMLInputElement | null) => {\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else if (forwardedRef) {\n                forwardedRef.current = node;\n            }\n            inputRef.current = node;\n        },\n        [forwardedRef]\n    );\n\n    // Use shared form field state hook\n    const {\n        id,\n        value: inputValue,\n        isReactHookForm,\n        characterCount,\n        hasCharacterLimit,\n        showCount,\n        hasValue,\n        updateValue,\n        clearValue,\n        wouldExceedLimit,\n    } = useFormFieldState({\n        controlledValue,\n        defaultValue,\n        maxLength,\n        showCharacterCount,\n        providedId,\n        idPrefix: 'input',\n        hasOnChange: onChange !== undefined,\n    });\n\n    // Derive display states (simple booleans, no need for useMemo)\n    const isClearable = !!clearable;\n    const isShowingLoading = !!isLoading;\n    const hasEndIcon = !!EndIcon;\n    const hasEndAddon = !!endAddon;\n    const isFileInput = type === 'file';\n    const hasError = !!invalid;\n\n    // Memoize padding classes based on add-ons and icons\n    // Addon padding sized so the value sits adjacent to the addon — `ps-3`\n    // baseline + a measured space for addon text. Wider addons can override\n    // via `className` (`ps-16` etc.) at the call site.\n    const inputPaddingClasses = useMemo(() => {\n        let paddingStart = 'px-3';\n        let paddingEnd = 'px-3';\n\n        if (StartIcon) paddingStart = 'ps-9';\n        if (startAddon) paddingStart = 'ps-10';\n\n        if (EndIcon) paddingEnd = 'pe-9';\n        if (endAddon) paddingEnd = 'pe-10';\n        if ((isClearable && hasValue) || isShowingLoading) paddingEnd = 'pe-9';\n        if (showCount) paddingEnd = 'pe-14';\n\n        return `${paddingStart} ${paddingEnd}`;\n    }, [StartIcon, startAddon, EndIcon, endAddon, isClearable, hasValue, isShowingLoading, showCount]);\n\n    const handleInputChange = useCallback(\n        (e: React.ChangeEvent<HTMLInputElement>) => {\n            const newValue = e.target.value;\n\n            // Check character limit\n            if (wouldExceedLimit(newValue)) {\n                return;\n            }\n\n            // Update internal state if uncontrolled\n            updateValue(newValue);\n\n            // Call external onChange with modified event if addons are requested\n            if (onChange) {\n                if (returnValueWithAddons) {\n                    const valueWithAddons = getValueWithAddons(newValue, startAddon, endAddon);\n                    const modifiedEvent = {\n                        ...e,\n                        target: { ...e.target, value: valueWithAddons },\n                        currentTarget: { ...e.currentTarget, value: valueWithAddons },\n                    };\n                    onChange(modifiedEvent as React.ChangeEvent<HTMLInputElement>);\n                } else {\n                    onChange(e);\n                }\n            }\n        },\n        [onChange, returnValueWithAddons, startAddon, endAddon, updateValue, wouldExceedLimit]\n    );\n\n    const handleClear = useCallback(() => {\n        const clearValueWithAddons = returnValueWithAddons\n            ? getValueWithAddons('', startAddon, endAddon)\n            : '';\n        const syntheticEvent = {\n            target: { value: clearValueWithAddons },\n            currentTarget: { value: clearValueWithAddons },\n        } as React.ChangeEvent<HTMLInputElement>;\n\n        // Clear internal state\n        clearValue();\n\n        // Notify parent\n        onChange?.(syntheticEvent);\n\n        // Execute optional onClear callback\n        onClear?.();\n\n        // Focus the input after clearing\n        inputRef.current?.focus();\n    }, [returnValueWithAddons, startAddon, endAddon, clearValue, onChange, onClear]);\n\n    // Determine what to show in the end position (priority order)\n    const showClearButton = isClearable && hasValue && !showCount && !isShowingLoading;\n    const showLoadingSpinner = isShowingLoading && !showCount;\n    const showEndIcon = hasEndIcon && !isClearable && !showCount && !isShowingLoading;\n    const showEndAddon = hasEndAddon && !isClearable && !showCount && !isShowingLoading;\n\n    return (\n        <div className={cn('input--component', 'relative')}>\n            <input\n                ref={setRefs}\n                id={id}\n                type={type}\n                {...(!isReactHookForm && { value: inputValue })}\n                onChange={handleInputChange}\n                maxLength={maxLength}\n                aria-invalid={hasError || undefined}\n                disabled={props.disabled || isLoading}\n                className={cn(\n                    // Base styles\n                    'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',\n                    'border-input flex w-full min-w-0 rounded-md border py-1',\n                    'transition-[color,box-shadow] outline-none',\n                    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n                    formControlSizeClasses[size],\n                    // File input styles\n                    'file:inline-flex file:h-7 file:border file:bg-transparent file:px-3 file:text-sm file:font-medium',\n                    isFileInput\n                        ? 'cursor-pointer bg-background text-foreground file:cursor-pointer file:rounded-md file:border-input file:bg-background file:text-foreground'\n                        : 'bg-transparent',\n                    // Focus styles\n                    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n                    // Invalid/error styles — destructive border, ring, value text\n                    'aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:text-destructive',\n                    'aria-invalid:placeholder:text-destructive/40',\n                    // Read-only styles\n                    isFileInput\n                        ? 'read-only:bg-background'\n                        : 'read-only:bg-muted',\n                    // Dynamic padding\n                    inputPaddingClasses,\n                    className\n                )}\n                {...props}\n            />\n\n            {/* Start Icon */}\n            {!!StartIcon && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <StartIcon size={16} aria-hidden=\"true\" />\n                </div>\n            )}\n\n            {/* Start Add-on */}\n            {!!startAddon && (\n                <span\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                >\n                    {startAddon}\n                </span>\n            )}\n\n            {/* End Icon */}\n            {!!showEndIcon && !!EndIcon && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <EndIcon size={16} aria-hidden=\"true\" />\n                </div>\n              )}\n\n            {/* End Add-on */}\n            {!!showEndAddon && (\n                <span\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                >\n                    {endAddon}\n                </span>\n              )}\n\n            {/* Character Count */}\n            {!!showCount && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                    aria-live=\"polite\"\n                    role=\"status\"\n                >\n                    <Text tag=\"span\" size=\"xs\" type={hasError ? 'error' : 'secondary'}>\n                        {characterCount}\n                        {hasCharacterLimit ? `/${maxLength}` : ''}\n                    </Text>\n                </div>\n              )}\n\n            {/* Loading Spinner */}\n            {!!showLoadingSpinner && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <Loader2Icon size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n                </div>\n              )}\n\n            {/* Clear Button */}\n            {!!showClearButton && (\n                <button\n                    type=\"button\"\n                    className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                    aria-label={strings.clear}\n                    onClick={handleClear}\n                    disabled={isLoading}\n                >\n                    <CircleXIcon size={16} aria-hidden=\"true\" />\n                </button>\n              )}\n        </div>\n    );\n}\n\n// forwardRef + memo (needed for callers that require refs, e.g. segmented inputs)\nconst Input = memo(React.forwardRef<HTMLInputElement, InputProps>(InputImpl));\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"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"}

package/dist/_shared/input-Cwv1-5jt.js

@@ -0,0 +1,182 @@
+import { useStrings as e } from "../lib/strings.js";
+import { s as t } from "./ui-provider-4qKSKMPd.js";
+import { cn as n } from "../lib/utils.js";
+import { t as r } from "./text-DIxMTECE.js";
+import { i, n as a } from "./form-sizing-CkKcs5fi.js";
+import * as o from "react";
+import { memo as s, useCallback as c, useId as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { CircleXIcon as h, Loader2Icon as g } from "lucide-react";
+//#region src/components/base/forms/fields/hooks/use-form-field-state.ts
+function _({ controlledValue: e, defaultValue: t, maxLength: n, showCharacterCount: r, providedId: i, idPrefix: a = "field", hasOnChange: o }) {
+	let s = l(), d = i || `${a}${s}`, [p, m] = f(t || ""), h = e !== void 0, g = (h ? e : p) ?? "", _ = !!(o && !h && !t), v = g.length, y = n !== void 0, b = r === !1 ? !1 : !!(r || y), x = g !== "", S = c((e) => y && e.length > n, [y, n]), C = c((e) => S(e) ? !1 : (h || m(e), !0), [h, S]), w = c(() => {
+		h || m("");
+	}, [h]);
+	return u(() => ({
+		id: d,
+		value: g,
+		isControlled: h,
+		isReactHookForm: _,
+		characterCount: v,
+		hasCharacterLimit: y,
+		showCount: b,
+		hasValue: x,
+		updateValue: C,
+		clearValue: w,
+		wouldExceedLimit: S
+	}), [
+		d,
+		g,
+		h,
+		_,
+		v,
+		y,
+		b,
+		x,
+		C,
+		w,
+		S
+	]);
+}
+//#endregion
+//#region src/components/base/forms/fields/input.tsx
+var v = { clear: "Clear input" }, y = (e, t, n) => {
+	let r = e || "";
+	return t && r && (r = t + r), n && r && (r += n), r;
+};
+function b({ className: o, type: s = "text", startIcon: l, endIcon: f, startAddon: b, endAddon: x, maxLength: S, showCharacterCount: C, clearable: w, onClear: T, isLoading: E, returnValueWithAddons: D, invalid: O, size: k, onChange: A, value: j, defaultValue: M, id: N, strings: P, ...F }, I) {
+	let L = d(null), R = e(v, P), { defaultControlSize: ee } = t(), te = i(k, ee), ne = c((e) => {
+		typeof I == "function" ? I(e) : I && (I.current = e), L.current = e;
+	}, [I]), { id: z, value: B, isReactHookForm: V, characterCount: H, hasCharacterLimit: U, showCount: W, hasValue: G, updateValue: K, clearValue: q, wouldExceedLimit: J } = _({
+		controlledValue: j,
+		defaultValue: M,
+		maxLength: S,
+		showCharacterCount: C,
+		providedId: N,
+		idPrefix: "input",
+		hasOnChange: A !== void 0
+	}), Y = !!w, X = !!E, re = !!f, ie = !!x, Z = s === "file", Q = !!O, ae = u(() => {
+		let e = "px-3", t = "px-3";
+		return l && (e = "ps-9"), b && (e = "ps-10"), f && (t = "pe-9"), x && (t = "pe-10"), (Y && G || X) && (t = "pe-9"), W && (t = "pe-14"), `${e} ${t}`;
+	}, [
+		l,
+		b,
+		f,
+		x,
+		Y,
+		G,
+		X,
+		W
+	]), oe = c((e) => {
+		let t = e.target.value;
+		if (!J(t) && (K(t), A)) if (D) {
+			let n = y(t, b, x);
+			A({
+				...e,
+				target: {
+					...e.target,
+					value: n
+				},
+				currentTarget: {
+					...e.currentTarget,
+					value: n
+				}
+			});
+		} else A(e);
+	}, [
+		A,
+		D,
+		b,
+		x,
+		K,
+		J
+	]), se = c(() => {
+		let e = D ? y("", b, x) : "", t = {
+			target: { value: e },
+			currentTarget: { value: e }
+		};
+		q(), A?.(t), T?.(), L.current?.focus();
+	}, [
+		D,
+		b,
+		x,
+		q,
+		A,
+		T
+	]), ce = Y && G && !W && !X, le = X && !W, $ = re && !Y && !W && !X, ue = ie && !Y && !W && !X;
+	return /* @__PURE__ */ m("div", {
+		className: n("input--component", "relative"),
+		children: [
+			/* @__PURE__ */ p("input", {
+				ref: ne,
+				id: z,
+				type: s,
+				...!V && { value: B },
+				onChange: oe,
+				maxLength: S,
+				"aria-invalid": Q || void 0,
+				disabled: F.disabled || E,
+				className: n("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground", "border-input flex w-full min-w-0 rounded-md border py-1", "transition-[color,box-shadow] outline-none", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", a[te], "file:inline-flex file:h-7 file:border file:bg-transparent file:px-3 file:text-sm file:font-medium", Z ? "cursor-pointer bg-background text-foreground file:cursor-pointer file:rounded-md file:border-input file:bg-background file:text-foreground" : "bg-transparent", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:text-destructive", "aria-invalid:placeholder:text-destructive/40", Z ? "read-only:bg-background" : "read-only:bg-muted", ae, o),
+				...F
+			}),
+			!!l && /* @__PURE__ */ p("div", {
+				className: n("pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3", F.disabled && "opacity-50", Q ? "text-destructive" : "text-muted-foreground/80"),
+				children: /* @__PURE__ */ p(l, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			}),
+			!!b && /* @__PURE__ */ p("span", {
+				className: n("pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm", F.disabled && "opacity-50", Q ? "text-destructive" : "text-muted-foreground"),
+				children: b
+			}),
+			!!$ && !!f && /* @__PURE__ */ p("div", {
+				className: n("pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3", F.disabled && "opacity-50", Q ? "text-destructive" : "text-muted-foreground/80"),
+				children: /* @__PURE__ */ p(f, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			}),
+			!!ue && /* @__PURE__ */ p("span", {
+				className: n("pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm", F.disabled && "opacity-50", Q ? "text-destructive" : "text-muted-foreground"),
+				children: x
+			}),
+			!!W && /* @__PURE__ */ p("div", {
+				className: n("pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums", F.disabled && "opacity-50", Q ? "text-destructive" : "text-muted-foreground"),
+				"aria-live": "polite",
+				role: "status",
+				children: /* @__PURE__ */ m(r, {
+					tag: "span",
+					size: "xs",
+					type: Q ? "error" : "secondary",
+					children: [H, U ? `/${S}` : ""]
+				})
+			}),
+			!!le && /* @__PURE__ */ p("div", {
+				className: n("pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3", Q ? "text-destructive" : "text-muted-foreground/80"),
+				children: /* @__PURE__ */ p(g, {
+					size: 16,
+					className: "animate-spin",
+					"aria-hidden": "true"
+				})
+			}),
+			!!ce && /* @__PURE__ */ p("button", {
+				type: "button",
+				className: "text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+				"aria-label": R.clear,
+				onClick: se,
+				disabled: E,
+				children: /* @__PURE__ */ p(h, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+var x = s(o.forwardRef(b));
+x.displayName = "Input";
+//#endregion
+export { _ as n, x as t };
+
+//# sourceMappingURL=input-Cwv1-5jt.js.map

package/dist/_shared/input-Cwv1-5jt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Cwv1-5jt.js","names":[],"sources":["../../src/components/base/forms/fields/hooks/use-form-field-state.ts","../../src/components/base/forms/fields/input.tsx"],"sourcesContent":["import { useState, useCallback, useMemo, useId } from 'react';\n\nexport interface UseFormFieldStateOptions {\n    /** Controlled value from parent */\n    controlledValue?: string;\n    /** Default value for uncontrolled mode */\n    defaultValue?: string;\n    /** Maximum character length */\n    maxLength?: number;\n    /** Whether to show character count */\n    showCharacterCount?: boolean;\n    /** Provided ID or auto-generate */\n    providedId?: string;\n    /** Prefix for auto-generated ID */\n    idPrefix?: string;\n    /** Whether onChange is provided (for react-hook-form detection) */\n    hasOnChange?: boolean;\n}\n\nexport interface UseFormFieldStateReturn {\n    /** Generated or provided ID */\n    id: string;\n    /** Current value (controlled or internal) */\n    value: string;\n    /** Whether component is in controlled mode */\n    isControlled: boolean;\n    /** Whether using react-hook-form (has onChange but no controlled value) */\n    isReactHookForm: boolean;\n    /** Current character count */\n    characterCount: number;\n    /** Whether a character limit is set */\n    hasCharacterLimit: boolean;\n    /** Whether to show character count UI */\n    showCount: boolean;\n    /** Whether the field has a value */\n    hasValue: boolean;\n    /** Update value - returns false if blocked by character limit */\n    updateValue: (newValue: string) => boolean;\n    /** Clear the value */\n    clearValue: () => void;\n    /** Check if a new value would exceed the character limit */\n    wouldExceedLimit: (newValue: string) => boolean;\n}\n\n/**\n * Shared hook for managing form field state including:\n * - Controlled vs uncontrolled value handling\n * - Character counting and limits\n * - React Hook Form compatibility detection\n * - ID generation\n */\nexport function useFormFieldState({\n    controlledValue,\n    defaultValue,\n    maxLength,\n    showCharacterCount,\n    providedId,\n    idPrefix = 'field',\n    hasOnChange,\n}: UseFormFieldStateOptions): UseFormFieldStateReturn {\n    // Generate stable ID using React 18's useId (SSR-safe)\n    const reactId = useId();\n    const id = providedId || `${idPrefix}${reactId}`;\n\n    // Internal state for uncontrolled mode\n    const [internalValue, setInternalValue] = useState(defaultValue || '');\n\n    // Determine control mode\n    const isControlled = controlledValue !== undefined;\n\n    // Normalize value (handle null from backend)\n    const rawValue = isControlled ? controlledValue : internalValue;\n    const value = rawValue ?? '';\n\n    // React Hook Form detection: has onChange but no controlled value or defaultValue\n    const isReactHookForm = Boolean(hasOnChange && !isControlled && !defaultValue);\n\n    // Character counting\n    const characterCount = value.length;\n    const hasCharacterLimit = maxLength !== undefined;\n    const showCount = showCharacterCount === false ? false : Boolean(showCharacterCount || hasCharacterLimit);\n    const hasValue = value !== '';\n\n    // Check if value would exceed limit\n    const wouldExceedLimit = useCallback(\n        (newValue: string) => {\n            return hasCharacterLimit && newValue.length > maxLength;\n        },\n        [hasCharacterLimit, maxLength]\n    );\n\n    // Update value (respects character limit, updates internal state if uncontrolled)\n    const updateValue = useCallback(\n        (newValue: string): boolean => {\n            if (wouldExceedLimit(newValue)) {\n                return false;\n            }\n            if (!isControlled) {\n                setInternalValue(newValue);\n            }\n            return true;\n        },\n        [isControlled, wouldExceedLimit]\n    );\n\n    // Clear value\n    const clearValue = useCallback(() => {\n        if (!isControlled) {\n            setInternalValue('');\n        }\n    }, [isControlled]);\n\n    return useMemo(\n        () => ({\n            id,\n            value,\n            isControlled,\n            isReactHookForm,\n            characterCount,\n            hasCharacterLimit,\n            showCount,\n            hasValue,\n            updateValue,\n            clearValue,\n            wouldExceedLimit,\n        }),\n        [\n            id,\n            value,\n            isControlled,\n            isReactHookForm,\n            characterCount,\n            hasCharacterLimit,\n            showCount,\n            hasValue,\n            updateValue,\n            clearValue,\n            wouldExceedLimit,\n        ]\n    );\n}\n","import { CircleXIcon, Loader2Icon, type LucideIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { useRef, useCallback, useMemo, memo } from 'react';\nimport { Text } from '@/components/typography';\nimport { useFormsConfig, type FormControlSize } from '@/lib/ui-provider';\nimport { useStrings, type StringsProp } from '@/lib/strings';\nimport { cn } from '@/lib/utils';\nimport { formControlSizeClasses, resolveFormControlSize } from '../form-sizing';\nimport { useFormFieldState } from './hooks';\n\nexport interface InputStrings {\n    clear: string;\n}\n\nexport const defaultInputStrings: InputStrings = {\n    clear: 'Clear input',\n};\n\n/**\n * Helper function to get value with prefix/suffix\n */\nconst getValueWithAddons = (value: string, startAddon?: string, endAddon?: string): string => {\n    let result = value || '';\n    if (startAddon && result) result = startAddon + result;\n    if (endAddon && result) result = result + endAddon;\n    return result;\n};\n\nexport interface InputProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'size'> {\n    // Icon props\n    startIcon?: LucideIcon;\n    endIcon?: LucideIcon;\n\n    // Add-on props (visual prefix/suffix inside input)\n    startAddon?: string;\n    endAddon?: string;\n\n    // Character limit\n    maxLength?: number;\n    showCharacterCount?: boolean;\n\n    // Clear button\n    clearable?: boolean;\n    onClear?: () => void;\n\n    // Loading state\n    isLoading?: boolean;\n\n    // Return value with addons in onChange\n    returnValueWithAddons?: boolean;\n\n    // Error state for styling (passed from FormField)\n    invalid?: boolean;\n\n    // Visual size\n    size?: FormControlSize;\n\n    // Value props\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n    value?: string;\n    defaultValue?: string;\n\n    // String overrides (e.g. clear button aria-label)\n    strings?: StringsProp<InputStrings>;\n}\n\nfunction InputImpl(\n\t{\n\t\tclassName,\n\t\ttype = 'text',\n\t\tstartIcon: StartIcon,\n\t\tendIcon: EndIcon,\n\t\tstartAddon,\n\t\tendAddon,\n\t\tmaxLength,\n\t\tshowCharacterCount,\n\t\tclearable,\n\t\tonClear,\n\t\tisLoading,\n\t\treturnValueWithAddons,\n\t\tinvalid,\n\t\tsize: sizeProp,\n\t\tonChange,\n\t\tvalue: controlledValue,\n\t\tdefaultValue,\n\t\tid: providedId,\n\t\tstrings: stringsProp,\n\t\t...props\n\t}: InputProps,\n\tforwardedRef: React.ForwardedRef<HTMLInputElement>,\n) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const strings = useStrings(defaultInputStrings, stringsProp);\n    const { defaultControlSize } = useFormsConfig();\n    const size = resolveFormControlSize(sizeProp, defaultControlSize);\n\n    // Memoize ref callback to avoid recreation on every render\n    const setRefs = useCallback(\n        (node: HTMLInputElement | null) => {\n            if (typeof forwardedRef === 'function') {\n                forwardedRef(node);\n            } else if (forwardedRef) {\n                forwardedRef.current = node;\n            }\n            inputRef.current = node;\n        },\n        [forwardedRef]\n    );\n\n    // Use shared form field state hook\n    const {\n        id,\n        value: inputValue,\n        isReactHookForm,\n        characterCount,\n        hasCharacterLimit,\n        showCount,\n        hasValue,\n        updateValue,\n        clearValue,\n        wouldExceedLimit,\n    } = useFormFieldState({\n        controlledValue,\n        defaultValue,\n        maxLength,\n        showCharacterCount,\n        providedId,\n        idPrefix: 'input',\n        hasOnChange: onChange !== undefined,\n    });\n\n    // Derive display states (simple booleans, no need for useMemo)\n    const isClearable = !!clearable;\n    const isShowingLoading = !!isLoading;\n    const hasEndIcon = !!EndIcon;\n    const hasEndAddon = !!endAddon;\n    const isFileInput = type === 'file';\n    const hasError = !!invalid;\n\n    // Memoize padding classes based on add-ons and icons\n    // Addon padding sized so the value sits adjacent to the addon — `ps-3`\n    // baseline + a measured space for addon text. Wider addons can override\n    // via `className` (`ps-16` etc.) at the call site.\n    const inputPaddingClasses = useMemo(() => {\n        let paddingStart = 'px-3';\n        let paddingEnd = 'px-3';\n\n        if (StartIcon) paddingStart = 'ps-9';\n        if (startAddon) paddingStart = 'ps-10';\n\n        if (EndIcon) paddingEnd = 'pe-9';\n        if (endAddon) paddingEnd = 'pe-10';\n        if ((isClearable && hasValue) || isShowingLoading) paddingEnd = 'pe-9';\n        if (showCount) paddingEnd = 'pe-14';\n\n        return `${paddingStart} ${paddingEnd}`;\n    }, [StartIcon, startAddon, EndIcon, endAddon, isClearable, hasValue, isShowingLoading, showCount]);\n\n    const handleInputChange = useCallback(\n        (e: React.ChangeEvent<HTMLInputElement>) => {\n            const newValue = e.target.value;\n\n            // Check character limit\n            if (wouldExceedLimit(newValue)) {\n                return;\n            }\n\n            // Update internal state if uncontrolled\n            updateValue(newValue);\n\n            // Call external onChange with modified event if addons are requested\n            if (onChange) {\n                if (returnValueWithAddons) {\n                    const valueWithAddons = getValueWithAddons(newValue, startAddon, endAddon);\n                    const modifiedEvent = {\n                        ...e,\n                        target: { ...e.target, value: valueWithAddons },\n                        currentTarget: { ...e.currentTarget, value: valueWithAddons },\n                    };\n                    onChange(modifiedEvent as React.ChangeEvent<HTMLInputElement>);\n                } else {\n                    onChange(e);\n                }\n            }\n        },\n        [onChange, returnValueWithAddons, startAddon, endAddon, updateValue, wouldExceedLimit]\n    );\n\n    const handleClear = useCallback(() => {\n        const clearValueWithAddons = returnValueWithAddons\n            ? getValueWithAddons('', startAddon, endAddon)\n            : '';\n        const syntheticEvent = {\n            target: { value: clearValueWithAddons },\n            currentTarget: { value: clearValueWithAddons },\n        } as React.ChangeEvent<HTMLInputElement>;\n\n        // Clear internal state\n        clearValue();\n\n        // Notify parent\n        onChange?.(syntheticEvent);\n\n        // Execute optional onClear callback\n        onClear?.();\n\n        // Focus the input after clearing\n        inputRef.current?.focus();\n    }, [returnValueWithAddons, startAddon, endAddon, clearValue, onChange, onClear]);\n\n    // Determine what to show in the end position (priority order)\n    const showClearButton = isClearable && hasValue && !showCount && !isShowingLoading;\n    const showLoadingSpinner = isShowingLoading && !showCount;\n    const showEndIcon = hasEndIcon && !isClearable && !showCount && !isShowingLoading;\n    const showEndAddon = hasEndAddon && !isClearable && !showCount && !isShowingLoading;\n\n    return (\n        <div className={cn('input--component', 'relative')}>\n            <input\n                ref={setRefs}\n                id={id}\n                type={type}\n                {...(!isReactHookForm && { value: inputValue })}\n                onChange={handleInputChange}\n                maxLength={maxLength}\n                aria-invalid={hasError || undefined}\n                disabled={props.disabled || isLoading}\n                className={cn(\n                    // Base styles\n                    'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',\n                    'border-input flex w-full min-w-0 rounded-md border py-1',\n                    'transition-[color,box-shadow] outline-none',\n                    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n                    formControlSizeClasses[size],\n                    // File input styles\n                    'file:inline-flex file:h-7 file:border file:bg-transparent file:px-3 file:text-sm file:font-medium',\n                    isFileInput\n                        ? 'cursor-pointer bg-background text-foreground file:cursor-pointer file:rounded-md file:border-input file:bg-background file:text-foreground'\n                        : 'bg-transparent',\n                    // Focus styles\n                    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n                    // Invalid/error styles — destructive border, ring, value text\n                    'aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:text-destructive',\n                    'aria-invalid:placeholder:text-destructive/40',\n                    // Read-only styles\n                    isFileInput\n                        ? 'read-only:bg-background'\n                        : 'read-only:bg-muted',\n                    // Dynamic padding\n                    inputPaddingClasses,\n                    className\n                )}\n                {...props}\n            />\n\n            {/* Start Icon */}\n            {!!StartIcon && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <StartIcon size={16} aria-hidden=\"true\" />\n                </div>\n            )}\n\n            {/* Start Add-on */}\n            {!!startAddon && (\n                <span\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-sm',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                >\n                    {startAddon}\n                </span>\n            )}\n\n            {/* End Icon */}\n            {!!showEndIcon && !!EndIcon && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <EndIcon size={16} aria-hidden=\"true\" />\n                </div>\n              )}\n\n            {/* End Add-on */}\n            {!!showEndAddon && (\n                <span\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-sm',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                >\n                    {endAddon}\n                </span>\n              )}\n\n            {/* Character Count */}\n            {!!showCount && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3 text-xs tabular-nums',\n                        props.disabled && 'opacity-50',\n                        hasError ? 'text-destructive' : 'text-muted-foreground'\n                    )}\n                    aria-live=\"polite\"\n                    role=\"status\"\n                >\n                    <Text tag=\"span\" size=\"xs\" type={hasError ? 'error' : 'secondary'}>\n                        {characterCount}\n                        {hasCharacterLimit ? `/${maxLength}` : ''}\n                    </Text>\n                </div>\n              )}\n\n            {/* Loading Spinner */}\n            {!!showLoadingSpinner && (\n                <div\n                    className={cn(\n                        'pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center pe-3',\n                        hasError ? 'text-destructive' : 'text-muted-foreground/80'\n                    )}\n                >\n                    <Loader2Icon size={16} className=\"animate-spin\" aria-hidden=\"true\" />\n                </div>\n              )}\n\n            {/* Clear Button */}\n            {!!showClearButton && (\n                <button\n                    type=\"button\"\n                    className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                    aria-label={strings.clear}\n                    onClick={handleClear}\n                    disabled={isLoading}\n                >\n                    <CircleXIcon size={16} aria-hidden=\"true\" />\n                </button>\n              )}\n        </div>\n    );\n}\n\n// forwardRef + memo (needed for callers that require refs, e.g. segmented inputs)\nconst Input = memo(React.forwardRef<HTMLInputElement, InputProps>(InputImpl));\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"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"}