@mangtre/ui 0.1.0

package/dist/chunk-OBPXCUVF.js

@@ -0,0 +1,282 @@
+import {
+  cx,
+  useAreaStyles,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/forms/Field.tsx
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Field({
+  label,
+  description,
+  error,
+  required,
+  theme,
+  className,
+  children
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  const id = useId();
+  const descId = description ? `${id}-desc` : void 0;
+  const errId = error ? `${id}-err` : void 0;
+  const describedBy = [descId, errId].filter(Boolean).join(" ") || void 0;
+  const control = isValidElement(children) ? cloneElement(children, {
+    id: children.props.id ?? id,
+    "aria-describedby": describedBy,
+    "aria-invalid": error ? true : void 0
+  }) : children;
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-field", className), children: [
+    label != null && /* @__PURE__ */ jsxs("label", { className: "mang-field-label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "mang-field-req", "aria-hidden": "true", children: "*" })
+    ] }),
+    description != null && /* @__PURE__ */ jsx("span", { className: "mang-field-desc", id: descId, children: description }),
+    control,
+    error != null && /* @__PURE__ */ jsx("span", { className: "mang-field-error", id: errId, role: "alert", children: error })
+  ] });
+}
+
+// src/forms/Input.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Input({ theme, className, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ...rest,
+      className: cx(scope.className, "mang-control", className),
+      "data-theme": scope["data-theme"],
+      "data-density": scope["data-density"]
+    }
+  );
+}
+function TextArea({ theme, className, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      ...rest,
+      className: cx(scope.className, "mang-control", className),
+      "data-theme": scope["data-theme"],
+      "data-density": scope["data-density"]
+    }
+  );
+}
+function Select({ theme, className, children, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx2(
+    "select",
+    {
+      ...rest,
+      className: cx(scope.className, "mang-control", className),
+      "data-theme": scope["data-theme"],
+      "data-density": scope["data-density"],
+      children
+    }
+  );
+}
+
+// src/forms/Controls.tsx
+import { useId as useId2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-forms-ext";
+var { color, radius, fontSize, fontWeight, font, motion } = tokens;
+var ease = motion.ease.standard;
+var mix = (a, pct, b) => `color-mix(in oklab, ${a} ${pct}%, ${b})`;
+var focusRing = `3px solid ${mix(color.mangGreen, 45, "transparent")}`;
+var CSS = (
+  /* css */
+  `
+.mang-seg { display: inline-flex; gap: 0.2rem; padding: 0.25rem; background: var(--m-sunken); border-radius: ${radius.md}; border: 1px solid var(--m-line); max-width: 100%; flex-wrap: wrap; }
+.mang-seg-opt { appearance: none; cursor: pointer; border: none; background: transparent; padding: 0.45rem 0.85rem; border-radius: ${radius.sm}; font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.sm}; color: var(--m-text-muted); transition: background ${motion.duration.fast} ${ease}, color ${motion.duration.fast} ${ease}; }
+.mang-seg-opt:hover { color: var(--m-text-strong); }
+.mang-seg-opt[aria-pressed="true"] { background: var(--m-surface); color: var(--m-accent); box-shadow: var(--m-shadow); }
+.mang-seg-opt:focus-visible { outline: ${focusRing}; outline-offset: 1px; }
+.mang-seg-opt:disabled { opacity: 0.5; cursor: not-allowed; }
+.mang-seg[data-size="sm"] .mang-seg-opt { padding: 0.25rem 0.6rem; font-size: ${fontSize.xs}; }
+
+.mang-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: ${radius.full}; font-family: "${font.body}", system-ui, sans-serif; font-size: ${fontSize.sm}; font-weight: ${fontWeight.medium}; border: 1.5px solid var(--m-line-strong); background: var(--m-surface); color: var(--m-text); }
+button.mang-chip { cursor: pointer; transition: border-color ${motion.duration.fast} ${ease}, background ${motion.duration.fast} ${ease}, color ${motion.duration.fast} ${ease}; }
+button.mang-chip:hover { border-color: var(--m-accent); }
+button.mang-chip:focus-visible { outline: ${focusRing}; outline-offset: 2px; }
+.mang-chip[data-selected="true"] { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent); }
+.mang-chip-x { appearance: none; border: none; background: transparent; cursor: pointer; color: inherit; font-size: 1.05em; line-height: 1; padding: 0 0.05em; opacity: 0.65; }
+.mang-chip-x:hover { opacity: 1; }
+.mang-chip-x:focus-visible { outline: ${focusRing}; outline-offset: 2px; border-radius: ${radius.sm}; }
+
+.mang-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--m-line-strong); border-radius: ${radius.md}; overflow: clip; background: var(--m-surface); }
+.mang-stepper:focus-within { border-color: var(--m-accent); box-shadow: 0 0 0 3px ${mix(color.mangGreen, 35, "transparent")}; }
+.mang-stepper-btn { appearance: none; cursor: pointer; border: none; background: transparent; color: var(--m-text-strong); width: 2.3rem; font-size: ${fontSize.lg}; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background ${motion.duration.fast} ${ease}, color ${motion.duration.fast} ${ease}; }
+.mang-stepper-btn:hover:not(:disabled) { background: var(--m-accent-soft); color: var(--m-accent); }
+.mang-stepper-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.mang-stepper-input { width: 3.4rem; text-align: center; border: none; border-left: 1px solid var(--m-line); border-right: 1px solid var(--m-line); background: transparent; color: var(--m-text); font-family: "${font.body}", system-ui, sans-serif; font-size: ${fontSize.base}; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
+.mang-stepper-input::-webkit-outer-spin-button, .mang-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.mang-stepper-input:focus { outline: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mang-seg-opt, button.mang-chip, .mang-stepper-btn { transition: none; }
+}
+`
+);
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  size = "md",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const group = { role: "group", "aria-label": ariaLabel };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...scope,
+      ...group,
+      className: cx(scope.className, "mang-seg", className),
+      "data-size": size,
+      children: options.map((o) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "mang-seg-opt",
+          "aria-pressed": o.value === value,
+          disabled: o.disabled,
+          onClick: () => onChange(o.value),
+          children: o.label
+        },
+        o.value
+      ))
+    }
+  );
+}
+function Chip({
+  children,
+  selected,
+  onClick,
+  onRemove,
+  removeLabel = "Xo\xE1",
+  icon,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx3("span", { children }),
+    onRemove != null && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "mang-chip-x",
+        "aria-label": removeLabel,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        children: "\xD7"
+      }
+    )
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        ...scope,
+        type: "button",
+        className: cx(scope.className, "mang-chip", className),
+        "data-selected": selected ? "true" : void 0,
+        "aria-pressed": selected,
+        onClick,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-chip", className),
+      "data-selected": selected ? "true" : void 0,
+      children: content
+    }
+  );
+}
+function NumberStepper({
+  value,
+  onChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  ariaLabel,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const id = useId2();
+  const clamp = (n) => Math.min(max, Math.max(min, n));
+  const set = (n) => {
+    if (!Number.isNaN(n)) onChange(clamp(n));
+  };
+  return /* @__PURE__ */ jsxs2("div", { ...scope, className: cx(scope.className, "mang-stepper", className), children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "mang-stepper-btn",
+        "aria-label": `${ariaLabel ?? "S\u1ED1"} \u2212${step}`,
+        disabled: value <= min,
+        onClick: () => set(value - step),
+        children: "\u2212"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        id,
+        type: "number",
+        className: "mang-stepper-input",
+        value,
+        min: min === Number.NEGATIVE_INFINITY ? void 0 : min,
+        max: max === Number.POSITIVE_INFINITY ? void 0 : max,
+        step,
+        "aria-label": ariaLabel,
+        onChange: (e) => set(Number(e.target.value))
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "mang-stepper-btn",
+        "aria-label": `${ariaLabel ?? "S\u1ED1"} +${step}`,
+        disabled: value >= max,
+        onClick: () => set(value + step),
+        children: "+"
+      }
+    )
+  ] });
+}
+
+export {
+  Field,
+  Input,
+  TextArea,
+  Select,
+  SegmentedControl,
+  Chip,
+  NumberStepper
+};

