@charcoal-ui/react 6.0.0-rc.6 → 6.0.0-rc.8

package/dist/components/DropdownSelector/index2.js

@@ -0,0 +1,111 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import Icon from "../Icon/index.js";
+import FieldLabel from "../FieldLabel/index2.js";
+import { AssistiveText } from "../TextField/AssistiveText/index2.js";
+/* empty css      */
+import { DropdownPopover } from "./DropdownPopover.js";
+import { findPreviewRecursive } from "./utils/findPreviewRecursive.js";
+import { getValuesRecursive } from "./MenuList/internals/getValuesRecursive.js";
+import MenuList from "./MenuList/index2.js";
+import React, { useCallback, 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/DropdownSelector/index.tsx
+function DropdownSelector({ onChange, showLabel = false, selectRef, ...props }) {
+	const triggerRef = useRef(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const preview = findPreviewRecursive(props.children, props.value);
+	const isPlaceholder = useMemo(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+	const propsArray = getValuesRecursive(props.children);
+	const hasMatchedValue = useMemo(() => propsArray.some((itemProps) => itemProps.value === props.value), [propsArray, props.value]);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	const handleChange = useCallback((e) => {
+		onChange(e.target.value);
+	}, [onChange]);
+	const labelId = useId();
+	const describedbyId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: useClassNames("charcoal-dropdown-selector-root", props.className),
+		"aria-disabled": props.disabled,
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				id: labelId,
+				label: props.label,
+				required: props.required,
+				requiredText: props.requiredText,
+				subLabel: props.subLabel,
+				...!showLabel ? visuallyHiddenProps : {}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				...visuallyHiddenProps,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsxs("select", {
+					name: props.name,
+					value: props.value,
+					onChange: handleChange,
+					tabIndex: -1,
+					ref: selectRef,
+					children: [!hasMatchedValue && /* @__PURE__ */ jsx("option", {
+						value: props.value,
+						children: props.value
+					}), propsArray.map((itemProps) => {
+						return /* @__PURE__ */ jsx("option", {
+							value: itemProps.value,
+							disabled: itemProps.disabled,
+							children: itemProps.value
+						}, itemProps.value);
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				className: "charcoal-dropdown-selector-button",
+				"aria-labelledby": labelId,
+				"aria-invalid": props.invalid,
+				"aria-describedby": props.assistiveText !== void 0 ? describedbyId : void 0,
+				disabled: props.disabled,
+				onClick: () => {
+					if (props.disabled === true) return;
+					setIsOpen(true);
+				},
+				ref: triggerRef,
+				type: "button",
+				"data-active": isOpen,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "charcoal-ui-dropdown-selector-text",
+					"data-placeholder": isPlaceholder,
+					children: isPlaceholder ? props.placeholder : preview
+				}), /* @__PURE__ */ jsx(Icon, {
+					className: "charcoal-ui-dropdown-selector-icon",
+					name: "16/Menu"
+				})]
+			}),
+			isOpen && /* @__PURE__ */ jsx(DropdownPopover, {
+				isOpen,
+				onClose: () => setIsOpen(false),
+				triggerRef,
+				value: props.value,
+				inertWorkaround: props.inertWorkaround,
+				children: /* @__PURE__ */ jsx(MenuList, {
+					value: props.value,
+					onChange: (v) => {
+						onChange(v);
+						setIsOpen(false);
+					},
+					children: props.children
+				})
+			}),
+			props.assistiveText !== void 0 && /* @__PURE__ */ jsx(AssistiveText, {
+				"data-invalid": props.invalid === true,
+				id: describedbyId,
+				children: props.assistiveText
+			})
+		]
+	});
+}
+
+//#endregion
+export { DropdownSelector as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["React","ReactNode","useState","useRef","useMemo","useCallback","Icon","FieldLabel","DropdownPopover","findPreviewRecursive","MenuList","MenuListChildren","getValuesRecursive","AssistiveText","useClassNames","PopoverProps","useVisuallyHidden","useId","DropdownSelectorProps","label","value","disabled","placeholder","showLabel","invalid","assistiveText","required","requiredText","subLabel","name","children","onChange","className","selectRef","Ref","HTMLSelectElement","Pick","DropdownSelector","props","triggerRef","HTMLButtonElement","isOpen","setIsOpen","preview","isPlaceholder","undefined","propsArray","hasMatchedValue","some","itemProps","visuallyHiddenProps","handleChange","e","ChangeEvent","target","labelId","describedbyId","classNames","map","inertWorkaround","v"],"sources":["../../../src/components/DropdownSelector/index.tsx"],"sourcesContent":["import './index.css'\n\nimport React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'\nimport Icon from '../Icon'\nimport FieldLabel from '../FieldLabel'\nimport { DropdownPopover } from './DropdownPopover'\nimport { findPreviewRecursive } from './utils/findPreviewRecursive'\nimport MenuList, { MenuListChildren } from './MenuList'\nimport { getValuesRecursive } from './MenuList/internals/getValuesRecursive'\nimport { AssistiveText } from '../TextField/AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { PopoverProps } from './Popover'\n\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type DropdownSelectorProps = {\n  label: string\n  value: string\n  disabled?: boolean\n  placeholder?: string\n  showLabel?: boolean\n  invalid?: boolean\n  assistiveText?: string\n  required?: boolean\n  requiredText?: string\n  subLabel?: ReactNode\n  /**\n   * the name of hidden `<select />`\n   */\n  name?: string\n  children: MenuListChildren\n  onChange: (value: string) => void\n  className?: string\n  selectRef?: React.Ref<HTMLSelectElement>\n} & Pick<PopoverProps, 'inertWorkaround'>\n\nexport default function DropdownSelector({\n  onChange,\n  showLabel = false,\n  selectRef,\n  ...props\n}: DropdownSelectorProps) {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const [isOpen, setIsOpen] = useState(false)\n  const preview = findPreviewRecursive(props.children, props.value)\n\n  const isPlaceholder = useMemo(\n    () => props.placeholder !== undefined && preview === undefined,\n    [preview, props.placeholder],\n  )\n\n  const propsArray = getValuesRecursive(props.children)\n  const hasMatchedValue = useMemo(\n    () => propsArray.some((itemProps) => itemProps.value === props.value),\n    [propsArray, props.value],\n  )\n\n  const { visuallyHiddenProps } = useVisuallyHidden()\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const labelId = useId()\n  const describedbyId = useId()\n\n  const classNames = useClassNames(\n    'charcoal-dropdown-selector-root',\n    props.className,\n  )\n\n  return (\n    <div className={classNames} aria-disabled={props.disabled}>\n      <FieldLabel\n        id={labelId}\n        label={props.label}\n        required={props.required}\n        requiredText={props.requiredText}\n        subLabel={props.subLabel}\n        {...(!showLabel ? visuallyHiddenProps : {})}\n      />\n      <div {...visuallyHiddenProps} aria-hidden=\"true\">\n        <select\n          name={props.name}\n          value={props.value}\n          onChange={handleChange}\n          tabIndex={-1}\n          ref={selectRef}\n        >\n          {!hasMatchedValue && (\n            <option value={props.value}>{props.value}</option>\n          )}\n          {propsArray.map((itemProps) => {\n            return (\n              <option\n                key={itemProps.value}\n                value={itemProps.value}\n                disabled={itemProps.disabled}\n              >\n                {itemProps.value}\n              </option>\n            )\n          })}\n        </select>\n      </div>\n      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n      <button\n        className=\"charcoal-dropdown-selector-button\"\n        aria-labelledby={labelId}\n        aria-invalid={props.invalid}\n        aria-describedby={\n          props.assistiveText !== undefined ? describedbyId : undefined\n        }\n        disabled={props.disabled}\n        onClick={() => {\n          if (props.disabled === true) return\n          setIsOpen(true)\n        }}\n        ref={triggerRef}\n        type=\"button\"\n        data-active={isOpen}\n      >\n        <span\n          className=\"charcoal-ui-dropdown-selector-text\"\n          data-placeholder={isPlaceholder}\n        >\n          {isPlaceholder ? props.placeholder : preview}\n        </span>\n        <Icon className=\"charcoal-ui-dropdown-selector-icon\" name=\"16/Menu\" />\n      </button>\n      {isOpen && (\n        <DropdownPopover\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          triggerRef={triggerRef}\n          value={props.value}\n          inertWorkaround={props.inertWorkaround}\n        >\n          <MenuList\n            value={props.value}\n            onChange={(v) => {\n              onChange(v)\n              setIsOpen(false)\n            }}\n          >\n            {props.children}\n          </MenuList>\n        </DropdownPopover>\n      )}\n      {props.assistiveText !== undefined && (\n        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>\n          {props.assistiveText}\n        </AssistiveText>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqCA,SAAwBqC,iBAAiB,EACvCN,UACAR,YAAY,OACZU,WACA,GAAGK,SACqB;CACxB,MAAMC,aAAapC,OAA0B,KAAK;CAClD,MAAM,CAACsC,QAAQC,aAAaxC,SAAS,MAAM;CAC3C,MAAMyC,UAAUlC,qBAAqB6B,MAAMR,UAAUQ,MAAMlB,MAAM;CAEjE,MAAMwB,gBAAgBxC,cACdkC,MAAMhB,gBAAgBuB,UAAaF,YAAYE,QACrD,CAACF,SAASL,MAAMhB,YAClB,CAAC;CAED,MAAMwB,aAAalC,mBAAmB0B,MAAMR,SAAS;CACrD,MAAMiB,kBAAkB3C,cAChB0C,WAAWE,MAAMC,cAAcA,UAAU7B,UAAUkB,MAAMlB,MAAM,EACrE,CAAC0B,YAAYR,MAAMlB,MACrB,CAAC;CAED,MAAM,EAAE8B,wBAAwBlC,mBAAmB;CAEnD,MAAMmC,eAAe9C,aAClB+C,MAA4C;EAC3CrB,SAASqB,EAAEE,OAAOlC,MAAM;IAE1B,CAACW,SACH,CAAC;CAED,MAAMwB,UAAUtC,OAAO;CACvB,MAAMuC,gBAAgBvC,OAAO;CAO7B,OACE,qBAAC,OAAD;EAAK,WANYH,cACjB,mCACAwB,MAAMN,UAIoB;EAAE,iBAAeM,MAAMjB;YAAjD;GACE,oBAAC,YAAD;IACE,IAAIkC;IACJ,OAAOjB,MAAMnB;IACb,UAAUmB,MAAMZ;IAChB,cAAcY,MAAMX;IACpB,UAAUW,MAAMV;IAChB,GAAK,CAACL,YAAY2B,sBAAsB,EAAG;IAAC;GAE9C,oBAAC,OAAD;IAAK,GAAIA;IAAqB,eAAY;cACxC,qBAAC,UAAD;KACE,MAAMZ,MAAMT;KACZ,OAAOS,MAAMlB;KACb,UAAU+B;KACV,UAAU;KACV,KAAKlB;eALP,CAOG,CAACc,mBACA,oBAAC,UAAD;MAAQ,OAAOT,MAAMlB;gBAAQkB,MAAMlB;MACpC,GACA0B,WAAWY,KAAKT,cAAc;MAC7B,OACE,oBAAC,UAAD;OAEE,OAAOA,UAAU7B;OACjB,UAAU6B,UAAU5B;iBAEnB4B,UAAU7B;OACJ,EALF6B,UAAU7B,MAKR;OAEX,CACI;;IACL;GAEL,qBAAC,UAAD;IACE,WAAU;IACV,mBAAiBmC;IACjB,gBAAcjB,MAAMd;IACpB,oBACEc,MAAMb,kBAAkBoB,SAAYW,gBAAgBX;IAEtD,UAAUP,MAAMjB;IAChB,eAAe;KACb,IAAIiB,MAAMjB,aAAa,MAAM;KAC7BqB,UAAU,KAAK;;IAEjB,KAAKH;IACL,MAAK;IACL,eAAaE;cAdf,CAgBE,oBAAC,QAAD;KACE,WAAU;KACV,oBAAkBG;eAEjBA,gBAAgBN,MAAMhB,cAAcqB;KACjC,GACN,oBAAC,MAAD;KAAM,WAAU;KAAqC,MAAK;KAAS,EAC7D;;GACPF,UACC,oBAAC,iBAAD;IACUA;IACR,eAAeC,UAAU,MAAM;IACnBH;IACZ,OAAOD,MAAMlB;IACb,iBAAiBkB,MAAMqB;cAEvB,oBAAC,UAAD;KACE,OAAOrB,MAAMlB;KACb,WAAWwC,MAAM;MACf7B,SAAS6B,EAAE;MACXlB,UAAU,MAAM;;eAGjBJ,MAAMR;KACC;IAEb;GACAQ,MAAMb,kBAAkBoB,UACvB,oBAAC,eAAD;IAAe,gBAAcP,MAAMd,YAAY;IAAM,IAAIgC;cACtDlB,MAAMb;IAEV;GACG"}

package/dist/components/DropdownSelector/utils/findPreviewRecursive.cjs

@@ -0,0 +1,34 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/components/DropdownSelector/utils/findPreviewRecursive.tsx
+/**
+* DropdownSelectorの選択中の要素をレンダリングするため、
+* 選択中のMenuItemを再帰的に探索しReactNodeを返す。
+*
+* @param children
+* @param value
+* @param values
+* @returns
+*/
+function findPreviewRecursive(children, value) {
+	const childArray = react.Children.toArray(children);
+	for (let i = 0; i < childArray.length; i++) {
+		const child = childArray[i];
+		if (react.isValidElement(child)) {
+			if ("value" in child.props) {
+				if (child.props.value === value && "children" in child.props) return child.props.children;
+			}
+			if ("children" in child.props) {
+				const children = findPreviewRecursive(child.props.children, value);
+				if (children !== void 0) return children;
+			}
+		}
+	}
+}
+
+//#endregion
+exports.findPreviewRecursive = findPreviewRecursive;
+//# sourceMappingURL=findPreviewRecursive.cjs.map

package/dist/components/DropdownSelector/utils/findPreviewRecursive.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"findPreviewRecursive.cjs","names":["ReactNode","React","findPreviewRecursive","children","value","childArray","Children","toArray","i","length","child","isValidElement","props","childValue","undefined"],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAYA,SAAgBE,qBACdC,UACAC,OACuB;CACvB,MAAMC,aAAaJ,MAAMK,SAASC,QAAQJ,SAAS;CACnD,KAAK,IAAIK,IAAI,GAAGA,IAAIH,WAAWI,QAAQD,KAAK;EAC1C,MAAME,QAAQL,WAAWG;EACzB,IAAIP,MAAMU,eAAeD,MAAM,EAAE;GAC/B,IAAI,WAAWA,MAAME,OAEnB;QADoBF,MAAME,MAA4BR,UACnCA,SAAS,cAAcM,MAAME,OAE9C,OADkBF,MAAME,MAAkCT;;GAI9D,IAAI,cAAcO,MAAME,OAAO;IAC7B,MAAMT,WAAWD,qBACdQ,MAAME,MAAkCT,UACzCC,MACD;IACD,IAAID,aAAaW,QACf,OAAOX"}

package/dist/components/DropdownSelector/utils/findPreviewRecursive.js

@@ -0,0 +1,32 @@
+"use client";
+import * as React$1 from "react";
+
+//#region src/components/DropdownSelector/utils/findPreviewRecursive.tsx
+/**
+* DropdownSelectorの選択中の要素をレンダリングするため、
+* 選択中のMenuItemを再帰的に探索しReactNodeを返す。
+*
+* @param children
+* @param value
+* @param values
+* @returns
+*/
+function findPreviewRecursive(children, value) {
+	const childArray = React$1.Children.toArray(children);
+	for (let i = 0; i < childArray.length; i++) {
+		const child = childArray[i];
+		if (React$1.isValidElement(child)) {
+			if ("value" in child.props) {
+				if (child.props.value === value && "children" in child.props) return child.props.children;
+			}
+			if ("children" in child.props) {
+				const children = findPreviewRecursive(child.props.children, value);
+				if (children !== void 0) return children;
+			}
+		}
+	}
+}
+
+//#endregion
+export { findPreviewRecursive };
+//# sourceMappingURL=findPreviewRecursive.js.map

package/dist/components/DropdownSelector/utils/findPreviewRecursive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"findPreviewRecursive.js","names":["ReactNode","React","findPreviewRecursive","children","value","childArray","Children","toArray","i","length","child","isValidElement","props","childValue","undefined"],"sources":["../../../../src/components/DropdownSelector/utils/findPreviewRecursive.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport * as React from 'react'\n\n/**\n * DropdownSelectorの選択中の要素をレンダリングするため、\n * 選択中のMenuItemを再帰的に探索しReactNodeを返す。\n *\n * @param children\n * @param value\n * @param values\n * @returns\n */\nexport function findPreviewRecursive(\n  children: ReactNode,\n  value: string,\n): ReactNode | undefined {\n  const childArray = React.Children.toArray(children)\n  for (let i = 0; i < childArray.length; i++) {\n    const child = childArray[i]\n    if (React.isValidElement(child)) {\n      if ('value' in child.props) {\n        const childValue = (child.props as { value: string }).value\n        if (childValue === value && 'children' in child.props) {\n          const children = (child.props as { children: ReactNode }).children\n          return children\n        }\n      }\n      if ('children' in child.props) {\n        const children = findPreviewRecursive(\n          (child.props as { children: ReactNode }).children,\n          value,\n        )\n        if (children !== undefined) {\n          return children\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAgBE,qBACdC,UACAC,OACuB;CACvB,MAAMC,aAAaJ,QAAMK,SAASC,QAAQJ,SAAS;CACnD,KAAK,IAAIK,IAAI,GAAGA,IAAIH,WAAWI,QAAQD,KAAK;EAC1C,MAAME,QAAQL,WAAWG;EACzB,IAAIP,QAAMU,eAAeD,MAAM,EAAE;GAC/B,IAAI,WAAWA,MAAME,OAEnB;QADoBF,MAAME,MAA4BR,UACnCA,SAAS,cAAcM,MAAME,OAE9C,OADkBF,MAAME,MAAkCT;;GAI9D,IAAI,cAAcO,MAAME,OAAO;IAC7B,MAAMT,WAAWD,qBACdQ,MAAME,MAAkCT,UACzCC,MACD;IACD,IAAID,aAAaW,QACf,OAAOX"}

package/dist/components/FieldLabel/index2.cjs

@@ -0,0 +1,35 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/FieldLabel/index.tsx
+const FieldLabel = react.forwardRef(function FieldLabel({ style, className, label, required = false, requiredText, subLabel, ...labelProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style,
+		className: require_useClassNames.useClassNames("charcoal-field-label-root", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				ref,
+				className: "charcoal-field-label",
+				...labelProps,
+				children: label
+			}),
+			required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "charcoal-field-label-required-text",
+				children: requiredText
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "charcoal-field-label-sub-label",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: subLabel })
+			})
+		]
+	});
+});
+
+//#endregion
+exports.default = FieldLabel;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["React","useClassNames","FieldLabelProps","LabelHTMLAttributes","HTMLLabelElement","className","label","subLabel","ReactNode","required","requiredText","FieldLabel","forwardRef","style","labelProps","ref","classNames"],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;;;AAeA,MAAMW,aAAaX,MAAMY,WACvB,SAASD,WACP,EACEE,OACAR,WACAC,OACAG,WAAW,OACXC,cACAH,UACA,GAAGO,cAELC,KACA;CAEA,OACE,4CAAC,OAAD;EAAYF;EAAO,WAFFZ,oCAAc,6BAA6BI,UAEpB;YAAxC;GACE,2CAAC,SAAD;IAAYU;IAAK,WAAU;IAAuB,GAAID;cACnDR;IACI;GACNG,YACC,2CAAC,OAAD;IAAK,WAAU;cACZC;IAEJ;GACD,2CAAC,OAAD;IAAK,WAAU;cACb,2CAAC,QAAD,YAAOH,UAAe;IACnB;GACD;;EAGX"}

