@seed-design/lynx-react 0.3.1 → 0.4.0

package/lib/components/TextField/useTextFieldWithGraphemes.js

@@ -0,0 +1,47 @@
+import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED } from "./context.js";
+import { splitGraphemes } from "../../node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/grapheme.js";
+import * as React from "@lynx-js/react";
+//#region src/components/TextField/useTextFieldWithGraphemes.ts
+var cachedValue = "";
+var cachedGraphemes = [];
+function getGraphemes(value) {
+	if (value === cachedValue) return cachedGraphemes;
+	cachedValue = value;
+	cachedGraphemes = Array.from(splitGraphemes(value));
+	return cachedGraphemes;
+}
+function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue = "", onValueChange }) {
+	const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const graphemes = React.useMemo(() => getGraphemes(value), [value]);
+	return {
+		textFieldRootProps: {
+			value,
+			onValueChange: React.useCallback((nextValue) => {
+				"background only";
+				const nextGraphemes = getGraphemes(nextValue);
+				const slicedGraphemes = maxGraphemeCount === void 0 ? nextGraphemes : nextGraphemes.slice(0, maxGraphemeCount);
+				if (!isControlled) setUncontrolledValue(nextValue);
+				onValueChange?.({
+					value: nextValue,
+					graphemes: nextGraphemes,
+					slicedValue: slicedGraphemes.join(""),
+					slicedGraphemes
+				});
+			}, [
+				isControlled,
+				maxGraphemeCount,
+				onValueChange
+			]),
+			nativeInsertionMaxLength: maxGraphemeCount === void 0 ? void 0 : graphemes.length >= maxGraphemeCount ? value.length : NATIVE_TEXT_MAX_LENGTH_UNLIMITED
+		},
+		counterProps: {
+			current: graphemes.length,
+			max: maxGraphemeCount ?? 0
+		},
+		graphemes
+	};
+}
+//#endregion
+export { useTextFieldWithGraphemes };

package/lib/components/index.d.ts

@@ -4,11 +4,14 @@ export * from './Badge';
 export * from './Box';
 export * from './BottomSheet';
 export * from './Checkbox';
+export * from './Field';
 export * from './Icon';
+export * from './KeyboardAvoidingScrollView';
 export * from './ProgressCircle';
 export * from './RadioGroup';
 export * from './Stack';
 export * from './Switch';
 export * from './TagGroup';
 export * from './Text';
+export * from './TextField';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/lib/index.js

@@ -17,6 +17,9 @@ import { useControllableState } from "./hooks/useControllableState.js";
 import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
 import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
 import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
+import { FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot } from "./components/Field/Field.jsx";
+import { Field_namespace_exports } from "./components/Field/Field.namespace.js";
+import { KeyboardAvoidingScrollView } from "./components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.jsx";
 import { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from "./components/RadioGroup/RadioGroup.jsx";
 import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup.namespace.js";
 import { HStack, VStack } from "./components/Stack/Stack.jsx";
@@ -25,6 +28,9 @@ import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.j
 import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
 import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
 import { Text } from "./components/Text/Text.jsx";
+import { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from "./components/TextField/TextField.jsx";
+import { useTextFieldWithGraphemes } from "./components/TextField/useTextFieldWithGraphemes.js";
+import { TextField_namespace_exports } from "./components/TextField/TextField.namespace.js";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
 import { useSeedClassName } from "./hooks/useSeedClassName.js";
-export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, HStack, Icon, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName };
+export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };

package/lib/node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/_grapheme_data.js

