kang-components 0.9.1 → 0.9.3

package/dist/index.d.ts

@@ -23,6 +23,10 @@ export { ConfirmDialog } from './confirm-dialog.js';
 export type { ConfirmDialogProps } from './confirm-dialog.js';
 export { BottomSheet } from './bottom-sheet.js';
 export type { BottomSheetProps } from './bottom-sheet.js';
+export { SearchField } from './search-field.js';
+export type { SearchFieldProps } from './search-field.js';
+export { SearchBar } from './search-bar.js';
+export type { SearchBarProps } from './search-bar.js';
 export { buildTheme, theme, hexToRgb } from './theme.js';
 export type { ThemeType } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACtE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,YAAY,EACX,eAAe,EACf,mBAAmB,EACnB,cAAc,GACd,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AACtE,YAAY,EACX,aAAa,EACb,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -12,6 +12,8 @@ export { Badge } from './badge.js';
 export { default as ToggleSwitch } from './toggle-switch.js';
 export { ConfirmDialog } from './confirm-dialog.js';
 export { BottomSheet } from './bottom-sheet.js';
+export { SearchField } from './search-field.js';
+export { SearchBar } from './search-bar.js';
 export { buildTheme, theme, hexToRgb } from './theme.js';
 export { lightPalette, darkPalette } from './palettes.js';
 export { ListItem, UnorderedListItemContainer } from './list-item.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACb,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/search-bar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * SearchBar — a *composite*: a back button + the expanding {@link SearchField} +
