kang-components 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -23,6 +23,8 @@ export { ConfirmDialog } from './confirm-dialog.js';
23
23
  export type { ConfirmDialogProps } from './confirm-dialog.js';
24
24
  export { BottomSheet } from './bottom-sheet.js';
25
25
  export type { BottomSheetProps } from './bottom-sheet.js';
26
+ export { SearchField } from './search-field.js';
27
+ export type { SearchFieldProps } from './search-field.js';
26
28
  export { buildTheme, theme, hexToRgb } from './theme.js';
27
29
  export type { ThemeType } from './theme.js';
28
30
  export { lightPalette, darkPalette } from './palettes.js';
@@ -1 +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"}
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,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"}
package/dist/index.js CHANGED
@@ -12,6 +12,7 @@ export { Badge } from './badge.js';
12
12
  export { default as ToggleSwitch } from './toggle-switch.js';
13
13
  export { ConfirmDialog } from './confirm-dialog.js';
14
14
  export { BottomSheet } from './bottom-sheet.js';
15
+ export { SearchField } from './search-field.js';
15
16
  export { buildTheme, theme, hexToRgb } from './theme.js';
16
17
  export { lightPalette, darkPalette } from './palettes.js';
17
18
  export { ListItem, UnorderedListItemContainer } from './list-item.js';