@@ -0,0 +1,8 @@
+import { decodeUnicodeData } from "./core.js";
+//#region ../../node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/_grapheme_data.js
+/**
+* @type {GraphemeCategoryRange[]}
+*/
+var grapheme_ranges = decodeUnicodeData(",9,a,,b,1,d,,e,h,3j,w,4p,,4t,,4u,,lc,33,w3,6,13l,18,14v,,14x,1,150,1,153,,16o,5,174,a,17g,,18r,k,19s,,1cm,6,1ct,,1cv,5,1d3,1,1d6,3,1e7,,1e9,,1f4,q,1ie,a,1kb,8,1kt,,1li,3,1ln,8,1lx,2,1m1,4,1nd,2,1ow,1,1p3,8,1qi,n,1r6,,1r7,v,1s3,,1tm,,1tn,,1to,,1tq,2,1tt,7,1u1,3,1u5,,1u6,1,1u9,6,1uq,1,1vl,,1vm,1,1x8,,1xa,,1xb,1,1xd,3,1xj,1,1xn,1,1xp,,1xz,,1ya,1,1z2,,1z5,1,1z7,,20s,,20u,2,20x,1,213,1,217,2,21d,,228,1,22d,,22p,1,22r,,24c,,24e,2,24h,4,24n,1,24p,,24r,1,24t,,25e,1,262,5,269,,26a,1,27w,,27y,1,280,,281,3,287,1,28b,1,28d,,28l,2,28y,1,29u,,2bi,,2bj,,2bk,,2bl,1,2bq,2,2bu,2,2bx,,2c7,,2dc,,2dd,2,2dg,,2f0,,2f2,2,2f5,3,2fa,2,2fe,3,2fp,1,2g2,1,2gx,,2gy,1,2ik,,2im,,2in,1,2ip,,2iq,,2ir,1,2iu,2,2iy,3,2j9,1,2jm,1,2k3,,2kg,1,2ki,1,2m3,1,2m6,,2m7,1,2m9,3,2me,2,2mi,2,2ml,,2mm,,2mv,,2n6,1,2o1,,2o2,1,2q2,,2q7,,2q8,1,2qa,2,2qe,,2qg,6,2qn,,2r6,1,2sx,,2sz,,2t0,6,2tj,7,2wh,,2wj,,2wk,8,2x4,6,2zc,1,305,,307,,309,,30e,1,31t,d,327,,328,4,32e,1,32l,a,32x,z,346,,371,3,375,,376,5,37d,1,37f,1,37h,1,386,1,388,1,38e,2,38x,3,39e,,39g,,39h,1,39p,,3a5,,3cw,2n,3fk,1z,3hk,2f,3tp,2,4k2,3,4ky,2,4lu,1,4mq,1,4ok,1,4om,,4on,6,4ou,7,4p2,,4p3,1,4p5,a,4pp,,4qz,2,4r2,,4r3,,4ud,1,4vd,,4yo,2,4yr,3,4yv,1,4yx,2,4z4,1,4z6,,4z7,5,4zd,2,55j,1,55l,1,55n,,579,,57a,,57b,,57c,6,57k,,57m,,57p,7,57x,5,583,9,58f,,59s,u,5c0,3,5c4,,5dg,9,5dq,3,5du,2,5ez,8,5fk,1,5fm,,5gh,,5gi,3,5gm,1,5go,5,5ie,,5if,,5ig,1,5ii,2,5il,,5im,,5in,4,5k4,7,5kc,7,5kk,1,5km,1,5ow,2,5p0,c,5pd,,5pe,6,5pp,,5pw,,5pz,,5q0,1,5vk,1r,6bv,,6bw,,6bx,,6by,1,6co,6,6d8,,6dl,,6e8,f,6hc,w,6jm,,6k9,,6ms,5,6nd,1,6xm,1,6y0,,70o,,72n,,73d,a,73s,2,79e,,7fu,1,7g6,,7gg,,7i3,3,7i8,5,7if,b,7is,35,7m8,39,7pk,a,7pw,,7py,,7q5,,7q9,,7qg,,7qr,1,7r8,,7rb,,7rg,,7ri,,7rn,2,7rr,,7s3,4,7th,2,7tt,,7u8,,7un,,850,1,8hx,2,8ij,1,8k0,,8k5,,8vj,2,8zj,,928,v,wvj,3,wvo,9,wwu,1,wz4,1,x6q,,x6u,,x6z,,x7n,1,x7p,1,x7r,,x7w,,xa8,1,xbo,f,xc4,1,xcw,h,xdr,,xeu,7,xfr,a,xg2,,xg3,,xgg,s,xhc,2,xhf,,xir,,xis,1,xiu,3,xiy,1,xj0,1,xj2,1,xj4,,xk5,,xm1,5,xm7,1,xm9,1,xmb,1,xmd,1,xmr,,xn0,,xn1,,xoc,,xps,,xpu,2,xpz,1,xq6,1,xq9,,xrf,,xrg,1,xri,1,xrp,,xrq,,xyb,1,xyd,,xye,1,xyg,,xyh,1,xyk,,xyl,,1e68,f,1e74,f,1edb,,1ehq,1,1ek0,b,1eyl,,1f4w,,1f92,4,1gjl,2,1gjp,1,1gjw,3,1gl4,2,1glb,,1gpx,1,1h5w,3,1h7t,4,1hgr,1,1hj0,3,1hl2,a,1hmq,3,1hq8,,1hq9,,1hqa,,1hrs,e,1htc,,1htf,1,1htr,2,1htu,,1hv4,2,1hv7,3,1hvb,1,1hvd,1,1hvh,,1hvm,,1hvx,,1hxc,2,1hyf,4,1hyk,,1hyl,7,1hz9,1,1i0j,,1i0w,1,1i0y,,1i2b,2,1i2e,8,1i2n,,1i2o,,1i2q,1,1i2x,3,1i32,,1i33,,1i5o,2,1i5r,2,1i5u,1,1i5w,3,1i66,,1i69,,1ian,,1iao,2,1iar,7,1ibk,1,1ibm,1,1id7,1,1ida,,1idb,,1idc,,1idd,3,1idj,1,1idn,1,1idp,,1idz,,1iea,1,1iee,6,1ieo,4,1igo,,1igp,1,1igr,5,1igy,,1ih1,,1ih3,2,1ih6,,1ih8,1,1iha,2,1ihd,,1ihe,,1iht,1,1ik5,2,1ik8,7,1ikg,1,1iki,2,1ikl,,1ikm,,1ila,,1ink,,1inl,1,1inn,5,1int,,1inu,,1inv,1,1inx,,1iny,,1inz,1,1io1,,1io2,1,1iun,,1iuo,1,1iuq,3,1iuw,3,1iv0,1,1iv2,,1iv3,1,1ivw,1,1iy8,2,1iyb,7,1iyj,1,1iyl,,1iym,,1iyn,1,1j1n,,1j1o,,1j1p,,1j1q,1,1j1s,7,1j4t,,1j4u,,1j4v,,1j4y,3,1j52,,1j53,4,1jcc,2,1jcf,8,1jco,,1jcp,1,1jjk,,1jjl,4,1jjr,1,1jjv,3,1jjz,,1jk0,,1jk1,,1jk2,,1jk3,,1jo1,2,1jo4,3,1joa,1,1joc,3,1jog,,1jok,,1jpd,9,1jqr,5,1jqx,,1jqy,,1jqz,3,1jrb,,1jrl,5,1jrr,1,1jrt,2,1jt0,5,1jt6,c,1jtj,,1jtk,1,1k4v,,1k4w,6,1k54,5,1k5a,,1k5b,,1k7m,l,1k89,,1k8a,6,1k8h,,1k8i,1,1k8k,,1k8l,1,1kc1,5,1kca,,1kcc,1,1kcf,6,1kcm,,1kcn,,1kei,4,1keo,1,1ker,1,1ket,,1keu,,1kev,,1koj,1,1kol,1,1kow,1,1koy,,1koz,,1kqc,1,1kqe,4,1kqm,1,1kqo,2,1kre,,1ovk,f,1ow0,,1ow7,e,1xr2,b,1xre,2,1xrh,2,1zow,4,1zqo,6,206b,,206f,3,20jz,,20k1,1i,20lr,3,20o4,,20og,1,2ftp,1,2fts,3,2jgg,19,2jhs,m,2jxh,4,2jxp,5,2jxv,7,2jy3,7,2jyd,6,2jze,3,2k3m,2,2lmo,1i,2lob,1d,2lpx,,2lqc,,2lqz,4,2lr5,e,2mtc,6,2mtk,g,2mu3,6,2mub,1,2mue,4,2mxb,,2n1s,6,2nce,,2ne4,3,2nsc,3,2nzi,1,2ok0,6,2on8,6,2pz4,73,2q6l,2,2q7j,,2q98,5,2q9q,1,2qa6,,2qa9,9,2qb1,1k,2qcm,p,2qdd,e,2qe2,,2qen,,2qeq,8,2qf0,3,2qfd,c1,2qrf,4,2qrk,8t,2r0m,7d,2r9c,3j,2rg4,b,2rit,16,2rkc,3,2rm0,7,2rmi,5,2rns,7,2rou,29,2rrg,1a,2rss,9,2rt3,c8,2scg,sd,jny8,v,jnz4,2n,jo1s,3j,jo5c,6n,joc0,2rz", "262122424333333393233393339333333333393393b3b3b3b3b333b33b3bb33333b3b3333333b3b33bb3333b33b3bb33333b3bbb333b333b33333b3b3b3b3333b3b33b3bb39333b33b33b3b3b333b333333b3b333333b33b3b3333b3335dc333333b3b3b33323333b3bb3b33b3b3b3333b3333b3b333bb3b33b3b3b3b3b333b333b3323e2244234444444444444444444444444444444444444444443333333333b3b3bb33333b353b3b3b3b333b3b333b333333b3bb3b3b3bb333232333333333333333b3b3333bb3b393933b3b33bb3b393b3b3b3333b33b33b3bbb33b333b3333bb3933b3b3b333b3b3b3b3b33b3b3b33b3b3b33b3b33b33b3b3b33bb39b9b3b33b3b33b9333b393b3b33b33b3b3b3333393b3b3b33b39bb3b332333b333dd3b33332333323333333333333333333333344444444a44444434444444444444423232");
+//#endregion
+export { grapheme_ranges };