+ * a slide-in reveal, wired together with their animation as one unit. This is
+ * the next tier above kang's primitives — a group of components that must work
+ * together — so apps (xunzi's native search, the Hua Wen Reader add-on) mount
+ * the same animated search bar rather than re-implementing it.
+ *
+ * Presentational + domain-free: the host controls `active` (drives the reveal),
+ * owns the `value`/`onChange`, and supplies an optional `onBack`. Positioning
+ * (e.g. over a shell/backstage) and any decoration (titles, watermarks) stay
+ * with the host, which can wrap this or pass a `title` slot.
+ *
+ * Composes kang's own `BackButton` + `SearchField`; `styled-components`, `react`
+ * and `@react-spring/web` are the only things it pulls in.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+export interface SearchBarProps {
+    /** Drives the slide-in/out reveal (and whether the field is interactive). */
+    active: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    /** Optional back/close button rendered before the field. */
+    onBack?: () => void;
+    backAriaLabel?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    /** Optional leading title/label rendered above the field row. */
+    title?: ReactNode;
+    className?: string;
+}
+export declare function SearchBar({ active, value, onChange, onBack, backAriaLabel, placeholder, ariaLabel, title, className, }: SearchBarProps): ReactElement;
+export default SearchBar;
+//# sourceMappingURL=search-bar.d.ts.map

package/dist/search-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../src/search-bar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAa,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,MAAM,WAAW,cAAc;IAC9B,6EAA6E;IAC7E,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAqBD,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAsB,EACtB,WAAW,EACX,SAAS,EACT,KAAK,EACL,SAAS,GACT,EAAE,cAAc,GAAG,YAAY,CA+C/B;AAED,eAAe,SAAS,CAAC"}

package/dist/search-bar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SearchBar — a *composite*: a back button + the expanding {@link SearchField} +
+ * a slide-in reveal, wired together with their animation as one unit. This is
+ * the next tier above kang's primitives — a group of components that must work
+ * together — so apps (xunzi's native search, the Hua Wen Reader add-on) mount
+ * the same animated search bar rather than re-implementing it.
+ *
+ * Presentational + domain-free: the host controls `active` (drives the reveal),
+ * owns the `value`/`onChange`, and supplies an optional `onBack`. Positioning
+ * (e.g. over a shell/backstage) and any decoration (titles, watermarks) stay
+ * with the host, which can wrap this or pass a `title` slot.
+ *
+ * Composes kang's own `BackButton` + `SearchField`; `styled-components`, `react`
+ * and `@react-spring/web` are the only things it pulls in.
+ */
+import { useEffect } from 'react';
+import { styled } from 'styled-components';
+import { animated, useSpring } from '@react-spring/web';
+import BackButton from './back-button.js';
+import { SearchField } from './search-field.js';
+const Reveal = styled(animated.div) `
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	will-change: transform, opacity;
+`;
+const Row = styled.div `
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+`;
+/** Lets the (explicitly-width-animated) SearchField fill the row beside the back button. */
+const FieldWrap = styled.div `
+	flex: 1 1 auto;
+	min-width: 0;
+`;
+export function SearchBar({ active, value, onChange, onBack, backAriaLabel = 'Back', placeholder, ariaLabel, title, className, }) {
+    const [reveal, revealApi] = useSpring(() => ({
+        y: -16,
+        opacity: 0,
+        display: 'none',
+    }));
+    useEffect(() => {
+        const config = { tension: 300, friction: 30 };
+        if (active) {
+            revealApi.start({ y: 0, opacity: 1, display: 'flex', config });
+        }
+        else {
+            revealApi.start({
+                y: -16,
+                opacity: 0,
+                config,
+                onRest: () => revealApi.set({ display: 'none' }),
+            });
+        }
+    }, [active, revealApi]);
+    return (_jsxs(Reveal, { className: className, style: {
+            opacity: reveal.opacity,
+            display: reveal.display,
+            transform: reveal.y.to((v) => `translateY(${v}px)`),
+        }, children: [title, _jsxs(Row, { children: [onBack && _jsx(BackButton, { onClick: onBack, ariaLabel: backAriaLabel }), _jsx(FieldWrap, { children: _jsx(SearchField, { value: value, onChange: onChange, placeholder: placeholder, ariaLabel: ariaLabel, autoExpand: active }, active ? 'open' : 'closed') })] })] }));
+}
+export default SearchBar;
+//# sourceMappingURL=search-bar.js.map

package/dist/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../src/search-bar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAiBhD,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;;;;;CAKlC,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrB,CAAC;AAEF,4FAA4F;AAC5F,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3B,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,EACzB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAM,EACN,aAAa,GAAG,MAAM,EACtB,WAAW,EACX,SAAS,EACT,KAAK,EACL,SAAS,GACO;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5C,CAAC,EAAE,CAAC,EAAE;QACN,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,MAAyB;KAClC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACZ,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QAChE,CAAC;aAAM,CAAC;YACP,SAAS,CAAC,KAAK,CAAC;gBACf,CAAC,EAAE,CAAC,EAAE;gBACN,OAAO,EAAE,CAAC;gBACV,MAAM;gBACN,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;aAChD,CAAC,CAAC;QACJ,CAAC;IACF,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAExB,OAAO,CACN,MAAC,MAAM,IACN,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACN,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;SACnD,aAEA,KAAK,EACN,MAAC,GAAG,eACF,MAAM,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,GAAI,EACpE,KAAC,SAAS,cAET,KAAC,WAAW,IAEX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,MAAM,IALb,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAM9B,GACS,IACP,IACE,CACT,CAAC;AACH,CAAC;AAED,eAAe,SAAS,CAAC"}

package/dist/search-field.d.ts

@@ -0,0 +1,32 @@
+/**
+ * SearchField — a domain-free, animated search input. A surface "pill" that
+ * expands from an icon-only circle to a full-width field on mount, with a
+ * primary-colored magnifier, a borderless input that fades in once expanded,
+ * and a round clear (×) button that appears when there is text.
+ *
+ * Extracted as a shared primitive so xunzi's search banner, the Hua Wen Reader
+ * surface, and future apps all render the same field. Theming follows kang
+ * conventions: every color reads a `theme.colors.*` token with a literal
+ * fallback, so it adapts to a `ThemeProvider` yet still renders without one.
+ *
+ * `styled-components`, `react`, and (for the expand animation) `@react-spring/web`
+ * are the only things this module pulls in; react-spring is an optional peer.
+ */
+import { type ReactElement } from 'react';
+export interface SearchFieldProps {
+    /** Current input value (controlled). */
+    value: string;
+    /** Called with the new value on input, and with `''` when cleared. */
+    onChange: (value: string) => void;
+    /** Placeholder shown in the (expanded) field. */
+    placeholder?: string;
+    /** Accessible label for the input. */
+    ariaLabel?: string;
+    /** Play the expand-from-circle animation on mount (default: true). */
+    autoExpand?: boolean;
+    /** Class name passthrough for layout/positioning by the consumer. */
+    className?: string;
+}
+export declare function SearchField({ value, onChange, placeholder, ariaLabel, autoExpand, className, }: SearchFieldProps): ReactElement;
+export default SearchField;
+//# sourceMappingURL=search-field.d.ts.map

package/dist/search-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../src/search-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAA+B,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIvE,MAAM,WAAW,gBAAgB;IAChC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AA8ED,wBAAgB,WAAW,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAiB,EACjB,SAAS,GACT,EAAE,gBAAgB,GAAG,YAAY,CAgFjC;AAED,eAAe,WAAW,CAAC"}

package/dist/search-field.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SearchField — a domain-free, animated search input. A surface "pill" that
+ * expands from an icon-only circle to a full-width field on mount, with a
+ * primary-colored magnifier, a borderless input that fades in once expanded,
+ * and a round clear (×) button that appears when there is text.
+ *
+ * Extracted as a shared primitive so xunzi's search banner, the Hua Wen Reader
+ * surface, and future apps all render the same field. Theming follows kang
+ * conventions: every color reads a `theme.colors.*` token with a literal
+ * fallback, so it adapts to a `ThemeProvider` yet still renders without one.
+ *
+ * `styled-components`, `react`, and (for the expand animation) `@react-spring/web`
+ * are the only things this module pulls in; react-spring is an optional peer.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+import { animated, useSpring } from '@react-spring/web';
+const c = (token, fallback) => ({ theme }) => theme?.colors?.[token] ?? fallback;
+const Pill = styled(animated.div) `
+	display: flex;
+	align-items: center;
+	height: 2.75rem;
+	min-height: 2.75rem;
+	box-sizing: border-box;
+	border-radius: 999px;
+	background: ${c('surface', '#fdfcf8')};
+	box-shadow: 0 2px 8px ${c('shadowSubtle', 'rgba(0, 0, 0, 0.08)')};
+	overflow: hidden;
+	will-change: width, padding, gap;
+`;
+const IconWrap = styled.span `
+	display: flex;
+	align-items: center;
+	color: ${c('primary', '#4db6ac')};
+	font-size: 1.25rem;
+	flex-shrink: 0;
+`;
+const Field = styled(animated.input) `
+	border: none;
+	outline: none;
+	background: transparent;
+	font-size: 1rem;
+	color: ${c('onSurface', '#333')};
+	font-family: inherit;
+	min-width: 0;
+
+	&::placeholder {
+		color: ${c('onSurface', '#333')};
+		opacity: 0.4;
+	}
+`;
+const Clear = styled(animated.button) `
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	height: 1.5rem;
+	border: none;
+	border-radius: 50%;
+	background: ${c('outline', '#9e9e9e')};
+	color: ${c('surface', '#fdfcf8')};
+	cursor: pointer;
+	padding: 0;
+	flex-shrink: 0;
+	opacity: 0.7;
+	transition: opacity 0.2s ease;
+	&:active {
+		opacity: 1;
+	}
+`;
+const SearchGlyph = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("line", { x1: "16.5", y1: "16.5", x2: "21", y2: "21" })] }));
+const CloseGlyph = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: "0.85em", height: "0.85em", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [_jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }), _jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })] }));
+export function SearchField({ value, onChange, placeholder, ariaLabel, autoExpand = true, className, }) {
+    const inputRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [field, fieldApi] = useSpring(() => ({ expand: 0 }));
+    const [input, inputApi] = useSpring(() => ({ opacity: 0, y: 10 }));
+    useEffect(() => {
+        // Treat opt-out / reduced-motion / non-browser (test/SSR) envs as already
+        // expanded so the field is immediately usable.
+        const skip = !autoExpand ||
+            typeof window === 'undefined' ||
+            !window.matchMedia ||
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (skip) {
+            fieldApi.set({ expand: 1 });
+            inputApi.set({ opacity: 1, y: 0 });
+            setExpanded(true);
+            return;
+        }
+        const raf = requestAnimationFrame(() => {
+            fieldApi.start({
+                expand: 1,
+                config: { tension: 220, friction: 24 },
+                onRest: () => {
+                    setExpanded(true);
+                    inputApi.start({ opacity: 1, y: 0, config: { tension: 260, friction: 22 } });
+                },
+            });
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [autoExpand, fieldApi, inputApi]);
+    return (_jsxs(Pill, { className: className, style: {
+            width: field.expand.to((v) => `calc(2.75rem + (100% - 2.75rem) * ${v})`),
+            gap: field.expand.to((v) => `${0.5 * v}rem`),
+            paddingLeft: '0.75rem',
+            paddingRight: field.expand.to((v) => `${0.75 + 0.25 * v}rem`),
+        }, children: [_jsx(IconWrap, { children: _jsx(SearchGlyph, {}) }), _jsx(Field, { ref: inputRef, style: {
+                    opacity: input.opacity,
+                    transform: input.y.to((y) => `translateY(${y}px)`),
+                    flex: expanded ? '1 1 auto' : '0 0 0',
+                    width: expanded ? 'auto' : 0,
+                    pointerEvents: expanded ? 'auto' : 'none',
+                }, type: "text", inputMode: "search", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), "aria-label": ariaLabel }), value.length > 0 && (_jsx(Clear, { style: { opacity: input.opacity, pointerEvents: expanded ? 'auto' : 'none' }, onClick: () => {
+                    onChange('');
+                    inputRef.current?.focus();
+                }, "aria-label": "Clear search", children: _jsx(CloseGlyph, {}) }))] }));
+}
+export default SearchField;
+//# sourceMappingURL=search-field.js.map

package/dist/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../src/search-field.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kang-components",
-	"version": "0.9.1",
+	"version": "0.9.3",
 	"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
 	"type": "module",
 	"license": "MIT",