@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/index.js

@@ -0,0 +1,88 @@
+import { cx as e } from "./lib/cx.js";
+import { Icon as t, iconNames as n } from "./icon/icon.js";
+import { Mascot as r, mascotLyingStates as i, mascotStandingStates as a } from "./mascot/mascot.js";
+import { Spinner as o } from "./spinner/spinner.js";
+import { Logo as s, logoVariants as c } from "./logo/logo.js";
+import { Button as l, IconButton as u } from "./button/button.js";
+import { Badge as d } from "./badge/badge.js";
+import { Alert as f } from "./alert/alert.js";
+import { Modal as p, ModalClose as m, ModalContent as h, ModalTrigger as g } from "./modal/modal.js";
+import { Drawer as _, DrawerClose as v, DrawerContent as y, DrawerTrigger as b } from "./drawer/drawer.js";
+import { DESKTOP_QUERY as x, useMediaQuery as S } from "./lib/use-media-query.js";
+import { toast as C } from "./toast/toast-store.js";
+import { Toaster as w } from "./toast/toaster.js";
+import { ConfirmDialog as T } from "./confirm-dialog/confirm-dialog.js";
+import { Skeleton as E } from "./skeleton/skeleton.js";
+import { EmptyState as D } from "./empty-state/empty-state.js";
+import { NotificationCenter as O, formatRelative as k } from "./notification-center/notification-center.js";
+import { Tooltip as A, TooltipProvider as j } from "./tooltip/tooltip.js";
+import { Popover as M, PopoverAnchor as N, PopoverClose as P, PopoverContent as F, PopoverTrigger as I } from "./popover/popover.js";
+import { HoverCard as L, HoverCardContent as R, HoverCardTrigger as z } from "./hover-card/hover-card.js";
+import { Banner as B } from "./banner/banner.js";
+import { Progress as V } from "./progress/progress.js";
+import { ErrorState as H } from "./error-state/error-state.js";
+import { Container as U, Divider as W, Grid as G, Stack as K } from "./layout/layout.js";
+import { Tabs as q, TabsContent as J, TabsList as Y, TabsTrigger as X } from "./tabs/tabs.js";
+import { Breadcrumbs as Z } from "./breadcrumbs/breadcrumbs.js";
+import { Pagination as Q, paginationRange as $ } from "./pagination/pagination.js";
+import { StepDots as ee } from "./stepper/step-dots.js";
+import { Stepper as te } from "./stepper/stepper.js";
+import { Avatar as ne } from "./data-display/avatar.js";
+import { DropdownMenu as re, DropdownMenuCheckboxItem as ie, DropdownMenuContent as ae, DropdownMenuGroup as oe, DropdownMenuHeader as se, DropdownMenuItem as ce, DropdownMenuLabel as le, DropdownMenuRadioGroup as ue, DropdownMenuRadioItem as de, DropdownMenuSeparator as fe, DropdownMenuSub as pe, DropdownMenuSubContent as me, DropdownMenuSubTrigger as he, DropdownMenuTrigger as ge } from "./menu/dropdown-menu.js";
+import { ContextMenu as _e, ContextMenuCheckboxItem as ve, ContextMenuContent as ye, ContextMenuGroup as be, ContextMenuItem as xe, ContextMenuLabel as Se, ContextMenuRadioGroup as Ce, ContextMenuRadioItem as we, ContextMenuSeparator as Te, ContextMenuSub as Ee, ContextMenuSubContent as De, ContextMenuSubTrigger as Oe, ContextMenuTrigger as ke } from "./menu/context-menu.js";
+import { Menubar as Ae, MenubarCheckboxItem as je, MenubarContent as Me, MenubarGroup as Ne, MenubarItem as Pe, MenubarLabel as Fe, MenubarMenu as Ie, MenubarRadioGroup as Le, MenubarRadioItem as Re, MenubarSeparator as ze, MenubarSub as Be, MenubarSubContent as Ve, MenubarSubTrigger as He, MenubarTrigger as Ue } from "./menu/menubar.js";
+import { Accordion as We, AccordionContent as Ge, AccordionFooter as Ke, AccordionItem as qe, AccordionTrigger as Je, Collapsible as Ye, CollapsibleContent as Xe, CollapsibleTrigger as Ze } from "./accordion/accordion.js";
+import { CommandPalette as Qe, filterCommands as $e } from "./command-palette/command-palette.js";
+import { useAppShell as et } from "./app-shell/app-shell-context.js";
+import { SideNav as tt } from "./side-nav/side-nav.js";
+import { AppShell as nt } from "./app-shell/app-shell.js";
+import { SiteHeader as rt } from "./site-header/site-header.js";
+import { Fieldset as it, FormField as at, useFormField as ot } from "./form-field/form-field.js";
+import { DateField as st, Input as ct, Textarea as lt, useFieldProps as ut } from "./input/input.js";
+import { NativeSelect as dt, Select as ft } from "./select/select.js";
+import { Combobox as pt } from "./combobox/combobox.js";
+import { Checkbox as mt, RadioGroup as ht, Switch as gt } from "./choice/choice.js";
+import { Slider as _t } from "./slider/slider.js";
+import { FileUpload as vt, formatBytes as yt } from "./file-upload/file-upload.js";
+import { OtpInput as bt } from "./otp-input/otp-input.js";
+import { DEFAULT_COUNTRIES as xt, PhoneInput as St, toE164 as Ct } from "./phone-input/phone-input.js";
+import { DataTable as wt } from "./data-table/data-table.js";
+import { IconTile as Tt } from "./icon/icon-tile.js";
+import { CellActions as Et, CellLead as Dt, CellMono as Ot, CellNumber as kt, CellStack as At, CellSwitch as jt, CellTags as Mt, EntityCell as Nt } from "./data-table/cells.js";
+import { ActionList as Pt, ActionListItem as Ft, CheckList as It, DeviceList as Lt, StatGrid as Rt } from "./lists/lists.js";
+import { ArticleCard as zt, Card as Bt, CardBody as Vt, CardFooter as Ht, CardHeader as Ut, CardLink as Wt, CaseCard as Gt, IconCard as Kt, MetricCard as qt, PersonCard as Jt, PlanCard as Yt, ProductCard as Xt } from "./card/card.js";
+import { AvatarGroup as Zt, DescriptionList as Qt, FlowDiagram as $t, Sparkline as en, Tag as tn, Timeline as nn } from "./data-display/data-display.js";
+import { Chip as rn } from "./data-display/chip.js";
+import { CodeBlock as an } from "./data-display/code-block.js";
+import { CtaBand as on, DoorCards as sn, Faq as cn, PageHero as ln, PricingTable as un, ProcessSteps as dn, ProofBar as fn, Section as pn, SignOff as mn, SiteFooter as hn, Testimonial as gn } from "./marketing/marketing.js";
+import { NewsletterForm as _n } from "./marketing/newsletter-form.js";
+import { Calendar as vn, DEFAULT_PRESETS as yn, DatePicker as bn, DateRangePicker as xn } from "./date-picker/date-picker.js";
+import { SegmentedControl as Sn } from "./segmented-control/segmented-control.js";
+import { dates_exports as Cn } from "./event-calendar/dates.js";
+import { CalendarAgenda as wn, DEFAULT_CALENDAR_LABELS as Tn, EventCalendar as En, itemColor as Dn } from "./event-calendar/event-calendar.js";
+import { CalendarYear as On, EventDetails as kn, EventDetailsRow as An } from "./event-calendar/event-details.js";
+import { ActivityFeed as jn, ChipList as Mn, RankedList as Nn, SegmentedBar as Pn, SensitiveProvider as Fn, SensitiveToggle as In, SensitiveValue as Ln, StatusLegend as Rn } from "./data-display/insights.js";
+import { AreaChart as zn, BarChart as Bn, CATEGORY_CHART_COLORS as Vn, CHART_COLORS as Hn, DonutChart as Un, LineChart as Wn } from "./charts/charts.js";
+import { PageHeader as Gn } from "./page-header/page-header.js";
+import { SectionHeader as Kn } from "./page-header/section-header.js";
+import { SettingsList as qn, SettingsRow as Jn } from "./settings/settings-row.js";
+import { FilterBar as Yn, FilterMenu as Xn } from "./filters/filters.js";
+import { AccountMenu as Zn } from "./menu/account-menu.js";
+import { WorkspaceSwitcher as Qn } from "./app-shell/workspace-switcher.js";
+import { AppFooter as $n, KodffeAttribution as er } from "./app-shell/app-footer.js";
+import { ProductLogo as tr } from "./logo/product-logo.js";
+import { LocaleSwitch as nr } from "./locale-switch/locale-switch.js";
+import { PermissionMatrix as rr } from "./settings/permission-matrix.js";
+import { CATEGORY_COLORS as ir, ColorPicker as ar, InlineAddForm as or, PasswordInput as sr, TagInput as cr, TimeRangeInput as lr, WEEKDAYS as ur, WeekdayPicker as dr, WeeklySchedule as fr } from "./input/extra-inputs.js";
+import { IntegrationCard as pr } from "./card/integration-card.js";
+import { EntityHeader as mr, ProfileHeader as hr } from "./page-header/record-headers.js";
+import { MasterDetail as gr } from "./master-detail/master-detail.js";
+import { CycleNavigator as _r, PrevNextNav as vr, TableOfContents as yr } from "./page-navigation/page-navigation.js";
+import { FloatingActions as br } from "./app-shell/floating-actions.js";
+import { DeviceFrame as xr, Note as Sr, Prose as Cr, StepCarousel as wr } from "./content/content.js";
+import { InsightCard as Tr } from "./card/insight-card.js";
+import { PersonHoverCard as Er } from "./hover-card/person-hover-card.js";
+import { ChatComposer as Dr, ChatPanel as Or, PromptSuggestions as kr, QuickPanel as Ar } from "./content/assistant.js";
+import { AccountPage as jr, AppLayout as Mr, CalendarPage as Nr, DashboardPage as Pr, ListPage as Fr, MasterDetailPage as Ir, ProfilePage as Lr, ReportPage as Rr, SettingsPage as zr } from "./templates/app-templates.js";
+import { ArticleLayout as Br, AuthLayout as Vr, DocsLayout as Hr, MarketingLayout as Ur } from "./templates/site-templates.js";
+export { We as Accordion, Ge as AccordionContent, Ke as AccordionFooter, qe as AccordionItem, Je as AccordionTrigger, Zn as AccountMenu, jr as AccountPage, Pt as ActionList, Ft as ActionListItem, jn as ActivityFeed, f as Alert, $n as AppFooter, Mr as AppLayout, nt as AppShell, zn as AreaChart, zt as ArticleCard, Br as ArticleLayout, Vr as AuthLayout, ne as Avatar, Zt as AvatarGroup, d as Badge, B as Banner, Bn as BarChart, Z as Breadcrumbs, l as Button, Vn as CATEGORY_CHART_COLORS, ir as CATEGORY_COLORS, Hn as CHART_COLORS, vn as Calendar, wn as CalendarAgenda, Nr as CalendarPage, On as CalendarYear, Bt as Card, Vt as CardBody, Ht as CardFooter, Ut as CardHeader, Wt as CardLink, Gt as CaseCard, Et as CellActions, Dt as CellLead, Ot as CellMono, kt as CellNumber, At as CellStack, jt as CellSwitch, Mt as CellTags, Dr as ChatComposer, Or as ChatPanel, It as CheckList, mt as Checkbox, rn as Chip, Mn as ChipList, an as CodeBlock, Ye as Collapsible, Xe as CollapsibleContent, Ze as CollapsibleTrigger, ar as ColorPicker, pt as Combobox, Qe as CommandPalette, T as ConfirmDialog, U as Container, _e as ContextMenu, ve as ContextMenuCheckboxItem, ye as ContextMenuContent, be as ContextMenuGroup, xe as ContextMenuItem, Se as ContextMenuLabel, Ce as ContextMenuRadioGroup, we as ContextMenuRadioItem, Te as ContextMenuSeparator, Ee as ContextMenuSub, De as ContextMenuSubContent, Oe as ContextMenuSubTrigger, ke as ContextMenuTrigger, on as CtaBand, _r as CycleNavigator, Tn as DEFAULT_CALENDAR_LABELS, xt as DEFAULT_COUNTRIES, yn as DEFAULT_PRESETS, x as DESKTOP_QUERY, Pr as DashboardPage, wt as DataTable, st as DateField, bn as DatePicker, xn as DateRangePicker, Qt as DescriptionList, xr as DeviceFrame, Lt as DeviceList, W as Divider, Hr as DocsLayout, Un as DonutChart, sn as DoorCards, _ as Drawer, v as DrawerClose, y as DrawerContent, b as DrawerTrigger, re as DropdownMenu, ie as DropdownMenuCheckboxItem, ae as DropdownMenuContent, oe as DropdownMenuGroup, se as DropdownMenuHeader, ce as DropdownMenuItem, le as DropdownMenuLabel, ue as DropdownMenuRadioGroup, de as DropdownMenuRadioItem, fe as DropdownMenuSeparator, pe as DropdownMenuSub, me as DropdownMenuSubContent, he as DropdownMenuSubTrigger, ge as DropdownMenuTrigger, D as EmptyState, Nt as EntityCell, mr as EntityHeader, H as ErrorState, En as EventCalendar, kn as EventDetails, An as EventDetailsRow, cn as Faq, it as Fieldset, vt as FileUpload, Yn as FilterBar, Xn as FilterMenu, br as FloatingActions, $t as FlowDiagram, at as FormField, G as Grid, L as HoverCard, R as HoverCardContent, z as HoverCardTrigger, t as Icon, u as IconButton, Kt as IconCard, Tt as IconTile, or as InlineAddForm, ct as Input, Tr as InsightCard, pr as IntegrationCard, er as KodffeAttribution, Wn as LineChart, Fr as ListPage, nr as LocaleSwitch, s as Logo, Ur as MarketingLayout, r as Mascot, gr as MasterDetail, Ir as MasterDetailPage, Ae as Menubar, je as MenubarCheckboxItem, Me as MenubarContent, Ne as MenubarGroup, Pe as MenubarItem, Fe as MenubarLabel, Ie as MenubarMenu, Le as MenubarRadioGroup, Re as MenubarRadioItem, ze as MenubarSeparator, Be as MenubarSub, Ve as MenubarSubContent, He as MenubarSubTrigger, Ue as MenubarTrigger, qt as MetricCard, p as Modal, m as ModalClose, h as ModalContent, g as ModalTrigger, dt as NativeSelect, _n as NewsletterForm, Sr as Note, O as NotificationCenter, bt as OtpInput, Gn as PageHeader, ln as PageHero, Q as Pagination, sr as PasswordInput, rr as PermissionMatrix, Jt as PersonCard, Er as PersonHoverCard, St as PhoneInput, Yt as PlanCard, M as Popover, N as PopoverAnchor, P as PopoverClose, F as PopoverContent, I as PopoverTrigger, vr as PrevNextNav, un as PricingTable, dn as ProcessSteps, Xt as ProductCard, tr as ProductLogo, hr as ProfileHeader, Lr as ProfilePage, V as Progress, kr as PromptSuggestions, fn as ProofBar, Cr as Prose, Ar as QuickPanel, ht as RadioGroup, Nn as RankedList, Rr as ReportPage, pn as Section, Kn as SectionHeader, Pn as SegmentedBar, Sn as SegmentedControl, ft as Select, Fn as SensitiveProvider, In as SensitiveToggle, Ln as SensitiveValue, qn as SettingsList, zr as SettingsPage, Jn as SettingsRow, tt as SideNav, mn as SignOff, hn as SiteFooter, rt as SiteHeader, E as Skeleton, _t as Slider, en as Sparkline, o as Spinner, K as Stack, Rt as StatGrid, Rn as StatusLegend, wr as StepCarousel, ee as StepDots, te as Stepper, gt as Switch, yr as TableOfContents, q as Tabs, J as TabsContent, Y as TabsList, X as TabsTrigger, tn as Tag, cr as TagInput, gn as Testimonial, lt as Textarea, lr as TimeRangeInput, nn as Timeline, w as Toaster, A as Tooltip, j as TooltipProvider, ur as WEEKDAYS, dr as WeekdayPicker, fr as WeeklySchedule, Qn as WorkspaceSwitcher, Cn as calendarDates, e as cx, $e as filterCommands, yt as formatBytes, k as formatRelative, n as iconNames, Dn as itemColor, c as logoVariants, i as mascotLyingStates, a as mascotStandingStates, $ as paginationRange, Ct as toE164, C as toast, et as useAppShell, ut as useFieldProps, ot as useFormField, S as useMediaQuery };

