@crossed/demo/lib/module/ui/forms/Input.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { Input, UilEye, YBox } from "@crossed/ui";
import { useState } from "react";
const InputDemo = ({ size, variant, color }) => {
  const [value, setValue] = useState("");
  return /* @__PURE__ */ jsxs(YBox, { space: "md", children: [
    /* @__PURE__ */ jsx(
      Input,
      {
        label: "label",
        size,
        variant,
        iconAfter: UilEye,
        icon: UilEye,
        color,
        onChangeValue: setValue,
        value
      }
    ),
    /* @__PURE__ */ jsxs(
      Input,
      {
        color,
        size,
        variant,
        onChangeValue: setValue,
        value,
        children: [
          /* @__PURE__ */ jsx(Input.Label, { "aria-label": "Label", children: "Label" }),
          /* @__PURE__ */ jsxs(Input.Content, { children: [
            /* @__PURE__ */ jsx(Input.Icon, { children: /* @__PURE__ */ jsx(UilEye, {}) }),
            /* @__PURE__ */ jsx(Input.Input, {}),
            /* @__PURE__ */ jsx(Input.Icon, { children: /* @__PURE__ */ jsx(UilEye, {}) })
          ] })
        ]
      }
    )
  ] });
};
export {
  InputDemo
};
//# sourceMappingURL=Input.js.map