kosmio 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# Kosmio
+
+Reusable React components, design-system tokens, and pure UI utilities.
+
+## Install
+
+```bash
+npm install kosmio
+```
+
+## Use
+
+```jsx
+import { Button, Text } from "kosmio";
+import "kosmio/styles.css";
+
+export function Example() {
+  return (
+    <Button variant="primary">
+      <Text as="span" size="sm">Save</Text>
+    </Button>
+  );
+}
+```
+
+## Design System
+
+Kosmio ships default CSS variables and expects each app to override them as needed.
+
+```css
+:root {
+  --kosmio-color-primary: #26a474;
+  --kosmio-font-family: Inter, system-ui, sans-serif;
+}
+```
+
+Every component style uses the public `--kosmio-*` contract.

package/dist/KosmioThemeProvider-DzH5uTqT.js

@@ -0,0 +1,145 @@
+import { jsx as m } from "react/jsx-runtime";
+const f = {
+  mode: "light",
+  colors: {
+    bg: { light: "#ffffff", dark: "#0f172a" },
+    surface: { light: "#f8fafc", dark: "#111827" },
+    surfaceMuted: { light: "#eef2f7", dark: "#1f2937" },
+    surfaceStrong: { light: "#e2e8f0", dark: "#374151" },
+    text: { light: "#111827", dark: "#f9fafb" },
+    textMuted: { light: "#6b7280", dark: "#9ca3af" },
+    primary: { light: "#2563eb", dark: "#60a5fa" },
+    primaryText: { light: "#ffffff", dark: "#0f172a" },
+    danger: { light: "#dc2626", dark: "#f87171" },
+    dangerText: { light: "#ffffff", dark: "#0f172a" },
+    success: { light: "#16a34a", dark: "#4ade80" },
+    border: { light: "rgba(17, 24, 39, 0.14)", dark: "rgba(249, 250, 251, 0.16)" },
+    focus: { light: "rgba(37, 99, 235, 0.28)", dark: "rgba(96, 165, 250, 0.32)" }
+  },
+  colorAliases: {
+    bg: "bg",
+    surface: "surface",
+    surfaceMuted: "surfaceMuted",
+    surfaceStrong: "surfaceStrong",
+    text: "text",
+    textMuted: "textMuted",
+    primary: "primary",
+    primaryText: "primaryText",
+    tag: "primary",
+    danger: "danger",
+    dangerText: "dangerText",
+    success: "success",
+    border: "border",
+    focus: "focus"
+  },
+  fontSizes: {
+    xs: "12px",
+    sm: "13px",
+    md: "14px",
+    lg: "18px",
+    xl: "24px",
+    xxl: "28px"
+  }
+}, g = {
+  bg: "--kosmio-color-bg",
+  surface: "--kosmio-color-surface",
+  surfaceMuted: "--kosmio-color-surface-muted",
+  surfaceStrong: "--kosmio-color-surface-strong",
+  text: "--kosmio-color-text",
+  textMuted: "--kosmio-color-text-muted",
+  primary: "--kosmio-color-primary",
+  primaryText: "--kosmio-color-primary-text",
+  tag: "--kosmio-tag-color",
+  danger: "--kosmio-color-danger",
+  dangerText: "--kosmio-color-danger-text",
+  success: "--kosmio-color-success",
+  border: "--kosmio-color-border",
+  focus: "--kosmio-color-focus"
+}, x = {
+  xs: "--kosmio-font-size-xs",
+  sm: "--kosmio-font-size-sm",
+  md: "--kosmio-font-size-md",
+  lg: "--kosmio-font-size-lg",
+  xl: "--kosmio-font-size-xl",
+  xxl: "--kosmio-font-size-xxl"
+};
+function n(o, r) {
+  return {
+    ...o,
+    ...r ?? {}
+  };
+}
+function k(o = {}) {
+  return {
+    mode: o.mode ?? f.mode,
+    colors: n(f.colors, o.colors),
+    colorAliases: n(f.colorAliases, o.colorAliases),
+    fontSizes: n(f.fontSizes, o.fontSizes)
+  };
+}
+function l(o, r = f.mode) {
+  return o === "dark" || o === "light" ? o : r;
+}
+function d(o, r) {
+  if (o != null) {
+    if (typeof o != "object") return o;
+    if (o[r] != null) return o[r];
+    if (o.value != null) return o.value;
+    if (o.light != null) return o.light;
+    if (o.dark != null) return o.dark;
+  }
+}
+function b(o, r, e) {
+  Object.entries(r).forEach(([s, t]) => {
+    const i = d(t, e);
+    i != null && (o[`--kosmio-color-${s}`] = i);
+  });
+}
+function h(o, r, e, s) {
+  Object.entries(g).forEach(([t, i]) => {
+    const a = e[t] ?? t, c = d(r[a], s);
+    c != null && (o[i] = c);
+  });
+}
+function p(o, r) {
+  Object.entries(r).forEach(([e, s]) => {
+    o[`--kosmio-font-size-${e}`] = s;
+  }), Object.entries(x).forEach(([e, s]) => {
+    r[e] != null && (o[s] = r[e]);
+  });
+}
+function T(o = {}, r = {}) {
+  const e = k(o), s = l(r.mode ?? e.mode, e.mode), t = {};
+  return b(t, e.colors, s), h(t, e.colors, e.colorAliases, s), p(t, e.fontSizes), t;
+}
+function M({
+  as: o = "div",
+  theme: r,
+  mode: e,
+  className: s = "",
+  style: t,
+  children: i,
+  ...a
+}) {
+  const c = l(e ?? r?.mode), u = T(r, { mode: c });
+  return /* @__PURE__ */ m(
+    o,
+    {
+      className: s,
+      "data-kosmio-theme": c,
+      style: {
+        ...u,
+        ...t
+      },
+      ...a,
+      children: i
+    }
+  );
+}
+export {
+  f as K,
+  M as a,
+  T as b,
+  k as c,
+  l as r
+};