package/dist/input/extra-inputs.d.ts

@@ -0,0 +1,122 @@
+import { type ReactNode } from 'react';
+import { type InputProps } from './input';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix' | 'iconEnd'> {
+    labels?: {
+        show?: string;
+        hide?: string;
+    };
+}
+/** Password field with a show/hide toggle. Set `autoComplete` ("current-password" or "new-password"). */
+export declare function PasswordInput({ labels, ...rest }: PasswordInputProps): import("react").JSX.Element;
+export interface TimeRange {
+    from: string;
+    to: string;
+}
+export interface TimeRangeInputProps {
+    value: TimeRange;
+    onChange: (value: TimeRange) => void;
+    /** Shows a remove button (one shift out of several). */
+    onRemove?: () => void;
+    /** Names the pair for screen readers ("Monday, shift 1"). */
+    label: string;
+    disabled?: boolean;
+    /** Accept ranges that end the next day (night shifts). */
+    allowOvernight?: boolean;
+    labels?: {
+        from?: string;
+        to?: string;
+        remove?: string;
+    };
+    className?: string;
+}
+/** Two time fields "from – to", with an optional remove button (shifts, opening hours). */
+export declare function TimeRangeInput({ value, onChange, onRemove, label, disabled, allowOvernight, labels, className, }: TimeRangeInputProps): import("react").JSX.Element;
+export interface Weekday {
+    value: string;
+    /** Short label on the chip ("Mon"). */
+    short: string;
+    /** Full name for screen readers ("Monday"). */
+    label: string;
+}
+export declare const WEEKDAYS: Weekday[];
+export interface WeekdayPickerProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    /** Pass translated days, or a week that starts on Sunday. */
+    days?: Weekday[];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Seven toggle chips (Mon … Sun) for working days and recurring schedules. */
+export declare function WeekdayPicker({ value, onChange, days, disabled, className, ...aria }: WeekdayPickerProps): import("react").JSX.Element;
+export type WeeklyScheduleValue = Record<string, {
+    open: boolean;
+    shifts: TimeRange[];
+}>;
+export interface WeeklyScheduleProps {
+    value: WeeklyScheduleValue;
+    onChange: (value: WeeklyScheduleValue) => void;
+    days?: Weekday[];
+    /** New shifts start with this range. */
+    defaultShift?: TimeRange;
+    labels?: {
+        addShift?: string;
+        closed?: string;
+        shift?: string;
+        open?: string;
+    };
+    className?: string;
+}
+/** Opening hours or staff shifts: one row per day with a switch, one or more time ranges and "+ Add shift". */
+export declare function WeeklySchedule({ value, onChange, days, defaultShift, labels, className, }: WeeklyScheduleProps): import("react").JSX.Element;
+export interface ColorOption {
+    value: string;
+    label: string;
+}
+export declare const CATEGORY_COLORS: ColorOption[];
+export interface ColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Defaults to the 12 category colors. */
+    colors?: ColorOption[];
+    /** An "inherit" option first ("Client color"); its value is `inherit`. */
+    inheritLabel?: string;
+    /** Allow any color with the system picker (+). */
+    allowCustom?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    labels?: {
+        custom?: string;
+    };
+    className?: string;
+}
+/** Swatches from the category palette, an optional "inherit" option and a custom color (projects, tags, calendars). */
+export declare function ColorPicker({ value, onChange, colors, inheritLabel, allowCustom, labels, className, ...aria }: ColorPickerProps): import("react").JSX.Element;
+export interface TagInputProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    /** Maximum number of tags. */
+    max?: number;
+    id?: string;
+    disabled?: boolean;
+    labels?: {
+        remove?: string;
+    };
+    className?: string;
+}
+/** Free text turned into chips with Enter, comma or a pasted list; Backspace on an empty field removes the last one. */
+export declare function TagInput({ value, onChange, placeholder, max, labels, className, ...props }: TagInputProps): import("react").JSX.Element;
+export interface InlineAddFormProps {
+    /** Labelled fields with `name`s (`FormField` + `Input`/`Select`). */
+    children: ReactNode;
+    /** Gets the form's data; the form resets and focus returns to the first field. */
+    onAdd: (data: FormData) => void;
+    addLabel?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+/** A compact row of fields with "Add" that appends to the list below (departments, locations, rules). */
+export declare function InlineAddForm({ children, onAdd, addLabel, className, ...aria }: InlineAddFormProps): import("react").JSX.Element;

package/dist/input/extra-inputs.js

@@ -0,0 +1,351 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Button as n, IconButton as r } from "../button/button.js";
+import { Glyph as i } from "../lib/glyphs.js";
+import { Input as a, useFieldProps as o } from "./input.js";
+import { selectOnArrow as s } from "../lib/select-on-arrow.js";
+import { CellSwitch as c } from "../data-table/cells.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useId as f, useRef as p, useState as m } from "react";
+import * as h from "@radix-ui/react-radio-group";
+//#region src/input/extra-inputs.tsx
+function g({ labels: e = {}, ...n }) {
+	let [r, i] = m(!1);
+	return /* @__PURE__ */ u(a, {
+		...n,
+		type: r ? "text" : "password",
+		spellCheck: !1,
+		suffix: /* @__PURE__ */ u("button", {
+			type: "button",
+			"aria-pressed": r,
+			"aria-label": e.show ?? "Show password",
+			onClick: () => i((e) => !e),
+			className: "-mr-1.5 grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted hover:bg-surface-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-focus",
+			children: /* @__PURE__ */ u(t, {
+				name: r ? "eye-off" : "eye",
+				size: 18
+			})
+		})
+	});
+}
+function _({ value: t, onChange: n, onRemove: i, label: o, disabled: s, allowOvernight: c, labels: l = {}, className: f }) {
+	let p = !!(t.from && t.to && (c ? t.to === t.from : t.to <= t.from));
+	return /* @__PURE__ */ d("div", {
+		role: "group",
+		"aria-label": o,
+		className: e("flex flex-wrap items-center gap-2", f),
+		children: [
+			/* @__PURE__ */ u(a, {
+				type: "time",
+				size: "sm",
+				className: "max-w-36",
+				"aria-label": l.from ?? "From",
+				value: t.from,
+				disabled: s,
+				onChange: (e) => n({
+					...t,
+					from: e.target.value
+				})
+			}),
+			/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				className: "text-fg-muted",
+				children: "–"
+			}),
+			/* @__PURE__ */ u(a, {
+				type: "time",
+				size: "sm",
+				className: "max-w-36",
+				"aria-label": l.to ?? "To",
+				value: t.to,
+				disabled: s,
+				invalid: p,
+				onChange: (e) => n({
+					...t,
+					to: e.target.value
+				})
+			}),
+			i && /* @__PURE__ */ u(r, {
+				icon: "trash",
+				label: `${l.remove ?? "Remove"} ${o}`,
+				size: "sm",
+				variant: "ghost",
+				onClick: i,
+				disabled: s
+			})
+		]
+	});
+}
+var v = [
+	{
+		value: "mon",
+		short: "Mon",
+		label: "Monday"
+	},
+	{
+		value: "tue",
+		short: "Tue",
+		label: "Tuesday"
+	},
+	{
+		value: "wed",
+		short: "Wed",
+		label: "Wednesday"
+	},
+	{
+		value: "thu",
+		short: "Thu",
+		label: "Thursday"
+	},
+	{
+		value: "fri",
+		short: "Fri",
+		label: "Friday"
+	},
+	{
+		value: "sat",
+		short: "Sat",
+		label: "Saturday"
+	},
+	{
+		value: "sun",
+		short: "Sun",
+		label: "Sunday"
+	}
+];
+function y({ value: t, onChange: n, days: r = v, disabled: i, className: a, ...o }) {
+	return /* @__PURE__ */ u("div", {
+		role: "group",
+		...o,
+		className: e("flex flex-wrap gap-1.5 font-sans", a),
+		children: r.map((r) => {
+			let a = t.includes(r.value);
+			return /* @__PURE__ */ d("button", {
+				type: "button",
+				"aria-pressed": a,
+				disabled: i,
+				onClick: () => n(a ? t.filter((e) => e !== r.value) : [...t, r.value]),
+				className: e("h-9 min-w-12 cursor-pointer rounded-full border px-3 text-sm font-semibold transition-colors pointer-coarse:h-11", "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-50", a ? "border-primary bg-primary text-on-primary" : "border-border bg-surface text-fg hover:border-fg-muted/50"),
+				children: [/* @__PURE__ */ u("span", {
+					"aria-hidden": "true",
+					children: r.short
+				}), /* @__PURE__ */ u("span", {
+					className: "sr-only",
+					children: r.label
+				})]
+			}, r.value);
+		})
+	});
+}
+function b({ value: t, onChange: r, days: i = v, defaultShift: a = {
+	from: "09:00",
+	to: "17:00"
+}, labels: o = {}, className: s }) {
+	let f = (e, n) => r({
+		...t,
+		[e]: n
+	});
+	return /* @__PURE__ */ u("div", {
+		className: e("divide-y divide-border font-sans", s),
+		children: i.map((e) => {
+			let r = t[e.value] ?? {
+				open: !1,
+				shifts: []
+			};
+			return /* @__PURE__ */ d("div", {
+				className: "flex flex-wrap items-start gap-x-4 gap-y-2 py-3 first:pt-0 last:pb-0",
+				children: [/* @__PURE__ */ d("div", {
+					className: "flex w-36 shrink-0 items-center gap-3 pt-1",
+					children: [/* @__PURE__ */ u(c, {
+						checked: r.open,
+						onCheckedChange: (t) => f(e.value, {
+							open: t,
+							shifts: t && !r.shifts.length ? [a] : r.shifts
+						}),
+						label: `${e.label} ${o.open ?? "open"}`
+					}), /* @__PURE__ */ u("span", {
+						className: "text-sm font-semibold text-fg",
+						children: e.label
+					})]
+				}), /* @__PURE__ */ u("div", {
+					className: "grid min-w-0 flex-1 gap-2",
+					children: r.open ? /* @__PURE__ */ d(l, { children: [r.shifts.map((t, n) => /* @__PURE__ */ u(_, {
+						label: `${e.label}, ${o.shift ?? "shift"} ${n + 1}`,
+						value: t,
+						onChange: (t) => f(e.value, {
+							...r,
+							shifts: r.shifts.map((e, r) => r === n ? t : e)
+						}),
+						onRemove: r.shifts.length > 1 ? () => f(e.value, {
+							...r,
+							shifts: r.shifts.filter((e, t) => t !== n)
+						}) : void 0
+					}, n)), /* @__PURE__ */ u(n, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						iconStart: "add",
+						className: "w-fit",
+						onClick: () => f(e.value, {
+							...r,
+							shifts: [...r.shifts, a]
+						}),
+						children: o.addShift ?? "Add shift"
+					})] }) : /* @__PURE__ */ u("span", {
+						className: "pt-1.5 text-sm text-fg-muted",
+						children: o.closed ?? "Closed"
+					})
+				})]
+			}, e.value);
+		})
+	});
+}
+var x = [
+	"Indigo",
+	"Teal",
+	"Blue",
+	"Violet",
+	"Pink",
+	"Red",
+	"Orange",
+	"Amber",
+	"Olive",
+	"Green",
+	"Cyan",
+	"Slate"
+].map((e, t) => ({
+	value: `var(--kf-category-${t + 1})`,
+	label: e
+}));
+function S({ value: t, onChange: n, colors: r = x, inheritLabel: a, allowCustom: o, labels: c = {}, className: l, ...f }) {
+	let m = !r.some((e) => e.value === t) && t !== "inherit" ? t : void 0, g = p(null), _ = "relative grid size-8 cursor-pointer place-items-center rounded-full border-0 text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:size-10 data-[state=checked]:ring-2 data-[state=checked]:ring-fg data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-bg";
+	return /* @__PURE__ */ d("div", {
+		className: e("flex flex-wrap items-center gap-2", l),
+		children: [/* @__PURE__ */ d(h.Root, {
+			...f,
+			value: m ? "custom" : t,
+			onValueChange: (e) => e !== "custom" && n(e),
+			onKeyDown: s,
+			className: "flex flex-wrap gap-2",
+			children: [
+				a && /* @__PURE__ */ u(h.Item, {
+					value: "inherit",
+					"aria-label": a,
+					title: a,
+					className: e(_, "border-2 border-dashed border-fg-muted/60 bg-surface text-fg-muted"),
+					children: /* @__PURE__ */ u(i, {
+						name: "minus",
+						size: 14
+					})
+				}),
+				r.map((e) => /* @__PURE__ */ u(h.Item, {
+					value: e.value,
+					"aria-label": e.label,
+					title: e.label,
+					className: _,
+					style: { background: e.value },
+					children: /* @__PURE__ */ u(h.Indicator, { children: /* @__PURE__ */ u(i, {
+						name: "check",
+						size: 14,
+						strokeWidth: 3
+					}) })
+				}, e.value)),
+				m && /* @__PURE__ */ u(h.Item, {
+					value: "custom",
+					"aria-label": `${c.custom ?? "Custom color"} ${m}`,
+					className: _,
+					style: { background: m },
+					children: /* @__PURE__ */ u(h.Indicator, { children: /* @__PURE__ */ u(i, {
+						name: "check",
+						size: 14,
+						strokeWidth: 3
+					}) })
+				})
+			]
+		}), o && /* @__PURE__ */ d("label", {
+			className: e(_, "border-2 border-dashed border-fg-muted/60 bg-surface text-fg-muted has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus"),
+			children: [
+				/* @__PURE__ */ u(i, {
+					name: "plus",
+					size: 16
+				}),
+				/* @__PURE__ */ u("span", {
+					className: "sr-only",
+					children: c.custom ?? "Custom color"
+				}),
+				/* @__PURE__ */ u("input", {
+					ref: g,
+					type: "color",
+					className: "sr-only",
+					value: m?.startsWith("#") ? m : "#4b5bb8",
+					onChange: (e) => n(e.target.value)
+				})
+			]
+		})]
+	});
+}
+function C({ value: t, onChange: n, placeholder: r, max: a, labels: s = {}, className: c, ...l }) {
+	let { invalid: f, ...p } = o(l), [h, g] = m(""), _ = (e) => {
+		let r = new Set(t.map((e) => e.toLowerCase())), i = e.split(/[,\n]/).map((e) => e.trim()).filter((e) => {
+			let t = e.toLowerCase();
+			return !e || r.has(t) ? !1 : (r.add(t), !0);
+		});
+		i.length && (n([...t, ...i].slice(0, a ?? Infinity)), g(""));
+	}, v = (e) => {
+		(e.key === "Enter" || e.key === ",") && h.trim() ? (e.preventDefault(), _(h)) : e.key === "Backspace" && !h && t.length && n(t.slice(0, -1));
+	}, y = a !== void 0 && t.length >= a;
+	return /* @__PURE__ */ d("div", {
+		className: e("flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-sm border bg-bg px-2 py-1.5 font-sans transition-[border-color,box-shadow]", f ? "border-danger-border" : "border-border hover:border-fg-muted/50", "focus-within:border-primary focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]", c),
+		children: [t.map((e) => /* @__PURE__ */ d("span", {
+			className: "inline-flex items-center gap-1 rounded-full bg-info-surface py-0.5 pr-1 pl-2.5 text-sm font-semibold text-info-fg",
+			children: [e, /* @__PURE__ */ u("button", {
+				type: "button",
+				"aria-label": `${s.remove ?? "Remove"} ${e}`,
+				onClick: () => n(t.filter((t) => t !== e)),
+				className: "grid size-5 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current hover:bg-bg focus-visible:outline-2 focus-visible:outline-focus",
+				children: /* @__PURE__ */ u(i, {
+					name: "close",
+					size: 10
+				})
+			})]
+		}, e)), /* @__PURE__ */ u("input", {
+			...p,
+			value: h,
+			disabled: p.disabled,
+			readOnly: y,
+			placeholder: t.length ? void 0 : r,
+			onChange: (e) => g(e.target.value),
+			onKeyDown: v,
+			onBlur: () => h.trim() && _(h),
+			onPaste: (e) => {
+				let t = e.clipboardData.getData("text");
+				/[,\n]/.test(t) && (e.preventDefault(), _(t));
+			},
+			className: "min-w-24 flex-1 border-0 bg-transparent px-1 py-1 text-base text-fg outline-none placeholder:text-fg-muted/80 sm:text-[15px]"
+		})]
+	});
+}
+function w({ children: t, onAdd: r, addLabel: i = "Add", className: a, ...o }) {
+	let s = f(), c = (e) => {
+		e.preventDefault();
+		let t = e.currentTarget;
+		r(new FormData(t)), t.reset(), t.querySelector("input, select, textarea, button[role=\"combobox\"]")?.focus();
+	};
+	return /* @__PURE__ */ d("form", {
+		id: s,
+		...o,
+		onSubmit: c,
+		className: e("flex flex-wrap items-end gap-3 font-sans *:min-w-[min(100%,12rem)] *:flex-1", a),
+		children: [t, /* @__PURE__ */ u(n, {
+			type: "submit",
+			iconStart: "add",
+			className: "flex-none!",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { x as CATEGORY_COLORS, S as ColorPicker, w as InlineAddForm, g as PasswordInput, C as TagInput, _ as TimeRangeInput, v as WEEKDAYS, y as WeekdayPicker, b as WeeklySchedule };
+
+//# sourceMappingURL=extra-inputs.js.map

package/dist/input/extra-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extra-inputs.js","names":["_Fragment","RadixRadio","PasswordInput","rest","visible","setVisible","useState","Input","labels","v","Icon","TimeRangeInput","invalid","value","allowOvernight","label","cx","className","onChange","onRemove","IconButton","WEEKDAYS","WeekdayPicker","aria","days","on","d","WeeklySchedule","update","day","next","CellSwitch","open","defaultShift","Fragment","i","s","j","r","x","Button","CATEGORY_COLORS","ColorPicker","custom","colors","c","customRef","useRef","swatch","selectOnArrow","inheritLabel","Glyph","allowCustom","TagInput","props","field","useFieldProps","draft","setDraft","add","seen","raw","t","key","max","onKeyDown","full","placeholder","text","InlineAddForm","id","useId","submit","form","onAdd","children","addLabel"],"sources":["../../src/input/extra-inputs.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixRadio from '@radix-ui/react-radio-group';\nimport { useId, useRef, useState, type FormEvent, type KeyboardEvent, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon } from '../icon/icon';\nimport { Button, IconButton } from '../button/button';\nimport { CellSwitch } from '../data-table/cells';\nimport { selectOnArrow } from '../lib/select-on-arrow';\nimport { Input, useFieldProps, type InputProps } from './input';\n\n/* ---------------- PasswordInput ---------------- */\n\nexport interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix' | 'iconEnd'> {\n  labels?: { show?: string; hide?: string };\n}\n\n/** Password field with a show/hide toggle. Set `autoComplete` (\"current-password\" or \"new-password\"). */\nexport function PasswordInput({ labels = {}, ...rest }: PasswordInputProps) {\n  const [visible, setVisible] = useState(false);\n  return (\n    <Input\n      {...rest}\n      type={visible ? 'text' : 'password'}\n      spellCheck={false}\n      suffix={\n        <button\n          type=\"button\"\n          aria-pressed={visible}\n          aria-label={labels.show ?? 'Show password'}\n          onClick={() => setVisible((v) => !v)}\n          className=\"-mr-1.5 grid size-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg-muted hover:bg-surface-muted hover:text-fg focus-visible:outline-2 focus-visible:outline-focus\"\n        >\n          <Icon name={visible ? 'eye-off' : 'eye'} size={18} />\n        </button>\n      }\n    />\n  );\n}\n\n/* ---------------- TimeRangeInput ---------------- */\n\nexport interface TimeRange {\n  from: string;\n  to: string;\n}\n\nexport interface TimeRangeInputProps {\n  value: TimeRange;\n  onChange: (value: TimeRange) => void;\n  /** Shows a remove button (one shift out of several). */\n  onRemove?: () => void;\n  /** Names the pair for screen readers (\"Monday, shift 1\"). */\n  label: string;\n  disabled?: boolean;\n  /** Accept ranges that end the next day (night shifts). */\n  allowOvernight?: boolean;\n  labels?: { from?: string; to?: string; remove?: string };\n  className?: string;\n}\n\n/** Two time fields \"from – to\", with an optional remove button (shifts, opening hours). */\nexport function TimeRangeInput({\n  value,\n  onChange,\n  onRemove,\n  label,\n  disabled,\n  allowOvernight,\n  labels = {},\n  className,\n}: TimeRangeInputProps) {\n  // Overnight ranges (22:00 – 06:00) are valid with `allowOvernight`; an empty range never is.\n  const invalid = Boolean(value.from && value.to && (allowOvernight ? value.to === value.from : value.to <= value.from));\n  return (\n    <div role=\"group\" aria-label={label} className={cx('flex flex-wrap items-center gap-2', className)}>\n      <Input\n        type=\"time\"\n        size=\"sm\"\n        className=\"max-w-36\"\n        aria-label={labels.from ?? 'From'}\n        value={value.from}\n        disabled={disabled}\n        onChange={(e) => onChange({ ...value, from: e.target.value })}\n      />\n      <span aria-hidden=\"true\" className=\"text-fg-muted\">\n        –\n      </span>\n      <Input\n        type=\"time\"\n        size=\"sm\"\n        className=\"max-w-36\"\n        aria-label={labels.to ?? 'To'}\n        value={value.to}\n        disabled={disabled}\n        invalid={invalid}\n        onChange={(e) => onChange({ ...value, to: e.target.value })}\n      />\n      {onRemove && (\n        <IconButton\n          icon=\"trash\"\n          label={`${labels.remove ?? 'Remove'} ${label}`}\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n}\n\n/* ---------------- WeekdayPicker ---------------- */\n\nexport interface Weekday {\n  value: string;\n  /** Short label on the chip (\"Mon\"). */\n  short: string;\n  /** Full name for screen readers (\"Monday\"). */\n  label: string;\n}\n\nexport const WEEKDAYS: Weekday[] = [\n  { value: 'mon', short: 'Mon', label: 'Monday' },\n  { value: 'tue', short: 'Tue', label: 'Tuesday' },\n  { value: 'wed', short: 'Wed', label: 'Wednesday' },\n  { value: 'thu', short: 'Thu', label: 'Thursday' },\n  { value: 'fri', short: 'Fri', label: 'Friday' },\n  { value: 'sat', short: 'Sat', label: 'Saturday' },\n  { value: 'sun', short: 'Sun', label: 'Sunday' },\n];\n\nexport interface WeekdayPickerProps {\n  value: string[];\n  onChange: (value: string[]) => void;\n  /** Pass translated days, or a week that starts on Sunday. */\n  days?: Weekday[];\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  disabled?: boolean;\n  className?: string;\n}\n\n/** Seven toggle chips (Mon … Sun) for working days and recurring schedules. */\nexport function WeekdayPicker({ value, onChange, days = WEEKDAYS, disabled, className, ...aria }: WeekdayPickerProps) {\n  return (\n    <div role=\"group\" {...aria} className={cx('flex flex-wrap gap-1.5 font-sans', className)}>\n      {days.map((d) => {\n        const on = value.includes(d.value);\n        return (\n          <button\n            key={d.value}\n            type=\"button\"\n            aria-pressed={on}\n            disabled={disabled}\n            onClick={() => onChange(on ? value.filter((v) => v !== d.value) : [...value, d.value])}\n            className={cx(\n              'h-9 min-w-12 cursor-pointer rounded-full border px-3 text-sm font-semibold transition-colors pointer-coarse:h-11',\n              'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed disabled:opacity-50',\n              on\n                ? 'border-primary bg-primary text-on-primary'\n                : 'border-border bg-surface text-fg hover:border-fg-muted/50',\n            )}\n          >\n            <span aria-hidden=\"true\">{d.short}</span>\n            <span className=\"sr-only\">{d.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/* ---------------- WeeklySchedule ---------------- */\n\nexport type WeeklyScheduleValue = Record<string, { open: boolean; shifts: TimeRange[] }>;\n\nexport interface WeeklyScheduleProps {\n  value: WeeklyScheduleValue;\n  onChange: (value: WeeklyScheduleValue) => void;\n  days?: Weekday[];\n  /** New shifts start with this range. */\n  defaultShift?: TimeRange;\n  labels?: { addShift?: string; closed?: string; shift?: string; open?: string };\n  className?: string;\n}\n\n/** Opening hours or staff shifts: one row per day with a switch, one or more time ranges and \"+ Add shift\". */\nexport function WeeklySchedule({\n  value,\n  onChange,\n  days = WEEKDAYS,\n  defaultShift = { from: '09:00', to: '17:00' },\n  labels = {},\n  className,\n}: WeeklyScheduleProps) {\n  const update = (day: string, next: { open: boolean; shifts: TimeRange[] }) => onChange({ ...value, [day]: next });\n  return (\n    <div className={cx('divide-y divide-border font-sans', className)}>\n      {days.map((d) => {\n        const v = value[d.value] ?? { open: false, shifts: [] };\n        return (\n          <div key={d.value} className=\"flex flex-wrap items-start gap-x-4 gap-y-2 py-3 first:pt-0 last:pb-0\">\n            <div className=\"flex w-36 shrink-0 items-center gap-3 pt-1\">\n              <CellSwitch\n                checked={v.open}\n                onCheckedChange={(open) =>\n                  update(d.value, { open, shifts: open && !v.shifts.length ? [defaultShift] : v.shifts })\n                }\n                label={`${d.label} ${labels.open ?? 'open'}`}\n              />\n              <span className=\"text-sm font-semibold text-fg\">{d.label}</span>\n            </div>\n            <div className=\"grid min-w-0 flex-1 gap-2\">\n              {v.open ? (\n                <>\n                  {v.shifts.map((s, i) => (\n                    <TimeRangeInput\n                      key={i}\n                      label={`${d.label}, ${labels.shift ?? 'shift'} ${i + 1}`}\n                      value={s}\n                      onChange={(r) => update(d.value, { ...v, shifts: v.shifts.map((x, j) => (j === i ? r : x)) })}\n                      onRemove={\n                        v.shifts.length > 1\n                          ? () => update(d.value, { ...v, shifts: v.shifts.filter((_, j) => j !== i) })\n                          : undefined\n                      }\n                    />\n                  ))}\n                  <Button\n                    type=\"button\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconStart=\"add\"\n                    className=\"w-fit\"\n                    onClick={() => update(d.value, { ...v, shifts: [...v.shifts, defaultShift] })}\n                  >\n                    {labels.addShift ?? 'Add shift'}\n                  </Button>\n                </>\n              ) : (\n                <span className=\"pt-1.5 text-sm text-fg-muted\">{labels.closed ?? 'Closed'}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/* ---------------- ColorPicker ---------------- */\n\nexport interface ColorOption {\n  value: string;\n  label: string;\n}\n\nexport const CATEGORY_COLORS: ColorOption[] = [\n  'Indigo',\n  'Teal',\n  'Blue',\n  'Violet',\n  'Pink',\n  'Red',\n  'Orange',\n  'Amber',\n  'Olive',\n  'Green',\n  'Cyan',\n  'Slate',\n].map((label, i) => ({ value: `var(--kf-category-${i + 1})`, label }));\n\nexport interface ColorPickerProps {\n  value: string;\n  onChange: (value: string) => void;\n  /** Defaults to the 12 category colors. */\n  colors?: ColorOption[];\n  /** An \"inherit\" option first (\"Client color\"); its value is `inherit`. */\n  inheritLabel?: string;\n  /** Allow any color with the system picker (+). */\n  allowCustom?: boolean;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  labels?: { custom?: string };\n  className?: string;\n}\n\n/** Swatches from the category palette, an optional \"inherit\" option and a custom color (projects, tags, calendars). */\nexport function ColorPicker({\n  value,\n  onChange,\n  colors = CATEGORY_COLORS,\n  inheritLabel,\n  allowCustom,\n  labels = {},\n  className,\n  ...aria\n}: ColorPickerProps) {\n  const custom = !colors.some((c) => c.value === value) && value !== 'inherit' ? value : undefined;\n  const customRef = useRef<HTMLInputElement>(null);\n  const swatch =\n    'relative grid size-8 cursor-pointer place-items-center rounded-full border-0 text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus pointer-coarse:size-10 ' +\n    'data-[state=checked]:ring-2 data-[state=checked]:ring-fg data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-bg';\n  return (\n    <div className={cx('flex flex-wrap items-center gap-2', className)}>\n      <RadixRadio.Root\n        {...aria}\n        value={custom ? 'custom' : value}\n        onValueChange={(v) => v !== 'custom' && onChange(v)}\n        onKeyDown={selectOnArrow}\n        className=\"flex flex-wrap gap-2\"\n      >\n        {inheritLabel && (\n          <RadixRadio.Item\n            value=\"inherit\"\n            aria-label={inheritLabel}\n            title={inheritLabel}\n            className={cx(swatch, 'border-2 border-dashed border-fg-muted/60 bg-surface text-fg-muted')}\n          >\n            <Glyph name=\"minus\" size={14} />\n          </RadixRadio.Item>\n        )}\n        {colors.map((c) => (\n          <RadixRadio.Item\n            key={c.value}\n            value={c.value}\n            aria-label={c.label}\n            title={c.label}\n            className={swatch}\n            style={{ background: c.value }}\n          >\n            <RadixRadio.Indicator>\n              <Glyph name=\"check\" size={14} strokeWidth={3} />\n            </RadixRadio.Indicator>\n          </RadixRadio.Item>\n        ))}\n        {custom && (\n          <RadixRadio.Item\n            value=\"custom\"\n            aria-label={`${labels.custom ?? 'Custom color'} ${custom}`}\n            className={swatch}\n            style={{ background: custom }}\n          >\n            <RadixRadio.Indicator>\n              <Glyph name=\"check\" size={14} strokeWidth={3} />\n            </RadixRadio.Indicator>\n          </RadixRadio.Item>\n        )}\n      </RadixRadio.Root>\n      {allowCustom && (\n        <label\n          className={cx(\n            swatch,\n            'border-2 border-dashed border-fg-muted/60 bg-surface text-fg-muted has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus',\n          )}\n        >\n          <Glyph name=\"plus\" size={16} />\n          <span className=\"sr-only\">{labels.custom ?? 'Custom color'}</span>\n          <input\n            ref={customRef}\n            type=\"color\"\n            className=\"sr-only\"\n            value={custom?.startsWith('#') ? custom : '#4b5bb8'}\n            onChange={(e) => onChange(e.target.value)}\n          />\n        </label>\n      )}\n    </div>\n  );\n}\n\n/* ---------------- TagInput ---------------- */\n\nexport interface TagInputProps {\n  value: string[];\n  onChange: (value: string[]) => void;\n  placeholder?: string;\n  /** Maximum number of tags. */\n  max?: number;\n  id?: string;\n  disabled?: boolean;\n  labels?: { remove?: string };\n  className?: string;\n}\n\n/** Free text turned into chips with Enter, comma or a pasted list; Backspace on an empty field removes the last one. */\nexport function TagInput({ value, onChange, placeholder, max, labels = {}, className, ...props }: TagInputProps) {\n  const { invalid, ...field } = useFieldProps(props);\n  const [draft, setDraft] = useState('');\n  const add = (raw: string) => {\n    const seen = new Set(value.map((v) => v.toLowerCase()));\n    const next = raw\n      .split(/[,\\n]/)\n      .map((t) => t.trim())\n      .filter((t) => {\n        // De-duplicate against the current tags and within the pasted list (case-insensitive).\n        const key = t.toLowerCase();\n        if (!t || seen.has(key)) return false;\n        seen.add(key);\n        return true;\n      });\n    if (!next.length) return;\n    onChange([...value, ...next].slice(0, max ?? Infinity));\n    setDraft('');\n  };\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if ((e.key === 'Enter' || e.key === ',') && draft.trim()) {\n      e.preventDefault();\n      add(draft);\n    } else if (e.key === 'Backspace' && !draft && value.length) {\n      onChange(value.slice(0, -1));\n    }\n  };\n  const full = max !== undefined && value.length >= max;\n  return (\n    <div\n      className={cx(\n        'flex min-h-11 w-full flex-wrap items-center gap-1.5 rounded-sm border bg-bg px-2 py-1.5 font-sans transition-[border-color,box-shadow]',\n        invalid ? 'border-danger-border' : 'border-border hover:border-fg-muted/50',\n        'focus-within:border-primary focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]',\n        className,\n      )}\n    >\n      {value.map((t) => (\n        <span\n          key={t}\n          className=\"inline-flex items-center gap-1 rounded-full bg-info-surface py-0.5 pr-1 pl-2.5 text-sm font-semibold text-info-fg\"\n        >\n          {t}\n          <button\n            type=\"button\"\n            aria-label={`${labels.remove ?? 'Remove'} ${t}`}\n            onClick={() => onChange(value.filter((v) => v !== t))}\n            className=\"grid size-5 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-current hover:bg-bg focus-visible:outline-2 focus-visible:outline-focus\"\n          >\n            <Glyph name=\"close\" size={10} />\n          </button>\n        </span>\n      ))}\n      <input\n        {...field}\n        value={draft}\n        disabled={field.disabled}\n        // Read-only (not disabled) when full, so focus stays in the field after adding the last tag.\n        readOnly={full}\n        placeholder={value.length ? undefined : placeholder}\n        onChange={(e) => setDraft(e.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => draft.trim() && add(draft)}\n        onPaste={(e) => {\n          const text = e.clipboardData.getData('text');\n          if (/[,\\n]/.test(text)) {\n            e.preventDefault();\n            add(text);\n          }\n        }}\n        className=\"min-w-24 flex-1 border-0 bg-transparent px-1 py-1 text-base text-fg outline-none placeholder:text-fg-muted/80 sm:text-[15px]\"\n      />\n    </div>\n  );\n}\n\n/* ---------------- InlineAddForm ---------------- */\n\nexport interface InlineAddFormProps {\n  /** Labelled fields with `name`s (`FormField` + `Input`/`Select`). */\n  children: ReactNode;\n  /** Gets the form's data; the form resets and focus returns to the first field. */\n  onAdd: (data: FormData) => void;\n  addLabel?: string;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** A compact row of fields with \"Add\" that appends to the list below (departments, locations, rules). */\nexport function InlineAddForm({ children, onAdd, addLabel = 'Add', className, ...aria }: InlineAddFormProps) {\n  const id = useId();\n  const submit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const form = e.currentTarget;\n    onAdd(new FormData(form));\n    form.reset();\n    form.querySelector<HTMLElement>('input, select, textarea, button[role=\"combobox\"]')?.focus();\n  };\n  return (\n    <form\n      id={id}\n      {...aria}\n      onSubmit={submit}\n      className={cx('flex flex-wrap items-end gap-3 font-sans *:min-w-[min(100%,12rem)] *:flex-1', className)}\n    >\n      {children}\n      <Button type=\"submit\" iconStart=\"add\" className=\"flex-none!\">\n        {addLabel}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/input/field-styles.d.ts

@@ -0,0 +1,5 @@
+export type ControlSize = 'sm' | 'md' | 'lg';
+/** Heights: 36 / 44 / 52px. Text is 16px below `sm` so iOS does not zoom on focus. */
+export declare const CONTROL_SIZES: Record<ControlSize, string>;
+/** Shared look for text-like controls (Input wrapper, Textarea, Select trigger, Combobox). */
+export declare function controlClasses(size: ControlSize, invalid?: boolean, extra?: string): string;