package/dist/components/FieldLabel/index2.js

@@ -0,0 +1,33 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/FieldLabel/index.tsx
+const FieldLabel = React$1.forwardRef(function FieldLabel({ style, className, label, required = false, requiredText, subLabel, ...labelProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		style,
+		className: useClassNames("charcoal-field-label-root", className),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				ref,
+				className: "charcoal-field-label",
+				...labelProps,
+				children: label
+			}),
+			required && /* @__PURE__ */ jsx("div", {
+				className: "charcoal-field-label-required-text",
+				children: requiredText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "charcoal-field-label-sub-label",
+				children: /* @__PURE__ */ jsx("span", { children: subLabel })
+			})
+		]
+	});
+});
+
+//#endregion
+export { FieldLabel as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["React","useClassNames","FieldLabelProps","LabelHTMLAttributes","HTMLLabelElement","className","label","subLabel","ReactNode","required","requiredText","FieldLabel","forwardRef","style","labelProps","ref","classNames"],"sources":["../../../src/components/FieldLabel/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport interface FieldLabelProps\n  extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  readonly className?: string\n  readonly label: string\n  readonly subLabel?: React.ReactNode\n  readonly required?: boolean\n  // TODO: 翻訳用のContextで注入する\n  readonly requiredText?: string\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  function FieldLabel(\n    {\n      style,\n      className,\n      label,\n      required = false,\n      requiredText,\n      subLabel,\n      ...labelProps\n    },\n    ref,\n  ) {\n    const classNames = useClassNames('charcoal-field-label-root', className)\n    return (\n      <div style={style} className={classNames}>\n        <label ref={ref} className=\"charcoal-field-label\" {...labelProps}>\n          {label}\n        </label>\n        {required && (\n          <div className=\"charcoal-field-label-required-text\">\n            {requiredText}\n          </div>\n        )}\n        <div className=\"charcoal-field-label-sub-label\">\n          <span>{subLabel}</span>\n        </div>\n      </div>\n    )\n  },\n)\n\nexport default FieldLabel\n"],"mappings":";;;;;;;AAeA,MAAMW,aAAaX,QAAMY,WACvB,SAASD,WACP,EACEE,OACAR,WACAC,OACAG,WAAW,OACXC,cACAH,UACA,GAAGO,cAELC,KACA;CAEA,OACE,qBAAC,OAAD;EAAYF;EAAO,WAFFZ,cAAc,6BAA6BI,UAEpB;YAAxC;GACE,oBAAC,SAAD;IAAYU;IAAK,WAAU;IAAuB,GAAID;cACnDR;IACI;GACNG,YACC,oBAAC,OAAD;IAAK,WAAU;cACZC;IAEJ;GACD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,YAAOH,UAAe;IACnB;GACD;;EAGX"}

