@crossed/demo/lib/module/primitive/createInput/simple.js

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

import { jsx, jsxs } from "react/jsx-runtime";
import { createInput } from "@crossed/primitive";
import { styled } from "@crossed/styled";
import { Button, YBox } from "@crossed/ui";
import { Pressable, Text, TextInput, View } from "react-native";
const GroupFrame = styled(Pressable, {
  "className": [
    "bg-neutral-800",
    "border border-neutral-600",
    "flex flex-row",
    "rounded",
    "cursor-text",
    "w-full",
    "items-center",
    "overflow-hidden"
  ],
  "props": {
    focusable: false
  },
  ":hover": {
    className: ["border-blue-500"]
  },
  ":active": {
    className: ["border-blue-500"]
  },
  ":focus": {
    className: ["border-blue-500"]
  }
});
const InputFrame = styled(TextInput, {
  className: [
    "w-0 flex-1",
    "appearance-none",
    "bg-transparent",
    "outline-0",
    "!shadow-none",
    "ring-0",
    "ring-offset-transparent",
    "px-3 py-2"
  ]
});
const AddonFrame = styled(View, {
  className: ["bg-neutral-700", "px-3 py-2"]
});
const ElementFrame = styled(View, {
  className: ["px-3 py-2", "cursor-default"]
});
const TextElementFrame = styled(Text, {
  className: ["cursor-default"]
});
const Input = createInput({
  Group: GroupFrame,
  Addon: AddonFrame,
  Element: ElementFrame,
  Input: InputFrame
});
const CreateInputSimpleDemo = () => {
  return /* @__PURE__ */ jsxs(YBox, { space: "md", className: "w-1/2", children: [
    /* @__PURE__ */ jsx(Input, {}),
    /* @__PURE__ */ jsxs(Input.Group, { children: [
      /* @__PURE__ */ jsx(Input.Element, { children: /* @__PURE__ */ jsx(TextElementFrame, { children: "\u{1F44C}" }) }),
      /* @__PURE__ */ jsx(Input, {})
    ] }),
    /* @__PURE__ */ jsxs(Input.Group, { children: [
      /* @__PURE__ */ jsx(Input.Addon, { children: /* @__PURE__ */ jsx(TextElementFrame, { children: "\u{1F44C}" }) }),
      /* @__PURE__ */ jsx(Input, {})
    ] }),
    /* @__PURE__ */ jsxs(Input.Group, { children: [
      /* @__PURE__ */ jsx(Input, {}),
      /* @__PURE__ */ jsx(Input.Element, { className: "p-0 pr-1", children: /* @__PURE__ */ jsx(
        Button,
        {
          "aria-label": "more",
          size: "xs",
          variant: "filled",
          onPress: () => console.log("dans la demo"),
          children: /* @__PURE__ */ jsx(Button.Text, { children: "More" })
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxs(Input.Group, { children: [
      /* @__PURE__ */ jsx(Input.Addon, { children: /* @__PURE__ */ jsx(TextElementFrame, { children: "\u{1F44C}" }) }),
      /* @__PURE__ */ jsx(Input, {}),
      /* @__PURE__ */ jsx(Input.Element, { className: "p-0 pr-1", children: /* @__PURE__ */ jsx(Button, { "aria-label": "more", size: "xs", variant: "filled", children: /* @__PURE__ */ jsx(Button.Text, { children: "More" }) }) })
    ] })
  ] });
};
export {
  CreateInputSimpleDemo
};
//# sourceMappingURL=simple.js.map