package/lib/node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/_incb_data.js

@@ -0,0 +1,14 @@
+import { decodeUnicodeData } from "./core.js";
+//#region ../../node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/_incb_data.js
+/**
+* @typedef {import('./core.js').UnicodeRange} UnicodeRange
+* @typedef {import('./core.js').UnicodeDataEncoding} UnicodeDataEncoding
+*/
+/**
+* The Unicode `Indic_Conjunct_Break=Consonant` derived property table
+*
+* @type {UnicodeRange[]}
+*/
+var consonant_ranges = decodeUnicodeData("1sl,10,1ug,7,1vc,7,1w5,j,1wq,6,1wy,,1x2,3,1y4,1,1y7,,1yo,1,239,j,23u,6,242,1,245,4,261,,26t,j,27e,6,27m,1,27p,4,28s,1,28v,,29d,,2dx,j,2ei,f,2fs,2,2l1,11");
+//#endregion
+export { consonant_ranges };

package/lib/node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/core.js

@@ -0,0 +1,68 @@
+//#region ../../node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/core.js
+/**
+* @template {number} [T=number]
+* @typedef {[from: number, to: number, category: T]} CategorizedUnicodeRange
+*/
+/**
+* @typedef {CategorizedUnicodeRange<0>} UnicodeRange
+*/
+/**
+* @typedef {string & { __tag: 'UnicodeDataEncoding' }} UnicodeDataEncoding
+*
+* Encoding for array of {@link UnicodeRange}, items separated by comma.
+*
+* Each {@link UnicodeDataRow} packed as a base36 integer:
+*
+* padding  = to - from
+* encoding = base36(from) + ',' + base36(padding)
+*
+* Notes:
+* - base36 can hold surprisingly large numbers in a few characters.
+* - The biggest codepoint is 0xE01F0 (918,000) at this point
+* - The max value of a category is 23; https://www.unicode.org/reports/tr29/tr29-45.html#Table_Word_Break_Property_Values
+* - The longest range is 42,720; CJK UNIFIED IDEOGRAPH-20000..CJK UNIFIED IDEOGRAPH-2A6DF
+*/
+/**
+* @template {number} [T=number]
+* @param {UnicodeDataEncoding} data
+* @param {string} [cats='']
+* @returns {Array<CategorizedUnicodeRange<T>>}
+*/
+function decodeUnicodeData(data, cats = "") {
+	let buf = [], nums = data.split(",").map((s) => s ? parseInt(s, 36) : 0), n = 0;
+	for (let i = 0; i < nums.length; i++) i % 2 ? buf.push([
+		n,
+		n + nums[i],
+		cats ? parseInt(cats[i >> 1], 36) : 0
+	]) : n = nums[i];
+	return buf;
+}
+/**
+* @template {object} Ext
+* @typedef {{
+*   segment: string,
+*   index: number,
+*   input: string,
+* } & Ext} SegmentOutput
+*/
+/**
+* @template {object} T
+* @typedef {IterableIterator<SegmentOutput<T>>} Segmenter
+*/
+/**
+* @template {number} [T=number]
+* @param {number} cp
+* @param {CategorizedUnicodeRange<T>[]} ranges
+* @return {number} index of matched unicode range, or -1 if no match
+*/
+function findUnicodeRangeIndex(cp, ranges, lo = 0, hi = ranges.length - 1) {
+	while (lo <= hi) {
+		let mid = lo + hi >>> 1, range = ranges[mid];
+		if (cp < range[0]) hi = mid - 1;
+		else if (cp > range[1]) lo = mid + 1;
+		else return mid;
+	}
+	return -1;
+}
+//#endregion
+export { decodeUnicodeData, findUnicodeRangeIndex };