package/dist/chunk-OJX2EIMB.js

@@ -0,0 +1,145 @@
+import {
+  Button
+} from "./chunk-YN5O6YL6.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/data-room/DataRoom.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-dataroom";
+var { color, fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-room-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.55rem; border-radius: ${radius.full}; font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.semibold}; font-size: ${fontSize.xs}; }
+.mang-room-badge[data-status="offline"] { background: var(--m-sunken); color: var(--m-text-muted); }
+.mang-room-badge[data-status="cloud"] { background: var(--m-info-soft); color: var(--m-info-on); }
+.mang-room-badge[data-status="realtime"] { background: var(--m-success-soft); color: var(--m-success-on); }
+.mang-room-peers { font-weight: ${fontWeight.bold}; }
+.mang-room-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.7rem; border: 1px solid var(--m-line); border-radius: ${radius.md}; background: var(--m-sunken); }
+.mang-room-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-room-presence { display: inline-flex; align-items: center; }
+.mang-room-dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.65rem; font-weight: ${fontWeight.bold}; color: #fff; margin-left: -0.4rem; box-shadow: 0 0 0 2px var(--m-surface); }
+.mang-room-dot:first-child { margin-left: 0; }
+.mang-room-conflict { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: ${radius.md}; background: var(--m-warning-soft); color: var(--m-warning-on); border: 1px solid color-mix(in oklab, ${color.sun} 40%, transparent); }
+.mang-room-conflict-msg { flex: 1; font-size: ${fontSize.sm}; }
+`
+);
+var STATUS_META = {
+  offline: { icon: "\u{1F4E6}", vi: "Tr\xEAn m\xE1y", en: "On-device" },
+  cloud: { icon: "\u2601\uFE0F", vi: "\u0110\xE1m m\xE2y", en: "Cloud" },
+  realtime: { icon: "\u26A1", vi: "Tr\u1EF1c ti\u1EBFp", en: "Live" }
+};
+function RoomStatusBadge({
+  status,
+  peers,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const m = STATUS_META[status];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-room-badge", className),
+      "data-status": status,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: m.icon }),
+        locale === "vi" ? m.vi : m.en,
+        status === "realtime" && peers != null && peers > 0 && /* @__PURE__ */ jsxs("span", { className: "mang-room-peers", children: [
+          " \xB7 ",
+          peers
+        ] })
+      ]
+    }
+  );
+}
+function RoomShareButton({
+  onShare,
+  locale = "vi",
+  theme,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Button, { theme, className, icon: "\u{1F517}", onClick: onShare, children: children ?? (locale === "vi" ? "Chia s\u1EBB ph\xF2ng" : "Share room") });
+}
+function RoomLinkCard({ url, onCopy, locale = "vi", theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-room-link", className), children: [
+    /* @__PURE__ */ jsx("code", { children: url }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        theme,
+        onClick: () => {
+          onCopy?.();
+          void navigator.clipboard?.writeText(url).catch(() => {
+          });
+        },
+        children: locale === "vi" ? "Sao ch\xE9p" : "Copy"
+      }
+    )
+  ] });
+}
+function RoomPresence({ peers, max = 5, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const shown = peers.slice(0, max);
+  const extra = peers.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-room-presence", className),
+      "aria-label": `${peers.length} ng\u01B0\u1EDDi`,
+      children: [
+        shown.map((p, i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mang-room-dot",
+            style: { background: [color.mangGreen, color.soil, color.bamboo, color.sun][i % 4] },
+            children: (p[0] ?? "?").toUpperCase()
+          },
+          i
+        )),
+        extra > 0 && /* @__PURE__ */ jsxs("span", { className: "mang-room-dot", style: { background: color.bamboo }, children: [
+          "+",
+          extra
+        ] })
+      ]
+    }
+  );
+}
+function RoomConflictNotice({
+  onReload,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-room-conflict", className), role: "alert", children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-room-conflict-msg", children: locale === "vi" ? "C\xF3 thay \u0111\u1ED5i m\u1EDBi t\u1EEB ng\u01B0\u1EDDi kh\xE1c. T\u1EA3i l\u1EA1i \u0111\u1EC3 \u0111\u1ED3ng b\u1ED9." : "Someone else made changes. Reload to sync." }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", theme, onClick: onReload, children: locale === "vi" ? "T\u1EA3i l\u1EA1i" : "Reload" })
+  ] });
+}
+
+export {
+  RoomStatusBadge,
+  RoomShareButton,
+  RoomLinkCard,
+  RoomPresence,
+  RoomConflictNotice
+};

package/dist/chunk-PPOYMKV3.js

@@ -0,0 +1,170 @@
+// src/tokens.ts
+var color = {
+  mangGreen: "#37B693",
+  // xanh tre chủ đạo · "by RumitX" thread
+  shoot: "#8FE3B8",
+  // mầm non · highlight
+  bamboo: "#1F7A5C",
+  // tre đậm · shadow/line
+  soil: "#B5793A",
+  // đất · warm accent (chất đồng quê)
+  sun: "#E8C547",
+  // tre vàng · accent nổi
+  paper: "#F4F1E8",
+  // nền sáng (giấy)
+  dark: "#14201C"
+  // nền tối (charcoal ngả xanh)
+};
+var font = {
+  heading: "Quicksand Variable",
+  // rounded VN-safe display (@fontsource-variable/quicksand)
+  body: "Inter"
+  // body & UI (system-ui fallback today)
+};
+var semantic = {
+  surface: {
+    base: "#FFFFFF",
+    // cards, primary content surface
+    sunken: "#F6FAF9",
+    // subtle fills: inputs, chips, inset panels
+    inverse: "#14201C"
+    // dark sections (mirrors brand `dark`)
+  },
+  content: {
+    default: "#16242C",
+    // body text
+    strong: "#14201C",
+    // headings/titles (brand charcoal-green)
+    muted: "#5D6F78",
+    // secondary / meta text
+    inverse: "#F4F1E8",
+    // text on dark surfaces (mirrors brand `paper`)
+    onAccent: "#FFFFFF"
+    // text on the accent fill
+  },
+  line: {
+    subtle: "#EEF3F2",
+    // hairline dividers
+    default: "#E4ECEB",
+    // default borders
+    strong: "#CDD9D6"
+    // emphasised borders
+  },
+  accent: {
+    default: "#37B693",
+    // = mangGreen
+    hover: "#2E9E80",
+    // mangGreen nudged toward dark, for hover
+    soft: "#E7F6F1"
+    // tint: selected chips, active fills
+  },
+  state: {
+    success: "#1F9C7E",
+    // credit / positive money
+    successSoft: "#E7F6F1",
+    // success tint background
+    danger: "#D2674A",
+    // debit / destructive
+    dangerSoft: "#FBEEE9",
+    // danger tint background
+    warning: "#C77D2E",
+    // caution (earthy amber, sits with the bamboo palette)
+    warningSoft: "#FBF1E2",
+    // warning tint background
+    info: "#2E7CB8",
+    // neutral info (calm water-blue)
+    infoSoft: "#E6F0F8"
+    // info tint background
+  }
+};
+var space = {
+  0: "0",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem"
+};
+var radius = {
+  none: "0",
+  sm: "0.5rem",
+  md: "0.6875rem",
+  // 11px — chips, inputs, small buttons
+  lg: "1rem",
+  // 16px — cards
+  xl: "1.375rem",
+  // 22px — dialogs
+  full: "999px"
+  // pills, avatars
+};
+var shadow = {
+  sm: "0 1px 2px rgba(11, 30, 45, 0.05)",
+  md: "0 1px 2px rgba(11, 30, 45, 0.05), 0 12px 28px -16px rgba(11, 30, 45, 0.28)",
+  lg: "0 18px 40px -18px rgba(11, 30, 45, 0.32)"
+};
+var fontSize = {
+  xs: "0.75rem",
+  sm: "0.85rem",
+  base: "1rem",
+  lg: "1.15rem",
+  xl: "1.35rem",
+  "2xl": "1.6rem",
+  "3xl": "2.1rem"
+};
+var fontWeight = {
+  normal: "400",
+  medium: "600",
+  semibold: "700",
+  bold: "800"
+};
+var lineHeight = {
+  tight: "1.15",
+  snug: "1.3",
+  normal: "1.5",
+  relaxed: "1.7"
+};
+var motion = {
+  duration: {
+    fast: "140ms",
+    base: "180ms",
+    slow: "240ms"
+  },
+  ease: {
+    standard: "cubic-bezier(0.16, 1, 0.3, 1)",
+    // juicy ease-out — the Măng default
+    out: "cubic-bezier(0.16, 1, 0.3, 1)",
+    in: "cubic-bezier(0.4, 0, 1, 1)"
+  }
+};
+var z = {
+  base: "0",
+  dropdown: "100",
+  sticky: "200",
+  overlay: "900",
+  modal: "1000",
+  toast: "1100"
+};
+var tokens = {
+  color,
+  font,
+  semantic,
+  space,
+  radius,
+  shadow,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  motion,
+  z
+};
+var defaultTheme = { color, font };
+
+export {
+  tokens,
+  defaultTheme
+};

package/dist/chunk-PQGUWJG4.js

@@ -0,0 +1,47 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/forms/Toggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox({ label, theme, className, disabled, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-checkbox", className),
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", disabled, ...rest }),
+        label != null && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function Switch({ label, theme, className, disabled, ...rest }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-switch", className),
+      "data-disabled": disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", disabled, ...rest }),
+        /* @__PURE__ */ jsx("span", { className: "mang-switch-track", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "mang-switch-thumb", "aria-hidden": "true" }),
+        label != null && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+
+export {
+  Checkbox,
+  Switch
+};