pathum-ds-library 0.0.8

package/dist/index.mjs

@@ -0,0 +1,462 @@
+// src/components/Button.tsx
+import { cva } from "class-variance-authority";
+import { Button as RACButton } from "react-aria-components";
+
+// src/utils/cx.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cx(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Button.tsx
+import { Fragment, jsx, jsxs } from "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 = 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__ */ jsxs(Fragment, { children: [
+    leadSlot ? /* @__PURE__ */ jsx("span", { className: iconSizer(resolvedSize, true), "data-slot": "lead-icon", "aria-hidden": true, children: leadSlot }) : null,
+    effectiveDotLeading ? /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full bg-current", "aria-hidden": true }) : null,
+    children != null ? /* @__PURE__ */ jsx("span", { className: "min-w-0", children }) : null,
+    trailSlot ? /* @__PURE__ */ jsx("span", { className: iconSizer(resolvedSize, true), "data-slot": "trail-icon", "aria-hidden": true, children: trailSlot }) : null
+  ] }) : /* @__PURE__ */ jsx("span", { className: iconSizer(resolvedSize, false), "data-slot": "icon-only", children: iconOnly });
+  return /* @__PURE__ */ jsx(
+    RACButton,
+    {
+      ...rest,
+      isDisabled,
+      className: cx(
+        buttonVariants({
+          hierarchy,
+          size: resolvedSize,
+          layoutMode,
+          dotLeading: effectiveDotLeading
+        }),
+        className
+      ),
+      children: content
+    }
+  );
+}
+
+// src/components/Input.tsx
+import {
+  FieldError,
+  Input as RACInput,
+  Label,
+  Text,
+  TextField
+} from "react-aria-components";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FieldDividerDropdown() {
+  return /* @__PURE__ */ jsx2("div", { className: "h-[20px] w-px shrink-0 bg-[#d4dbe5]", "aria-hidden": true });
+}
+function FieldDividerButton() {
+  return /* @__PURE__ */ jsx2("div", { className: "h-[20px] w-px shrink-0 bg-(--color-border-secondary)", "aria-hidden": true });
+}
+function HelpIconChrome({
+  children,
+  isDisabled
+}) {
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(RACInput, { placeholder, className: inputTypography, disabled: isDisabled });
+  let control;
+  switch (composition) {
+    case "leading-dropdown":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 items-center gap-2 pl-[14px] pr-[8px]", children: leadingDropdown }),
+        /* @__PURE__ */ jsx2(FieldDividerDropdown, {}),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "trailing-dropdown":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        racInput,
+        /* @__PURE__ */ jsx2(FieldDividerDropdown, {}),
+        /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 items-center gap-2 pl-[8px] pr-[14px]", children: trailingDropdown }),
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "leading-text":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex min-h-full shrink-0 items-stretch", children: /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(FieldDividerDropdown, {}),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "payment-input":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2(PaymentChipFrame, { children: paymentGraphic }),
+        /* @__PURE__ */ jsx2(FieldDividerDropdown, {}),
+        racInput
+      ] });
+      break;
+    case "tags":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("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__ */ jsx2("span", { "data-slot": "input-tags", className: "min-w-0 flex-1", children: racInput })
+        ] }),
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    case "trailing-button":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null,
+        /* @__PURE__ */ jsx2(FieldDividerButton, {}),
+        /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 items-center gap-[6px]", children: trailingButton })
+      ] });
+      break;
+    case "icon-leading":
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("span", { className: "flex shrink-0 items-center [&_svg]:size-4", children: leadingIcon }),
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+      break;
+    default:
+      control = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        racInput,
+        helpIcon != null ? /* @__PURE__ */ jsx2(HelpIconChrome, { isDisabled, children: helpIcon }) : null
+      ] });
+  }
+  const hintRow = invalid && errorMessage != null ? /* @__PURE__ */ jsx2(
+    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__ */ jsx2(
+    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__ */ jsxs2(
+    TextField,
+    {
+      ...rest,
+      isDisabled,
+      isInvalid: invalid,
+      validationBehavior: "aria",
+      className: cx("group flex flex-col gap-[6px]", className),
+      children: [
+        label != null ? /* @__PURE__ */ jsx2(
+          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__ */ jsx2("div", { className: shellBorderBg, children: control }),
+        hintRow
+      ]
+    }
+  );
+}
+export {
+  Button,
+  Input,
+  cx
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "pathum-ds-library",
+  "version": "0.0.8",
+  "description": "",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": "./src/styles/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@fontsource/inter": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react-aria-components": "^1.8.0",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.6.18",
+    "@types/react": "^19.1.8",
+    "tsup": "^8.5.1",
+    "typescript": "~5.8.3"
+  },
+  "packageManager": "pnpm@10.33.4"
+}

package/src/styles/globals.css

@@ -0,0 +1,19 @@
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";
+@import "@fontsource/inter/600.css";
+@import "@fontsource/inter/700.css";
+@import "tailwindcss";
+@import "./theme.css";
+
+:root {
+  --font-body: var(--font-family), ui-sans-serif, system-ui, sans-serif;
+}
+
+html,
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@source "../**/*.{js,jsx,ts,tsx,mjs,mts}";