@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.9

package/dist/components/Switch/SwitchInput/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","useCallback","useClassNames","CharcoalSwitchProps","onChange","checked","InputProps","React","HTMLProps","HTMLInputElement","SwitchInputProps","Omit","SwitchInput","className","props","ref","handleChange","e","ChangeEvent","el","currentTarget","classNames"],"sources":["../../../../src/components/Switch/SwitchInput/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { forwardRef, useCallback } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport type CharcoalSwitchProps = {\n  onChange?: (checked: boolean) => void\n}\n\ntype InputProps = React.HTMLProps<HTMLInputElement>\n\nexport type SwitchInputProps = CharcoalSwitchProps &\n  Omit<InputProps, keyof CharcoalSwitchProps | 'ref'>\n\nconst SwitchInput = forwardRef<\n  HTMLInputElement,\n  Omit<SwitchInputProps, 'children'>\n>(function SwitchInput({ onChange, className, ...props }, ref) {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const el = e.currentTarget\n      onChange?.(el.checked)\n    },\n    [onChange],\n  )\n\n  const classNames = useClassNames('charcoal-switch-input', className)\n  return (\n    <input\n      ref={ref}\n      className={classNames}\n      type=\"checkbox\"\n      onChange={handleChange}\n      {...props}\n    />\n  )\n})\n\nexport default SwitchInput\n"],"mappings":";;;;;;;AAcA,MAAMY,cAAcZ,WAGlB,SAASY,YAAY,EAAER,UAAUS,WAAW,GAAGC,SAASC,KAAK;CAC7D,MAAMC,eAAef,aAClBgB,MAA2C;EAC1C,MAAME,KAAKF,EAAEG;EACbhB,WAAWe,GAAGd,QAAQ;IAExB,CAACD,SACH,CAAC;CAGD,OACE,oBAAC,SAAD;EACOW;EACL,WAJeb,cAAc,yBAAyBW,UAIjC;EACrB,MAAK;EACL,UAAUG;EACV,GAAIF;EACJ;EAEJ"}

package/dist/components/Switch/SwitchWithLabel.cjs

@@ -0,0 +1,23 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Switch/SwitchWithLabel.tsx
+const SwitchWithLabel = react.memo(function SwitchWithLabel({ children, className, disabled, id, input }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		htmlFor: id,
+		className: require_useClassNames.useClassNames("charcoal-switch__label", className),
+		"aria-disabled": disabled,
+		children: [input, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "charcoal-switch__label_div",
+			children
+		})]
+	});
+});
+
+//#endregion
+exports.SwitchWithLabel = SwitchWithLabel;
+//# sourceMappingURL=SwitchWithLabel.cjs.map

package/dist/components/Switch/SwitchWithLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchWithLabel.cjs","names":["React","useClassNames","SwitchWithLabel","memo","children","className","disabled","id","input","ReactNode","classNames"],"sources":["../../../src/components/Switch/SwitchWithLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport const SwitchWithLabel = React.memo(function SwitchWithLabel({\n  children,\n  className,\n  disabled,\n  id,\n  input,\n}: {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  id?: string\n  input: React.ReactNode\n}) {\n  const classNames = useClassNames('charcoal-switch__label', className)\n  return (\n    <label htmlFor={id} className={classNames} aria-disabled={disabled}>\n      {input}\n      <div className=\"charcoal-switch__label_div\">{children}</div>\n    </label>\n  )\n})\n"],"mappings":";;;;;;;;AAGA,MAAaE,kBAAkBF,MAAMG,KAAK,SAASD,gBAAgB,EACjEE,UACAC,WACAC,UACAC,IACAC,SAOC;CAED,OACE,4CAAC,SAAD;EAAO,SAASD;EAAI,WAFHN,oCAAc,0BAA0BI,UAEhB;EAAE,iBAAeC;YAA1D,CACGE,OACD,2CAAC,OAAD;GAAK,WAAU;GAA8BJ;GAAc,EACrD;;EAEV"}

package/dist/components/Switch/SwitchWithLabel.js

@@ -0,0 +1,21 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Switch/SwitchWithLabel.tsx
+const SwitchWithLabel = React$1.memo(function SwitchWithLabel({ children, className, disabled, id, input }) {
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: useClassNames("charcoal-switch__label", className),
+		"aria-disabled": disabled,
+		children: [input, /* @__PURE__ */ jsx("div", {
+			className: "charcoal-switch__label_div",
+			children
+		})]
+	});
+});
+
+//#endregion
+export { SwitchWithLabel };
+//# sourceMappingURL=SwitchWithLabel.js.map

package/dist/components/Switch/SwitchWithLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchWithLabel.js","names":["React","useClassNames","SwitchWithLabel","memo","children","className","disabled","id","input","ReactNode","classNames"],"sources":["../../../src/components/Switch/SwitchWithLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport const SwitchWithLabel = React.memo(function SwitchWithLabel({\n  children,\n  className,\n  disabled,\n  id,\n  input,\n}: {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  id?: string\n  input: React.ReactNode\n}) {\n  const classNames = useClassNames('charcoal-switch__label', className)\n  return (\n    <label htmlFor={id} className={classNames} aria-disabled={disabled}>\n      {input}\n      <div className=\"charcoal-switch__label_div\">{children}</div>\n    </label>\n  )\n})\n"],"mappings":";;;;;;AAGA,MAAaE,kBAAkBF,QAAMG,KAAK,SAASD,gBAAgB,EACjEE,UACAC,WACAC,UACAC,IACAC,SAOC;CAED,OACE,qBAAC,SAAD;EAAO,SAASD;EAAI,WAFHN,cAAc,0BAA0BI,UAEhB;EAAE,iBAAeC;YAA1D,CACGE,OACD,oBAAC,OAAD;GAAK,WAAU;GAA8BJ;GAAc,EACrD;;EAEV"}

package/dist/components/Switch/index2.cjs

@@ -0,0 +1,37 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+require('./index.cjs');
+const require_index$1 = require('./SwitchInput/index2.cjs');
+const require_SwitchWithLabel = require('./SwitchWithLabel.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useId = require("react-aria/useId");
+
+//#region src/components/Switch/index.tsx
+const Switch = (0, react.forwardRef)(function Switch({ children, onChange, disabled, className, id, ...props }, ref) {
+	const htmlId = (0, react_aria_useId.useId)(id);
+	const noChildren = children === void 0;
+	const input = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
+		...props,
+		disabled,
+		className: noChildren ? className : void 0,
+		id: htmlId,
+		onChange,
+		ref,
+		role: "switch",
+		type: "checkbox"
+	});
+	if (noChildren) return input;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SwitchWithLabel.SwitchWithLabel, {
+		className,
+		disabled,
+		id: htmlId,
+		input,
+		children
+	});
+});
+var Switch_default = (0, react.memo)(Switch);
+
+//#endregion
+exports.default = Switch_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Switch/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["memo","forwardRef","SwitchInput","SwitchInputProps","SwitchWithLabel","useId","SwitchProps","Switch","HTMLInputElement","children","onChange","disabled","className","id","props","ref","htmlId","noChildren","undefined","input"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { memo, forwardRef } from 'react'\nimport SwitchInput, { type SwitchInputProps } from './SwitchInput'\nimport { SwitchWithLabel } from './SwitchWithLabel'\nimport { useId } from 'react-aria/useId'\n\nexport type SwitchProps = SwitchInputProps\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  { children, onChange, disabled, className, id, ...props },\n  ref,\n) {\n  const htmlId = useId(id)\n  const noChildren = children === undefined\n  const input = (\n    <SwitchInput\n      {...props}\n      disabled={disabled}\n      className={noChildren ? className : undefined}\n      id={htmlId}\n      onChange={onChange}\n      ref={ref}\n      role=\"switch\"\n      type=\"checkbox\"\n    />\n  )\n\n  if (noChildren) {\n    return input\n  }\n\n  return (\n    <SwitchWithLabel\n      className={className}\n      disabled={disabled}\n      id={htmlId}\n      input={input}\n    >\n      {children}\n    </SwitchWithLabel>\n  )\n})\n\nexport default memo(Switch)\n"],"mappings":";;;;;;;;;;AASA,MAAMO,+BAAmD,SAASA,OAChE,EAAEE,UAAUC,UAAUC,UAAUC,WAAWC,IAAI,GAAGC,SAClDC,KACA;CACA,MAAMC,qCAAeH,GAAG;CACxB,MAAMI,aAAaR,aAAaS;CAChC,MAAMC,QACJ,2CAAC,yBAAD;EACE,GAAIL;EACMH;EACV,WAAWM,aAAaL,YAAYM;EACpC,IAAIF;EACMN;EACLK;EACL,MAAK;EACL,MAAK;EAER;CAED,IAAIE,YACF,OAAOE;CAGT,OACE,2CAAC,yCAAD;EACaP;EACDD;EACV,IAAIK;EACGG;EAENV;EACe;EAEpB;AAEF,qCAAoBF,OAAO"}