package/lib/node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/grapheme.js

@@ -0,0 +1,175 @@
+import { findUnicodeRangeIndex } from "./core.js";
+import { grapheme_ranges } from "./_grapheme_data.js";
+import { consonant_ranges } from "./_incb_data.js";
+//#region ../../node_modules/.bun/unicode-segmenter@0.14.5/node_modules/unicode-segmenter/grapheme.js
+var BMP_MAX = 65535;
+/**
+* Unicode segmentation by extended grapheme rules.
+*
+* This is fully compatible with the {@link Intl.Segmenter.segment} API
+* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment
+*
+* @param {string} input
+* @return {GraphemeSegmenter} iterator for grapheme cluster segments
+*/
+function* graphemeSegments(input) {
+	let cp = input.codePointAt(0);
+	if (cp == null) return;
+	/** Current cursor position. */
+	let cursor = cp <= BMP_MAX ? 1 : 2;
+	/** Total length of the input string. */
+	let len = input.length;
+	/** Category of codepoint immediately preceding cursor */
+	let catBefore = cat(cp);
+	/** @type {GraphemeCategoryNum} Category of codepoint immediately preceding cursor. */
+	let catAfter = 0;
+	/** The number of RIS codepoints preceding `cursor`. */
+	let risCount = 0;
+	/**
+	* Emoji state for GB11: tracks if we've seen Extended_Pictographic followed by Extend* ZWJ
+	* Only relevant when catBefore === ZWJ && catAfter === Extended_Pictographic
+	*/
+	let emoji = false;
+	/** InCB=Consonant - segment started with Indic consonant */
+	let consonant = false;
+	/** InCB=Linker - seen a linker after consonant */
+	let linker = false;
+	let index = 0;
+	/** Beginning category of a segment */
+	let _catBegin = catBefore;
+	/** Memoize the beginning code point of the segment. */
+	let _hd = cp;
+	while (cursor < len) {
+		cp = input.codePointAt(cursor);
+		catAfter = cat(cp);
+		let boundary = true;
+		if (catBefore === 1) boundary = catAfter !== 6;
+		else if (catBefore === 2 || catBefore === 6) boundary = true;
+		else if (catAfter === 1 || catAfter === 2 || catAfter === 6) boundary = true;
+		else if (catAfter === 3 || catAfter === 14 || catAfter === 11) boundary = false;
+		else if (catBefore === 9) boundary = false;
+		else if (catBefore === 14 && catAfter === 4) boundary = !emoji;
+		else if (catBefore === 10 && catAfter === 10) boundary = risCount++ % 2 === 1;
+		else if (catBefore === 5) boundary = !(catAfter === 5 || catAfter === 13 || catAfter === 7 || catAfter === 8);
+		else if ((catBefore === 7 || catBefore === 13) && (catAfter === 13 || catAfter === 12)) boundary = false;
+		else if ((catBefore === 8 || catBefore === 12) && catAfter === 12) boundary = false;
+		else if (catAfter === 0 && consonant && linker && isIndicConjunctConsonant(cp)) boundary = false;
+		if (boundary) {
+			yield {
+				segment: input.slice(index, cursor),
+				index,
+				input,
+				_hd,
+				_catBegin,
+				_catEnd: catBefore
+			};
+			emoji = false;
+			risCount = 0;
+			index = cursor;
+			_catBegin = catAfter;
+			_hd = cp;
+		} else if (catAfter === 14 && (catBefore === 3 || catBefore === 4)) emoji = true;
+		else if (cp >= 2325) {
+			if (!consonant && catBefore === 0) consonant = isIndicConjunctConsonant(_hd);
+			if (consonant && catAfter === 3) linker = linker || cp === 2381 || cp === 2509 || cp === 2637 || cp === 2765 || cp === 2893 || cp === 3149 || cp === 3405;
+			else linker = false;
+		}
+		cursor += cp <= BMP_MAX ? 1 : 2;
+		catBefore = catAfter;
+	}
+	if (index < len) yield {
+		segment: input.slice(index),
+		index,
+		input,
+		_hd,
+		_catBegin,
+		_catEnd: catBefore
+	};
+}
+/**
+* Split given text into extended grapheme clusters.
+*
+* @param {string} text
+* @return {IterableIterator<string>} iterator for grapheme clusters
+*
+* @see {@link graphemeSegments} if you need extra information.
+*
+* @example
+* [...splitGraphemes('abc')] // => ['a', 'b', 'c']
+*/
+function* splitGraphemes(text) {
+	for (let s of graphemeSegments(text)) yield s.segment;
+}
+var SEG0 = new Uint8Array(6080), SEG0_MIN = 128, SEG0_MAX = 12287;
+var SEG1 = new Uint8Array(1536), SEG1_MIN = 40960, SEG1_MAX = 44031;
+var SEG_CURSOR = (() => {
+	let cursor = 0;
+	while (true) {
+		let [start, end, cat] = grapheme_ranges[cursor];
+		if (start > SEG1_MAX) break;
+		cursor++;
+		if (end < SEG0_MIN || start > SEG0_MAX && end < SEG1_MIN) continue;
+		for (let cp = start; cp <= end; cp++) {
+			let seg, idx = 0;
+			if (cp <= SEG0_MAX) {
+				seg = SEG0;
+				idx = cp - SEG0_MIN >> 1;
+			} else {
+				seg = SEG1;
+				idx = cp - SEG1_MIN >> 1;
+			}
+			seg[idx] = cp & 1 ? seg[idx] & 15 | cat << 4 : seg[idx] & 240 | cat;
+		}
+	}
+	return cursor;
+})();
+/**
+* `Grapheme_Cluster_Break` property value of a given codepoint
+*
+* @see https://www.unicode.org/reports/tr29/tr29-43.html#Default_Grapheme_Cluster_Table
+*
+* @param {number} cp
+* @return {GraphemeCategoryNum}
+*/
+function cat(cp) {
+	if (cp < SEG0_MIN) {
+		if (cp >= 32) return 0;
+		if (cp === 10) return 6;
+		if (cp === 13) return 1;
+		return 2;
+	}
+	if (cp <= SEG0_MAX) {
+		let byte = SEG0[cp - SEG0_MIN >> 1];
+		return cp & 1 ? byte >> 4 : byte & 15;
+	}
+	if (cp < SEG1_MIN) {
+		if (cp < 12336) return cp >= 12330 ? 3 : 0;
+		if (cp < 12443) {
+			if (cp === 12336 || cp === 12349) return 4;
+			return cp >= 12441 ? 3 : 0;
+		}
+		if (cp === 12951 || cp === 12953) return 4;
+		return 0;
+	}
+	if (cp <= SEG1_MAX) {
+		let byte = SEG1[cp - SEG1_MIN >> 1];
+		return cp & 1 ? byte >> 4 : byte & 15;
+	}
+	if (cp <= 55203) return (cp - 44032) % 28 === 0 ? 7 : 8;
+	if (cp <= 55295) {
+		if (cp <= 55238) return cp >= 55216 ? 13 : 0;
+		return cp >= 55243 ? 12 : 0;
+	}
+	if (cp < 65024) return cp === 64286 ? 3 : 0;
+	let idx = findUnicodeRangeIndex(cp, grapheme_ranges, SEG_CURSOR);
+	return idx < 0 ? 0 : grapheme_ranges[idx][2];
+}
+/**
+* @param {number} cp
+* @return {boolean}
+*/
+function isIndicConjunctConsonant(cp) {
+	return findUnicodeRangeIndex(cp, consonant_ranges) >= 0;
+}
+//#endregion
+export { splitGraphemes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,9 +39,10 @@
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.5.1",
+    "@seed-design/lynx-css": "0.8.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
+    "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
@@ -50,8 +51,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@lynx-js/lynx-ui-sheet": "^3.130.1",
     "@lynx-js/lynx-ui-common": "^3.130.0",
-    "clsx": "^2.1.1"
+    "@lynx-js/lynx-ui-sheet": "^3.130.1",
+    "clsx": "^2.1.1",
+    "unicode-segmenter": "^0.14.4"
   }
 }

