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

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

import { jsx, jsxs } from "react/jsx-runtime";
import { merge } from "@crossed/styled";
import { createLabel } from "@crossed/primitive";
import { YBox } from "@crossed/ui";
const Label = createLabel({
  Root: (props) => {
    return /* @__PURE__ */ jsx("div", { ...props, className: merge("flex flex-col", props.className) });
  },
  Text: (props) => {
    return /* @__PURE__ */ jsx("label", { ...props, className: merge("flex flex-col", props.className) });
  }
});
const CreateLabelSimpleDemo = () => {
  return /* @__PURE__ */ jsxs(YBox, { space: "md", children: [
    /* @__PURE__ */ jsxs(Label, { children: [
      /* @__PURE__ */ jsx(Label.Text, { "aria-label": "Input", children: "Input" }),
      /* @__PURE__ */ jsx(Label.Input, { children: /* @__PURE__ */ jsx("input", { type: "text", className: "border border-neutral-800" }) })
    ] }),
    /* @__PURE__ */ jsxs(Label, { children: [
      /* @__PURE__ */ jsx(Label.Text, { "aria-label": "Select", children: "Select" }),
      /* @__PURE__ */ jsx(Label.Input, { children: /* @__PURE__ */ jsxs("select", { className: "border border-neutral-800", children: [
        /* @__PURE__ */ jsx("option", { value: "Integer consequat", children: "Integer consequat" }),
        /* @__PURE__ */ jsx("option", { value: "Maecenas sed sem", children: "Maecenas sed sem" }),
        /* @__PURE__ */ jsx("option", { value: "Vestibulum lacinia", children: "Vestibulum lacinia" }),
        /* @__PURE__ */ jsx("option", { value: "Quisque ornare", children: "Quisque ornare" })
      ] }) })
    ] }),
    /* @__PURE__ */ jsxs(Label, { className: "flex-row gap-2", children: [
      /* @__PURE__ */ jsx(Label.Input, { children: /* @__PURE__ */ jsx("input", { type: "checkbox" }) }),
      /* @__PURE__ */ jsx(Label.Text, { "aria-label": "Checkbox", children: "Checkbox" })
    ] }),
    /* @__PURE__ */ jsxs(Label, { className: "flex-row gap-2", children: [
      /* @__PURE__ */ jsx(Label.Input, { children: /* @__PURE__ */ jsx("input", { type: "radio" }) }),
      /* @__PURE__ */ jsx(Label.Text, { "aria-label": "Radio", children: "Radio" })
    ] })
  ] });
};
export {
  CreateLabelSimpleDemo
};
//# sourceMappingURL=simple.js.map