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

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

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Select, SelectCompact, Text } from "@crossed/ui";
const SelectDemo = ({ size, variant, color }) => {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(Select, { size, variant, color, children: [
      /* @__PURE__ */ jsx(Select.Label, { children: "Size" }),
      /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": "Size" }),
      /* @__PURE__ */ jsxs(Select.Content, { children: [
        /* @__PURE__ */ jsx(Select.Item, { value: "xs", "aria-label": "xs", children: /* @__PURE__ */ jsx(Text, { children: "xs" }) }),
        /* @__PURE__ */ jsx(Select.Item, { value: "sm", "aria-label": "sm", children: /* @__PURE__ */ jsx(Text, { children: "sm" }) }),
        /* @__PURE__ */ jsx(Select.Item, { value: "md", "aria-label": "md", children: /* @__PURE__ */ jsx(Text, { children: "md" }) }),
        /* @__PURE__ */ jsx(Select.Item, { value: "lg", "aria-label": "lg", children: /* @__PURE__ */ jsx(Text, { children: "lg" }) }),
        /* @__PURE__ */ jsx(Select.Item, { value: "xl", "aria-label": "xl", children: /* @__PURE__ */ jsx(Text, { children: "xl" }) })
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      SelectCompact,
      {
        size,
        variant,
        color,
        label: "Size",
        items: [
          { value: "xs", label: "xs" },
          { value: "sm", label: "sm" },
          { value: "md", label: "md" },
          { value: "lg", label: "lg" },
          { value: "xl", label: "xl" }
        ]
      }
    )
  ] });
};
export {
  SelectDemo
};
//# sourceMappingURL=Select.js.map