flysoft-react-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,673 @@
+import { jsxs as u, jsx as f } from "react/jsx-runtime";
+import { createContext as L, useState as D, useEffect as $, useContext as N, useRef as S, useCallback as v } from "react";
+import { default as H } from "react";
+const k = ({
+  variant: o = "primary",
+  size: a = "md",
+  icon: e,
+  iconPosition: r = "left",
+  loading: t = !1,
+  children: m,
+  className: c = "",
+  disabled: g,
+  ...b
+}) => {
+  const p = `
+    inline-flex items-center justify-center font-medium rounded-sm transition-colors 
+    cursor-pointer
+    disabled:opacity-50 disabled:cursor-not-allowed
+    font-[var(--font-default)]
+  `, d = {
+    primary: `
+      bg-[var(--color-primary)] text-[var(--color-primary-contrast)] 
+      hover:bg-[var(--color-primary-dark)] focus:ring-[var(--color-primary)]
+    `,
+    outline: `
+      border border-[var(--color-primary)] text-[var(--color-primary)] 
+      hover:bg-[var(--color-bg-secondary)] focus:ring-[var(--color-primary)]
+    `,
+    ghost: `
+      text-[var(--color-primary)] hover:bg-[var(--color-bg-secondary)] 
+      focus:ring-[var(--color-primary)]
+    `
+  }, l = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg"
+  }, n = `${p} ${d[o]} ${l[a]} ${c}`, s = () => e ? /* @__PURE__ */ f(
+    "i",
+    {
+      className: `fa ${e} ${a === "sm" ? "w-4 h-4" : a === "md" ? "w-5 h-5" : "w-6 h-6"} ${r === "right" ? "ml-2" : "mr-2"}`
+    }
+  ) : null;
+  return /* @__PURE__ */ u("button", { className: n, disabled: g || t, ...b, children: [
+    t && /* @__PURE__ */ f("i", { className: "fa fa-spinner fa-spin mr-2" }),
+    e && r === "left" && !t && s(),
+    m,
+    e && r === "right" && !t && s()
+  ] });
+}, M = ({
+  label: o,
+  error: a,
+  icon: e,
+  iconPosition: r = "left",
+  size: t = "md",
+  className: m = "",
+  id: c,
+  ...g
+}) => {
+  const b = c || `input-${Math.random().toString(36).substr(2, 9)}`, p = `
+    w-full border rounded-lg transition-colors focus:outline-none focus:ring-2 
+    disabled:opacity-50 disabled:cursor-not-allowed
+    font-[var(--font-default)] text-[var(--color-text-primary)]
+    bg-[var(--color-bg-default)]
+  `, d = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg"
+  }, l = a ? "border-[var(--color-border-error)] focus:border-[var(--color-border-error)] focus:ring-[var(--color-border-error)]" : "border-[var(--color-border-default)] focus:border-[var(--color-border-focus)] focus:ring-[var(--color-border-focus)]", n = `${p} ${d[t]} ${l} ${m}`, s = t === "sm" ? "w-4 h-4" : t === "md" ? "w-5 h-5" : "w-6 h-6", i = () => e ? /* @__PURE__ */ f(
+    "i",
+    {
+      className: `fa ${e} ${s} text-[var(--color-text-muted)] absolute top-1/2 transform -translate-y-1/2 ${r === "left" ? "left-3" : "right-3"}`
+    }
+  ) : null;
+  return /* @__PURE__ */ u("div", { className: "w-full", children: [
+    o && /* @__PURE__ */ f(
+      "label",
+      {
+        htmlFor: b,
+        className: "block text-sm font-medium text-[var(--color-text-primary)] mb-1 font-[var(--font-default)]",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "relative", children: [
+      e && r === "left" && i(),
+      /* @__PURE__ */ f(
+        "input",
+        {
+          id: b,
+          className: `${n} ${e && r === "left" ? "pl-10" : ""} ${e && r === "right" ? "pr-10" : ""}`,
+          ...g
+        }
+      ),
+      e && r === "right" && i()
+    ] }),
+    a && /* @__PURE__ */ f("p", { className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: a })
+  ] });
+}, O = ({
+  title: o,
+  subtitle: a,
+  children: e,
+  className: r = "",
+  headerActions: t,
+  footer: m,
+  variant: c = "default"
+}) => {
+  const p = `
+    bg-[var(--color-bg-default)] rounded-lg border
+    font-[var(--font-default)]
+   ${{
+    default: "border-[var(--color-border-default)]",
+    elevated: "border-[var(--color-border-default)] shadow-[var(--shadow-lg)]",
+    outlined: "border-[var(--color-gray-300)]"
+  }[c]} ${r}`;
+  return /* @__PURE__ */ u("div", { className: p, children: [
+    (o || a || t) && /* @__PURE__ */ f("div", { className: "px-6 py-4 border-b border-[var(--color-border-default)]", children: /* @__PURE__ */ u("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ u("div", { children: [
+        o && /* @__PURE__ */ f("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: o }),
+        a && /* @__PURE__ */ f("p", { className: "text-sm text-[var(--color-text-secondary)] mt-1", children: a })
+      ] }),
+      t && /* @__PURE__ */ f("div", { className: "flex items-center space-x-2", children: t })
+    ] }) }),
+    /* @__PURE__ */ f("div", { className: "px-6 py-4", children: e }),
+    m && /* @__PURE__ */ f("div", { className: "px-6 py-4 border-t border-[var(--color-border-default)] bg-[var(--color-bg-secondary)] rounded-b-lg", children: m })
+  ] });
+}, F = ({
+  children: o,
+  variant: a = "primary",
+  size: e = "md",
+  rounded: r = !1,
+  className: t = ""
+}) => {
+  const m = "inline-flex items-center font-medium font-[var(--font-default)]", c = {
+    primary: `
+      bg-[var(--color-primary-light)] text-[var(--color-primary-dark)]
+      hover:bg-[var(--color-primary)] hover:text-[var(--color-primary-contrast)]
+    `,
+    secondary: `
+      bg-[var(--color-secondary-light)] text-[var(--color-secondary-dark)]
+      hover:bg-[var(--color-secondary)] hover:text-[var(--color-secondary-contrast)]
+    `,
+    success: `
+      bg-[var(--color-success-light)] text-[var(--color-success-dark)]
+      hover:bg-[var(--color-success)] hover:text-[var(--color-success-contrast)]
+    `,
+    warning: `
+      bg-[var(--color-warning-light)] text-[var(--color-warning-dark)]
+      hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-contrast)]
+    `,
+    danger: `
+      bg-[var(--color-danger-light)] text-[var(--color-danger-dark)]
+      hover:bg-[var(--color-danger)] hover:text-[var(--color-danger-contrast)]
+    `,
+    info: `
+      bg-[var(--color-info-light)] text-[var(--color-info-dark)]
+      hover:bg-[var(--color-info)] hover:text-[var(--color-info-contrast)]
+    `
+  }, g = {
+    sm: "px-2 py-0.5 text-xs",
+    md: "px-2.5 py-0.5 text-sm",
+    lg: "px-3 py-1 text-base"
+  }, b = r ? "rounded-full" : "rounded-md", p = `${m} ${c[a]} ${g[e]} ${b} ${t}`;
+  return /* @__PURE__ */ f("span", { className: p, children: o });
+}, T = {
+  name: "light",
+  colors: {
+    primary: "#007aff",
+    primaryContrast: "#ffffff",
+    primaryDark: "#0064d1",
+    primaryLight: "#4da6ff",
+    secondary: "#6b7280",
+    secondaryContrast: "#ffffff",
+    secondaryDark: "#4b5563",
+    secondaryLight: "#9ca3af",
+    success: "#10b981",
+    successContrast: "#ffffff",
+    successDark: "#059669",
+    successLight: "#34d399",
+    warning: "#f59e0b",
+    warningContrast: "#ffffff",
+    warningDark: "#d97706",
+    warningLight: "#fbbf24",
+    danger: "#ef4444",
+    dangerContrast: "#ffffff",
+    dangerDark: "#dc2626",
+    dangerLight: "#f87171",
+    info: "#06b6d4",
+    infoContrast: "#ffffff",
+    infoDark: "#0891b2",
+    infoLight: "#22d3ee",
+    gray50: "#f9fafb",
+    gray100: "#f3f4f6",
+    gray200: "#e5e7eb",
+    gray300: "#d1d5db",
+    gray400: "#9ca3af",
+    gray500: "#6b7280",
+    gray600: "#4b5563",
+    gray700: "#374151",
+    gray800: "#1f2937",
+    gray900: "#111827",
+    borderDefault: "#e5e7eb",
+    borderFocus: "#007aff",
+    borderError: "#ef4444",
+    bgDefault: "#ffffff",
+    bgSecondary: "#f9fafb",
+    bgDisabled: "#f3f4f6",
+    textPrimary: "#111827",
+    textSecondary: "#374151",
+    textMuted: "#6b7280",
+    textDisabled: "#9ca3af"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+  },
+  radius: {
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  fonts: {
+    default: '"Instrument Sans", sans-serif',
+    sizeDefault: "16px",
+    colorDefault: "#111827"
+  }
+}, E = {
+  name: "dark",
+  colors: {
+    primary: "#3b82f6",
+    primaryContrast: "#ffffff",
+    primaryDark: "#1d4ed8",
+    primaryLight: "#60a5fa",
+    secondary: "#9ca3af",
+    secondaryContrast: "#ffffff",
+    secondaryDark: "#6b7280",
+    secondaryLight: "#d1d5db",
+    success: "#10b981",
+    successContrast: "#ffffff",
+    successDark: "#059669",
+    successLight: "#34d399",
+    warning: "#f59e0b",
+    warningContrast: "#ffffff",
+    warningDark: "#d97706",
+    warningLight: "#fbbf24",
+    danger: "#ef4444",
+    dangerContrast: "#ffffff",
+    dangerDark: "#dc2626",
+    dangerLight: "#f87171",
+    info: "#06b6d4",
+    infoContrast: "#ffffff",
+    infoDark: "#0891b2",
+    infoLight: "#22d3ee",
+    gray50: "#111827",
+    gray100: "#1f2937",
+    gray200: "#374151",
+    gray300: "#4b5563",
+    gray400: "#6b7280",
+    gray500: "#9ca3af",
+    gray600: "#d1d5db",
+    gray700: "#e5e7eb",
+    gray800: "#f3f4f6",
+    gray900: "#f9fafb",
+    borderDefault: "#374151",
+    borderFocus: "#3b82f6",
+    borderError: "#ef4444",
+    bgDefault: "#111827",
+    bgSecondary: "#1f2937",
+    bgDisabled: "#374151",
+    textPrimary: "#f9fafb",
+    textSecondary: "#e5e7eb",
+    textMuted: "#9ca3af",
+    textDisabled: "#6b7280"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)"
+  },
+  radius: {
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  fonts: {
+    default: '"Instrument Sans", sans-serif',
+    sizeDefault: "16px",
+    colorDefault: "#f9fafb"
+  }
+}, j = {
+  name: "blue",
+  colors: {
+    primary: "#1e40af",
+    primaryContrast: "#ffffff",
+    primaryDark: "#1e3a8a",
+    primaryLight: "#3b82f6",
+    secondary: "#64748b",
+    secondaryContrast: "#ffffff",
+    secondaryDark: "#475569",
+    secondaryLight: "#94a3b8",
+    success: "#059669",
+    successContrast: "#ffffff",
+    successDark: "#047857",
+    successLight: "#10b981",
+    warning: "#d97706",
+    warningContrast: "#ffffff",
+    warningDark: "#b45309",
+    warningLight: "#f59e0b",
+    danger: "#dc2626",
+    dangerContrast: "#ffffff",
+    dangerDark: "#b91c1c",
+    dangerLight: "#ef4444",
+    info: "#0891b2",
+    infoContrast: "#ffffff",
+    infoDark: "#0e7490",
+    infoLight: "#06b6d4",
+    gray50: "#f8fafc",
+    gray100: "#f1f5f9",
+    gray200: "#e2e8f0",
+    gray300: "#cbd5e1",
+    gray400: "#94a3b8",
+    gray500: "#64748b",
+    gray600: "#475569",
+    gray700: "#334155",
+    gray800: "#1e293b",
+    gray900: "#0f172a",
+    borderDefault: "#e2e8f0",
+    borderFocus: "#1e40af",
+    borderError: "#dc2626",
+    bgDefault: "#ffffff",
+    bgSecondary: "#f8fafc",
+    bgDisabled: "#f1f5f9",
+    textPrimary: "#0f172a",
+    textSecondary: "#334155",
+    textMuted: "#64748b",
+    textDisabled: "#94a3b8"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(30 64 175 / 0.05)",
+    md: "0 4px 6px -1px rgb(30 64 175 / 0.1), 0 2px 4px -2px rgb(30 64 175 / 0.1)",
+    lg: "0 10px 15px -3px rgb(30 64 175 / 0.1), 0 4px 6px -4px rgb(30 64 175 / 0.1)"
+  },
+  radius: {
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  fonts: {
+    default: '"Instrument Sans", sans-serif',
+    sizeDefault: "16px",
+    colorDefault: "#0f172a"
+  }
+}, I = {
+  name: "green",
+  colors: {
+    primary: "#059669",
+    primaryContrast: "#ffffff",
+    primaryDark: "#047857",
+    primaryLight: "#10b981",
+    secondary: "#6b7280",
+    secondaryContrast: "#ffffff",
+    secondaryDark: "#4b5563",
+    secondaryLight: "#9ca3af",
+    success: "#16a34a",
+    successContrast: "#ffffff",
+    successDark: "#15803d",
+    successLight: "#22c55e",
+    warning: "#d97706",
+    warningContrast: "#ffffff",
+    warningDark: "#b45309",
+    warningLight: "#f59e0b",
+    danger: "#dc2626",
+    dangerContrast: "#ffffff",
+    dangerDark: "#b91c1c",
+    dangerLight: "#ef4444",
+    info: "#0891b2",
+    infoContrast: "#ffffff",
+    infoDark: "#0e7490",
+    infoLight: "#06b6d4",
+    gray50: "#f9fafb",
+    gray100: "#f3f4f6",
+    gray200: "#e5e7eb",
+    gray300: "#d1d5db",
+    gray400: "#9ca3af",
+    gray500: "#6b7280",
+    gray600: "#4b5563",
+    gray700: "#374151",
+    gray800: "#1f2937",
+    gray900: "#111827",
+    borderDefault: "#e5e7eb",
+    borderFocus: "#059669",
+    borderError: "#dc2626",
+    bgDefault: "#ffffff",
+    bgSecondary: "#f9fafb",
+    bgDisabled: "#f3f4f6",
+    textPrimary: "#111827",
+    textSecondary: "#374151",
+    textMuted: "#6b7280",
+    textDisabled: "#9ca3af"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgb(5 150 105 / 0.05)",
+    md: "0 4px 6px -1px rgb(5 150 105 / 0.1), 0 2px 4px -2px rgb(5 150 105 / 0.1)",
+    lg: "0 10px 15px -3px rgb(5 150 105 / 0.1), 0 4px 6px -4px rgb(5 150 105 / 0.1)"
+  },
+  radius: {
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    full: "9999px"
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  fonts: {
+    default: '"Instrument Sans", sans-serif',
+    sizeDefault: "16px",
+    colorDefault: "#111827"
+  }
+}, C = T, h = {
+  light: T,
+  dark: E,
+  blue: j,
+  green: I
+}, w = L(void 0), Z = ({
+  children: o,
+  initialTheme: a = "light",
+  storageKey: e = "flysoft-theme"
+}) => {
+  const [r, t] = D(() => {
+    if (typeof window < "u") {
+      const n = localStorage.getItem(e);
+      if (n) {
+        if (h[n])
+          return h[n];
+        try {
+          const s = JSON.parse(n);
+          if (s.name && s.colors)
+            return s;
+        } catch {
+        }
+      }
+    }
+    return typeof a == "string" ? h[a] || C : a;
+  }), [m, c] = D(r.name), g = (n) => {
+    if (typeof document > "u") return;
+    const s = document.documentElement;
+    Object.entries(n.colors).forEach(([i, y]) => {
+      const x = `--flysoft-${i.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+      s.style.setProperty(x, y);
+    }), Object.entries(n.shadows).forEach(([i, y]) => {
+      const x = `--flysoft-shadow-${i}`;
+      s.style.setProperty(x, y);
+    }), Object.entries(n.radius).forEach(([i, y]) => {
+      const x = `--flysoft-radius-${i}`;
+      s.style.setProperty(x, y);
+    }), Object.entries(n.spacing).forEach(([i, y]) => {
+      const x = `--flysoft-spacing-${i}`;
+      s.style.setProperty(x, y);
+    }), Object.entries(n.fonts).forEach(([i, y]) => {
+      const x = `--flysoft-font-${i}`;
+      s.style.setProperty(x, y);
+    }), s.setAttribute("data-theme", n.name);
+  }, b = (n) => {
+    let s;
+    typeof n == "string" ? h[n] ? s = h[n] : (console.warn(`Theme "${n}" not found, falling back to default`), s = C) : s = n, t(s), c(s.name), typeof window < "u" && localStorage.setItem(e, JSON.stringify(s)), g(s);
+  }, p = () => {
+    b(C);
+  };
+  $(() => {
+    g(r);
+  }, [r]);
+  const d = r.name === "dark", l = {
+    theme: r,
+    setTheme: b,
+    currentThemeName: m,
+    availableThemes: Object.keys(h),
+    resetToDefault: p,
+    isDark: d
+  };
+  return /* @__PURE__ */ f(w.Provider, { value: l, children: o });
+}, P = () => {
+  const o = N(w);
+  if (o === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return o;
+}, R = () => N(w) !== void 0, V = (o = {}) => {
+  const { scope: a = "global", element: e = null, prefix: r = "flysoft" } = o, t = S(/* @__PURE__ */ new Set()), m = v(
+    (d) => {
+      const l = a === "global" ? document.documentElement : e;
+      if (!l) {
+        console.warn("useThemeOverride: No target element available");
+        return;
+      }
+      Object.entries(d).forEach(([n, s]) => {
+        const i = `--${r}-${n.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+        l.style.setProperty(i, String(s)), t.current.add(i);
+      });
+    },
+    [a, e, r]
+  ), c = v(
+    (d) => {
+      const l = a === "global" ? document.documentElement : e;
+      l && d.forEach((n) => {
+        const s = `--${r}-${n.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+        t.current.has(s) && (l.style.removeProperty(s), t.current.delete(s));
+      });
+    },
+    [a, e, r]
+  ), g = v(() => {
+    const d = a === "global" ? document.documentElement : e;
+    d && (t.current.forEach((l) => {
+      d.style.removeProperty(l);
+    }), t.current.clear());
+  }, [a, e]), b = v(
+    (d) => {
+      const l = a === "global" ? document.documentElement : e;
+      if (!l) return null;
+      const n = `--${r}-${d.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+      return getComputedStyle(l).getPropertyValue(n) || null;
+    },
+    [a, e, r]
+  ), p = v(
+    (d) => {
+      const l = `--${r}-${d.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+      return t.current.has(l);
+    },
+    [r]
+  );
+  return $(() => () => {
+    g();
+  }, [g]), {
+    applyOverride: m,
+    revertOverride: c,
+    revertAllOverrides: g,
+    getCSSVariable: b,
+    isOverrideApplied: p,
+    appliedOverridesCount: t.current.size
+  };
+}, B = (o, a = 3e3, e = {}) => {
+  const { applyOverride: r, revertOverride: t } = V(e);
+  return { applyTemporaryOverride: v(() => {
+    r(o);
+    const c = setTimeout(() => {
+      t(Object.keys(o));
+    }, a);
+    return () => {
+      clearTimeout(c), t(Object.keys(o));
+    };
+  }, [r, t, o, a]) };
+}, J = () => {
+  const {
+    theme: o,
+    setTheme: a,
+    currentThemeName: e,
+    availableThemes: r,
+    resetToDefault: t,
+    isDark: m
+  } = P();
+  return /* @__PURE__ */ u(O, { className: "p-6 max-w-md mx-auto", children: [
+    /* @__PURE__ */ f(
+      "h3",
+      {
+        className: "text-lg font-semibold mb-4",
+        style: { color: "var(--flysoft-text-primary)" },
+        children: "Theme Switcher"
+      }
+    ),
+    /* @__PURE__ */ u("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ f("div", { className: "flex flex-wrap gap-2", children: r.map((c) => /* @__PURE__ */ f(
+        k,
+        {
+          variant: e === c ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => a(c),
+          children: c
+        },
+        c
+      )) }),
+      /* @__PURE__ */ f(
+        k,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: t,
+          className: "w-full",
+          children: "Reset to Default"
+        }
+      ),
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: "text-sm space-y-2",
+          style: { color: "var(--flysoft-text-secondary)" },
+          children: [
+            /* @__PURE__ */ u("p", { children: [
+              /* @__PURE__ */ f("strong", { children: "Current Theme:" }),
+              " ",
+              e
+            ] }),
+            /* @__PURE__ */ u("p", { children: [
+              /* @__PURE__ */ f("strong", { children: "Mode:" }),
+              " ",
+              m ? "Dark" : "Light"
+            ] }),
+            /* @__PURE__ */ u("p", { children: [
+              /* @__PURE__ */ f("strong", { children: "Primary Color:" }),
+              " ",
+              o.colors.primary
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ f(
+        "div",
+        {
+          className: "w-full h-8 rounded border-2",
+          style: {
+            backgroundColor: o.colors.primary,
+            borderColor: o.colors.borderDefault
+          }
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  F as Badge,
+  k as Button,
+  O as Card,
+  M as Input,
+  H as React,
+  Z as ThemeProvider,
+  J as ThemeSwitcher,
+  j as blueTheme,
+  E as darkTheme,
+  C as defaultTheme,
+  I as greenTheme,
+  T as lightTheme,
+  h as themes,
+  B as useTemporaryOverride,
+  P as useTheme,
+  R as useThemeContext,
+  V as useThemeOverride
+};
+//# sourceMappingURL=index.js.map