package/dist/index.js.map CHANGED
@@ -1 +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"}
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,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"}
@@ -0,0 +1,32 @@
1
+ /**
2
+ * SearchField — a domain-free, animated search input. A surface "pill" that
3
+ * expands from an icon-only circle to a full-width field on mount, with a
4
+ * primary-colored magnifier, a borderless input that fades in once expanded,
5
+ * and a round clear (×) button that appears when there is text.
6
+ *
7
+ * Extracted as a shared primitive so xunzi's search banner, the Hua Wen Reader
8
+ * surface, and future apps all render the same field. Theming follows kang
9
+ * conventions: every color reads a `theme.colors.*` token with a literal
10
+ * fallback, so it adapts to a `ThemeProvider` yet still renders without one.
11
+ *
12
+ * `styled-components`, `react`, and (for the expand animation) `@react-spring/web`
13
+ * are the only things this module pulls in; react-spring is an optional peer.
14
+ */
15
+ import { type ReactElement } from 'react';
16
+ export interface SearchFieldProps {
17
+ /** Current input value (controlled). */
18
+ value: string;
19
+ /** Called with the new value on input, and with `''` when cleared. */
20
+ onChange: (value: string) => void;
21
+ /** Placeholder shown in the (expanded) field. */
22
+ placeholder?: string;
23
+ /** Accessible label for the input. */
24
+ ariaLabel?: string;
25
+ /** Play the expand-from-circle animation on mount (default: true). */
26
+ autoExpand?: boolean;
27
+ /** Class name passthrough for layout/positioning by the consumer. */
28
+ className?: string;
29
+ }
30
+ export declare function SearchField({ value, onChange, placeholder, ariaLabel, autoExpand, className, }: SearchFieldProps): ReactElement;
31
+ export default SearchField;
32
+ //# sourceMappingURL=search-field.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -0,0 +1,121 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ /**
3
+ * SearchField — a domain-free, animated search input. A surface "pill" that
4
+ * expands from an icon-only circle to a full-width field on mount, with a
5
+ * primary-colored magnifier, a borderless input that fades in once expanded,
6
+ * and a round clear (×) button that appears when there is text.
7
+ *
8
+ * Extracted as a shared primitive so xunzi's search banner, the Hua Wen Reader
9
+ * surface, and future apps all render the same field. Theming follows kang
10
+ * conventions: every color reads a `theme.colors.*` token with a literal
11
+ * fallback, so it adapts to a `ThemeProvider` yet still renders without one.
12
+ *
13
+ * `styled-components`, `react`, and (for the expand animation) `@react-spring/web`
14
+ * are the only things this module pulls in; react-spring is an optional peer.
15
+ */
16
+ import { useEffect, useRef, useState } from 'react';
17
+ import { styled } from 'styled-components';
18
+ import { animated, useSpring } from '@react-spring/web';
19
+ const c = (token, fallback) => ({ theme }) => theme?.colors?.[token] ?? fallback;
20
+ const Pill = styled(animated.div) `
21
+ display: flex;
22
+ align-items: center;
23
+ height: 2.75rem;
24
+ min-height: 2.75rem;
25
+ box-sizing: border-box;
26
+ border-radius: 999px;
27
+ background: ${c('surface', '#fdfcf8')};
28
+ box-shadow: 0 2px 8px ${c('shadowSubtle', 'rgba(0, 0, 0, 0.08)')};
29
+ overflow: hidden;
30
+ will-change: width, padding, gap;
31
+ `;
32
+ const IconWrap = styled.span `
33
+ display: flex;
34
+ align-items: center;
35
+ color: ${c('primary', '#4db6ac')};
36
+ font-size: 1.25rem;
37
+ flex-shrink: 0;
38
+ `;
39
+ const Field = styled(animated.input) `
40
+ border: none;
41
+ outline: none;
42
+ background: transparent;
43
+ font-size: 1rem;
44
+ color: ${c('onSurface', '#333')};
45
+ font-family: inherit;
46
+ min-width: 0;
47
+
48
+ &::placeholder {
49
+ color: ${c('onSurface', '#333')};
50
+ opacity: 0.4;
51
+ }
52
+ `;
53
+ const Clear = styled(animated.button) `
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: center;
57
+ width: 1.5rem;
58
+ height: 1.5rem;
59
+ border: none;
60
+ border-radius: 50%;
61
+ background: ${c('outline', '#9e9e9e')};
62
+ color: ${c('surface', '#fdfcf8')};
63
+ cursor: pointer;
64
+ padding: 0;
65
+ flex-shrink: 0;
66
+ opacity: 0.7;
67
+ transition: opacity 0.2s ease;
68
+ &:active {
69
+ opacity: 1;
70
+ }
71
+ `;
72
+ 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" })] }));
73
+ 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" })] }));
74
+ export function SearchField({ value, onChange, placeholder, ariaLabel, autoExpand = true, className, }) {
75
+ const inputRef = useRef(null);
76
+ const [expanded, setExpanded] = useState(false);
77
+ const [field, fieldApi] = useSpring(() => ({ expand: 0 }));
78
+ const [input, inputApi] = useSpring(() => ({ opacity: 0, y: 10 }));
79
+ useEffect(() => {
80
+ // Treat opt-out / reduced-motion / non-browser (test/SSR) envs as already
81
+ // expanded so the field is immediately usable.
82
+ const skip = !autoExpand ||
83
+ typeof window === 'undefined' ||
84
+ !window.matchMedia ||
85
+ window.matchMedia('(prefers-reduced-motion: reduce)').matches;
86
+ if (skip) {
87
+ fieldApi.set({ expand: 1 });
88
+ inputApi.set({ opacity: 1, y: 0 });
89
+ setExpanded(true);
90
+ return;
91
+ }
92
+ const raf = requestAnimationFrame(() => {
93
+ fieldApi.start({
94
+ expand: 1,
95
+ config: { tension: 220, friction: 24 },
96
+ onRest: () => {
97
+ setExpanded(true);
98
+ inputApi.start({ opacity: 1, y: 0, config: { tension: 260, friction: 22 } });
99
+ },
100
+ });
101
+ });
102
+ return () => cancelAnimationFrame(raf);
103
+ }, [autoExpand, fieldApi, inputApi]);
104
+ return (_jsxs(Pill, { className: className, style: {
105
+ width: field.expand.to((v) => `calc(2.75rem + (100% - 2.75rem) * ${v})`),
106
+ gap: field.expand.to((v) => `${0.5 * v}rem`),
107
+ paddingLeft: '0.75rem',
108
+ paddingRight: field.expand.to((v) => `${0.75 + 0.25 * v}rem`),
109
+ }, children: [_jsx(IconWrap, { children: _jsx(SearchGlyph, {}) }), _jsx(Field, { ref: inputRef, style: {
110
+ opacity: input.opacity,
111
+ transform: input.y.to((y) => `translateY(${y}px)`),
112
+ flex: expanded ? '1 1 auto' : '0 0 0',
113
+ width: expanded ? 'auto' : 0,
114
+ pointerEvents: expanded ? 'auto' : 'none',
115
+ }, 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: () => {
116
+ onChange('');
117
+ inputRef.current?.focus();
118
+ }, "aria-label": "Clear search", children: _jsx(CloseGlyph, {}) }))] }));
119
+ }
120
+ export default SearchField;
121
+ //# sourceMappingURL=search-field.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search-field.js","sourceRoot":"","sources":["../src/search-field.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kang-components",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -25,6 +25,7 @@
25
25
  "build": "tsc -p tsconfig.build.json",
26
26
  "test": "vitest run",
27
27
  "test:watch": "vitest",
28
+ "test:coverage": "vitest run --coverage",
28
29
  "prepublishOnly": "npm run build"
29
30
  },
30
31
  "peerDependencies": {
@@ -55,6 +56,7 @@
55
56
  "@types/react-dom": "^18.3.5",
56
57
  "@use-gesture/react": "^10.3.1",
57
58
  "@vitejs/plugin-react": "^4.3.4",
59
+ "@vitest/coverage-v8": "^2.1.9",
58
60
  "jsdom": "^25.0.1",
59
61
  "react": "^18.3.1",
60
62
  "react-dom": "^18.3.1",