package/dist/components/Switch/index2.js

@@ -0,0 +1,36 @@
+"use client";
+/* empty css      */
+import SwitchInput from "./SwitchInput/index2.js";
+import { SwitchWithLabel } from "./SwitchWithLabel.js";
+import { forwardRef, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react-aria/useId";
+
+//#region src/components/Switch/index.tsx
+const Switch = forwardRef(function Switch({ children, onChange, disabled, className, id, ...props }, ref) {
+	const htmlId = useId(id);
+	const noChildren = children === void 0;
+	const input = /* @__PURE__ */ jsx(SwitchInput, {
+		...props,
+		disabled,
+		className: noChildren ? className : void 0,
+		id: htmlId,
+		onChange,
+		ref,
+		role: "switch",
+		type: "checkbox"
+	});
+	if (noChildren) return input;
+	return /* @__PURE__ */ jsx(SwitchWithLabel, {
+		className,
+		disabled,
+		id: htmlId,
+		input,
+		children
+	});
+});
+var Switch_default = memo(Switch);
+
+//#endregion
+export { Switch_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/Switch/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["memo","forwardRef","SwitchInput","SwitchInputProps","SwitchWithLabel","useId","SwitchProps","Switch","HTMLInputElement","children","onChange","disabled","className","id","props","ref","htmlId","noChildren","undefined","input"],"sources":["../../../src/components/Switch/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { memo, forwardRef } from 'react'\nimport SwitchInput, { type SwitchInputProps } from './SwitchInput'\nimport { SwitchWithLabel } from './SwitchWithLabel'\nimport { useId } from 'react-aria/useId'\n\nexport type SwitchProps = SwitchInputProps\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  { children, onChange, disabled, className, id, ...props },\n  ref,\n) {\n  const htmlId = useId(id)\n  const noChildren = children === undefined\n  const input = (\n    <SwitchInput\n      {...props}\n      disabled={disabled}\n      className={noChildren ? className : undefined}\n      id={htmlId}\n      onChange={onChange}\n      ref={ref}\n      role=\"switch\"\n      type=\"checkbox\"\n    />\n  )\n\n  if (noChildren) {\n    return input\n  }\n\n  return (\n    <SwitchWithLabel\n      className={className}\n      disabled={disabled}\n      id={htmlId}\n      input={input}\n    >\n      {children}\n    </SwitchWithLabel>\n  )\n})\n\nexport default memo(Switch)\n"],"mappings":";;;;;;;;;AASA,MAAMO,SAASN,WAA0C,SAASM,OAChE,EAAEE,UAAUC,UAAUC,UAAUC,WAAWC,IAAI,GAAGC,SAClDC,KACA;CACA,MAAMC,SAASX,MAAMQ,GAAG;CACxB,MAAMI,aAAaR,aAAaS;CAChC,MAAMC,QACJ,oBAAC,aAAD;EACE,GAAIL;EACMH;EACV,WAAWM,aAAaL,YAAYM;EACpC,IAAIF;EACMN;EACLK;EACL,MAAK;EACL,MAAK;EAER;CAED,IAAIE,YACF,OAAOE;CAGT,OACE,oBAAC,iBAAD;EACaP;EACDD;EACV,IAAIK;EACGG;EAENV;EACe;EAEpB;AAEF,qBAAeT,KAAKO,OAAO"}

package/dist/components/TagItem/index2.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+const require_index = require('../Icon/index.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useObjectRef = require("react-aria/useObjectRef");
+let react_aria = require("react-aria");
+
+//#region src/components/TagItem/index.tsx
+const TagItem = (0, react.forwardRef)(function TagItemInner({ component, label, translatedLabel, bgColor = "#7ACCB1", bgImage, size = "M", status = "default", disabled, "aria-disabled": ariaDisabled, ...props }, _ref) {
+	const ref = (0, react_aria_useObjectRef.useObjectRef)(_ref);
+	const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
+	const className = require_useClassNames.useClassNames("charcoal-tag-item", "charcoal-tag-item__bg", props.className);
+	const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
+	const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
+	const Component = (0, react.useMemo)(() => component ?? "a", [component]);
+	const isButton = Component === "button";
+	const { linkProps } = (0, react_aria.useLink)({
+		...props,
+		isDisabled: disabled,
+		elementType: typeof Component === "string" ? Component : "a"
+	}, ref);
+	const disabledProps = isButton ? {
+		disabled,
+		"aria-disabled": ariaDisabled
+	} : linkProps;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		...props,
+		...disabledProps,
+		ref,
+		className,
+		"data-state": status,
+		"data-bg-variant": bgVariant,
+		"data-size": hasTranslatedLabel ? "M" : size,
+		style: { "--charcoal-tag-item-bg": bg },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "charcoal-tag-item__label",
+			"data-has-translate": hasTranslatedLabel,
+			children: [hasTranslatedLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "charcoal-tag-item__label__translated",
+				children: translatedLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "charcoal-tag-item__label__text",
+				"data-has-translate": hasTranslatedLabel,
+				children: label
+			})]
+		}), status === "active" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { name: "16/Remove" })]
+	});
+});
+var TagItem_default = (0, react.memo)(TagItem);
+
+//#endregion
+exports.default = TagItem_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/TagItem/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["React","forwardRef","memo","useMemo","ForwardedRef","JSX","Icon","useClassNames","useObjectRef","useLink","SizeMap","S","M","TagItemProps","ElementType","label","translatedLabel","bgColor","bgImage","status","size","disabled","component","T","Omit","ComponentPropsWithRef","TagItem","HTMLAnchorElement","TagItemInner","ariaDisabled","props","_ref","ref","hasTranslatedLabel","undefined","length","className","bgVariant","bg","Component","isButton","linkProps","isDisabled","elementType","disabledProps","p","Element"],"sources":["../../../src/components/TagItem/index.tsx"],"sourcesContent":["import React, { forwardRef, memo, useMemo, ForwardedRef, type JSX } from 'react'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nimport { useObjectRef } from 'react-aria/useObjectRef'\nimport { useLink } from 'react-aria'\n\ntype SizeMap = {\n  S: 32\n  M: 40\n}\n\nexport type TagItemProps<T extends React.ElementType = 'a'> = {\n  label: string\n  translatedLabel?: string\n  bgColor?: string\n  bgImage?: string\n  status?: 'default' | 'active' | 'inactive'\n  size?: keyof SizeMap\n  disabled?: boolean\n  /**\n   * The component used for root element.\n   * @type T extends React.ElementType = 'a'\n   */\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'disabled'>\n\nconst TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(\n  function TagItemInner<T extends React.ElementType>(\n    {\n      component,\n      label,\n      translatedLabel,\n      bgColor = '#7ACCB1',\n      bgImage,\n      size = 'M',\n      status = 'default',\n      disabled,\n      'aria-disabled': ariaDisabled,\n      ...props\n    }: TagItemProps<T>,\n    _ref: ForwardedRef<HTMLAnchorElement>,\n  ) {\n    const ref = useObjectRef(_ref)\n\n    const hasTranslatedLabel =\n      translatedLabel !== undefined && translatedLabel.length > 0\n    const className = useClassNames(\n      'charcoal-tag-item',\n      'charcoal-tag-item__bg',\n      props.className,\n    )\n\n    const bgVariant =\n      bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'\n    const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`\n\n    const Component = useMemo(() => component ?? 'a', [component])\n    const isButton = Component === 'button'\n\n    const { linkProps } = useLink(\n      {\n        ...props,\n        isDisabled: disabled,\n        elementType: typeof Component === 'string' ? Component : 'a',\n      },\n      ref,\n    )\n\n    const disabledProps = isButton\n      ? { disabled, 'aria-disabled': ariaDisabled }\n      : linkProps\n\n    return (\n      <Component\n        {...props}\n        {...disabledProps}\n        ref={ref}\n        className={className}\n        data-state={status}\n        data-bg-variant={bgVariant}\n        data-size={hasTranslatedLabel ? 'M' : size}\n        style={{ '--charcoal-tag-item-bg': bg }}\n      >\n        <div\n          className=\"charcoal-tag-item__label\"\n          data-has-translate={hasTranslatedLabel}\n        >\n          {hasTranslatedLabel && (\n            <span className=\"charcoal-tag-item__label__translated\">\n              {translatedLabel}\n            </span>\n          )}\n          <span\n            className=\"charcoal-tag-item__label__text\"\n            data-has-translate={hasTranslatedLabel}\n          >\n            {label}\n          </span>\n        </div>\n        {status === 'active' && <Icon name=\"16/Remove\" />}\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'a'>(p: TagItemProps<T>) => JSX.Element\n\nexport default memo(TagItem)\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM0B,gCACJ,SAASE,aACP,EACEN,WACAP,OACAC,iBACAC,UAAU,WACVC,SACAE,OAAO,KACPD,SAAS,WACTE,UACA,iBAAiBQ,cACjB,GAAGC,SAELC,MACA;CACA,MAAMC,gDAAmBD,KAAK;CAE9B,MAAME,qBACJjB,oBAAoBkB,UAAalB,gBAAgBmB,SAAS;CAC5D,MAAMC,YAAY7B,oCAChB,qBACA,yBACAuB,MAAMM,UACP;CAED,MAAMC,YACJnB,YAAYgB,UAAahB,QAAQiB,SAAS,IAAI,UAAU;CAC1D,MAAMG,KAAKD,cAAc,UAAUpB,UAAU,OAAOC,WAAW,GAAE;CAEjE,MAAMqB,qCAA0BjB,aAAa,KAAK,CAACA,UAAU,CAAC;CAC9D,MAAMkB,WAAWD,cAAc;CAE/B,MAAM,EAAEE,sCACN;EACE,GAAGX;EACHY,YAAYrB;EACZsB,aAAa,OAAOJ,cAAc,WAAWA,YAAY;EAC1D,EACDP,IACD;CAED,MAAMY,gBAAgBJ,WAClB;EAAEnB;EAAU,iBAAiBQ;EAAc,GAC3CY;CAEJ,OACE,4CAAC,WAAD;EACE,GAAIX;EACJ,GAAIc;EACCZ;EACMI;EACX,cAAYjB;EACZ,mBAAiBkB;EACjB,aAAWJ,qBAAqB,MAAMb;EACtC,OAAO,EAAE,0BAA0BkB,IAAI;YARzC,CAUE,4CAAC,OAAD;GACE,WAAU;GACV,sBAAoBL;aAFtB,CAIGA,sBACC,2CAAC,QAAD;IAAM,WAAU;cACbjB;IAEJ,GACD,2CAAC,QAAD;IACE,WAAU;IACV,sBAAoBiB;cAEnBlB;IACG,EACH;MACJI,WAAW,YAAY,2CAAC,uBAAD,EAAM,MAAK,aAAc,EACvC;;EAGjB;AAED,sCAAoBO,QAAQ"}