package/dist/components/HintText/index2.cjs

@@ -0,0 +1,25 @@
+"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_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/HintText/index.tsx
+function HintText({ children, context = "section", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_useClassNames.useClassNames("charcoal-hint-text", className),
+		"data-context": context,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "charcoal-hint-text-icon",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { name: "16/Info" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "charcoal-hint-text-message",
+			children
+		})]
+	});
+}
+
+//#endregion
+exports.default = HintText;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["ReactNode","Icon","useClassNames","HintTextContext","HintTextProps","children","context","className","HintText","classNames"],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,SAAwBQ,SAAS,EAC/BH,UACAC,UAAU,WACVC,aACgB;CAGhB,OACE,4CAAC,OAAD;EAAK,WAHYL,oCAAc,sBAAsBK,UAG3B;EAAE,gBAAcD;YAA1C,CACE,2CAAC,OAAD;GAAK,WAAU;aACb,2CAAC,uBAAD,EAAM,MAAK,WAAS;GACjB,GACL,2CAAC,KAAD;GAAG,WAAU;GAA8BD;GAAY,EACnD"}

package/dist/components/HintText/index2.js

@@ -0,0 +1,24 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import Icon from "../Icon/index.js";
+/* empty css      */
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/HintText/index.tsx
+function HintText({ children, context = "section", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: useClassNames("charcoal-hint-text", className),
+		"data-context": context,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "charcoal-hint-text-icon",
+			children: /* @__PURE__ */ jsx(Icon, { name: "16/Info" })
+		}), /* @__PURE__ */ jsx("p", {
+			className: "charcoal-hint-text-message",
+			children
+		})]
+	});
+}
+
+//#endregion
+export { HintText as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["ReactNode","Icon","useClassNames","HintTextContext","HintTextProps","children","context","className","HintText","classNames"],"sources":["../../../src/components/HintText/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport Icon from '../Icon'\n\nimport './index.css'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nexport type HintTextContext = 'page' | 'section'\nexport interface HintTextProps {\n  children: ReactNode\n  context?: HintTextContext\n  className?: string\n}\n\nexport default function HintText({\n  children,\n  context = 'section',\n  className,\n}: HintTextProps) {\n  const classNames = useClassNames('charcoal-hint-text', className)\n\n  return (\n    <div className={classNames} data-context={context}>\n      <div className=\"charcoal-hint-text-icon\">\n        <Icon name=\"16/Info\" />\n      </div>\n      <p className=\"charcoal-hint-text-message\">{children}</p>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAwBQ,SAAS,EAC/BH,UACAC,UAAU,WACVC,aACgB;CAGhB,OACE,qBAAC,OAAD;EAAK,WAHYL,cAAc,sBAAsBK,UAG3B;EAAE,gBAAcD;YAA1C,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,MAAD,EAAM,MAAK,WAAS;GACjB,GACL,oBAAC,KAAD;GAAG,WAAU;GAA8BD;GAAY,EACnD"}

package/dist/components/Icon/index.cjs

@@ -0,0 +1,39 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+require('../../icons/css/icon.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _charcoal_ui_icons = require("@charcoal-ui/icons");
+
+//#region src/components/Icon/index.tsx
+const Icon = react.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, fixedSize, className, style: userStyle, ...rest }, ref) {
+	const actualSize = react.useMemo(() => (0, _charcoal_ui_icons.calcActualSize)({
+		name,
+		scale,
+		unsafeNonGuidelineScale,
+		fixedSize
+	}), [
+		name,
+		scale,
+		unsafeNonGuidelineScale,
+		fixedSize
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pixiv-icon", {
+		ref,
+		name,
+		scale,
+		"unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+		"fixed-size": fixedSize,
+		style: react.useMemo(() => ({
+			...userStyle,
+			"--charcoal-icon-size": `${actualSize}px`
+		}), [actualSize, userStyle]),
+		class: `charcoal-icon ${className || ""}`.trim(),
+		...rest
+	});
+});
+
+//#endregion
+exports.default = Icon;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Icon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","calcActualSize","IconSizing","PixivIcon","Props","OwnProps","unsafeNonGuidelineScale","fixedSize","className","IconProps","PropsWithoutRef","Omit","Icon","forwardRef","IconInner","name","scale","style","userStyle","rest","ref","actualSize","useMemo","CSSProperties","trim"],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;;;AA+BA,MAAMY,OAAOZ,MAAMa,WAAiC,SAASC,UAC3D,EACEC,MACAC,OACAV,yBACAC,WACAC,WACAS,OAAOC,WACP,GAAGC,QAELC,KACA;CACA,MAAMC,aAAarB,MAAMsB,qDAGN;EACbP;EACAC;EACAV;EACAC;EACD,CAAkC,EACrC;EAACQ;EAAMC;EAAOV;EAAyBC;EACzC,CAAC;CAWD,OACE,2CAAC,cAAD;EACOa;EACCL;EACCC;EACP,8BAA4BV;EAC5B,cAAYC;EACZ,OAhBUP,MAAMsB,eAEf;GACC,GAAGJ;GACH,wBAAwB,GAAGG,WAAU;GACtC,GACH,CAACA,YAAYH,UACf,CASgB;EACZ,OAAO,iBAAiBV,aAAa,KAAKgB,MAAM;EAChD,GAAIL;EACJ;EAEJ"}

