@seed-design/react 1.1.26 → 1.1.27

package/lib/components/TagGroup/index.cjs

@@ -1,11 +1,12 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TagGroup = require("./TagGroup.cjs");
-const require_TagGroup_namespace = require("./TagGroup.namespace.cjs");
-Object.defineProperty(exports, "TagGroup", {
-	enumerable: true,
-	get: function() {
-		return require_TagGroup_namespace.TagGroup_namespace_exports;
-	}
-});
-exports.TagGroupItem = require_TagGroup.TagGroupItem;
-exports.TagGroupRoot = require_TagGroup.TagGroupRoot;
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TagGroup = require('./TagGroup.cjs');
+const TagGroup_namespace = require('./TagGroup.namespace.cjs');
+
+
+
+exports.TagGroupItem = TagGroup.TagGroupItem;
+exports.TagGroupRoot = TagGroup.TagGroupRoot;
+exports.TagGroup = TagGroup_namespace;

package/lib/components/TagGroup/index.js

@@ -1,3 +1,3 @@
-import { TagGroupItem, TagGroupRoot } from "./TagGroup.js";
-import { TagGroup_namespace_exports } from "./TagGroup.namespace.js";
-export { TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupRoot };
+export { TagGroupItem, TagGroupRoot } from './TagGroup.js';
+import * as TagGroup_namespace from './TagGroup.namespace.js';
+export { TagGroup_namespace as TagGroup };

package/lib/components/Text/Text.cjs

@@ -1,61 +1,97 @@
-"use client";
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
-let _seed_design_css_vars = require("@seed-design/css/vars");
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx);
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _seed_design_css_recipes_text = require("@seed-design/css/recipes/text");
-//#region src/components/Text/Text.tsx
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const text = require('@seed-design/css/recipes/text');
+const vars = require('@seed-design/css/vars');
+const clsx = require('clsx');
+const React = require('react');
+
 function handleColor(color) {
-	if (!color) return;
-	const [type, value] = color.split(".");
-	return _seed_design_css_vars.vars.$color[type]?.[value] ?? color;
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.vars.$color[type]?.[value] ?? color;
 }
 function handleFontWeight(fontWeight) {
-	if (!fontWeight) return;
-	return _seed_design_css_vars.vars.$fontWeight[fontWeight] ?? void 0;
+  if (!fontWeight) {
+    return void 0;
+  }
+  return vars.vars.$fontWeight[fontWeight] ?? void 0;
 }
 function handleFontSize(size) {
-	if (!size) return;
-	return _seed_design_css_vars.vars.$fontSize[size] ?? size;
+  if (!size) {
+    return void 0;
+  }
+  return vars.vars.$fontSize[size] ?? size;
 }
 function handleLineHeight(lineHeight) {
-	if (!lineHeight) return;
-	return _seed_design_css_vars.vars.$lineHeight[lineHeight] ?? lineHeight;
+  if (!lineHeight) {
+    return void 0;
+  }
+  return vars.vars.$lineHeight[lineHeight] ?? lineHeight;
 }
 function mapMaxLines(maxLines) {
-	if (maxLines === void 0) return "none";
-	if (maxLines === 1) return "single";
-	return "multi";
+  if (maxLines === void 0) {
+    return "none";
+  }
+  if (maxLines === 1) {
+    return "single";
+  }
+  return "multi";
 }
