@seed-design/react 2.2.1 → 2.3.0

package/lib/components/DatePicker/DatePicker.cjs

@@ -229,7 +229,7 @@ var DatePickerImplementation = react.forwardRef((props, forwardedRef) => {
 		...variantProps,
 		visibleRange: api.visibleRange
 	});
-	const { renderDateCellContent, renderDateCellSupplement, actionsRef, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
+	const { renderDateCellContent, renderDateCellSupplement, actionsRef, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
 	const { style: styleProps, restProps: rootProps } = require_styled.useStyleProps(styleAndRootProps);
 	const rootRef = react.useRef(null);
 	const hasContinuousSizeConstraint = props.height !== void 0 || props.minHeight !== void 0 || props.maxHeight !== void 0;

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,mBAAmB,EAGxB,KAAK,kBAAkB,EACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgBpE,KAAK,mBAAmB,GAAG,cAAc,GACvC,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,GACtD,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,eAAe,CAC3D,CAAC;AAEJ,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB;CAAG;AAEhF,KAAK,uBAAuB,GAAG,kBAAkB,SAAS,MAAM,KAAK,GACjE,KAAK,SAAS,kBAAkB,GAC9B,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,GAC3B,KAAK,GACP,KAAK,CAAC;AAEV,KAAK,2BAA2B,GAC5B;IACE;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxF,qBAAqB,CAAC,EAAE,KAAK,CAAC;CAC/B,GACD;IACE;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,wBAAwB,CAAC,EAAE,KAAK,CAAC;CAClC,CAAC;AAEN,KAAK,qBAAqB,GAAG,uBAAuB,GAClD,mBAAmB,GAAG;IACpB,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC3C,GAAG,2BAA2B,CAAC;AAElC,KAAK,wBAAwB,GACzB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC,GACpF,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC,GACpF,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC;AAEzF,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC;AACpD,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC;AACxD,KAAK,0BAA0B,CAAC,KAAK,GAAG,qBAAqB,IAAI,KAAK,SAAS,qBAAqB,GAChG,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,GACjD,KAAK,CAAC;AACV,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG,wBAAwB,CAAC;AAyc9F,eAAO,MAAM,UAAU,8FAErB,CAAC;AAGH,eAAO,MAAM,kBAAkB,8FAE9B,CAAC;AAGF,eAAO,MAAM,cAAc,8FAE1B,CAAC;AAGF,eAAO,MAAM,oBAAoB,kGAEhC,CAAC;AAGF,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,2BAA2B,EAC3B,cAAc,EACd,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,eAAe,GAChB,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,mBAAmB,EAGxB,KAAK,kBAAkB,EACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAgBpE,KAAK,mBAAmB,GAAG,cAAc,GACvC,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,GACtD,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,eAAe,CAC3D,CAAC;AAEJ,MAAM,WAAW,gCAAiC,SAAQ,mBAAmB;CAAG;AAEhF,KAAK,uBAAuB,GAAG,kBAAkB,SAAS,MAAM,KAAK,GACjE,KAAK,SAAS,kBAAkB,GAC9B,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,GAC3B,KAAK,GACP,KAAK,CAAC;AAEV,KAAK,2BAA2B,GAC5B;IACE;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxF,qBAAqB,CAAC,EAAE,KAAK,CAAC;CAC/B,GACD;IACE;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,gCAAgC,KAAK,KAAK,CAAC,SAAS,CAAC;IACrF,wBAAwB,CAAC,EAAE,KAAK,CAAC;CAClC,CAAC;AAEN,KAAK,qBAAqB,GAAG,uBAAuB,GAClD,mBAAmB,GAAG;IACpB,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC3C,GAAG,2BAA2B,CAAC;AAElC,KAAK,wBAAwB,GACzB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,WAAW,CAAC,CAAC,GACpF,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC,GACpF,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAC;AAEzF,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC;AACpD,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC;AACxD,KAAK,0BAA0B,CAAC,KAAK,GAAG,qBAAqB,IAAI,KAAK,SAAS,qBAAqB,GAChG,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC,GACjD,KAAK,CAAC;AACV,MAAM,MAAM,yBAAyB,GAAG,0BAA0B,GAAG,wBAAwB,CAAC;AA8b9F,eAAO,MAAM,UAAU,8FAErB,CAAC;AAGH,eAAO,MAAM,kBAAkB,8FAE9B,CAAC;AAGF,eAAO,MAAM,cAAc,8FAE1B,CAAC;AAGF,eAAO,MAAM,oBAAoB,kGAEhC,CAAC;AAGF,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,2BAA2B,EAC3B,cAAc,EACd,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,eAAe,GAChB,MAAM,gCAAgC,CAAC"}

package/lib/components/DatePicker/DatePicker.js

@@ -226,7 +226,7 @@ var DatePickerImplementation = React$1.forwardRef((props, forwardedRef) => {
 		...variantProps,
 		visibleRange: api.visibleRange
 	});
-	const { renderDateCellContent, renderDateCellSupplement, actionsRef, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
+	const { renderDateCellContent, renderDateCellSupplement, actionsRef, selectionMode: _selectionMode, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, viewDate: _viewDate, defaultViewDate: _defaultViewDate, onViewDateChange: _onViewDateChange, today: _today, locale: _locale, weekStartsOn: _weekStartsOn, yearRange: _yearRange, constraints: _constraints, disabled: _disabled, readOnly: _readOnly, rangeStartReadOnly: _rangeStartReadOnly, ariaLabels: _ariaLabels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...styleAndRootProps } = otherProps;
 	const { style: styleProps, restProps: rootProps } = useStyleProps(styleAndRootProps);
 	const rootRef = React$1.useRef(null);
 	const hasContinuousSizeConstraint = props.height !== void 0 || props.minHeight !== void 0 || props.maxHeight !== void 0;

package/lib/components/TextField/useTextFieldWithGraphemes.cjs

@@ -1,21 +1,18 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
-const require_memoize = require("./memoize.cjs");
 let react = require("react");
 let unicode_segmenter_grapheme = require("unicode-segmenter/grapheme");
 //#region src/components/TextField/useTextFieldWithGraphemes.ts
-var getGraphemes = (string) => Array.from((0, unicode_segmenter_grapheme.splitGraphemes)(string));
-var memoizedGetGraphemes = require_memoize.memoize(getGraphemes);
 function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue = "", onValueChange }) {
 	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
 	const isControlled = controlledValue !== void 0;
 	const value = isControlled ? controlledValue : uncontrolledValue;
-	const graphemes = (0, react.useMemo)(() => memoizedGetGraphemes(value), [value]);
+	const graphemes = (0, react.useMemo)(() => (0, unicode_segmenter_grapheme.collectGraphemes)(value), [value]);
 	return {
 		textFieldRootProps: {
 			value,
 			onValueChange: (0, react.useCallback)((newValue) => {
-				const newGraphemes = memoizedGetGraphemes(newValue);
+				const newGraphemes = (0, unicode_segmenter_grapheme.collectGraphemes)(newValue);
 				const newSlicedGraphemes = maxGraphemeCount === void 0 ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
 				const newSlicedValue = newSlicedGraphemes.join("");
 				if (!isControlled) setUncontrolledValue(newValue);

package/lib/components/TextField/useTextFieldWithGraphemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextFieldWithGraphemes.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,EAAE,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,CAAC;KAC3B,KAAK,IAAI,CAAC;CACZ;AAKD,wBAAgB,yBAAyB,CAAC,EACxC,gBAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,GACd,EAAE,+BAA+B;;;kCAQnB,MAAM;;;;;;;EAgCpB"}
+{"version":3,"file":"useTextFieldWithGraphemes.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,+BAA+B;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,EAAE,CAAC;QACpB,WAAW,EAAE,MAAM,CAAC;QACpB,eAAe,EAAE,MAAM,EAAE,CAAC;KAC3B,KAAK,IAAI,CAAC;CACZ;AAED,wBAAgB,yBAAyB,CAAC,EACxC,gBAAgB,EAChB,KAAK,EAAE,eAAe,EACtB,YAAiB,EACjB,aAAa,GACd,EAAE,+BAA+B;;;kCAQnB,MAAM;;;;;;;EAgCpB"}

package/lib/components/TextField/useTextFieldWithGraphemes.js

@@ -1,20 +1,17 @@
 "use client";
-import { memoize } from "./memoize.js";
 import { useCallback, useMemo, useState } from "react";
-import { splitGraphemes } from "unicode-segmenter/grapheme";
+import { collectGraphemes } from "unicode-segmenter/grapheme";
 //#region src/components/TextField/useTextFieldWithGraphemes.ts
-var getGraphemes = (string) => Array.from(splitGraphemes(string));
-var memoizedGetGraphemes = memoize(getGraphemes);
 function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue = "", onValueChange }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const isControlled = controlledValue !== void 0;
 	const value = isControlled ? controlledValue : uncontrolledValue;
-	const graphemes = useMemo(() => memoizedGetGraphemes(value), [value]);
+	const graphemes = useMemo(() => collectGraphemes(value), [value]);
 	return {
 		textFieldRootProps: {
 			value,
 			onValueChange: useCallback((newValue) => {
-				const newGraphemes = memoizedGetGraphemes(newValue);
+				const newGraphemes = collectGraphemes(newValue);
 				const newSlicedGraphemes = maxGraphemeCount === void 0 ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
 				const newSlicedValue = newSlicedGraphemes.join("");
 				if (!isControlled) setUncontrolledValue(newValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -49,8 +49,8 @@
     "@seed-design/react-checkbox": "^2.0.1",
     "@seed-design/react-collapsible": "^1.0.1",
     "@seed-design/react-dialog": "^2.0.3",
-    "@seed-design/react-date-picker": "^1.0.0",
-    "@seed-design/react-drawer": "^2.0.4",
+    "@seed-design/react-date-picker": "^1.1.0",
+    "@seed-design/react-drawer": "^2.0.6",
     "@seed-design/react-field": "^2.0.1",
     "@seed-design/react-field-button": "^2.0.1",
     "@seed-design/react-fieldset": "^1.0.1",
@@ -79,10 +79,10 @@
     "@seed-design/react-tooltip": "^1.0.1",
     "@seed-design/react-wheel-picker": "^1.0.0",
     "clsx": "^2.1.1",
-    "unicode-segmenter": "^0.14.4"
+    "unicode-segmenter": "^0.17.3"
   },
   "peerDependencies": {
-    "@seed-design/css": "^2.4.0",
+    "@seed-design/css": "^2.5.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/DatePicker/DatePicker.test.tsx

@@ -102,6 +102,56 @@ describe("DatePicker", () => {
     expect(onValueChange).not.toHaveBeenCalled();
   });
 
+  it("읽기 전용 Range 시작일의 상태와 접근성 이름을 노출하고 값 변경을 막는다", () => {
+    const onValueChange = mock(() => {});
+    const { getByRole } = render(
+      <DatePicker
+        {...commonProps}
+        selectionMode="range"
+        rangeStartReadOnly
+        defaultValue={{
+          start: { year: 2026, month: 7, day: 7 },
+          end: { year: 2026, month: 7, day: 9 },
+        }}
+        onValueChange={onValueChange}
+      />,
+    );
+    const start = getByRole("button", { name: /2026년 7월 7일.*읽기 전용 시작일/ });
+
+    expect(start).toHaveAttribute("data-range-start-readonly");
+    expect(start.closest('[role="gridcell"]')).toHaveAttribute("data-range-start-readonly");
+    expect(start).toHaveAttribute("aria-disabled", "true");
+    expect(start).not.toBeDisabled();
+
+    fireEvent.click(start);
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    fireEvent.click(getByRole("button", { name: /2026년 7월 12일/ }));
+    expect(onValueChange).toHaveBeenCalledWith({
+      start: { year: 2026, month: 7, day: 7 },
+      end: { year: 2026, month: 7, day: 12 },
+    });
+  });
+
+  it("날짜 셀 render prop에 읽기 전용 Range 시작일 상태를 전달한다", () => {
+    const { getByRole } = render(
+      <DatePicker
+        {...commonProps}
+        selectionMode="range"
+        rangeStartReadOnly
+        defaultValue={{ start: { year: 2026, month: 7, day: 7 } }}
+        renderDateCellSupplement={({ isRangeStartReadOnly }) => (
+          <span>{isRangeStartReadOnly ? "고정" : "변경 가능"}</span>
+        )}
+      />,
+    );
+
+    expect(getByRole("button", { name: /2026년 7월 7일.*읽기 전용 시작일/ })).toHaveTextContent(
+      "고정",
+    );
+    expect(getByRole("button", { name: /2026년 7월 8일/ })).toHaveTextContent("변경 가능");
+  });
+
   it("월·연도 제목을 누르면 Wheel Picker로 전환한다", () => {
     const { getByRole, getAllByRole, queryByRole } = render(<DatePicker {...commonProps} />);
 

package/src/components/DatePicker/DatePicker.tsx

@@ -100,13 +100,7 @@ const NavigationChevronIcon = React.forwardRef<SVGSVGElement, NavigationChevronI
         : "M17.2069 13.0704C16.9212 13.3703 16.9328 13.8451 17.2327 14.1307L23.4125 20.0166L17.2328 25.9017C16.9328 26.1873 16.9212 26.6621 17.2069 26.962C17.4925 27.262 17.9673 27.2736 18.2672 26.9879L25.0172 20.5598C25.1659 20.4182 25.25 20.2219 25.25 20.0167C25.25 19.8114 25.1659 19.6151 25.0173 19.4736L18.2673 13.0446C17.9673 12.7589 17.4926 12.7704 17.2069 13.0704Z";
 
     return (
-      <svg
-        ref={ref}
-        {...props}
-        viewBox="8 8 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg ref={ref} {...props} viewBox="8 8 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill="currentColor" />
       </svg>
     );
@@ -120,13 +114,7 @@ type HeaderChevronIconProps = React.SVGProps<SVGSVGElement> & {
 
 const HeaderChevronIcon = React.forwardRef<SVGSVGElement, HeaderChevronIconProps>(
   ({ expanded, ...props }, ref) => (
-    <svg
-      ref={ref}
-      {...props}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg ref={ref} {...props} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
@@ -424,6 +412,7 @@ const DatePickerImplementation = React.forwardRef<HTMLDivElement, DatePickerImpl
       constraints: _constraints,
       disabled: _disabled,
       readOnly: _readOnly,
+      rangeStartReadOnly: _rangeStartReadOnly,
       ariaLabels: _ariaLabels,
       className,
       "aria-label": ariaLabel,

package/src/components/TextField/useTextFieldWithGraphemes.ts

@@ -1,6 +1,5 @@
 import { useState, useMemo, useCallback } from "react";
-import { splitGraphemes } from "unicode-segmenter/grapheme";
-import { memoize } from "./memoize";
+import { collectGraphemes } from "unicode-segmenter/grapheme";
 
 export interface UseTextFieldWithGraphemesParams {
   maxGraphemeCount?: number;
@@ -14,9 +13,6 @@ export interface UseTextFieldWithGraphemesParams {
   }) => void;
 }
 
-const getGraphemes = (string: string) => Array.from(splitGraphemes(string));
-const memoizedGetGraphemes = memoize(getGraphemes);
-
 export function useTextFieldWithGraphemes({
   maxGraphemeCount,
   value: controlledValue,
@@ -27,11 +23,11 @@ export function useTextFieldWithGraphemes({
   const isControlled = controlledValue !== undefined;
   const value = isControlled ? controlledValue : uncontrolledValue;
 
-  const graphemes = useMemo(() => memoizedGetGraphemes(value), [value]);
+  const graphemes = useMemo(() => collectGraphemes(value), [value]);
 
   const handleValueChange = useCallback(
     (newValue: string) => {
-      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newGraphemes = collectGraphemes(newValue);
       const newSlicedGraphemes =
         maxGraphemeCount === undefined ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
       const newSlicedValue = newSlicedGraphemes.join("");

package/lib/components/TextField/memoize.cjs

@@ -1,13 +0,0 @@
-"use client";
-//#region src/components/TextField/memoize.ts
-function memoize(fn) {
-	const cache = /* @__PURE__ */ new Map();
-	return (arg) => {
-		if (cache.has(arg)) return cache.get(arg);
-		const result = fn(arg);
-		cache.set(arg, result);
-		return result;
-	};
-}
-//#endregion
-exports.memoize = memoize;

package/lib/components/TextField/memoize.d.ts

@@ -1,2 +0,0 @@
-export declare function memoize<Arg, Result>(fn: (arg: Arg) => Result): (arg: Arg) => Result;
-//# sourceMappingURL=memoize.d.ts.map

package/lib/components/TextField/memoize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"memoize.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/memoize.ts"],"names":[],"mappings":"AAAA,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAanF"}

package/lib/components/TextField/memoize.js

@@ -1,13 +0,0 @@
-"use client";
-//#region src/components/TextField/memoize.ts
-function memoize(fn) {
-	const cache = /* @__PURE__ */ new Map();
-	return (arg) => {
-		if (cache.has(arg)) return cache.get(arg);
-		const result = fn(arg);
-		cache.set(arg, result);
-		return result;
-	};
-}
-//#endregion
-export { memoize };

package/src/components/TextField/memoize.ts

@@ -1,14 +0,0 @@
-export function memoize<Arg, Result>(fn: (arg: Arg) => Result): (arg: Arg) => Result {
-  const cache = new Map<Arg, Result>();
-
-  return (arg: Arg) => {
-    if (cache.has(arg)) {
-      return cache.get(arg) as Result;
-    }
-
-    const result = fn(arg);
-    cache.set(arg, result);
-
-    return result;
-  };
-}