@seed-design/react 0.0.0-alpha-20260324091316

package/lib/components/TextField/TextField.cjs

@@ -0,0 +1,131 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactUseLayoutEffect = require('@radix-ui/react-use-layout-effect');
+const reactPrimitive = require('@seed-design/react-primitive');
+const reactTextField = require('@seed-design/react-text-field');
+const reactField = require('@seed-design/react-field');
+const textInput = require('@seed-design/css/recipes/text-input');
+const clsx = require('clsx');
+const React = require('react');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const Icon = require('../private/Icon.cjs');
+const reactComposeRefs = require('@radix-ui/react-compose-refs');
+const domUtils = require('@seed-design/dom-utils');
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(textInput.textInput);
+const withFieldStateProps = createWithStateProps.createWithStateProps([{ useContext: reactField.useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps.createWithStateProps([
+  reactTextField.useTextFieldContext,
+  { useContext: reactField.useFieldContext, strict: false }
+]);
+const TextFieldRoot = withProvider(
+  withFieldStateProps(reactTextField.TextField.Root),
+  "root"
+);
+const TextFieldPrefixIcon = withContext(
+  withStateProps(Icon.InternalIcon),
+  "prefixIcon"
+);
+const TextFieldPrefixText = withContext(
+  withStateProps(reactPrimitive.Primitive.span),
+  "prefixText"
+);
+const TextFieldSuffixIcon = withContext(
+  withStateProps(Icon.InternalIcon),
+  "suffixIcon"
+);
+const TextFieldSuffixText = withContext(
+  withStateProps(reactPrimitive.Primitive.span),
+  "suffixText"
+);
+const TextFieldInput = React.forwardRef(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = reactTextField.useTextFieldContext();
+    const fieldContext = reactField.useFieldContext({ strict: false });
+    const mergedProps = domUtils.mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(reactTextField.TextField.Input, { ref, ...mergedProps, className: clsx(classNames.value, className) });
+  }
+);
+TextFieldInput.displayName = "TextFieldInput";
+const TextFieldTextarea = React.forwardRef(
+  ({ className, autoresize = true, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = reactTextField.useTextFieldContext();
+    const fieldContext = reactField.useFieldContext({ strict: false });
+    const mergedProps = domUtils.mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    const inputRef = React.useRef(null);
+    const onHeightChange = React.useCallback(() => {
+      if (!inputRef.current) return;
+      if (otherProps.style?.height) return;
+      if (!autoresize) return;
+      const input = inputRef.current;
+      const prevAlignment = input.style.alignSelf;
+      const prevOverflow = input.style.overflow;
+      const isFirefox = "MozAppearance" in input.style;
+      if (!isFirefox) {
+        input.style.overflow = "hidden";
+      }
+      input.style.alignSelf = "start";
+      input.style.height = "auto";
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }, [inputRef, otherProps.style?.height, autoresize]);
+    reactUseLayoutEffect.useLayoutEffect(() => {
+      if (inputRef.current) {
+        onHeightChange();
+      }
+    }, [onHeightChange, textFieldContext.value, inputRef]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactTextField.TextField.Textarea,
+      {
+        ref: reactComposeRefs.composeRefs(inputRef, ref),
+        ...mergedProps,
+        className: clsx(classNames.value, className)
+      }
+    );
+  }
+);
+TextFieldTextarea.displayName = "TextFieldTextarea";
+
+exports.TextFieldInput = TextFieldInput;
+exports.TextFieldPrefixIcon = TextFieldPrefixIcon;
+exports.TextFieldPrefixText = TextFieldPrefixText;
+exports.TextFieldRoot = TextFieldRoot;
+exports.TextFieldSuffixIcon = TextFieldSuffixIcon;
+exports.TextFieldSuffixText = TextFieldSuffixText;
+exports.TextFieldTextarea = TextFieldTextarea;

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

@@ -0,0 +1,32 @@
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { TextField } from '@seed-design/react-text-field';
+import { TextInputVariantProps } from '@seed-design/css/recipes/text-input';
+import { InternalIconProps } from '../private/Icon';
+import type * as React from "react";
+export interface TextFieldRootProps extends TextInputVariantProps, TextField.RootProps {
+}
+export declare const TextFieldRoot: React.ForwardRefExoticComponent<TextFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface TextFieldPrefixIconProps extends InternalIconProps {
+}
+export declare const TextFieldPrefixIcon: React.ForwardRefExoticComponent<TextFieldPrefixIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface TextFieldPrefixTextProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const TextFieldPrefixText: React.ForwardRefExoticComponent<TextFieldPrefixTextProps & React.RefAttributes<HTMLSpanElement>>;
+export interface TextFieldSuffixIconProps extends InternalIconProps {
+}
+export declare const TextFieldSuffixIcon: React.ForwardRefExoticComponent<TextFieldSuffixIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface TextFieldSuffixTextProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const TextFieldSuffixText: React.ForwardRefExoticComponent<TextFieldSuffixTextProps & React.RefAttributes<HTMLSpanElement>>;
+export interface TextFieldInputProps extends TextField.InputProps {
+}
+export declare const TextFieldInput: React.ForwardRefExoticComponent<TextFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextFieldTextareaProps extends TextField.TextareaProps {
+    /**
+     * If true, the textarea will automatically resize based on its content.
+     * @default true
+     */
+    autoresize?: boolean;
+}
+export declare const TextFieldTextarea: React.ForwardRefExoticComponent<TextFieldTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAuB,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAE5F,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAcvE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB,EAAE,SAAS,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAEF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,gGAG/B,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,kGAG/B,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,UAAU;CAAG;AAEpE,eAAO,MAAM,cAAc,8FA6B1B,CAAC;AAGF,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,aAAa;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,oGAuE7B,CAAC"}

package/lib/components/TextField/TextField.js

@@ -0,0 +1,121 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
+import { Primitive } from '@seed-design/react-primitive';
+import { TextField, useTextFieldContext } from '@seed-design/react-text-field';
+import { useFieldContext } from '@seed-design/react-field';
+import { textInput } from '@seed-design/css/recipes/text-input';
+import clsx from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { InternalIcon } from '../private/Icon.js';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { mergeProps } from '@seed-design/dom-utils';
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textInput);
+const withFieldStateProps = createWithStateProps([{ useContext: useFieldContext, strict: false }]);
+const withStateProps = createWithStateProps([
+  useTextFieldContext,
+  { useContext: useFieldContext, strict: false }
+]);
+const TextFieldRoot = withProvider(
+  withFieldStateProps(TextField.Root),
+  "root"
+);
+const TextFieldPrefixIcon = withContext(
+  withStateProps(InternalIcon),
+  "prefixIcon"
+);
+const TextFieldPrefixText = withContext(
+  withStateProps(Primitive.span),
+  "prefixText"
+);
+const TextFieldSuffixIcon = withContext(
+  withStateProps(InternalIcon),
+  "suffixIcon"
+);
+const TextFieldSuffixText = withContext(
+  withStateProps(Primitive.span),
+  "suffixText"
+);
+const TextFieldInput = forwardRef(
+  ({ className, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldInput: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldInput` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    return /* @__PURE__ */ jsx(TextField.Input, { ref, ...mergedProps, className: clsx(classNames.value, className) });
+  }
+);
+TextFieldInput.displayName = "TextFieldInput";
+const TextFieldTextarea = forwardRef(
+  ({ className, autoresize = true, ...otherProps }, ref) => {
+    const classNames = useClassNames();
+    const textFieldContext = useTextFieldContext();
+    const fieldContext = useFieldContext({ strict: false });
+    const mergedProps = mergeProps(
+      fieldContext ? fieldContext.stateProps : {},
+      fieldContext ? fieldContext.inputAriaAttributes : {},
+      textFieldContext.inputProps,
+      fieldContext ? fieldContext.inputProps : {},
+      otherProps
+    );
+    if (
+      // if not in field, then must have aria-label or aria-labelledby
+      !fieldContext && !otherProps["aria-label"] && !otherProps["aria-labelledby"]
+    ) {
+      console.warn(
+        "TextFieldTextarea: Please provide `aria-label` or `aria-labelledby` for accessibility, or put `TextFieldTextarea` inside a `Field` where a `FieldLabel` is provided."
+      );
+    }
+    const inputRef = useRef(null);
+    const onHeightChange = useCallback(() => {
+      if (!inputRef.current) return;
+      if (otherProps.style?.height) return;
+      if (!autoresize) return;
+      const input = inputRef.current;
+      const prevAlignment = input.style.alignSelf;
+      const prevOverflow = input.style.overflow;
+      const isFirefox = "MozAppearance" in input.style;
+      if (!isFirefox) {
+        input.style.overflow = "hidden";
+      }
+      input.style.alignSelf = "start";
+      input.style.height = "auto";
+      input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+      input.style.overflow = prevOverflow;
+      input.style.alignSelf = prevAlignment;
+    }, [inputRef, otherProps.style?.height, autoresize]);
+    useLayoutEffect(() => {
+      if (inputRef.current) {
+        onHeightChange();
+      }
+    }, [onHeightChange, textFieldContext.value, inputRef]);
+    return /* @__PURE__ */ jsx(
+      TextField.Textarea,
+      {
+        ref: composeRefs(inputRef, ref),
+        ...mergedProps,
+        className: clsx(classNames.value, className)
+      }
+    );
+  }
+);
+TextFieldTextarea.displayName = "TextFieldTextarea";
+
+export { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea };

package/lib/components/TextField/TextField.namespace.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TextField = require('./TextField.cjs');
+
+
+
+exports.Input = TextField.TextFieldInput;
+exports.PrefixIcon = TextField.TextFieldPrefixIcon;
+exports.PrefixText = TextField.TextFieldPrefixText;
+exports.Root = TextField.TextFieldRoot;
+exports.SuffixIcon = TextField.TextFieldSuffixIcon;
+exports.SuffixText = TextField.TextFieldSuffixText;
+exports.Textarea = TextField.TextFieldTextarea;

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

@@ -0,0 +1,2 @@
+export { TextFieldRoot as Root, TextFieldInput as Input, TextFieldTextarea as Textarea, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, type TextFieldRootProps as RootProps, type TextFieldInputProps as InputProps, type TextFieldTextareaProps as TextareaProps, type TextFieldPrefixIconProps as PrefixIconProps, type TextFieldPrefixTextProps as PrefixTextProps, type TextFieldSuffixIconProps as SuffixIconProps, type TextFieldSuffixTextProps as SuffixTextProps, } from './TextField';
+//# sourceMappingURL=TextField.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,IAAI,EACrB,cAAc,IAAI,KAAK,EACvB,iBAAiB,IAAI,QAAQ,EAC7B,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EACjC,KAAK,kBAAkB,IAAI,SAAS,EACpC,KAAK,mBAAmB,IAAI,UAAU,EACtC,KAAK,sBAAsB,IAAI,aAAa,EAC5C,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,EAChD,KAAK,wBAAwB,IAAI,eAAe,GACjD,MAAM,aAAa,CAAC"}

package/lib/components/TextField/TextField.namespace.js

@@ -0,0 +1 @@
+export { TextFieldInput as Input, TextFieldPrefixIcon as PrefixIcon, TextFieldPrefixText as PrefixText, TextFieldRoot as Root, TextFieldSuffixIcon as SuffixIcon, TextFieldSuffixText as SuffixText, TextFieldTextarea as Textarea } from './TextField.js';

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextField.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.test.tsx"],"names":[],"mappings":""}

package/lib/components/TextField/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TextField = require('./TextField.cjs');
+const useTextFieldWithGraphemes = require('./useTextFieldWithGraphemes.cjs');
+const TextField_namespace = require('./TextField.namespace.cjs');
+
+
+
+exports.TextFieldInput = TextField.TextFieldInput;
+exports.TextFieldPrefixIcon = TextField.TextFieldPrefixIcon;
+exports.TextFieldPrefixText = TextField.TextFieldPrefixText;
+exports.TextFieldRoot = TextField.TextFieldRoot;
+exports.TextFieldSuffixIcon = TextField.TextFieldSuffixIcon;
+exports.TextFieldSuffixText = TextField.TextFieldSuffixText;
+exports.TextFieldTextarea = TextField.TextFieldTextarea;
+exports.useTextFieldWithGraphemes = useTextFieldWithGraphemes.useTextFieldWithGraphemes;
+exports.TextField = TextField_namespace;

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

@@ -0,0 +1,4 @@
+export { TextFieldRoot, TextFieldInput, TextFieldTextarea, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldSuffixIcon, TextFieldSuffixText, type TextFieldRootProps, type TextFieldInputProps, type TextFieldTextareaProps, type TextFieldPrefixIconProps, type TextFieldPrefixTextProps, type TextFieldSuffixIconProps, type TextFieldSuffixTextProps, } from './TextField';
+export { useTextFieldWithGraphemes, type UseTextFieldWithGraphemesParams, } from './useTextFieldWithGraphemes';
+export * as TextField from './TextField.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,GAC9B,MAAM,aAAa,CAAC;AAErB,OAAO,EACL,yBAAyB,EACzB,KAAK,+BAA+B,GACrC,MAAM,6BAA6B,CAAC;AAErC,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC"}

package/lib/components/TextField/index.js

@@ -0,0 +1,4 @@
+export { TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from './TextField.js';
+export { useTextFieldWithGraphemes } from './useTextFieldWithGraphemes.js';
+import * as TextField_namespace from './TextField.namespace.js';
+export { TextField_namespace as TextField };

package/lib/components/TextField/memoize.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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;
+  };
+}
+
+exports.memoize = memoize;

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,14 @@
+'use client';
+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;
+  };
+}
+
+export { memoize };

package/lib/components/TextField/useTextFieldWithGraphemes.cjs

@@ -0,0 +1,52 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const grapheme = require('unicode-segmenter/grapheme');
+const memoize = require('./memoize.cjs');
+
+const getGraphemes = (string) => Array.from(grapheme.splitGraphemes(string));
+const memoizedGetGraphemes = memoize.memoize(getGraphemes);
+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(() => memoizedGetGraphemes(value), [value]);
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newSlicedGraphemes = maxGraphemeCount === void 0 ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
+      const newSlicedValue = newSlicedGraphemes.join("");
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.({
+        value: newValue,
+        graphemes: newGraphemes,
+        slicedValue: newSlicedValue,
+        slicedGraphemes: newSlicedGraphemes
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange]
+  );
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0
+    },
+    graphemes
+  };
+}
+
+exports.useTextFieldWithGraphemes = useTextFieldWithGraphemes;

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

@@ -0,0 +1,23 @@
+export interface UseTextFieldWithGraphemesParams {
+    maxGraphemeCount?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (values: {
+        value: string;
+        graphemes: string[];
+        slicedValue: string;
+        slicedGraphemes: string[];
+    }) => void;
+}
+export declare function useTextFieldWithGraphemes({ maxGraphemeCount, value: controlledValue, defaultValue, onValueChange, }: UseTextFieldWithGraphemesParams): {
+    textFieldRootProps: {
+        value: string;
+        onValueChange: (newValue: string) => void;
+    };
+    counterProps: {
+        current: number;
+        max: number;
+    };
+    graphemes: string[];
+};
+//# sourceMappingURL=useTextFieldWithGraphemes.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/TextField/useTextFieldWithGraphemes.js

@@ -0,0 +1,48 @@
+'use client';
+import { useState, useMemo, useCallback } from 'react';
+import { splitGraphemes } from 'unicode-segmenter/grapheme';
+import { memoize } from './memoize.js';
+
+const getGraphemes = (string) => Array.from(splitGraphemes(string));
+const 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 handleValueChange = useCallback(
+    (newValue) => {
+      const newGraphemes = memoizedGetGraphemes(newValue);
+      const newSlicedGraphemes = maxGraphemeCount === void 0 ? newGraphemes : newGraphemes.slice(0, maxGraphemeCount);
+      const newSlicedValue = newSlicedGraphemes.join("");
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.({
+        value: newValue,
+        graphemes: newGraphemes,
+        slicedValue: newSlicedValue,
+        slicedGraphemes: newSlicedGraphemes
+      });
+    },
+    [isControlled, maxGraphemeCount, onValueChange]
+  );
+  return {
+    textFieldRootProps: {
+      value,
+      onValueChange: handleValueChange
+    },
+    counterProps: {
+      current: graphemes.length,
+      max: maxGraphemeCount ?? 0
+    },
+    graphemes
+  };
+}
+
+export { useTextFieldWithGraphemes };

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useTextFieldWithGraphemes.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextFieldWithGraphemes.test.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/useTextFieldWithGraphemes.test.tsx"],"names":[],"mappings":""}

package/lib/components/ToggleButton/ToggleButton.cjs

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const toggleButton = require('@seed-design/css/recipes/toggle-button');
+const reactToggle = require('@seed-design/react-toggle');
+const clsx = require('clsx');
+const React = require('react');
+const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const ToggleButton = React__namespace.forwardRef(
+  ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
+    const recipeClassName = toggleButton.toggleButton({ variant, size });
+    const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
+    return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactToggle.Toggle.Root,
+      {
+        ref,
+        className: clsx(recipeClassName, className),
+        ...api.stateProps,
+        ...otherProps
+      }
+    ) });
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+exports.ToggleButton = ToggleButton;

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,8 @@
+import { ToggleButtonVariantProps } from '@seed-design/css/recipes/toggle-button';
+import { Toggle as TogglePrimitive } from '@seed-design/react-toggle';
+import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
+import * as React from "react";
+export interface ToggleButtonProps extends ToggleButtonVariantProps, UsePendingButtonProps, TogglePrimitive.RootProps {
+}
+export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,YAAY,6FAgBxB,CAAC"}

package/lib/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { toggleButton } from '@seed-design/css/recipes/toggle-button';
+import { Toggle } from '@seed-design/react-toggle';
+import clsx from 'clsx';
+import * as React from 'react';
+import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
+
+const ToggleButton = React.forwardRef(
+  ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
+    const recipeClassName = toggleButton({ variant, size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+    return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
+      Toggle.Root,
+      {
+        ref,
+        className: clsx(recipeClassName, className),
+        ...api.stateProps,
+        ...otherProps
+      }
+    ) });
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton };

package/lib/components/ToggleButton/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ToggleButton = require('./ToggleButton.cjs');
+
+
+
+exports.ToggleButton = ToggleButton.ToggleButton;

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

@@ -0,0 +1,2 @@
+export { ToggleButton, type ToggleButtonProps, } from './ToggleButton';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,gBAAgB,CAAC"}