import { jsxs as l, jsx as e } from "react/jsx-runtime";
import a from "../../InputGroup.js";
import { useCallback as m } from "react";
import r from "../../../box/Box.js";
import n from "../../../text/Text.js";
import i from "../../components/input-group-input/InputGroupInput.js";
import o from "../../components/input-group-addon/InputGroupAddon.js";
import c from "../../components/input-group-icon/InputGroupIcon.js";
import s from "../../components/input-group-button/InputGroupButton.js";
import t from "../../components/input-group-text/InputGroupText.js";
const P = (p) => {
  const d = m((h) => {
    console.log(h);
  }, []);
  return /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-4)] w-full", children: [
    /* @__PURE__ */ e(n, { type: "h4", children: "Input Props on InputGroup" }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Placeholder prop:" }),
      /* @__PURE__ */ l(a, { ...p, placeholder: "Search products...", children: [
        /* @__PURE__ */ e(i, {}),
        /* @__PURE__ */ e(o, { align: "inline-left", children: /* @__PURE__ */ e(c, { name: "Search" }) })
      ] })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Value prop:" }),
      /* @__PURE__ */ e(a, { ...p, value: "Pre-filled value", children: /* @__PURE__ */ e(i, {}) })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Type=email prop:" }),
      /* @__PURE__ */ l(a, { ...p, type: "email", placeholder: "Enter email", children: [
        /* @__PURE__ */ e(i, {}),
        /* @__PURE__ */ e(o, { align: "inline-left", children: /* @__PURE__ */ e(c, { name: "Mail" }) })
      ] })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Type=file prop:" }),
      /* @__PURE__ */ l(a, { ...p, type: "file", placeholder: "Enter email", onChange: d, children: [
        /* @__PURE__ */ e(i, {}),
        /* @__PURE__ */ e(o, { align: "inline-right", children: /* @__PURE__ */ e(c, { name: "File" }) })
      ] })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Type=password prop:" }),
      /* @__PURE__ */ l(a, { ...p, type: "password", placeholder: "Enter password", children: [
        /* @__PURE__ */ e(i, {}),
        /* @__PURE__ */ e(o, { align: "inline-left", children: /* @__PURE__ */ e(c, { name: "Lock" }) }),
        /* @__PURE__ */ e(o, { align: "inline-right", children: /* @__PURE__ */ e(s, { icon: "Eye", variant: "ghost" }) })
      ] })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "MaxLength prop (10 chars):" }),
      /* @__PURE__ */ e(a, { ...p, maxLength: 10, placeholder: "Max 10 chars", children: /* @__PURE__ */ e(i, {}) })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Combined with addons:" }),
      /* @__PURE__ */ l(a, { ...p, placeholder: "Amount", type: "number", children: [
        /* @__PURE__ */ e(i, {}),
        /* @__PURE__ */ e(o, { align: "inline-left", children: /* @__PURE__ */ e(t, { children: "$" }) }),
        /* @__PURE__ */ e(o, { align: "inline-right", children: /* @__PURE__ */ e(t, { children: ".00" }) })
      ] })
    ] }),
    /* @__PURE__ */ l(r, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(n, { type: "small", children: "Props override (InputGroup placeholder, InputGroupInput overrides):" }),
      /* @__PURE__ */ e(a, { ...p, placeholder: "From InputGroup", children: /* @__PURE__ */ e(i, { placeholder: "Overridden by InputGroupInput" }) })
    ] })
  ] });
};
export {
  P as default
};
//# sourceMappingURL=AllInputProperty.js.map
