import { jsx as a } from "react/jsx-runtime";
import { c as t } from "../../index-BtlgVD4m.js";
const l = ({ text: e }) => /* @__PURE__ */ a(
  "span",
  {
    className: t(
      "px-[var(--spacing-2-5)]",
      "py-[var(--spacing-0-5)]",
      "gap-[var(--spacing-1)]",
      "rounded-[var(--border-radius-full)]",
      "border",
      "border-[var(--tailwind-colors-base-transparent)]",
      "bg-[var(--base-secondary)]",
      "text-[var(--base-secondary-foreground)]",
      "text-[length:var(--typography-base-sizes-extra-small-font-size)]",
      "font-[var(--font-weight-semibold)]",
      "leading-(--typography-base-sizes-extra-small-line-height)",
      "max-w-[50px]",
      "truncate"
    ),
    title: e,
    children: e
  }
);
l.displayName = "BadgeContainer";
const u = ({ text: e, isSuffix: r }) => /* @__PURE__ */ a(
  "div",
  {
    className: t(
      "flex h-[var(--width-w-10)] px-[var(--spacing-4)] flex-col justify-center items-center bg-[var(--base-input)]",
      r ? "rounded-[0px var(--border-radius-md) var(--border-radius-md) 0px]" : "rounded-[var(--border-radius-md) 0px 0px var(--border-radius-md)]"
    ),
    children: e
  }
);
u.displayName = "AffixContainer";
const s = {
  base: `
  relative overflow-hidden flex items-center gap-[var(--spacing-2)]
  w-full
  rounded-[var(--radius-rounded-md)]
  border border-[var(--base-input)] bg-[var(--base-background)]
  px-[var(--spacing-3)]
  disabled:opacity-[var(--opacity-opacity-50)] disabled:cursor-not-allowed
  transition-colors duration-200
`,
  default: "h-[var(--height-h-10)]",
  sm: "h-[var(--height-h-9)]"
}, p = ({
  ref: e,
  className: r,
  error: n,
  readOnly: o,
  size: i = "default",
  ...d
}) => /* @__PURE__ */ a(
  "div",
  {
    className: t(
      "relative w-full outline-(length:--border-width-border-1) focus-within:outline-offset-2 outline-transparent rounded-[6px] transition-all transform",
      n ? "outline-[var(--base-ring-error)] outline-offset-2" : "focus-within:outline-[var(--base-ring)]"
    ),
    "data-readonly": o || void 0,
    children: /* @__PURE__ */ a(
      "div",
      {
        ref: e,
        className: t(s.base, s[i], o && "border-[var(--base-border)] bg-[var(--base-muted)]", r),
        ...d
      }
    )
  }
);
p.displayName = "InputContainer";
const b = ({ ref: e, className: r, type: n, ...o }) => {
  const i = n === "file";
  return /* @__PURE__ */ a(
    "input",
    {
      type: n,
      className: t(
        "w-full bg-transparent outline-none",
        !i && "border-0 p-0",
        "text-sm text-[var(--base-foreground)] font-[var(--font-weight-normal)]",
        "placeholder:text-[var(--base-muted-foreground)] placeholder:font-[var(--font-weight-normal)]",
        "disabled:cursor-not-allowed disabled:opacity-[var(--opacity-opacity-50)]",
        i && [
          "file:rounded-[var(--radius-rounded-md)]",
          "file:border-[var(--base-input)]",
          "file:bg-[var(--base-background)]",
          "file:text-sm",
          "file:text-[var(--base-foreground)]",
          "file:font-[var(--font-weight-normal)]",
          "file:px-[var(--spacing-3)]",
          "file:mt-[1px]"
        ],
        r
      ),
      ref: e,
      ...o
    }
  );
};
b.displayName = "BaseInput";
export {
  u as AffixContainer,
  l as BadgeContainer,
  b as BaseInput,
  p as InputContainer
};
//# sourceMappingURL=InputPrimitive.js.map