package/dist/LanguageContext-DlN7MgUs.js

@@ -0,0 +1,161 @@
+import E from "i18next";
+import { initReactI18next as C, useTranslation as b } from "react-i18next";
+import { useCallback as y, useMemo as z, useEffect as v, useContext as M, createContext as N } from "react";
+import { jsx as T } from "react/jsx-runtime";
+import { useNavigate as U, useLocation as j } from "react-router-dom";
+function k(a) {
+  if (!a || typeof window > "u")
+    return null;
+  try {
+    return window.localStorage.getItem(a);
+  } catch {
+    return null;
+  }
+}
+function A({
+  defaultLanguage: a,
+  storageKey: e,
+  router: t,
+  normalizeLanguage: r = (c) => c || a,
+  matchRoute: g,
+  pathname: o,
+  navigatorLanguage: i
+} = {}) {
+  const c = t?.normalizeLanguage ?? r, l = t?.matchLocalizedRoute ?? g;
+  if (typeof window > "u")
+    return a;
+  const u = k(e);
+  if (u)
+    return c(u);
+  const m = i ?? window.navigator?.language;
+  if (m)
+    return c(m);
+  const n = typeof l == "function" ? l(o ?? window.location.pathname) : null;
+  return n?.lang && !n.ambiguous ? c(n.lang) : a;
+}
+function Q({
+  instance: a = E,
+  resources: e,
+  defaultLanguage: t,
+  supportedLanguages: r,
+  storageKey: g,
+  router: o,
+  normalizeLanguage: i,
+  matchRoute: c,
+  initReact: l = !0,
+  options: u = {}
+} = {}) {
+  return l && a.use(C), a.init({
+    resources: e,
+    lng: A({
+      defaultLanguage: t,
+      storageKey: g,
+      router: o,
+      normalizeLanguage: i,
+      matchRoute: c
+    }),
+    fallbackLng: t,
+    supportedLngs: r,
+    defaultNS: "translation",
+    interpolation: { escapeValue: !1 },
+    ...u
+  }), a;
+}
+function d(a, e, t = "") {
+  const r = a(e);
+  return r === e ? t || "" : r ?? "";
+}
+function D(a) {
+  return typeof a == "string" || typeof a == "number";
+}
+function V(a) {
+  return D(a) ? { value: a } : a && typeof a == "object" && "value" in a ? a : null;
+}
+function W(a) {
+  const { t: e } = b();
+  return y(
+    (t, r) => t ? d(e, `${a}.${t}`, r ?? t) : "",
+    [a, e]
+  );
+}
+function X(a, e, t = {}) {
+  const { t: r } = b(), { includeIcon: g = !1 } = t;
+  return z(
+    () => (Array.isArray(a) ? a : []).map(V).filter(Boolean).map((o) => {
+      const i = String(o.value), c = o.label != null ? o.label : o.labelKey ? d(r, o.labelKey, i) : e ? d(r, `${e}.${o.value}`, i) : i, { icon: l, iconName: u, ...m } = o;
+      return {
+        ...m,
+        value: o.value,
+        label: c,
+        ...g && l != null ? { icon: l } : {},
+        ...g && u != null ? { iconName: u } : {}
+      };
+    }),
+    [e, a, g, r]
+  );
+}
+const I = N({
+  lang: "",
+  changeLanguage: () => {
+  }
+}), Y = () => M(I);
+function x(a, e) {
+  if (!(!a || typeof localStorage > "u"))
+    try {
+      localStorage.setItem(a, e);
+    } catch {
+    }
+}
+function B(a) {
+  return `${a.pathname}${a.search}${a.hash}`;
+}
+function Z({
+  children: a,
+  defaultLanguage: e,
+  storageKey: t,
+  router: r,
+  normalizeLanguage: g = (u) => u || e,
+  translateRoutePath: o,
+  matchRoute: i,
+  getPreferredLanguage: c,
+  onLanguageChange: l
+}) {
+  const { i18n: u } = b(), m = U(), n = j(), p = r?.normalizeLanguage ?? g, L = r?.translateRoutePath ?? o, $ = r?.matchLocalizedRoute ?? i, s = p(u.resolvedLanguage ?? u.language), w = y(async (h) => {
+    const f = p(h);
+    if (f === s)
+      return;
+    const P = `${L?.(n.pathname, f) ?? n.pathname}${n.search}${n.hash}`, S = B(n);
+    x(t, f), await u.changeLanguage(f), await l?.(f), P !== S && m(P, { replace: !0 });
+  }, [
+    u,
+    s,
+    n,
+    m,
+    l,
+    p,
+    L,
+    t
+  ]);
+  v(() => {
+    x(t, s);
+  }, [s, t]), v(() => {
+    const h = p(c?.() ?? "");
+    !h || h === s || u.changeLanguage(h);
+  }, [c, u, s, p]), v(() => {
+    const h = $?.(n.pathname);
+    if (!h?.lang || h.ambiguous)
+      return;
+    const f = L?.(n.pathname, s);
+    !f || f === n.pathname || m(`${f}${n.search}${n.hash}`, { replace: !0 });
+  }, [s, n.hash, n.pathname, n.search, m, $, L]);
+  const R = z(() => ({ lang: s, changeLanguage: w }), [w, s]);
+  return /* @__PURE__ */ T(I.Provider, { value: R, children: a });
+}
+export {
+  Z as L,
+  X as a,
+  Y as b,
+  Q as c,
+  A as d,
+  W as u
+};