package/src/components/Field/Field.namespace.ts

@@ -0,0 +1,19 @@
+export {
+  FieldCharacterCount as CharacterCount,
+  FieldDescription as Description,
+  FieldErrorMessage as ErrorMessage,
+  FieldFooter as Footer,
+  FieldHeader as Header,
+  FieldIndicatorText as IndicatorText,
+  FieldLabel as Label,
+  FieldRequiredIndicator as RequiredIndicator,
+  FieldRoot as Root,
+  type FieldCharacterCountProps as CharacterCountProps,
+  type FieldDescriptionProps as DescriptionProps,
+  type FieldErrorMessageProps as ErrorMessageProps,
+  type FieldFooterProps as FooterProps,
+  type FieldHeaderProps as HeaderProps,
+  type FieldIndicatorTextProps as IndicatorTextProps,
+  type FieldLabelProps as LabelProps,
+  type FieldRootProps as RootProps,
+} from "./Field";

package/src/components/Field/Field.test.tsx

@@ -0,0 +1,81 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { Field } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function getRenderedQueries() {
+  return getQueriesForElement(getRenderedRoot());
+}
+
+describe("Field", () => {
+  it("renders the complete field composition with recipe slot classes", () => {
+    render(
+      <Field.Root className="custom-field" required>
+        <Field.Header>
+          <Field.Label weight="bold">
+            제목
+            <Field.RequiredIndicator />
+            <Field.IndicatorText>필수</Field.IndicatorText>
+          </Field.Label>
+        </Field.Header>
+        <Field.Footer>
+          <Field.Description>설명</Field.Description>
+          <Field.CharacterCount current={3} max={10} />
+        </Field.Footer>
+      </Field.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const { getByText } = getRenderedQueries();
+    const fieldRoot = root.querySelector(".seed-field__root");
+
+    expect(fieldRoot).toHaveClass("custom-field");
+    expect(root.querySelector(".seed-field__header")).toBeInTheDocument();
+    expect(root.querySelector(".seed-field__footer")).toBeInTheDocument();
+    expect(getByText("제목")).toHaveClass("seed-field-label__root--weight_bold");
+    expect(getByText("필수")).toHaveClass("seed-field-label__indicatorText");
+    expect(getByText("필수").textContent).toBe("\u00a0필수");
+    expect(getByText("*")).toHaveAttribute("accessibility-elements-hidden", "true");
+    expect(getByText("*").textContent).toBe("\u200a*");
+    expect(getByText("설명")).toHaveClass("seed-field__description");
+    expect(root.querySelector(".seed-field__characterCount")).toHaveTextContent("3");
+    expect(root.querySelector(".seed-field__maxCharacterCount")).toHaveTextContent("/10");
+  });
+
+  it("applies invalid and empty character count variants", () => {
+    render(
+      <Field.Root invalid>
+        <Field.Footer>
+          <Field.ErrorMessage>오류</Field.ErrorMessage>
+          <Field.CharacterCount current={0} max={10} />
+        </Field.Footer>
+      </Field.Root>,
+    );
+
+    const { getByText } = getRenderedQueries();
+
+    expect(getByText("오류")).toHaveClass("seed-field__errorMessage");
+    const root = getRenderedRoot();
+    const current = root.querySelector(".seed-field__characterCount");
+    const max = root.querySelector(".seed-field__maxCharacterCount");
+
+    expect(current).toHaveClass("seed-field__characterCount--invalid_true");
+    expect(current).toHaveClass("seed-field__characterCount--empty_true");
+    expect(max).toHaveClass("seed-field__maxCharacterCount--invalid_true");
+  });
+
+  it("throws when a compound slot is rendered outside Field.Root", () => {
+    expect(() => render(<Field.Footer />)).toThrow(/ClassNamesProvider/);
+  });
+});