package/dist/components/TagItem/index2.js

@@ -0,0 +1,55 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import Icon from "../Icon/index.js";
+/* empty css      */
+import React, { forwardRef, memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria/useObjectRef";
+import { useLink } from "react-aria";
+
+//#region src/components/TagItem/index.tsx
+const TagItem = forwardRef(function TagItemInner({ component, label, translatedLabel, bgColor = "#7ACCB1", bgImage, size = "M", status = "default", disabled, "aria-disabled": ariaDisabled, ...props }, _ref) {
+	const ref = useObjectRef(_ref);
+	const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
+	const className = useClassNames("charcoal-tag-item", "charcoal-tag-item__bg", props.className);
+	const bgVariant = bgImage !== void 0 && bgImage.length > 0 ? "image" : "color";
+	const bg = bgVariant === "color" ? bgColor : `url(${bgImage ?? ""})`;
+	const Component = useMemo(() => component ?? "a", [component]);
+	const isButton = Component === "button";
+	const { linkProps } = useLink({
+		...props,
+		isDisabled: disabled,
+		elementType: typeof Component === "string" ? Component : "a"
+	}, ref);
+	const disabledProps = isButton ? {
+		disabled,
+		"aria-disabled": ariaDisabled
+	} : linkProps;
+	return /* @__PURE__ */ jsxs(Component, {
+		...props,
+		...disabledProps,
+		ref,
+		className,
+		"data-state": status,
+		"data-bg-variant": bgVariant,
+		"data-size": hasTranslatedLabel ? "M" : size,
+		style: { "--charcoal-tag-item-bg": bg },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "charcoal-tag-item__label",
+			"data-has-translate": hasTranslatedLabel,
+			children: [hasTranslatedLabel && /* @__PURE__ */ jsx("span", {
+				className: "charcoal-tag-item__label__translated",
+				children: translatedLabel
+			}), /* @__PURE__ */ jsx("span", {
+				className: "charcoal-tag-item__label__text",
+				"data-has-translate": hasTranslatedLabel,
+				children: label
+			})]
+		}), status === "active" && /* @__PURE__ */ jsx(Icon, { name: "16/Remove" })]
+	});
+});
+var TagItem_default = memo(TagItem);
+
+//#endregion
+export { TagItem_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/TagItem/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["React","forwardRef","memo","useMemo","ForwardedRef","JSX","Icon","useClassNames","useObjectRef","useLink","SizeMap","S","M","TagItemProps","ElementType","label","translatedLabel","bgColor","bgImage","status","size","disabled","component","T","Omit","ComponentPropsWithRef","TagItem","HTMLAnchorElement","TagItemInner","ariaDisabled","props","_ref","ref","hasTranslatedLabel","undefined","length","className","bgVariant","bg","Component","isButton","linkProps","isDisabled","elementType","disabledProps","p","Element"],"sources":["../../../src/components/TagItem/index.tsx"],"sourcesContent":["import React, { forwardRef, memo, useMemo, ForwardedRef, type JSX } from 'react'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nimport { useObjectRef } from 'react-aria/useObjectRef'\nimport { useLink } from 'react-aria'\n\ntype SizeMap = {\n  S: 32\n  M: 40\n}\n\nexport type TagItemProps<T extends React.ElementType = 'a'> = {\n  label: string\n  translatedLabel?: string\n  bgColor?: string\n  bgImage?: string\n  status?: 'default' | 'active' | 'inactive'\n  size?: keyof SizeMap\n  disabled?: boolean\n  /**\n   * The component used for root element.\n   * @type T extends React.ElementType = 'a'\n   */\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'disabled'>\n\nconst TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(\n  function TagItemInner<T extends React.ElementType>(\n    {\n      component,\n      label,\n      translatedLabel,\n      bgColor = '#7ACCB1',\n      bgImage,\n      size = 'M',\n      status = 'default',\n      disabled,\n      'aria-disabled': ariaDisabled,\n      ...props\n    }: TagItemProps<T>,\n    _ref: ForwardedRef<HTMLAnchorElement>,\n  ) {\n    const ref = useObjectRef(_ref)\n\n    const hasTranslatedLabel =\n      translatedLabel !== undefined && translatedLabel.length > 0\n    const className = useClassNames(\n      'charcoal-tag-item',\n      'charcoal-tag-item__bg',\n      props.className,\n    )\n\n    const bgVariant =\n      bgImage !== undefined && bgImage.length > 0 ? 'image' : 'color'\n    const bg = bgVariant === 'color' ? bgColor : `url(${bgImage ?? ''})`\n\n    const Component = useMemo(() => component ?? 'a', [component])\n    const isButton = Component === 'button'\n\n    const { linkProps } = useLink(\n      {\n        ...props,\n        isDisabled: disabled,\n        elementType: typeof Component === 'string' ? Component : 'a',\n      },\n      ref,\n    )\n\n    const disabledProps = isButton\n      ? { disabled, 'aria-disabled': ariaDisabled }\n      : linkProps\n\n    return (\n      <Component\n        {...props}\n        {...disabledProps}\n        ref={ref}\n        className={className}\n        data-state={status}\n        data-bg-variant={bgVariant}\n        data-size={hasTranslatedLabel ? 'M' : size}\n        style={{ '--charcoal-tag-item-bg': bg }}\n      >\n        <div\n          className=\"charcoal-tag-item__label\"\n          data-has-translate={hasTranslatedLabel}\n        >\n          {hasTranslatedLabel && (\n            <span className=\"charcoal-tag-item__label__translated\">\n              {translatedLabel}\n            </span>\n          )}\n          <span\n            className=\"charcoal-tag-item__label__text\"\n            data-has-translate={hasTranslatedLabel}\n          >\n            {label}\n          </span>\n        </div>\n        {status === 'active' && <Icon name=\"16/Remove\" />}\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'a'>(p: TagItemProps<T>) => JSX.Element\n\nexport default memo(TagItem)\n"],"mappings":";;;;;;;;;;AA4BA,MAAM0B,UAAUzB,WACd,SAAS2B,aACP,EACEN,WACAP,OACAC,iBACAC,UAAU,WACVC,SACAE,OAAO,KACPD,SAAS,WACTE,UACA,iBAAiBQ,cACjB,GAAGC,SAELC,MACA;CACA,MAAMC,MAAMxB,aAAauB,KAAK;CAE9B,MAAME,qBACJjB,oBAAoBkB,UAAalB,gBAAgBmB,SAAS;CAC5D,MAAMC,YAAY7B,cAChB,qBACA,yBACAuB,MAAMM,UACP;CAED,MAAMC,YACJnB,YAAYgB,UAAahB,QAAQiB,SAAS,IAAI,UAAU;CAC1D,MAAMG,KAAKD,cAAc,UAAUpB,UAAU,OAAOC,WAAW,GAAE;CAEjE,MAAMqB,YAAYpC,cAAcmB,aAAa,KAAK,CAACA,UAAU,CAAC;CAC9D,MAAMkB,WAAWD,cAAc;CAE/B,MAAM,EAAEE,cAAchC,QACpB;EACE,GAAGqB;EACHY,YAAYrB;EACZsB,aAAa,OAAOJ,cAAc,WAAWA,YAAY;EAC1D,EACDP,IACD;CAED,MAAMY,gBAAgBJ,WAClB;EAAEnB;EAAU,iBAAiBQ;EAAc,GAC3CY;CAEJ,OACE,qBAAC,WAAD;EACE,GAAIX;EACJ,GAAIc;EACCZ;EACMI;EACX,cAAYjB;EACZ,mBAAiBkB;EACjB,aAAWJ,qBAAqB,MAAMb;EACtC,OAAO,EAAE,0BAA0BkB,IAAI;YARzC,CAUE,qBAAC,OAAD;GACE,WAAU;GACV,sBAAoBL;aAFtB,CAIGA,sBACC,oBAAC,QAAD;IAAM,WAAU;cACbjB;IAEJ,GACD,oBAAC,QAAD;IACE,WAAU;IACV,sBAAoBiB;cAEnBlB;IACG,EACH;MACJI,WAAW,YAAY,oBAAC,MAAD,EAAM,MAAK,aAAc,EACvC;;EAGjB;AAED,sBAAejB,KAAKwB,QAAQ"}

