@seed-design/lynx-react 0.3.1 → 0.4.1

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.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,14 +34,15 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.7.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.1.0 <1.0.0"
+    "@seed-design/lynx-css": "0.0.0 || >=0.8.0 <1.0.0"
   },
   "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.1",
     "@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/);
+  });
+});

package/src/components/Field/Field.tsx

@@ -0,0 +1,252 @@
+import * as React from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+import { field, type FieldVariantProps } from "@seed-design/lynx-css/recipes/field";
+import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/lynx-css/recipes/field-label";
+import clsx from "clsx";
+
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { FieldContext, useFieldContext } from "./context";
+
+const { ClassNamesProvider: FieldClassNamesProvider, useClassNames: useFieldClassNames } =
+  createSlotRecipeContext(field);
+const { ClassNamesProvider: FieldLabelClassNamesProvider, useClassNames: useFieldLabelClassNames } =
+  createSlotRecipeContext(fieldLabel);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HTML label의 `for` 연결과 native form의 `name` 제출 모델
+ * - DOM ARIA id 연결. 입력 컴포넌트에서 `accessibility-label`을 사용해야 함
+ */
+export interface FieldRootProps extends Omit<FieldVariantProps, "empty">, LynxStyledElementProps {
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+export const FieldRoot = React.forwardRef<NodesRef, FieldRootProps>((props, forwardedRef) => {
+  const [variantProps, otherProps] = field.splitVariantProps(props);
+  const {
+    children,
+    className,
+    required = false,
+    disabled = false,
+    readOnly = false,
+    ...nativeProps
+  } = otherProps;
+  const invalid = variantProps.invalid ?? false;
+  const [focused, setFocused] = React.useState(false);
+  const rootRef = React.useRef<NodesRef | null>(null);
+  const classes = field({ invalid });
+
+  const mergedRef = React.useCallback(
+    (node: NodesRef | null) => {
+      "background only";
+
+      rootRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      rootRef,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      focused,
+      setFocused,
+    }),
+    [disabled, focused, invalid, readOnly, required],
+  );
+
+  return (
+    <FieldContext.Provider value={contextValue}>
+      <FieldClassNamesProvider value={classes}>
+        <view ref={mergedRef} className={clsx(classes.root, className)} {...nativeProps}>
+          {children}
+        </view>
+      </FieldClassNamesProvider>
+    </FieldContext.Provider>
+  );
+});
+FieldRoot.displayName = "FieldRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldHeaderProps extends LynxStyledElementProps {}
+
+export const FieldHeader = React.forwardRef<unknown, FieldHeaderProps>((props, ref) => {
+  const classes = useFieldClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.header, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+FieldHeader.displayName = "FieldHeader";
+
+export interface FieldLabelProps extends FieldLabelVariantProps, LynxStyledElementProps {}
+
+export const FieldLabel = React.forwardRef<unknown, FieldLabelProps>((props, ref) => {
+  const [variantProps, otherProps] = fieldLabel.splitVariantProps(props);
+  const { children, className, ...nativeProps } = otherProps;
+  const classes = fieldLabel(variantProps);
+
+  return (
+    <FieldLabelClassNamesProvider value={classes}>
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.root, className)}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    </FieldLabelClassNamesProvider>
+  );
+});
+FieldLabel.displayName = "FieldLabel";
+
+export interface FieldIndicatorTextProps extends LynxStyledElementProps {}
+
+export const FieldIndicatorText = React.forwardRef<unknown, FieldIndicatorTextProps>(
+  (props, ref) => {
+    const classes = useFieldLabelClassNames();
+    const { children, className, ...nativeProps } = props;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(classes.indicatorText, className)}
+        {...nativeProps}
+      >
+        {"\u00a0"}
+        {children}
+      </text>
+    );
+  },
+);
+FieldIndicatorText.displayName = "FieldIndicatorText";
+
+export interface FieldRequiredIndicatorProps extends LynxStyledElementProps {}
+
+export const FieldRequiredIndicator = React.forwardRef<unknown, FieldRequiredIndicatorProps>(
+  (props, ref) => {
+    const classes = useFieldLabelClassNames();
+    const { children = "*", className, ...nativeProps } = props;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        accessibility-elements-hidden={true}
+        className={clsx(classes.indicatorIcon, className)}
+        {...nativeProps}
+      >
+        {"\u200a"}
+        {children}
+      </text>
+    );
+  },
+);
+FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldFooterProps extends LynxStyledElementProps {}
+
+export const FieldFooter = React.forwardRef<unknown, FieldFooterProps>((props, ref) => {
+  const classes = useFieldClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.footer, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+FieldFooter.displayName = "FieldFooter";
+
+export interface FieldDescriptionProps extends LynxStyledElementProps {}
+
+export const FieldDescription = React.forwardRef<unknown, FieldDescriptionProps>((props, ref) => {
+  const classes = useFieldClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(classes.description, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+FieldDescription.displayName = "FieldDescription";
+
+export interface FieldErrorMessageProps extends LynxStyledElementProps {}
+
+export const FieldErrorMessage = React.forwardRef<unknown, FieldErrorMessageProps>((props, ref) => {
+  const classes = useFieldClassNames();
+  const { children, className, ...nativeProps } = props;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(classes.errorMessage, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+FieldErrorMessage.displayName = "FieldErrorMessage";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface FieldCharacterCountProps extends LynxStyledElementProps {
+  /** 현재 문자 또는 grapheme 수 */
+  current: number;
+  /** 허용하는 최대 문자 또는 grapheme 수 */
+  max: number;
+}
+
+export const FieldCharacterCount = React.forwardRef<unknown, FieldCharacterCountProps>(
+  (props, ref) => {
+    const { current, max, children: _children, className, ...nativeProps } = props;
+    const context = useFieldContext({ strict: true });
+    const classes = field({ invalid: context.invalid, empty: current === 0 });
+
+    return (
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.characterCountArea, className)}
+        {...nativeProps}
+      >
+        <text className={classes.characterCount}>{current}</text>
+        <text className={classes.maxCharacterCount}>/{max}</text>
+      </view>
+    );
+  },
+);
+FieldCharacterCount.displayName = "FieldCharacterCount";

package/src/components/Field/context.ts

@@ -0,0 +1,26 @@
+import * as React from "@lynx-js/react";
+import type { NodesRef } from "@lynx-js/types";
+
+export interface FieldContextValue {
+  rootRef: React.RefObject<NodesRef | null>;
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  required: boolean;
+  focused: boolean;
+  setFocused: (focused: boolean) => void;
+}
+
+export const FieldContext = React.createContext<FieldContextValue | null>(null);
+
+export function useFieldContext(options: { strict: true }): FieldContextValue;
+export function useFieldContext(options?: { strict?: false }): FieldContextValue | null;
+export function useFieldContext(options: { strict?: boolean } = {}): FieldContextValue | null {
+  const context = React.useContext(FieldContext);
+
+  if (options.strict && !context) {
+    throw new Error("Field compound components must be rendered inside <Field.Root>.");
+  }
+
+  return context;
+}