package/dist/MobileRouteTransition-C16D4K5c.js

@@ -0,0 +1,124 @@
+import { jsx as O } from "react/jsx-runtime";
+import { useRef as T, useState as W, useLayoutEffect as Y } from "react";
+import { useOutlet as q, useLocation as G, useNavigationType as J } from "react-router-dom";
+import { c as C } from "./classNames-CcykAxZN.js";
+const Q = "kosmioMobileTransitionDirection", _ = {
+  enabled: !0
+};
+function m(e = "/") {
+  const t = String(e ?? "").trim();
+  return !t || t === "/" ? "/" : t.replace(/\/+$/, "") || "/";
+}
+function V(e, t) {
+  return !(e.routeKey && e.routeKey !== t.routeMatch?.routeKey || e.pathname && m(e.pathname) !== t.pathname || typeof e.match == "function" && !e.match(t));
+}
+function $(e) {
+  return m(e).split("/").filter(Boolean);
+}
+function z(e, t) {
+  return t.length > e.length ? !1 : t.every((n, o) => e[o] === n);
+}
+function X(e, t) {
+  const n = m(e), o = m(t);
+  if (n === o)
+    return null;
+  const r = $(n), a = $(o);
+  return z(a, r) ? "forward" : z(r, a) ? "back" : null;
+}
+function Z({ navigationType: e, directionHint: t, previousPathname: n, pathname: o }) {
+  if (t === "back" || t === "forward")
+    return t;
+  const r = n ? X(n, o) : null;
+  return r || (e === "POP" ? "back" : "forward");
+}
+function H({
+  pathname: e,
+  navigationType: t,
+  directionHint: n,
+  previousPathname: o = null,
+  rules: r = [],
+  matchRoute: a,
+  defaultTransition: b = _
+}) {
+  const c = m(e), u = typeof a == "function" ? a(c) : null, M = {
+    pathname: c,
+    navigationType: t,
+    routeMatch: u
+  }, N = [...r].reverse().find((v) => V(v, M)), l = Z({
+    pathname: c,
+    navigationType: t,
+    directionHint: n,
+    previousPathname: o
+  }), i = {
+    ..._,
+    ...b,
+    ...N ?? {}
+  };
+  return {
+    enabled: i.enabled !== !1,
+    durationMs: Number.isFinite(i.durationMs) ? i.durationMs : null,
+    routeMatch: u,
+    direction: l,
+    enterClassName: i.enterClassName ?? (l === "back" ? "mobile-route-layer--enter-back" : "mobile-route-layer--enter-forward"),
+    exitClassName: i.exitClassName ?? (l === "back" ? "mobile-route-layer--exit-back" : "mobile-route-layer--exit-forward")
+  };
+}
+function ee() {
+  return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function ae({
+  outlet: e,
+  location: t,
+  navigationType: n,
+  isMobile: o,
+  rules: r = [],
+  router: a,
+  matchRoute: b,
+  stateKey: c = Q,
+  defaultTransition: u,
+  className: M = "",
+  layerClassName: N = "",
+  style: l,
+  ...i
+}) {
+  const v = q(), I = G(), K = J(), F = e ?? v, k = t ?? I, R = n ?? K, s = k?.pathname ?? "/", g = a?.matchLocalizedRoute ?? b, w = k?.key ?? s, L = k?.state, x = T(!1), D = T(s), E = T(null), [f, U] = W(() => ({
+    className: "",
+    key: w,
+    durationMs: u?.durationMs
+  }));
+  Y(() => {
+    const d = `${w ?? ""}:${s}`;
+    if (E.current === d)
+      return;
+    E.current = d;
+    const P = L?.[c], S = D.current, h = H({
+      pathname: s,
+      navigationType: R,
+      directionHint: P,
+      previousPathname: S,
+      rules: r,
+      matchRoute: g,
+      defaultTransition: u
+    }), j = S !== s, A = o && x.current && j && h.enabled && !ee() && (R !== "REPLACE" || P === "back"), y = {
+      className: A ? h.enterClassName : "",
+      key: A ? `${d}:${h.direction}` : d,
+      durationMs: h.durationMs
+    };
+    D.current = s, x.current = !0, U((p) => p.key === y.key && p.className === y.className && p.durationMs === y.durationMs ? p : y);
+  }, [u, o, w, L, s, g, R, r, c]);
+  const B = f.durationMs != null ? { "--kosmio-mobile-route-duration": `${f.durationMs}ms` } : void 0;
+  return /* @__PURE__ */ O("div", { className: C("mobile-route-stack full-w full-view", M), style: l, ...i, children: /* @__PURE__ */ O(
+    "div",
+    {
+      className: C("mobile-route-layer mobile-route-layer--current", f.className, N),
+      style: B,
+      children: F
+    },
+    f.key
+  ) });
+}
+export {
+  Q as D,
+  ae as M,
+  H as r
+};

package/dist/NativeBackButtonHandler-CcLHewdm.js

@@ -0,0 +1,105 @@
+import { useRef as d, useMemo as B, useEffect as O } from "react";
+import { useLocation as M, useNavigate as q, useNavigationType as A } from "react-router-dom";
+const D = /* @__PURE__ */ new Set(["recommendations", "livestock", "operations", "analytics", "registry"]), H = [".overlay-layer", ".select-dropdown.is-open"], N = ".backdrop", P = ".select-dropdown.is-open", x = [".overlay-layer", '[aria-modal="true"]', ".profile-operations-menu"];
+function R(e) {
+  return `${e.pathname}${e.search}${e.hash}`;
+}
+function I(e, n, o) {
+  if (e.length === 0)
+    return e.push(n), e;
+  if (o === "REPLACE")
+    return e[e.length - 1] = n, e;
+  if (o === "POP") {
+    const t = e.lastIndexOf(n);
+    return t >= 0 ? e.slice(0, t + 1) : (e.push(n), e);
+  }
+  return e[e.length - 1] !== n && e.push(n), e;
+}
+function T(e) {
+  return typeof document > "u" ? !1 : e.some((n) => document.querySelector(n));
+}
+function h(e) {
+  e.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: !0, cancelable: !0 }));
+}
+function S(e) {
+  e.dispatchEvent(new MouseEvent("mousedown", { bubbles: !0, cancelable: !0 }));
+}
+function $(e) {
+  return T(e) ? (typeof document < "u" && h(document), typeof window < "u" && h(window), !0) : !1;
+}
+function Y({
+  closeableSelectSelectors: e,
+  selectSheetBackdropSelector: n,
+  selectDropdownSelector: o
+}) {
+  if (!T(e) || typeof document > "u")
+    return !1;
+  const t = document.querySelector(n);
+  return t instanceof HTMLElement ? (t.click(), !0) : document.querySelector(o) && document.body ? (S(document.body), !0) : !1;
+}
+function z(e) {
+  return $(e);
+}
+function U(e, n, o) {
+  const t = o?.matchLocalizedRoute?.(e);
+  return n.has(t?.routeKey ?? "");
+}
+function j({
+  app: e,
+  isNative: n = !1,
+  router: o,
+  mainRouteKeys: t = D,
+  transitionStateKey: i,
+  closeableSelectSelectors: a = H,
+  selectSheetBackdropSelector: l = N,
+  selectDropdownSelector: E = P,
+  closeableOverlaySelectors: p = x
+}) {
+  const r = M(), m = q(), L = A(), u = d([]), w = d(r), v = d(R(r)), C = B(
+    () => t instanceof Set ? t : new Set(t),
+    [t]
+  );
+  return O(() => {
+    const c = R(r);
+    w.current = r, v.current = c, u.current = I([...u.current], c, L);
+  }, [r, L]), O(() => {
+    if (!n || typeof e?.addListener != "function")
+      return;
+    let c = !1, b = null;
+    const _ = ({ canGoBack: s }) => {
+      if (c || Y({ closeableSelectSelectors: a, selectSheetBackdropSelector: l, selectDropdownSelector: E }) || z(p))
+        return;
+      const y = w.current, g = v.current;
+      if (!U(y.pathname, C, o)) {
+        const f = u.current.at(-2);
+        if (f && f !== g) {
+          u.current = u.current.slice(0, -1), m(f, {
+            replace: !0,
+            state: i ? { [i]: "back" } : void 0
+          });
+          return;
+        }
+        s && typeof window < "u" && window.history.back();
+      }
+    };
+    return e.addListener("backButton", _).then((s) => {
+      b = s;
+    }), () => {
+      c = !0, b?.remove?.();
+    };
+  }, [
+    e,
+    p,
+    a,
+    n,
+    C,
+    m,
+    o,
+    E,
+    l,
+    i
+  ]), null;
+}
+export {
+  j as N
+};

package/dist/OfflineSyncContext-CRwPM5kh.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useSyncExternalStore as c, useMemo as u, useContext as l, createContext as S } from "react";
+import { k as m, a as O } from "./offlineWriteQueue-C31IjyB_.js";
+const o = {
+  isOnline: !0,
+  isSyncing: !1,
+  pendingSyncCount: 0,
+  hasPendingSync: !1,
+  scopeKey: "anonymous:no-tenant"
+}, s = S(o), C = () => l(s);
+function d({
+  children: i,
+  scopeKey: n = o.scopeKey,
+  getQueueState: e = O,
+  subscribeQueue: r = m
+}) {
+  const t = c(
+    r,
+    () => e(n),
+    () => e(n)
+  ), f = u(
+    () => ({
+      ...t,
+      scopeKey: n
+    }),
+    [n, t]
+  );
+  return /* @__PURE__ */ a(s.Provider, { value: f, children: i });
+}
+export {
+  o as D,
+  d as O,
+  C as u
+};