package/dist/components/Icon/index.js

@@ -0,0 +1,37 @@
+"use client";
+/* empty css                   */
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { calcActualSize } from "@charcoal-ui/icons";
+
+//#region src/components/Icon/index.tsx
+const Icon = React$1.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, fixedSize, className, style: userStyle, ...rest }, ref) {
+	const actualSize = React$1.useMemo(() => calcActualSize({
+		name,
+		scale,
+		unsafeNonGuidelineScale,
+		fixedSize
+	}), [
+		name,
+		scale,
+		unsafeNonGuidelineScale,
+		fixedSize
+	]);
+	return /* @__PURE__ */ jsx("pixiv-icon", {
+		ref,
+		name,
+		scale,
+		"unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+		"fixed-size": fixedSize,
+		style: React$1.useMemo(() => ({
+			...userStyle,
+			"--charcoal-icon-size": `${actualSize}px`
+		}), [actualSize, userStyle]),
+		class: `charcoal-icon ${className || ""}`.trim(),
+		...rest
+	});
+});
+
+//#endregion
+export { Icon as default };
+//# sourceMappingURL=index.js.map

package/dist/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","calcActualSize","IconSizing","PixivIcon","Props","OwnProps","unsafeNonGuidelineScale","fixedSize","className","IconProps","PropsWithoutRef","Omit","Icon","forwardRef","IconInner","name","scale","style","userStyle","rest","ref","actualSize","useMemo","CSSProperties","trim"],"sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport '@charcoal-ui/icons'\n// tmp fix for https://github.com/rolldown/tsdown/pull/981\nimport '../../../../icons/css/icon.css'\nimport { calcActualSize } from '@charcoal-ui/icons'\nimport type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'\n\nexport interface OwnProps {\n  /**\n   * @deprecated `fixedSize` を利用してください。\n   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。\n   */\n  unsafeNonGuidelineScale?: number\n  /**\n   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、\n   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。\n   *\n   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、\n   * Web Component の hydrate 前後でレイアウトシフトは発生しません。\n   */\n  fixedSize?: number\n  className?: string\n}\n\nexport interface IconProps\n  extends OwnProps,\n    React.PropsWithoutRef<\n      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>\n    > {}\n\nconst Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(\n  {\n    name,\n    scale,\n    unsafeNonGuidelineScale,\n    fixedSize,\n    className,\n    style: userStyle,\n    ...rest\n  },\n  ref,\n) {\n  const actualSize = React.useMemo(\n    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する\n    () =>\n      calcActualSize({\n        name,\n        scale,\n        unsafeNonGuidelineScale,\n        fixedSize,\n      } as { name: string } & IconSizing),\n    [name, scale, unsafeNonGuidelineScale, fixedSize],\n  )\n\n  const style = React.useMemo(\n    () =>\n      ({\n        ...userStyle,\n        '--charcoal-icon-size': `${actualSize}px`,\n      }) as React.CSSProperties,\n    [actualSize, userStyle],\n  )\n\n  return (\n    <pixiv-icon\n      ref={ref}\n      name={name}\n      scale={scale}\n      unsafe-non-guideline-scale={unsafeNonGuidelineScale}\n      fixed-size={fixedSize}\n      style={style}\n      class={`charcoal-icon ${className || ''}`.trim()}\n      {...rest}\n    />\n  )\n})\n\nexport default Icon\n"],"mappings":";;;;;;;AA+BA,MAAMY,OAAOZ,QAAMa,WAAiC,SAASC,UAC3D,EACEC,MACAC,OACAV,yBACAC,WACAC,WACAS,OAAOC,WACP,GAAGC,QAELC,KACA;CACA,MAAMC,aAAarB,QAAMsB,cAGrBrB,eAAe;EACbc;EACAC;EACAV;EACAC;EACD,CAAkC,EACrC;EAACQ;EAAMC;EAAOV;EAAyBC;EACzC,CAAC;CAWD,OACE,oBAAC,cAAD;EACOa;EACCL;EACCC;EACP,8BAA4BV;EAC5B,cAAYC;EACZ,OAhBUP,QAAMsB,eAEf;GACC,GAAGJ;GACH,wBAAwB,GAAGG,WAAU;GACtC,GACH,CAACA,YAAYH,UACf,CASgB;EACZ,OAAO,iBAAiBV,aAAa,KAAKgB,MAAM;EAChD,GAAIL;EACJ;EAEJ"}