-var Text = (0, react.forwardRef)(({ as, color, textStyle, fontSize, lineHeight, fontWeight, maxLines, textDecorationLine, align, userSelect, whiteSpace, children, className, style, ...otherProps }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as || "span", {
-		ref,
-		className: (0, clsx.default)((0, react.useMemo)(() => (0, _seed_design_css_recipes_text.text)({
-			textStyle,
-			textDecorationLine,
-			maxLines: mapMaxLines(maxLines)
-		}), [
-			textStyle,
-			textDecorationLine,
-			maxLines
-		]), className),
-		style: {
-			"--seed-max-lines": maxLines,
-			"--seed-text-color": handleColor(color),
-			"--seed-font-size": handleFontSize(fontSize),
-			"--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
-			"--seed-font-weight": handleFontWeight(fontWeight),
-			"--seed-text-align": align,
-			"--seed-user-select": userSelect,
-			"--seed-white-space": whiteSpace,
-			...style
-		},
-		...otherProps,
-		children
-	});
-});
+const Text = React.forwardRef(
+  ({
+    as,
+    color,
+    textStyle,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    maxLines,
+    textDecorationLine,
+    align,
+    userSelect,
+    whiteSpace,
+    children,
+    className,
+    style,
+    ...otherProps
+  }, ref) => {
+    const Comp = as || "span";
+    const textClassName = React.useMemo(
+      () => text.text({
+        textStyle,
+        textDecorationLine,
+        maxLines: mapMaxLines(maxLines)
+      }),
+      [textStyle, textDecorationLine, maxLines]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: clsx(textClassName, className),
+        style: {
+          "--seed-max-lines": maxLines,
+          "--seed-text-color": handleColor(color),
+          "--seed-font-size": handleFontSize(fontSize),
+          "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+          "--seed-font-weight": handleFontWeight(fontWeight),
+          "--seed-text-align": align,
+          "--seed-user-select": userSelect,
+          "--seed-white-space": whiteSpace,
+          ...style
+        },
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
 Text.displayName = "Text";
-//#endregion
+
 exports.Text = Text;

package/lib/components/Text/Text.js

@@ -1,59 +1,93 @@
-"use client";
-import { vars } from "@seed-design/css/vars";
-import clsx from "clsx";
-import { forwardRef, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { text } from "@seed-design/css/recipes/text";
-//#region src/components/Text/Text.tsx
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { text } from '@seed-design/css/recipes/text';
+import { vars } from '@seed-design/css/vars';
+import clsx from 'clsx';
+import { forwardRef, useMemo } from 'react';
+
 function handleColor(color) {
-	if (!color) return;
-	const [type, value] = color.split(".");
-	return vars.$color[type]?.[value] ?? color;
+  if (!color) {
+    return void 0;
+  }
+  const [type, value] = color.split(".");
+  return vars.$color[type]?.[value] ?? color;
 }
 function handleFontWeight(fontWeight) {
-	if (!fontWeight) return;
-	return vars.$fontWeight[fontWeight] ?? void 0;
+  if (!fontWeight) {
+    return void 0;
+  }
+  return vars.$fontWeight[fontWeight] ?? void 0;
 }
 function handleFontSize(size) {
-	if (!size) return;
-	return vars.$fontSize[size] ?? size;
+  if (!size) {
+    return void 0;
+  }
+  return vars.$fontSize[size] ?? size;
 }
 function handleLineHeight(lineHeight) {
-	if (!lineHeight) return;
-	return vars.$lineHeight[lineHeight] ?? lineHeight;
+  if (!lineHeight) {
+    return void 0;
+  }
+  return vars.$lineHeight[lineHeight] ?? lineHeight;
 }
 function mapMaxLines(maxLines) {
-	if (maxLines === void 0) return "none";
-	if (maxLines === 1) return "single";
-	return "multi";
+  if (maxLines === void 0) {
+    return "none";
+  }
+  if (maxLines === 1) {
+    return "single";
+  }
+  return "multi";
 }
-var Text = forwardRef(({ as, color, textStyle, fontSize, lineHeight, fontWeight, maxLines, textDecorationLine, align, userSelect, whiteSpace, children, className, style, ...otherProps }, ref) => {
-	return /* @__PURE__ */ jsx(as || "span", {
-		ref,
-		className: clsx(useMemo(() => text({
-			textStyle,
-			textDecorationLine,
-			maxLines: mapMaxLines(maxLines)
-		}), [
-			textStyle,
-			textDecorationLine,
-			maxLines
-		]), className),
-		style: {
-			"--seed-max-lines": maxLines,
-			"--seed-text-color": handleColor(color),
-			"--seed-font-size": handleFontSize(fontSize),
-			"--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
-			"--seed-font-weight": handleFontWeight(fontWeight),
-			"--seed-text-align": align,
-			"--seed-user-select": userSelect,
-			"--seed-white-space": whiteSpace,
-			...style
-		},
-		...otherProps,
-		children
-	});
-});
+const Text = forwardRef(
+  ({
+    as,
+    color,
+    textStyle,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    maxLines,
+    textDecorationLine,
+    align,
+    userSelect,
+    whiteSpace,
+    children,
+    className,
+    style,
+    ...otherProps
+  }, ref) => {
+    const Comp = as || "span";
+    const textClassName = useMemo(
+      () => text({
+        textStyle,
+        textDecorationLine,
+        maxLines: mapMaxLines(maxLines)
+      }),
+      [textStyle, textDecorationLine, maxLines]
+    );
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: clsx(textClassName, className),
+        style: {
+          "--seed-max-lines": maxLines,
+          "--seed-text-color": handleColor(color),
+          "--seed-font-size": handleFontSize(fontSize),
+          "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+          "--seed-font-weight": handleFontWeight(fontWeight),
+          "--seed-text-align": align,
+          "--seed-user-select": userSelect,
+          "--seed-white-space": whiteSpace,
+          ...style
+        },
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
 Text.displayName = "Text";
-//#endregion
+
 export { Text };

package/lib/components/Text/index.cjs

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

package/lib/components/Text/index.js

@@ -1,2 +1 @@
-import { Text } from "./Text.js";
-export { Text };
+export { Text } from './Text.js';

package/lib/components/TextField/TextField.cjs

@@ -1,87 +1,127 @@
-"use client";
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
-const require_createSlotRecipeContext = require("../../utils/createSlotRecipeContext.cjs");
-const require_createWithStateProps = require("../../utils/createWithStateProps.cjs");
-const require_Icon = require("../private/Icon.cjs");
-let _seed_design_react_primitive = require("@seed-design/react-primitive");
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx);
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _radix_ui_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
-let _seed_design_dom_utils = require("@seed-design/dom-utils");
-let _seed_design_react_field = require("@seed-design/react-field");
-let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
-let _seed_design_react_text_field = require("@seed-design/react-text-field");
-let _seed_design_css_recipes_text_input = require("@seed-design/css/recipes/text-input");
-//#region src/components/TextField/TextField.tsx
-var { withProvider, withContext, useClassNames } = require_createSlotRecipeContext.createSlotRecipeContext(_seed_design_css_recipes_text_input.textInput);
-var withFieldStateProps = require_createWithStateProps.createWithStateProps([{
-	useContext: _seed_design_react_field.useFieldContext,
-	strict: false
-}]);
-var withStateProps = require_createWithStateProps.createWithStateProps([_seed_design_react_text_field.useTextFieldContext, {
-	useContext: _seed_design_react_field.useFieldContext,
-	strict: false
-}]);
-var TextFieldRoot = withProvider(withFieldStateProps(_seed_design_react_text_field.TextField.Root), "root");
-var TextFieldPrefixIcon = withContext(withStateProps(require_Icon.InternalIcon), "prefixIcon");
-var TextFieldPrefixText = withContext(withStateProps(_seed_design_react_primitive.Primitive.span), "prefixText");
-var TextFieldSuffixIcon = withContext(withStateProps(require_Icon.InternalIcon), "suffixIcon");
-var TextFieldSuffixText = withContext(withStateProps(_seed_design_react_primitive.Primitive.span), "suffixText");
-var TextFieldInput = (0, react.forwardRef)(({ className, ...otherProps }, ref) => {
-	const classNames = useClassNames();
-	const textFieldContext = (0, _seed_design_react_text_field.useTextFieldContext)();
-	const fieldContext = (0, _seed_design_react_field.useFieldContext)({ strict: false });
-	const mergedProps = (0, _seed_design_dom_utils.mergeProps)(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
-	if (!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__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_text_field.TextField.Input, {
-		ref,
-		...mergedProps,
-		className: (0, clsx.default)(classNames.value, className)
-	});
-});
+'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";
-var TextFieldTextarea = (0, react.forwardRef)(({ className, autoresize = true, ...otherProps }, ref) => {
-	const classNames = useClassNames();
-	const textFieldContext = (0, _seed_design_react_text_field.useTextFieldContext)();
-	const fieldContext = (0, _seed_design_react_field.useFieldContext)({ strict: false });
-	const mergedProps = (0, _seed_design_dom_utils.mergeProps)(fieldContext ? fieldContext.stateProps : {}, fieldContext ? fieldContext.inputAriaAttributes : {}, textFieldContext.inputProps, fieldContext ? fieldContext.inputProps : {}, otherProps);
-	if (!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 = (0, react.useRef)(null);
-	const onHeightChange = (0, 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;
-		if (!("MozAppearance" in input.style)) 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
-	]);
-	(0, _radix_ui_react_use_layout_effect.useLayoutEffect)(() => {
-		if (inputRef.current) onHeightChange();
-	}, [
-		onHeightChange,
-		textFieldContext.value,
-		inputRef
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_text_field.TextField.Textarea, {
-		ref: (0, _radix_ui_react_compose_refs.composeRefs)(inputRef, ref),
-		...mergedProps,
-		className: (0, clsx.default)(classNames.value, className)
-	});
-});
+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";
-//#endregion
+
 exports.TextFieldInput = TextFieldInput;
 exports.TextFieldPrefixIcon = TextFieldPrefixIcon;
 exports.TextFieldPrefixText = TextFieldPrefixText;