pathum-ds-library 0.0.8

package/dist/index.js

@@ -0,0 +1,485 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Input: () => Input,
+  cx: () => cx
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_aria_components = require("react-aria-components");
+
+// src/utils/cx.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cx(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonIconDotUnsupportedHierarchies = [
+  "link-gray",
+  "link-color"
+];
+var layoutStyles = {
+  labeled: {
+    sm: cx(
+      "min-h-[36px] gap-[6px] rounded-(--radius-md) px-[14px] py-2 font-semibold",
+      "[font-size:var(--font-size-text-sm)] [font-family:var(--font-family)] [font-weight:var(--font-weight-semibold)] leading-[var(--line-height-text-sm)]"
+    ),
+    md: cx(
+      "min-h-[40px] gap-[6px] rounded-(--radius-md) px-4 py-[10px] font-semibold",
+      "[font-size:var(--font-size-text-sm)] [font-family:var(--font-family)] [font-weight:var(--font-weight-semibold)] leading-[var(--line-height-text-sm)]"
+    ),
+    lg: cx(
+      "min-h-[44px] gap-2 rounded-(--radius-lg) px-[18px] py-[10px] font-semibold",
+      "[font-size:var(--font-size-text-md)] [font-family:var(--font-family)] [font-weight:var(--font-weight-semibold)] leading-[var(--line-height-text-md)]"
+    ),
+    xl: cx(
+      "min-h-[48px] gap-2 rounded-(--radius-xl) px-5 py-3 font-semibold",
+      "[font-size:var(--font-size-text-md)] [font-family:var(--font-family)] [font-weight:var(--font-weight-semibold)] leading-[var(--line-height-text-md)]"
+    ),
+    "2xl": cx(
+      "min-h-[60px] gap-[10px] rounded-(--radius-xl) px-[28px] py-4 font-semibold",
+      "[font-size:var(--font-size-text-lg)] [font-family:var(--font-family)] [font-weight:var(--font-weight-semibold)] leading-[var(--line-height-text-lg)]"
+    )
+  },
+  iconOnly: {
+    sm: "size-8 min-h-8 min-w-8 rounded-(--radius-md) p-2",
+    md: "size-10 min-h-10 min-w-10 rounded-(--radius-md) p-[10px]",
+    lg: "size-10 min-h-10 min-w-10 rounded-(--radius-lg) p-[10px]",
+    xl: "min-h-[44px] min-w-[44px] rounded-(--radius-xl) p-3",
+    "2xl": "min-h-14 min-w-14 rounded-(--radius-xl) p-4"
+  }
+};
+var iconSizer = (sz, labeled) => labeled ? sz === "sm" ? "[&_svg]:size-4 shrink-0" : sz === "2xl" ? "[&_svg]:size-6 shrink-0" : "[&_svg]:size-5 shrink-0" : sz === "sm" ? "flex size-full items-center justify-center [&_svg]:size-4" : sz === "2xl" ? "flex size-full items-center justify-center [&_svg]:size-6" : "flex size-full items-center justify-center [&_svg]:size-5";
+var focusRing = "outline-none focus-visible:shadow-[0px_0px_0px_4px_color-mix(in_srgb,var(--color-fg-brand-secondary)_24%,transparent)]";
+var hierarchySurface = {
+  primary: cx(
+    /** Figma primary fill uses `utility-brand-600`; default state has no stroke (avoid 1px same-color border). */
+    "border-0",
+    "bg-(--color-component-utility-brand-utility-brand-600)",
+    "text-(--color-text-primary_on-brand)",
+    "data-hovered:bg-(--color-component-utility-brand-utility-brand-700)",
+    "data-hovered:text-(--color-text-primary_on-brand)",
+    /** `utility-brand-*` shifts in `.dark`; keep exported button tokens there. */
+    "dark:bg-(--color-component-components-buttons-primary-button-primary-bg)",
+    "dark:data-hovered:bg-(--color-component-components-buttons-primary-button-primary-bg_hover)",
+    "dark:text-(--color-component-components-buttons-primary-button-primary-fg)",
+    "dark:data-hovered:text-(--color-component-components-buttons-primary-button-primary-fg_hover)",
+    "data-disabled:border-0 data-disabled:bg-(--color-bg-disabled)",
+    "data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-text-primary_on-brand)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-text-primary_on-brand)",
+    "dark:[&_[data-slot=lead-icon]_svg]:text-(--color-component-components-buttons-primary-button-primary-fg)",
+    "dark:[&_[data-slot=trail-icon]_svg]:text-(--color-component-components-buttons-primary-button-primary-fg)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "secondary-gray": cx(
+    "border border-(--color-component-components-buttons-secondary-button-secondary-border)",
+    "bg-transparent text-(--color-component-components-buttons-secondary-button-secondary-fg)",
+    "data-hovered:bg-(--color-component-components-buttons-secondary-button-secondary-bg_hover)",
+    "data-hovered:text-(--color-component-components-buttons-secondary-button-secondary-fg_hover)",
+    "data-hovered:border-(--color-component-components-buttons-secondary-button-secondary-border_hover)",
+    "data-disabled:border-(--color-border-disabled)",
+    "data-disabled:bg-transparent data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-component-components-buttons-secondary-button-secondary-fg)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-component-components-buttons-secondary-button-secondary-fg)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "secondary-color": cx(
+    "border border-(--color-component-components-buttons-secondary-color-button-secondary-color-border)",
+    "bg-transparent text-(--color-component-components-buttons-secondary-color-button-secondary-color-fg)",
+    "data-hovered:bg-(--color-bg-brand-section_subtle)",
+    "data-hovered:border-(--color-component-components-buttons-secondary-color-button-secondary-color-border_hover)",
+    "data-hovered:text-(--color-component-components-buttons-secondary-color-button-secondary-color-fg_hover)",
+    "data-disabled:border-(--color-border-disabled)",
+    "data-disabled:bg-transparent data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-component-components-buttons-secondary-color-button-secondary-color-fg)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-component-components-buttons-secondary-color-button-secondary-color-fg)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "tertiary-gray": cx(
+    "border border-transparent bg-transparent",
+    "text-(--color-component-components-buttons-tertiary-button-tertiary-fg)",
+    "data-hovered:bg-(--color-component-components-buttons-tertiary-button-tertiary-bg_hover)",
+    "data-hovered:text-(--color-component-components-buttons-tertiary-button-tertiary-fg_hover)",
+    "data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-component-components-buttons-tertiary-button-tertiary-fg)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-component-components-buttons-tertiary-button-tertiary-fg)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "tertiary-color": cx(
+    "border border-transparent bg-transparent",
+    "text-(--color-component-components-buttons-tertiary-color-button-tertiary-color-fg)",
+    "data-hovered:bg-(--color-component-components-buttons-tertiary-color-button-tertiary-color-bg_hover)",
+    "data-hovered:text-(--color-component-components-buttons-tertiary-color-button-tertiary-color-fg_hover)",
+    "data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-component-components-buttons-tertiary-color-button-tertiary-color-fg)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-component-components-buttons-tertiary-color-button-tertiary-color-fg)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "link-gray": cx(
+    "border border-transparent bg-transparent text-(--color-text-secondary)",
+    "data-hovered:bg-(--color-component-components-buttons-tertiary-button-tertiary-bg_hover)",
+    "data-hovered:text-(--color-text-secondary_hover)",
+    "data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-text-secondary)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-text-secondary)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  ),
+  "link-color": cx(
+    "border border-transparent bg-transparent text-(--color-text-brand-tertiary)",
+    "data-hovered:bg-(--color-component-components-buttons-tertiary-color-button-tertiary-color-bg_hover)",
+    "data-hovered:text-(--color-component-components-buttons-tertiary-color-button-tertiary-color-fg_hover)",
+    "data-disabled:text-(--color-text-disabled)",
+    "[&_[data-slot=lead-icon]_svg]:text-(--color-text-brand-tertiary)",
+    "[&_[data-slot=trail-icon]_svg]:text-(--color-text-brand-tertiary)",
+    "data-disabled:[&_[data-slot=lead-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=trail-icon]_svg]:text-(--color-fg-disabled)",
+    "data-disabled:[&_[data-slot=icon-only]_svg]:text-(--color-fg-disabled)"
+  )
+};
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  cx(
+    "inline-flex shrink-0 items-center justify-center font-semibold transition-colors",
+    "disabled:pointer-events-none",
+    focusRing
+  ),
+  {
+    variants: {
+      hierarchy: {
+        primary: hierarchySurface.primary,
+        "secondary-gray": hierarchySurface["secondary-gray"],
+        "secondary-color": hierarchySurface["secondary-color"],
+        "tertiary-gray": hierarchySurface["tertiary-gray"],
+        "tertiary-color": hierarchySurface["tertiary-color"],
+        "link-gray": hierarchySurface["link-gray"],
+        "link-color": hierarchySurface["link-color"]
+      },
+      size: { sm: "", md: "", lg: "", xl: "", "2xl": "" },
+      layoutMode: { labeled: "", iconOnly: "" },
+      dotLeading: { false: "", true: "" }
+    },
+    compoundVariants: [
+      { layoutMode: "labeled", size: "sm", dotLeading: false, class: layoutStyles.labeled.sm },
+      { layoutMode: "labeled", size: "md", dotLeading: false, class: layoutStyles.labeled.md },
+      { layoutMode: "labeled", size: "lg", dotLeading: false, class: layoutStyles.labeled.lg },
+      { layoutMode: "labeled", size: "xl", dotLeading: false, class: layoutStyles.labeled.xl },
+      {
+        layoutMode: "labeled",
+        size: "2xl",
+        dotLeading: false,
+        class: layoutStyles.labeled["2xl"]
+      },
+      { layoutMode: "labeled", size: "sm", dotLeading: true, class: layoutStyles.labeled.sm },
+      { layoutMode: "labeled", size: "md", dotLeading: true, class: layoutStyles.labeled.md },
+      { layoutMode: "labeled", size: "lg", dotLeading: true, class: layoutStyles.labeled.lg },
+      { layoutMode: "labeled", size: "xl", dotLeading: true, class: layoutStyles.labeled.xl },
+      {
+        layoutMode: "labeled",
+        size: "2xl",
+        dotLeading: true,
+        class: layoutStyles.labeled["2xl"]
+      },
+      { layoutMode: "iconOnly", size: "sm", class: layoutStyles.iconOnly.sm },
+      { layoutMode: "iconOnly", size: "md", class: layoutStyles.iconOnly.md },
+      { layoutMode: "iconOnly", size: "lg", class: layoutStyles.iconOnly.lg },
+      { layoutMode: "iconOnly", size: "xl", class: layoutStyles.iconOnly.xl },
+      { layoutMode: "iconOnly", size: "2xl", class: layoutStyles.iconOnly["2xl"] }
+    ],
+    defaultVariants: {
+      hierarchy: "primary",
+      size: "sm",
+      layoutMode: "labeled",
+      dotLeading: false
+    }
+  }
+);
+function Button({
+  hierarchy = "primary",
+  size = "sm",
+  className,
+  children,
+  iconLeft,
+  iconRight,
+  iconOnly,
+  dotLeading,
+  isDisabled,
+  ...rest
+}) {
+  const resolvedSize = size ?? "sm";
+  const layoutMode = iconOnly != null ? "iconOnly" : "labeled";
+  const effectiveDotLeading = layoutMode === "labeled" && dotLeading === true && hierarchy != null && !buttonIconDotUnsupportedHierarchies.includes(hierarchy);
+  const labeled = layoutMode === "labeled";
+  const leadSlot = labeled && !effectiveDotLeading && iconLeft != null ? iconLeft : null;
+  const trailSlot = labeled && iconRight != null ? iconRight : null;
+  const content = labeled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    leadSlot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconSizer(resolvedSize, true), "data-slot": "lead-icon", "aria-hidden": true, children: leadSlot }) : null,
+    effectiveDotLeading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-2 shrink-0 rounded-full bg-current", "aria-hidden": true }) : null,
+    children != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0", children }) : null,
+    trailSlot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconSizer(resolvedSize, true), "data-slot": "trail-icon", "aria-hidden": true, children: trailSlot }) : null
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconSizer(resolvedSize, false), "data-slot": "icon-only", children: iconOnly });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Button,
+    {
+      ...rest,
+      isDisabled,
+      className: cx(
+        buttonVariants({
+          hierarchy,
+          size: resolvedSize,
+          layoutMode,
+          dotLeading: effectiveDotLeading
+        }),
+        className
+      ),
+      children: content
+    }
+  );
+}
+
+// src/components/Input.tsx
+var import_react_aria_components2 = require("react-aria-components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FieldDividerDropdown() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[20px] w-px shrink-0 bg-[#d4dbe5]", "aria-hidden": true });
+}
+function FieldDividerButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-[20px] w-px shrink-0 bg-(--color-border-secondary)", "aria-hidden": true });
+}
+function HelpIconChrome({
+  children,
+  isDisabled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      className: cx(
+        "flex size-4 shrink-0 items-center justify-center rounded-[8px] border-[1.5px] border-solid",
+        isDisabled ? "border-(--color-fg-disabled)" : "border-(--color-fg-tertiary)"
+      ),
+      children
+    }
+  );
+}
+function PaymentChipFrame({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex h-[20px] w-[32px] shrink-0 items-center justify-center overflow-hidden rounded-[4px] border border-solid border-[#99abbf]", children });
+}
+function shellPadding(composition) {
+  switch (composition) {
+    case "leading-text":
+    case "leading-dropdown":
+      return "pl-0 pr-[14px]";
+    case "trailing-dropdown":
+      return "pl-[14px] pr-0";
+    default:
+      return "px-[14px]";
+  }
+}
+function Input({
+  size = "md",
+  composition = "default",
+  destructive = false,
+  label,
+  hint,
+  errorMessage,
+  leadingIcon,
+  leadingDropdown,
+  trailingDropdown,
+  leadingText,
+  paymentGraphic,
+  tags,
+  trailingButton,
+  helpIcon,
+  placeholder,
+  inputClassName,
+  className,
+  isDisabled,
+  ...rest
+}) {
+  const invalid = destructive === true;
+  const shellVertical = size === "sm" ? "min-h-[40px] py-[8px]" : "min-h-[44px] py-[10px]";
+  const shellBorderBg = cx(
+    "overflow-hidden rounded-(--radius-md) border border-solid transition-[border-color,box-shadow]",
+    shellVertical,
+    shellPadding(composition),
+    // Inner row gap — Figma 8px between leading pieces / text / trailing pieces.
+    "flex items-center gap-2",
+    isDisabled ? "border-[color:var(--color-border-disabled)] bg-[color:var(--color-bg-disabled)]" : invalid ? "border-[color:var(--color-border-error)] bg-[color:var(--color-bg-primary)]" : cx(
+      "border-[color:var(--color-border-secondary)] bg-[color:var(--color-bg-primary)]",
+      "focus-within:border-(--color-border-brand)",
+      // Ring: 2px gap via field surface, 4px outer glow — brand purple (Figma).
+      "focus-within:shadow-[0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-fg-brand-secondary)]"
+    )
+  );
+  const inputTypography = cx(
+    "min-h-0 min-w-0 flex-1 bg-transparent font-normal outline-none ring-0 ring-transparent",
+    "focus:outline-none focus-visible:outline-none",
+    "[font-family:var(--font-family)] [font-size:var(--font-size-text-md)] [font-weight:var(--font-weight-regular)] leading-[var(--line-height-text-md)]",
+    "text-[color:var(--color-text-primary)] placeholder:text-[color:var(--color-text-placeholder)]",
+    "disabled:text-[color:var(--color-text-disabled)] disabled:placeholder:text-[color:var(--color-text-disabled)]",
+    inputClassName
+  );
+  const racInput = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Input, { placeholder, className: inputTypography, disabled: isDisabled });
+  let control;
+  switch (composition) {
+    case "leading-dropdown":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex shrink-0 items-center gap-2 pl-[14px] pr-[8px]", children: leadingDropdown }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldDividerDropdown, {}),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "trailing-dropdown":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        racInput,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldDividerDropdown, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex shrink-0 items-center gap-2 pl-[8px] pr-[14px]", children: trailingDropdown }),
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "leading-text":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex min-h-full shrink-0 items-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            className: cx(
+              "flex items-center bg-(--color-bg-secondary) pl-[14px] pr-[12px]",
+              "[font-family:var(--font-family)] [font-size:var(--font-size-text-md)] [font-weight:var(--font-weight-regular)] leading-[var(--line-height-text-md)]",
+              "text-(--color-text-primary)",
+              isDisabled && "text-(--color-text-disabled)"
+            ),
+            children: leadingText
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldDividerDropdown, {}),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "payment-input":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PaymentChipFrame, { children: paymentGraphic }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldDividerDropdown, {}),
+        racInput
+      ] });
+      break;
+    case "tags":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2 [&_[data-slot=input-tags]>input]:min-w-[120px]", children: [
+          tags,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-slot": "input-tags", className: "min-w-0 flex-1", children: racInput })
+        ] }),
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "trailing-button":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldDividerButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex shrink-0 items-center gap-[6px]", children: trailingButton })
+      ] });
+      break;
+    case "icon-leading":
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: leadingIcon }),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    default:
+      control = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+  }
+  const hintRow = invalid && errorMessage != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_aria_components2.FieldError,
+    {
+      className: cx(
+        "[font-family:var(--font-family)] [font-size:var(--font-size-text-sm)] [font-weight:var(--font-weight-regular)] leading-[var(--line-height-text-sm)]",
+        "text-[color:var(--color-text-error-primary)]"
+      ),
+      children: errorMessage
+    }
+  ) : hint != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_aria_components2.Text,
+    {
+      slot: "description",
+      className: cx(
+        "[font-family:var(--font-family)] [font-size:var(--font-size-text-sm)] [font-weight:var(--font-weight-regular)] leading-[var(--line-height-text-sm)]",
+        "text-[color:var(--color-text-tertiary)]",
+        "group-data-[disabled]:text-[color:var(--color-text-disabled)]"
+      ),
+      children: hint
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react_aria_components2.TextField,
+    {
+      ...rest,
+      isDisabled,
+      isInvalid: invalid,
+      validationBehavior: "aria",
+      className: cx("group flex flex-col gap-[6px]", className),
+      children: [
+        label != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_aria_components2.Label,
+          {
+            className: cx(
+              "[font-family:var(--font-family)] [font-size:var(--font-size-text-sm)] [font-weight:var(--font-weight-medium)] leading-[var(--line-height-text-sm)]",
+              "text-[color:var(--color-text-secondary)]",
+              "group-data-[disabled]:text-[color:var(--color-text-disabled)]"
+            ),
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: shellBorderBg, children: control }),
+        hintRow
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Input,
+  cx
+});