package/dist/components/IconButton/index2.cjs

@@ -0,0 +1,46 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/IconButton/index.tsx
+const IconButton = (0, react.forwardRef)(function IconButtonInner({ variant = "Default", size = "M", icon, isActive = false, component, ...rest }, ref) {
+	validateIconSize(size, icon);
+	const Component = (0, react.useMemo)(() => component ?? "button", [component]);
+	const classNames = require_useClassNames.useClassNames("charcoal-icon-button", rest.className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...rest,
+		ref,
+		className: classNames,
+		"data-size": size,
+		"data-active": isActive,
+		"data-variant": variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pixiv-icon", { name: icon })
+	});
+});
+/**
+* validates matches of size and icon
+*/
+function validateIconSize(size, icon) {
+	let requiredIconSize;
+	switch (size) {
+		case "XS":
+			requiredIconSize = "16";
+			break;
+		case "S":
+		case "M":
+			requiredIconSize = "24";
+			break;
+	}
+	const result = /^\d*/u.exec(icon);
+	if (result == null) throw new Error("Invalid icon name");
+	const [iconSize] = result;
+	if (iconSize !== requiredIconSize) console.warn(`IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`);
+}
+
+//#endregion
+exports.default = IconButton;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["React","ForwardedRef","forwardRef","useMemo","JSX","useClassNames","KnownIconType","Variant","Size","IconButtonProps","ElementType","variant","size","icon","isActive","component","T","Omit","ComponentPropsWithRef","IconButton","HTMLButtonElement","IconButtonInner","rest","ref","validateIconSize","Component","classNames","className","p","Element","requiredIconSize","result","exec","Error","iconSize","console","warn"],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAMmB,mCACJ,SAASE,gBACP,EACEV,UAAU,WACVC,OAAO,KACPC,MACAC,WAAW,OACXC,WACA,GAAGO,QAELC,KACA;CACAC,iBAAiBZ,MAAMC,KAAK;CAC5B,MAAMY,qCAA0BV,aAAa,UAAU,CAACA,UAAU,CAAC;CACnE,MAAMW,aAAarB,oCAAc,wBAAwBiB,KAAKK,UAAU;CAExE,OACE,2CAAC,WAAD;EACE,GAAIL;EACCC;EACL,WAAWG;EACX,aAAWd;EACX,eAAaE;EACb,gBAAcH;YAEd,2CAAC,cAAD,EAAY,MAAME,MAAK;EACb;EAGjB;;;;AASD,SAASW,iBAAiBZ,MAAYC,MAA2B;CAC/D,IAAIiB;CACJ,QAAQlB,MAAR;EACE,KAAK;GACHkB,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACHA,mBAAmB;GACnB;;CAGJ,MAAMC,SAAS,QAAQC,KAAKnB,KAAK;CACjC,IAAIkB,UAAU,MACZ,MAAM,IAAIE,MAAM,oBAAoB;CAEtC,MAAM,CAACC,YAAYH;CACnB,IAAIG,aAAaJ,kBAEfK,QAAQC,KACN,yBAAyBxB,KAAI,sBAAuBkB,iBAAgB,aAAcI,SAAQ,GAC3F"}