package/dist/components/TextArea/index2.cjs

@@ -0,0 +1,134 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+const require_index = require('../FieldLabel/index2.cjs');
+const require_index$1 = require('../../_lib/index.cjs');
+const require_useFocusWithClick = require('../TextField/useFocusWithClick.cjs');
+const require_index$2 = require('../TextField/AssistiveText/index2.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useId = require("react-aria/useId");
+let react_aria_VisuallyHidden = require("react-aria/VisuallyHidden");
+
+//#region src/components/TextArea/index.tsx
+const TextArea = (0, react.forwardRef)(function TextAreaInner({ onChange, className, value, showCount = false, showLabel = false, label = "", requiredText, subLabel, disabled = false, required, assistiveText, maxLength, autoHeight = false, rows: initialRows = 4, maxRows, invalid, getCount = require_index$1.countCodePointsInString, defaultValue, imperativeRef, ...props }, forwardRef) {
+	const isUncontrolled = value === void 0;
+	const countValue = value ?? defaultValue?.toString() ?? "";
+	const [rows, setRows] = (0, react.useState)(initialRows);
+	const [count, setCount] = (0, react.useState)(getCount(countValue));
+	const textareaRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	require_useFocusWithClick.useFocusWithClick(containerRef, textareaRef);
+	const { visuallyHiddenProps } = (0, react_aria_VisuallyHidden.useVisuallyHidden)();
+	const isEnableAutoHeight = (0, react.useMemo)(() => autoHeight || maxRows && maxRows >= 0, [autoHeight, maxRows]);
+	const classNames = require_useClassNames.useClassNames("charcoal-text-area-root", className);
+	const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+	const syncHeight = (0, react.useCallback)((textarea) => {
+		const currentRows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1;
+		const hasValidMaxRows = maxRows !== void 0 && maxRows >= 1;
+		const nextRows = initialRows <= currentRows ? currentRows : initialRows;
+		if (!hasValidMaxRows) {
+			setRows(nextRows);
+			return;
+		}
+		setRows(Math.min(nextRows, maxRows));
+	}, [initialRows, maxRows]);
+	const syncTextAreaState = (0, react.useCallback)((textarea) => {
+		const count = getCount(textarea.value);
+		if (isUncontrolled) setCount(count);
+		if (isEnableAutoHeight) syncHeight(textarea);
+		return count;
+	}, [
+		getCount,
+		isEnableAutoHeight,
+		isUncontrolled,
+		syncHeight
+	]);
+	const handleChange = (0, react.useCallback)((e) => {
+		const value = e.currentTarget.value;
+		const count = getCount(value);
+		if (maxLength !== void 0 && count > maxLength) return;
+		syncTextAreaState(e.currentTarget);
+		onChange?.(value);
+	}, [
+		getCount,
+		maxLength,
+		onChange,
+		syncTextAreaState
+	]);
+	(0, react.useImperativeHandle)(imperativeRef, () => ({
+		setValue: (value) => {
+			if (textareaRef.current === null) return;
+			textareaRef.current.value = value;
+			syncTextAreaState(textareaRef.current);
+		},
+		sync: () => {
+			if (textareaRef.current !== null) syncTextAreaState(textareaRef.current);
+		}
+	}), [syncTextAreaState]);
+	const textAreaId = (0, react_aria_useId.useId)(props.id);
+	const describedbyId = (0, react_aria_useId.useId)();
+	const labelledbyId = (0, react_aria_useId.useId)();
+	(0, react.useEffect)(() => {
+		if (!isUncontrolled) setCount(getCount(countValue));
+		if (isEnableAutoHeight && textareaRef.current !== null) syncHeight(textareaRef.current);
+	}, [
+		isUncontrolled,
+		countValue,
+		getCount,
+		isEnableAutoHeight,
+		textareaRef,
+		syncHeight
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classNames,
+		"aria-disabled": disabled,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				htmlFor: textAreaId,
+				id: labelledbyId,
+				label,
+				required,
+				requiredText,
+				subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "charcoal-text-area-container",
+				"aria-disabled": disabled === true ? "true" : void 0,
+				"aria-invalid": invalid === true,
+				ref: containerRef,
+				style: { "--charcoal-text-area-rows": rows },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					className: "charcoal-text-area-textarea",
+					"aria-describedby": showAssistiveText ? describedbyId : void 0,
+					"aria-invalid": invalid,
+					"aria-labelledby": labelledbyId,
+					id: textAreaId,
+					maxLength,
+					"data-no-bottom-padding": showCount,
+					onChange: handleChange,
+					ref: require_index$1.mergeRefs(forwardRef, textareaRef),
+					rows,
+					value,
+					disabled,
+					defaultValue,
+					...props
+				}), showCount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "charcoal-text-area-counter",
+					children: maxLength !== void 0 ? `${count}/${maxLength}` : count
+				})]
+			}),
+			showAssistiveText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.AssistiveText, {
+				"data-invalid": invalid === true,
+				id: describedbyId,
+				children: assistiveText
+			})
+		]
+	});
+});
+
+//#endregion
+exports.default = TextArea;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/TextArea/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","FieldLabel","countCodePointsInString","mergeRefs","useFocusWithClick","AssistiveText","useClassNames","useVisuallyHidden","useId","TextAreaImperativeHandle","setValue","value","sync","TextAreaProps","onChange","imperativeRef","React","Ref","showCount","showLabel","assistiveText","invalid","label","requiredText","disabled","subLabel","ReactNode","autoHeight","maxRows","getCount","Omit","ComponentPropsWithoutRef","TextArea","HTMLTextAreaElement","TextAreaInner","className","required","maxLength","rows","initialRows","defaultValue","props","isUncontrolled","undefined","countValue","toString","setRows","count","setCount","textareaRef","containerRef","visuallyHiddenProps","isEnableAutoHeight","classNames","showAssistiveText","length","syncHeight","textarea","currentRows","match","hasValidMaxRows","nextRows","Math","min","syncTextAreaState","handleChange","e","ChangeEvent","currentTarget","current","textAreaId","id","describedbyId","labelledbyId"],"sources":["../../../src/components/TextArea/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from '../TextField/useFocusWithClick'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\n/**\n * `TextArea` を `imperativeRef` から操作するためのハンドル\n */\nexport type TextAreaImperativeHandle = {\n  /**\n   * textarea の値を更新し、文字数や高さなどの内部状態を同期する\n   */\n  setValue: (value: string) => void\n  /**\n   * textarea の現在の値をもとに、文字数や高さなどの内部状態を同期する\n   */\n  sync: () => void\n}\n\nexport type TextAreaProps = {\n  value?: string\n  onChange?: (value: string) => void\n  imperativeRef?: React.Ref<TextAreaImperativeHandle>\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  autoHeight?: boolean\n\n  maxRows?: number\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'textarea'>, 'onChange'>\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextAreaInner(\n    {\n      onChange,\n      className,\n      value,\n      showCount = false,\n      showLabel = false,\n      label = '',\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      assistiveText,\n      maxLength,\n      autoHeight = false,\n      rows: initialRows = 4,\n      maxRows,\n      invalid,\n      getCount = countCodePointsInString,\n      defaultValue,\n      imperativeRef,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const isUncontrolled = value === undefined\n    // `null` is invalid for TextAreaProps, but may arrive at runtime. Keep the\n    // pre-f710d512 nullish fallback so getCount is never called with null.\n    const countValue = value ?? defaultValue?.toString() ?? ''\n    const [rows, setRows] = useState(initialRows)\n    const [count, setCount] = useState(getCount(countValue))\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const containerRef = useRef(null)\n    useFocusWithClick(containerRef, textareaRef)\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const isEnableAutoHeight = useMemo(\n      () => autoHeight || (maxRows && maxRows >= 0),\n      [autoHeight, maxRows],\n    )\n    const classNames = useClassNames('charcoal-text-area-root', className)\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const syncHeight = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const currentRows =\n          (`${textarea.value}\\n`.match(/\\n/gu)?.length ?? 0) || 1\n        const hasValidMaxRows = maxRows !== undefined && maxRows >= 1\n        const nextRows = initialRows <= currentRows ? currentRows : initialRows\n\n        if (!hasValidMaxRows) {\n          setRows(nextRows)\n          return\n        }\n\n        setRows(Math.min(nextRows, maxRows))\n      },\n      [initialRows, maxRows],\n    )\n\n    const syncTextAreaState = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const count = getCount(textarea.value)\n\n        if (isUncontrolled) {\n          setCount(count)\n        }\n\n        if (isEnableAutoHeight) {\n          syncHeight(textarea)\n        }\n\n        return count\n      },\n      [getCount, isEnableAutoHeight, isUncontrolled, syncHeight],\n    )\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const value = e.currentTarget.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n\n        syncTextAreaState(e.currentTarget)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange, syncTextAreaState],\n    )\n\n    useImperativeHandle(\n      imperativeRef,\n      () => ({\n        setValue: (value: string) => {\n          if (textareaRef.current === null) {\n            return\n          }\n\n          textareaRef.current.value = value\n          syncTextAreaState(textareaRef.current)\n        },\n        sync: () => {\n          if (textareaRef.current !== null) {\n            syncTextAreaState(textareaRef.current)\n          }\n        },\n      }),\n      [syncTextAreaState],\n    )\n\n    const textAreaId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    useEffect(() => {\n      // 制御コンポーネントの時の挙動\n      if (!isUncontrolled) {\n        setCount(getCount(countValue))\n      }\n\n      //　autoHeight同期(valueが変更された時にsyncHeightしたい)\n      if (isEnableAutoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n    }, [\n      isUncontrolled,\n      countValue,\n      getCount,\n      isEnableAutoHeight,\n      textareaRef,\n      syncHeight,\n    ])\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={textAreaId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-area-container\"\n          aria-disabled={disabled === true ? 'true' : undefined}\n          aria-invalid={invalid === true}\n          ref={containerRef}\n          style={{\n            '--charcoal-text-area-rows': rows,\n          }}\n        >\n          <textarea\n            className=\"charcoal-text-area-textarea\"\n            aria-describedby={showAssistiveText ? describedbyId : undefined}\n            aria-invalid={invalid}\n            aria-labelledby={labelledbyId}\n            id={textAreaId}\n            maxLength={maxLength}\n            data-no-bottom-padding={showCount}\n            onChange={handleChange}\n            ref={mergeRefs(forwardRef, textareaRef)}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...props}\n          />\n          {showCount && (\n            <span className=\"charcoal-text-area-counter\">\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </span>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextArea\n"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAMsC,iCACJ,SAASE,cACP,EACEpB,UACAqB,WACAxB,OACAO,YAAY,OACZC,YAAY,OACZG,QAAQ,IACRC,cACAE,UACAD,WAAW,OACXY,UACAhB,eACAiB,WACAV,aAAa,OACbW,MAAMC,cAAc,GACpBX,SACAP,SACAQ,WAAW3B,yCACXsC,cACAzB,eACA,GAAG0B,SAEL/C,YACA;CACA,MAAMgD,iBAAiB/B,UAAUgC;CAGjC,MAAMC,aAAajC,SAAS6B,cAAcK,UAAU,IAAI;CACxD,MAAM,CAACP,MAAMQ,+BAAoBP,YAAY;CAC7C,MAAM,CAACQ,OAAOC,gCAAqBnB,SAASe,WAAW,CAAC;CAExD,MAAMK,gCAA0C,KAAK;CACrD,MAAMC,iCAAsB,KAAK;CACjC9C,4CAAkB8C,cAAcD,YAAY;CAC5C,MAAM,EAAEE,0EAA2C;CAEnD,MAAMC,8CACEzB,cAAeC,WAAWA,WAAW,GAC3C,CAACD,YAAYC,QACf,CAAC;CACD,MAAMyB,aAAa/C,oCAAc,2BAA2B6B,UAAU;CACtE,MAAMmB,oBACJlC,iBAAiB,QAAQA,cAAcmC,WAAW;CAEpD,MAAMC,qCACHC,aAAkC;EACjC,MAAMC,eACH,GAAGD,SAAS9C,MAAK,IAAKgD,MAAM,OAAO,EAAEJ,UAAU,MAAM;EACxD,MAAMK,kBAAkBhC,YAAYe,UAAaf,WAAW;EAC5D,MAAMiC,WAAWtB,eAAemB,cAAcA,cAAcnB;EAE5D,IAAI,CAACqB,iBAAiB;GACpBd,QAAQe,SAAS;GACjB;;EAGFf,QAAQgB,KAAKC,IAAIF,UAAUjC,QAAQ,CAAC;IAEtC,CAACW,aAAaX,QAChB,CAAC;CAED,MAAMoC,4CACHP,aAAkC;EACjC,MAAMV,QAAQlB,SAAS4B,SAAS9C,MAAM;EAEtC,IAAI+B,gBACFM,SAASD,MAAM;EAGjB,IAAIK,oBACFI,WAAWC,SAAS;EAGtB,OAAOV;IAET;EAAClB;EAAUuB;EAAoBV;EAAgBc;EACjD,CAAC;CAED,MAAMS,uCACHC,MAA8C;EAC7C,MAAMvD,QAAQuD,EAAEE,cAAczD;EAC9B,MAAMoC,QAAQlB,SAASlB,MAAM;EAC7B,IAAI0B,cAAcM,UAAaI,QAAQV,WACrC;EAGF2B,kBAAkBE,EAAEE,cAAc;EAClCtD,WAAWH,MAAM;IAEnB;EAACkB;EAAUQ;EAAWvB;EAAUkD;EAClC,CAAC;CAEDnE,+BACEkB,sBACO;EACLL,WAAWC,UAAkB;GAC3B,IAAIsC,YAAYoB,YAAY,MAC1B;GAGFpB,YAAYoB,QAAQ1D,QAAQA;GAC5BqD,kBAAkBf,YAAYoB,QAAQ;;EAExCzD,YAAY;GACV,IAAIqC,YAAYoB,YAAY,MAC1BL,kBAAkBf,YAAYoB,QAAQ;;EAG3C,GACD,CAACL,kBACH,CAAC;CAED,MAAMM,yCAAmB7B,MAAM8B,GAAG;CAClC,MAAMC,6CAAuB;CAC7B,MAAMC,4CAAsB;CAE5B7E,2BAAgB;EAEd,IAAI,CAAC8C,gBACHM,SAASnB,SAASe,WAAW,CAAC;EAIhC,IAAIQ,sBAAsBH,YAAYoB,YAAY,MAChDb,WAAWP,YAAYoB,QAAQ;IAEhC;EACD3B;EACAE;EACAf;EACAuB;EACAH;EACAO;EACD,CAAC;CAEF,OACE,4CAAC,OAAD;EAAK,WAAWH;EAAY,iBAAe7B;YAA3C;GACE,2CAAC,uBAAD;IACE,SAAS8C;IACT,IAAIG;IACGnD;IACGc;IACIb;IACJE;IACV,GAAK,CAACN,YAAYgC,sBAAsB,EAAG;IAAC;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAe3B,aAAa,OAAO,SAASmB;IAC5C,gBAActB,YAAY;IAC1B,KAAK6B;IACL,OAAO,EACL,6BAA6BZ,MAC9B;cAPH,CASE,2CAAC,YAAD;KACE,WAAU;KACV,oBAAkBgB,oBAAoBkB,gBAAgB7B;KACtD,gBAActB;KACd,mBAAiBoD;KACjB,IAAIH;KACOjC;KACX,0BAAwBnB;KACxB,UAAU+C;KACV,KAAK9D,0BAAUT,YAAYuD,YAAY;KACjCX;KACC3B;KACGa;KACIgB;KACd,GAAIC;KAAM,GAEXvB,aACC,2CAAC,QAAD;KAAM,WAAU;eACbmB,cAAcM,SAAY,GAAGI,MAAK,GAAIV,cAAcU;KAExD,EACE;;GACJO,qBACC,2CAAC,+BAAD;IAAe,gBAAcjC,YAAY;IAAM,IAAImD;cAChDpD;IAEJ;GACG;;EAGX"}

package/dist/components/TextArea/index2.js

@@ -0,0 +1,133 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import FieldLabel from "../FieldLabel/index2.js";
+import { countCodePointsInString, mergeRefs } from "../../_lib/index.js";
+import { useFocusWithClick } from "../TextField/useFocusWithClick.js";
+import { AssistiveText } from "../TextField/AssistiveText/index2.js";
+/* empty css      */
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react-aria/useId";
+import { useVisuallyHidden } from "react-aria/VisuallyHidden";
+
+//#region src/components/TextArea/index.tsx
+const TextArea = forwardRef(function TextAreaInner({ onChange, className, value, showCount = false, showLabel = false, label = "", requiredText, subLabel, disabled = false, required, assistiveText, maxLength, autoHeight = false, rows: initialRows = 4, maxRows, invalid, getCount = countCodePointsInString, defaultValue, imperativeRef, ...props }, forwardRef) {
+	const isUncontrolled = value === void 0;
+	const countValue = value ?? defaultValue?.toString() ?? "";
+	const [rows, setRows] = useState(initialRows);
+	const [count, setCount] = useState(getCount(countValue));
+	const textareaRef = useRef(null);
+	const containerRef = useRef(null);
+	useFocusWithClick(containerRef, textareaRef);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	const isEnableAutoHeight = useMemo(() => autoHeight || maxRows && maxRows >= 0, [autoHeight, maxRows]);
+	const classNames = useClassNames("charcoal-text-area-root", className);
+	const showAssistiveText = assistiveText != null && assistiveText.length !== 0;
+	const syncHeight = useCallback((textarea) => {
+		const currentRows = (`${textarea.value}\n`.match(/\n/gu)?.length ?? 0) || 1;
+		const hasValidMaxRows = maxRows !== void 0 && maxRows >= 1;
+		const nextRows = initialRows <= currentRows ? currentRows : initialRows;
+		if (!hasValidMaxRows) {
+			setRows(nextRows);
+			return;
+		}
+		setRows(Math.min(nextRows, maxRows));
+	}, [initialRows, maxRows]);
+	const syncTextAreaState = useCallback((textarea) => {
+		const count = getCount(textarea.value);
+		if (isUncontrolled) setCount(count);
+		if (isEnableAutoHeight) syncHeight(textarea);
+		return count;
+	}, [
+		getCount,
+		isEnableAutoHeight,
+		isUncontrolled,
+		syncHeight
+	]);
+	const handleChange = useCallback((e) => {
+		const value = e.currentTarget.value;
+		const count = getCount(value);
+		if (maxLength !== void 0 && count > maxLength) return;
+		syncTextAreaState(e.currentTarget);
+		onChange?.(value);
+	}, [
+		getCount,
+		maxLength,
+		onChange,
+		syncTextAreaState
+	]);
+	useImperativeHandle(imperativeRef, () => ({
+		setValue: (value) => {
+			if (textareaRef.current === null) return;
+			textareaRef.current.value = value;
+			syncTextAreaState(textareaRef.current);
+		},
+		sync: () => {
+			if (textareaRef.current !== null) syncTextAreaState(textareaRef.current);
+		}
+	}), [syncTextAreaState]);
+	const textAreaId = useId(props.id);
+	const describedbyId = useId();
+	const labelledbyId = useId();
+	useEffect(() => {
+		if (!isUncontrolled) setCount(getCount(countValue));
+		if (isEnableAutoHeight && textareaRef.current !== null) syncHeight(textareaRef.current);
+	}, [
+		isUncontrolled,
+		countValue,
+		getCount,
+		isEnableAutoHeight,
+		textareaRef,
+		syncHeight
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames,
+		"aria-disabled": disabled,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: textAreaId,
+				id: labelledbyId,
+				label,
+				required,
+				requiredText,
+				subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "charcoal-text-area-container",
+				"aria-disabled": disabled === true ? "true" : void 0,
+				"aria-invalid": invalid === true,
+				ref: containerRef,
+				style: { "--charcoal-text-area-rows": rows },
+				children: [/* @__PURE__ */ jsx("textarea", {
+					className: "charcoal-text-area-textarea",
+					"aria-describedby": showAssistiveText ? describedbyId : void 0,
+					"aria-invalid": invalid,
+					"aria-labelledby": labelledbyId,
+					id: textAreaId,
+					maxLength,
+					"data-no-bottom-padding": showCount,
+					onChange: handleChange,
+					ref: mergeRefs(forwardRef, textareaRef),
+					rows,
+					value,
+					disabled,
+					defaultValue,
+					...props
+				}), showCount && /* @__PURE__ */ jsx("span", {
+					className: "charcoal-text-area-counter",
+					children: maxLength !== void 0 ? `${count}/${maxLength}` : count
+				})]
+			}),
+			showAssistiveText && /* @__PURE__ */ jsx(AssistiveText, {
+				"data-invalid": invalid === true,
+				id: describedbyId,
+				children: assistiveText
+			})
+		]
+	});
+});
+
+//#endregion
+export { TextArea as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/TextArea/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","FieldLabel","countCodePointsInString","mergeRefs","useFocusWithClick","AssistiveText","useClassNames","useVisuallyHidden","useId","TextAreaImperativeHandle","setValue","value","sync","TextAreaProps","onChange","imperativeRef","React","Ref","showCount","showLabel","assistiveText","invalid","label","requiredText","disabled","subLabel","ReactNode","autoHeight","maxRows","getCount","Omit","ComponentPropsWithoutRef","TextArea","HTMLTextAreaElement","TextAreaInner","className","required","maxLength","rows","initialRows","defaultValue","props","isUncontrolled","undefined","countValue","toString","setRows","count","setCount","textareaRef","containerRef","visuallyHiddenProps","isEnableAutoHeight","classNames","showAssistiveText","length","syncHeight","textarea","currentRows","match","hasValidMaxRows","nextRows","Math","min","syncTextAreaState","handleChange","e","ChangeEvent","currentTarget","current","textAreaId","id","describedbyId","labelledbyId"],"sources":["../../../src/components/TextArea/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from '../TextField/useFocusWithClick'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\n/**\n * `TextArea` を `imperativeRef` から操作するためのハンドル\n */\nexport type TextAreaImperativeHandle = {\n  /**\n   * textarea の値を更新し、文字数や高さなどの内部状態を同期する\n   */\n  setValue: (value: string) => void\n  /**\n   * textarea の現在の値をもとに、文字数や高さなどの内部状態を同期する\n   */\n  sync: () => void\n}\n\nexport type TextAreaProps = {\n  value?: string\n  onChange?: (value: string) => void\n  imperativeRef?: React.Ref<TextAreaImperativeHandle>\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  autoHeight?: boolean\n\n  maxRows?: number\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'textarea'>, 'onChange'>\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextAreaInner(\n    {\n      onChange,\n      className,\n      value,\n      showCount = false,\n      showLabel = false,\n      label = '',\n      requiredText,\n      subLabel,\n      disabled = false,\n      required,\n      assistiveText,\n      maxLength,\n      autoHeight = false,\n      rows: initialRows = 4,\n      maxRows,\n      invalid,\n      getCount = countCodePointsInString,\n      defaultValue,\n      imperativeRef,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const isUncontrolled = value === undefined\n    // `null` is invalid for TextAreaProps, but may arrive at runtime. Keep the\n    // pre-f710d512 nullish fallback so getCount is never called with null.\n    const countValue = value ?? defaultValue?.toString() ?? ''\n    const [rows, setRows] = useState(initialRows)\n    const [count, setCount] = useState(getCount(countValue))\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null)\n    const containerRef = useRef(null)\n    useFocusWithClick(containerRef, textareaRef)\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const isEnableAutoHeight = useMemo(\n      () => autoHeight || (maxRows && maxRows >= 0),\n      [autoHeight, maxRows],\n    )\n    const classNames = useClassNames('charcoal-text-area-root', className)\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const syncHeight = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const currentRows =\n          (`${textarea.value}\\n`.match(/\\n/gu)?.length ?? 0) || 1\n        const hasValidMaxRows = maxRows !== undefined && maxRows >= 1\n        const nextRows = initialRows <= currentRows ? currentRows : initialRows\n\n        if (!hasValidMaxRows) {\n          setRows(nextRows)\n          return\n        }\n\n        setRows(Math.min(nextRows, maxRows))\n      },\n      [initialRows, maxRows],\n    )\n\n    const syncTextAreaState = useCallback(\n      (textarea: HTMLTextAreaElement) => {\n        const count = getCount(textarea.value)\n\n        if (isUncontrolled) {\n          setCount(count)\n        }\n\n        if (isEnableAutoHeight) {\n          syncHeight(textarea)\n        }\n\n        return count\n      },\n      [getCount, isEnableAutoHeight, isUncontrolled, syncHeight],\n    )\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const value = e.currentTarget.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n\n        syncTextAreaState(e.currentTarget)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange, syncTextAreaState],\n    )\n\n    useImperativeHandle(\n      imperativeRef,\n      () => ({\n        setValue: (value: string) => {\n          if (textareaRef.current === null) {\n            return\n          }\n\n          textareaRef.current.value = value\n          syncTextAreaState(textareaRef.current)\n        },\n        sync: () => {\n          if (textareaRef.current !== null) {\n            syncTextAreaState(textareaRef.current)\n          }\n        },\n      }),\n      [syncTextAreaState],\n    )\n\n    const textAreaId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    useEffect(() => {\n      // 制御コンポーネントの時の挙動\n      if (!isUncontrolled) {\n        setCount(getCount(countValue))\n      }\n\n      //　autoHeight同期(valueが変更された時にsyncHeightしたい)\n      if (isEnableAutoHeight && textareaRef.current !== null) {\n        syncHeight(textareaRef.current)\n      }\n    }, [\n      isUncontrolled,\n      countValue,\n      getCount,\n      isEnableAutoHeight,\n      textareaRef,\n      syncHeight,\n    ])\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={textAreaId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-area-container\"\n          aria-disabled={disabled === true ? 'true' : undefined}\n          aria-invalid={invalid === true}\n          ref={containerRef}\n          style={{\n            '--charcoal-text-area-rows': rows,\n          }}\n        >\n          <textarea\n            className=\"charcoal-text-area-textarea\"\n            aria-describedby={showAssistiveText ? describedbyId : undefined}\n            aria-invalid={invalid}\n            aria-labelledby={labelledbyId}\n            id={textAreaId}\n            maxLength={maxLength}\n            data-no-bottom-padding={showCount}\n            onChange={handleChange}\n            ref={mergeRefs(forwardRef, textareaRef)}\n            rows={rows}\n            value={value}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...props}\n          />\n          {showCount && (\n            <span className=\"charcoal-text-area-counter\">\n              {maxLength !== undefined ? `${count}/${maxLength}` : count}\n            </span>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextArea\n"],"mappings":"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"}