package/dist/components/IconButton/index2.js

@@ -0,0 +1,44 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import React, { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/IconButton/index.tsx
+const IconButton = forwardRef(function IconButtonInner({ variant = "Default", size = "M", icon, isActive = false, component, ...rest }, ref) {
+	validateIconSize(size, icon);
+	const Component = useMemo(() => component ?? "button", [component]);
+	const classNames = useClassNames("charcoal-icon-button", rest.className);
+	return /* @__PURE__ */ jsx(Component, {
+		...rest,
+		ref,
+		className: classNames,
+		"data-size": size,
+		"data-active": isActive,
+		"data-variant": variant,
+		children: /* @__PURE__ */ jsx("pixiv-icon", { name: icon })
+	});
+});
+/**
+* validates matches of size and icon
+*/
+function validateIconSize(size, icon) {
+	let requiredIconSize;
+	switch (size) {
+		case "XS":
+			requiredIconSize = "16";
+			break;
+		case "S":
+		case "M":
+			requiredIconSize = "24";
+			break;
+	}
+	const result = /^\d*/u.exec(icon);
+	if (result == null) throw new Error("Invalid icon name");
+	const [iconSize] = result;
+	if (iconSize !== requiredIconSize) console.warn(`IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`);
+}
+
+//#endregion
+export { IconButton as default };
+//# sourceMappingURL=index2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["React","ForwardedRef","forwardRef","useMemo","JSX","useClassNames","KnownIconType","Variant","Size","IconButtonProps","ElementType","variant","size","icon","isActive","component","T","Omit","ComponentPropsWithRef","IconButton","HTMLButtonElement","IconButtonInner","rest","ref","validateIconSize","Component","classNames","className","p","Element","requiredIconSize","result","exec","Error","iconSize","console","warn"],"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import React, { ForwardedRef, forwardRef, useMemo, type JSX } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { KnownIconType } from '@charcoal-ui/icons'\n\nimport './index.css'\n\ntype Variant = 'Default' | 'Overlay'\ntype Size = 'XS' | 'S' | 'M'\n\nexport type IconButtonProps<T extends React.ElementType = 'button'> = {\n  readonly variant?: Variant\n  readonly size?: Size\n  readonly icon: keyof KnownIconType\n  readonly isActive?: boolean\n  component?: T\n} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButtonInner<T extends React.ElementType>(\n    {\n      variant = 'Default',\n      size = 'M',\n      icon,\n      isActive = false,\n      component,\n      ...rest\n    }: IconButtonProps<T>,\n    ref: ForwardedRef<HTMLButtonElement>,\n  ) {\n    validateIconSize(size, icon)\n    const Component = useMemo(() => component ?? 'button', [component])\n    const classNames = useClassNames('charcoal-icon-button', rest.className)\n\n    return (\n      <Component\n        {...rest}\n        ref={ref}\n        className={classNames}\n        data-size={size}\n        data-active={isActive}\n        data-variant={variant}\n      >\n        <pixiv-icon name={icon} />\n      </Component>\n    )\n  },\n) as <T extends React.ElementType = 'button'>(\n  p: IconButtonProps<T>,\n) => JSX.Element\n\nexport default IconButton\n\n/**\n * validates matches of size and icon\n */\nfunction validateIconSize(size: Size, icon: keyof KnownIconType) {\n  let requiredIconSize: string\n  switch (size) {\n    case 'XS':\n      requiredIconSize = '16'\n      break\n    case 'S':\n    case 'M':\n      requiredIconSize = '24'\n      break\n  }\n  // アイコン名は サイズ/名前\n  const result = /^\\d*/u.exec(icon)\n  if (result == null) {\n    throw new Error('Invalid icon name')\n  }\n  const [iconSize] = result\n  if (iconSize !== requiredIconSize) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `IconButton with size \"${size}\" expect icon size \"${requiredIconSize}, but got \"${iconSize}\"`,\n    )\n  }\n}\n"],"mappings":";;;;;;;AAiBA,MAAMmB,aAAajB,WACjB,SAASmB,gBACP,EACEV,UAAU,WACVC,OAAO,KACPC,MACAC,WAAW,OACXC,WACA,GAAGO,QAELC,KACA;CACAC,iBAAiBZ,MAAMC,KAAK;CAC5B,MAAMY,YAAYtB,cAAcY,aAAa,UAAU,CAACA,UAAU,CAAC;CACnE,MAAMW,aAAarB,cAAc,wBAAwBiB,KAAKK,UAAU;CAExE,OACE,oBAAC,WAAD;EACE,GAAIL;EACCC;EACL,WAAWG;EACX,aAAWd;EACX,eAAaE;EACb,gBAAcH;YAEd,oBAAC,cAAD,EAAY,MAAME,MAAK;EACb;EAGjB;;;;AASD,SAASW,iBAAiBZ,MAAYC,MAA2B;CAC/D,IAAIiB;CACJ,QAAQlB,MAAR;EACE,KAAK;GACHkB,mBAAmB;GACnB;EACF,KAAK;EACL,KAAK;GACHA,mBAAmB;GACnB;;CAGJ,MAAMC,SAAS,QAAQC,KAAKnB,KAAK;CACjC,IAAIkB,UAAU,MACZ,MAAM,IAAIE,MAAM,oBAAoB;CAEtC,MAAM,CAACC,YAAYH;CACnB,IAAIG,aAAaJ,kBAEfK,QAAQC,KACN,yBAAyBxB,KAAI,sBAAuBkB,iBAAgB,aAAcI,SAAQ,GAC3F"}

package/dist/components/LoadingSpinner/index2.cjs

@@ -0,0 +1,43 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+require('./index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/LoadingSpinner/index.tsx
+const LoadingSpinner = (0, react.forwardRef)(function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, ...props }, ref) {
+	const classNames = require_useClassNames.useClassNames("charcoal-loading-spinner", props.className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "progressbar",
+		style: {
+			"--charcoal-loading-spinner-size": `${size}px`,
+			"--charcoal-loading-spinner-padding": `${padding}px`
+		},
+		"data-transparent": transparent,
+		className: classNames,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingSpinnerIcon, {})
+	});
+});
+var LoadingSpinner_default = (0, react.memo)(LoadingSpinner);
+const LoadingSpinnerIcon = (0, react.forwardRef)(function LoadingSpinnerIcon({ once = false }, ref) {
+	const iconRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(ref, () => ({ restart: () => {
+		if (!iconRef.current) return;
+		iconRef.current.dataset.resetAnimation = "true";
+		iconRef.current.offsetWidth;
+		delete iconRef.current.dataset.resetAnimation;
+	} }));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "presentation",
+		ref: iconRef,
+		"data-once": once,
+		className: "charcoal-loading-spinner-icon"
+	});
+});
+
+//#endregion
+exports.LoadingSpinnerIcon = LoadingSpinnerIcon;
+exports.default = LoadingSpinner_default;
+//# sourceMappingURL=index2.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["forwardRef","useImperativeHandle","useRef","memo","useClassNames","LoadingSpinnerProps","size","padding","transparent","className","LoadingSpinner","HTMLDivElement","LoadingSpinnerInner","props","ref","classNames","Props","once","LoadingSpinnerIconHandler","restart","LoadingSpinnerIcon","iconRef","current","dataset","resetAnimation","offsetWidth"],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;;AAYA,MAAMU,uCACJ,SAASE,oBACP,EAAEN,OAAO,IAAIC,UAAU,IAAIC,cAAc,OAAO,GAAGK,SACnDC,KACA;CACA,MAAMC,aAAaX,oCACjB,4BACAS,MAAMJ,UACP;CAED,OACE,2CAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAGH,KAAI;GAC1C,sCAAsC,GAAGC,QAAO;GACjD;EACD,oBAAkBC;EAClB,WAAWO;EACND;YAEL,2CAAC,oBAAD,EAAmB;EACf;EAGX;AAED,6CAAoBJ,eAAe;AAUnC,MAAaU,2CACX,SAASA,mBAAmB,EAAEH,OAAO,SAASH,KAAK;CACjD,MAAMO,4BAAiC,KAAK;CAE5CpB,+BAAoBa,YAAY,EAC9BK,eAAe;EACb,IAAI,CAACE,QAAQC,SACX;EAEFD,QAAQC,QAAQC,QAAQC,iBAAiB;EAEzC,AAAKH,QAAQC,QAAQG;EACrB,OAAOJ,QAAQC,QAAQC,QAAQC;IAElC,EAAE;CAEH,OACE,2CAAC,OAAD;EACE,MAAK;EACL,KAAKH;EACL,aAAWJ;EACX,WAAU;EACV;EAGP"}