@versaur/react 1.0.0 → 1.0.3

package/dist/components/blocks/sidebar/sidebar.js

@@ -1,106 +0,0 @@
-import { jsx as i, jsxs as N } from "react/jsx-runtime";
-import { ChevronDownIcon as j } from "@versaur/icons";
-import r from "../../../core/src/components/blocks/sidebar/sidebar.module.css.js";
-import { forwardRef as d, useState as B } from "react";
-import { cx as t } from "../../../utils/cx.js";
-import { Hr as F } from "../../primitive/hr/hr.js";
-import { Icon as G } from "../../primitive/icon/icon.js";
-const S = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("aside", { ref: s, className: t(r.sidebar, e), children: a }));
-S.displayName = "Sidebar";
-const u = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-header"], e), children: a }));
-u.displayName = "Sidebar.Header";
-const y = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-body"], e), children: a }));
-y.displayName = "Sidebar.Body";
-const f = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-footer"], e), children: a }));
-f.displayName = "Sidebar.Footer";
-const h = d(
-  ({
-    label: a,
-    icon: e,
-    defaultExpanded: s = !0,
-    isExpanded: m,
-    onExpandedChange: o,
-    children: c,
-    className: b
-  }, l) => {
-    const [n, D] = B(s), p = m !== void 0 ? m : n, H = () => {
-      const v = !p;
-      D(v), o == null || o(v);
-    };
-    return /* @__PURE__ */ N(
-      "div",
-      {
-        ref: l,
-        className: t(r["sidebar-group"], b),
-        "data-expanded": p ? "" : void 0,
-        children: [
-          /* @__PURE__ */ N(
-            "button",
-            {
-              className: r["sidebar-group-header"],
-              onClick: H,
-              "aria-expanded": p,
-              children: [
-                e && /* @__PURE__ */ i("span", { children: e }),
-                /* @__PURE__ */ i("span", { className: r["sidebar-group-label"], children: a }),
-                /* @__PURE__ */ i(
-                  G,
-                  {
-                    as: j,
-                    className: r["sidebar-group-chevron"],
-                    size: "sm"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ i("div", { className: r["sidebar-group-content"], children: /* @__PURE__ */ i("div", { children: c }) })
-        ]
-      }
-    );
-  }
-);
-h.displayName = "Sidebar.Group";
-const I = d(
-  ({ as: a = "button", active: e, disabled: s, icon: m, action: o, className: c, children: b, ...l }, n) => /* @__PURE__ */ N(
-    a,
-    {
-      ref: n,
-      className: t(r["sidebar-item"], c),
-      "data-active": e ? "" : void 0,
-      "data-disabled": s ? "" : void 0,
-      "data-action": o ? "" : void 0,
-      ...l,
-      children: [
-        m && /* @__PURE__ */ i("span", { className: r["sidebar-item-icon"], children: m }),
-        /* @__PURE__ */ i("span", { className: r["sidebar-item-text"], children: b }),
-        o && /* @__PURE__ */ i("span", { className: r["sidebar-item-action"], children: o })
-      ]
-    }
-  )
-);
-I.displayName = "Sidebar.Item";
-const x = d(({ children: a, className: e }, s) => /* @__PURE__ */ i("div", { ref: s, className: t(r["sidebar-item-list"], e), children: a }));
-x.displayName = "Sidebar.ItemList";
-const g = d(({ className: a }, e) => /* @__PURE__ */ i("div", { ref: e, className: t(r["sidebar-divider"], a), children: /* @__PURE__ */ i(F, {}) }));
-g.displayName = "Sidebar.Divider";
-const A = Object.assign(S, {
-  Body: y,
-  Divider: g,
-  Footer: f,
-  Group: h,
-  Header: u,
-  Item: I,
-  ItemList: x
-});
-export {
-  A as Sidebar,
-  y as SidebarBody,
-  g as SidebarDivider,
-  f as SidebarFooter,
-  h as SidebarGroup,
-  u as SidebarHeader,
-  I as SidebarItem,
-  x as SidebarItemList,
-  S as SidebarRoot
-};

package/dist/components/blocks/table/table.js

@@ -1,177 +0,0 @@
-import { jsx as t, jsxs as r, Fragment as B } from "react/jsx-runtime";
-import b from "../../../core/src/components/forms/checkbox/checkbox.module.css.js";
-import d from "../../../core/src/components/blocks/table/table.module.css.js";
-import { ChevronUpIcon as A, ChevronDownIcon as h, MenuIcon as H } from "@versaur/icons";
-import { forwardRef as c } from "react";
-import { cx as n } from "../../../utils/cx.js";
-import { useDataAttrs as I } from "../../../hooks/use-data-attrs.js";
-import { ButtonIcon as j } from "../../primitive/button-icon/button-icon.js";
-const p = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("thead", { ref: l, className: n(d["table-header"], e), ...a }));
-p.displayName = "Table.Header";
-const y = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("tbody", { ref: l, className: n(d["table-body"], e), ...a }));
-y.displayName = "Table.Body";
-const f = c(({ className: e, ...a }, l) => /* @__PURE__ */ t("tfoot", { ref: l, className: n(d["table-footer"], e), ...a }));
-f.displayName = "Table.Footer";
-const u = c(({ onClick: e, className: a, ...l }, o) => /* @__PURE__ */ t("tr", { ref: o, className: n(a), "data-clickable": e ? "true" : void 0, onClick: e, ...l }));
-u.displayName = "Table.Row";
-const N = c(
-  ({ sortable: e, sortDirection: a, onSort: l, children: o, className: s, ...i }, k) => {
-    const w = () => {
-      if (!e || !l)
-        return;
-      let m = "asc";
-      a === "asc" ? m = "desc" : a === "desc" && (m = null), l(m);
-    }, S = I({
-      sortable: e ? "true" : void 0
-    });
-    return /* @__PURE__ */ t(
-      "th",
-      {
-        ref: k,
-        className: n(d["table-head"], s),
-        onClick: e ? w : void 0,
-        ...S,
-        ...i,
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            style: {
-              alignItems: "center",
-              display: "flex",
-              gap: "0.5rem",
-              justifyContent: "flex-start"
-            },
-            children: [
-              o,
-              e && /* @__PURE__ */ r(B, { children: [
-                a === "asc" && /* @__PURE__ */ t(A, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                a === "desc" && /* @__PURE__ */ t(h, { style: { flexShrink: 0, height: "1em", width: "1em" } }),
-                !a && /* @__PURE__ */ t(
-                  h,
-                  {
-                    style: {
-                      flexShrink: 0,
-                      height: "1em",
-                      opacity: 0.5,
-                      width: "1em"
-                    }
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-N.displayName = "Table.HeaderCell";
-const T = c(({ variant: e, className: a, ...l }, o) => /* @__PURE__ */ t("td", { ref: o, className: n(d["table-cell"], a), "data-table-cell-variant": e, ...l }));
-T.displayName = "Table.BodyCell";
-const g = c(
-  ({ rowId: e, checked: a, indeterminate: l, onChange: o }, s) => /* @__PURE__ */ r("label", { className: b.checkbox, children: [
-    /* @__PURE__ */ t(
-      "input",
-      {
-        ref: (i) => {
-          i && (i.indeterminate = l || !1, typeof s == "function" ? s(i) : s && (s.current = i));
-        },
-        type: "checkbox",
-        className: b.input,
-        checked: a || !1,
-        onChange: (i) => o(i.target.checked),
-        "aria-label": `Select row ${e}`
-      }
-    ),
-    /* @__PURE__ */ t("span", { className: b.indicator })
-  ] })
-);
-g.displayName = "Table.Checkbox";
-const x = c(({ title: e, subtitle: a, size: l = "md", className: o }, s) => {
-  const i = {
-    title: {
-      sm: "0.875rem",
-      md: "0.9375rem",
-      lg: "1rem"
-    },
-    subtitle: {
-      sm: "0.75rem",
-      md: "0.8125rem",
-      lg: "0.875rem"
-    }
-  };
-  return /* @__PURE__ */ r("div", { ref: s, className: n(d["table-cell"], o), "data-table-cell-variant": "double-line", children: [
-    /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          fontWeight: 600,
-          fontSize: i.title[l]
-        },
-        children: e
-      }
-    ),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        style: {
-          fontSize: i.subtitle[l],
-          color: "#6b7280"
-        },
-        children: a
-      }
-    )
-  ] });
-});
-x.displayName = "Table.DoubleLine";
-const C = c(({ onClick: e, disabled: a }, l) => /* @__PURE__ */ t(
-  j,
-  {
-    ref: l,
-    as: H,
-    onClick: (s) => {
-      s.stopPropagation(), e == null || e();
-    },
-    disabled: a,
-    variant: "ghost",
-    size: "medium",
-    "aria-label": "Action button"
-  }
-));
-C.displayName = "Table.Action";
-const v = c(({ columns: e, children: a, className: l, ...o }, s) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: s,
-    className: n(d.table, l),
-    style: {
-      "--table-grid-columns": e
-    },
-    ...o,
-    children: /* @__PURE__ */ t("table", { children: a })
-  }
-));
-v.displayName = "Table";
-const U = Object.assign(v, {
-  Action: C,
-  Body: y,
-  BodyCell: T,
-  Checkbox: g,
-  DoubleLine: x,
-  Footer: f,
-  Header: p,
-  HeaderCell: N,
-  Row: u
-});
-export {
-  U as Table,
-  C as TableAction,
-  y as TableBody,
-  T as TableBodyCell,
-  g as TableCheckbox,
-  x as TableDoubleLine,
-  f as TableFooter,
-  p as TableHeader,
-  N as TableHeaderCell,
-  u as TableRow
-};

package/dist/components/blocks/tabs/tabs.js

@@ -1,89 +0,0 @@
-import { jsx as a, jsxs as L } from "react/jsx-runtime";
-import o from "../../../core/src/components/blocks/tabs/tabs.module.css.js";
-import { createContext as j, forwardRef as x, useRef as p, useState as T, useLayoutEffect as k, useContext as V } from "react";
-import { useDataAttrs as B } from "../../../hooks/use-data-attrs.js";
-import { useResizeObserver as E } from "../../../hooks/use-resize-observer.js";
-import { combineRefs as R } from "../../../utils/combine-refs.js";
-import { cx as C } from "../../../utils/cx.js";
-const w = j(void 0);
-function O() {
-  const t = V(w);
-  if (!t)
-    throw new Error("Tabs.Item must be used within a Tabs component");
-  return t;
-}
-const v = x(({ value: t, onChange: r, children: m, className: f }, u) => {
-  const e = p(null), i = p(/* @__PURE__ */ new Map()), [g, c] = T(0), [s, d] = T(0), l = () => {
-    const n = i.current.get(t);
-    if (!n || !e.current)
-      return;
-    const b = e.current.getBoundingClientRect(), h = n.getBoundingClientRect(), I = h.left - b.left + e.current.scrollLeft, { width: A } = h;
-    c(I), d(A), n.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "center"
-    });
-  }, y = (n, b) => {
-    b && i.current.set(n, b);
-  };
-  k(() => {
-    l();
-  }, [t]), E(e, l);
-  const $ = B({});
-  return /* @__PURE__ */ a(w.Provider, { value: { activeValue: t, onChange: r, registerTrigger: y }, children: /* @__PURE__ */ L("nav", { ref: R(u, e), className: C(o.tabs, f), ...$, children: [
-    /* @__PURE__ */ a("ul", { className: o.tablist, role: "tablist", children: m }),
-    /* @__PURE__ */ a(
-      "div",
-      {
-        className: o["tabs-thumb"],
-        style: {
-          left: `${g}px`,
-          width: `${s}px`
-        }
-      }
-    )
-  ] }) });
-});
-v.displayName = "Tabs";
-const N = x(
-  ({ value: t, disabled: r = !1, children: m, className: f }, u) => {
-    const { activeValue: e, onChange: i, registerTrigger: g } = O(), c = e === t;
-    let s;
-    r ? s = "disabled" : c ? s = "active" : s = "default";
-    const d = () => {
-      r || i(t);
-    };
-    return /* @__PURE__ */ a("li", { className: o.tabitem, children: /* @__PURE__ */ a(
-      "button",
-      {
-        ref: R(u, (l) => g(t, l)),
-        className: C(o.trigger, f),
-        role: "tab",
-        id: `tabs-trigger-${t}`,
-        "aria-selected": c,
-        "aria-controls": `tabs-panel-${t}`,
-        "data-state": s,
-        disabled: r,
-        onClick: d,
-        children: m
-      }
-    ) });
-  }
-);
-N.displayName = "Tabs.Item";
-function P(t) {
-  return {
-    "aria-labelledby": `tabs-trigger-${t}`,
-    id: `tabs-panel-${t}`,
-    role: "tabpanel"
-  };
-}
-const G = Object.assign(v, {
-  Item: N,
-  getPanelAttribute: P
-});
-export {
-  G as Tabs,
-  N as TabsItem,
-  P as getPanelAttribute
-};

package/dist/components/blocks/top-bar/top-bar.js

@@ -1,46 +0,0 @@
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
-import e from "../../../core/src/components/blocks/top-bar/top-bar.module.css.js";
-import { forwardRef as s } from "react";
-import { cx as p } from "../../../utils/cx.js";
-const m = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar"], o), ...r, children: t }));
-m.displayName = "TopBar";
-const d = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-leading"], o), ...r, children: t }));
-d.displayName = "TopBar.Leading";
-const n = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-centred"], o), ...r, children: t }));
-n.displayName = "TopBar.Centred";
-const l = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-trailing"], o), ...r, children: t }));
-l.displayName = "TopBar.Trailing";
-const c = s(
-  ({ as: t = "button", active: o, disabled: r, icon: a, className: B, children: N, ...b }, g) => /* @__PURE__ */ v(
-    t,
-    {
-      ref: g,
-      className: p(e["top-bar-item"], B),
-      "data-active": o ? "" : void 0,
-      "data-disabled": r ? "" : void 0,
-      ...b,
-      children: [
-        a && /* @__PURE__ */ i("span", { className: e["top-bar-item-icon"], children: a }),
-        N
-      ]
-    }
-  )
-);
-c.displayName = "TopBar.Item";
-const T = s(({ children: t, className: o, ...r }, a) => /* @__PURE__ */ i("div", { ref: a, className: p(e["top-bar-list-item"], o), ...r, children: t }));
-T.displayName = "TopBar.ListItem";
-const x = Object.assign(m, {
-  Centred: n,
-  Item: c,
-  Leading: d,
-  ListItem: T,
-  Trailing: l
-});
-export {
-  x as TopBar,
-  n as TopBarCentred,
-  c as TopBarItem,
-  d as TopBarLeading,
-  T as TopBarListItem,
-  l as TopBarTrailing
-};

package/dist/components/forms/checkbox/checkbox.js

@@ -1,35 +0,0 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import o from "../../../core/src/components/forms/checkbox/checkbox.module.css.js";
-import { forwardRef as f } from "react";
-import { cx as x } from "../../../utils/cx.js";
-import { useDataAttrs as n } from "../../../hooks/use-data-attrs.js";
-const b = f(
-  ({ invalid: t = !1, disabled: e = !1, required: a = !1, children: r, className: c, ...m }, i) => {
-    const l = n({
-      disabled: e,
-      invalid: t,
-      required: a
-    });
-    return /* @__PURE__ */ p("label", { className: x(o.checkbox, c), ...l, children: [
-      /* @__PURE__ */ s(
-        "input",
-        {
-          ref: i,
-          type: "checkbox",
-          className: o.input,
-          disabled: e,
-          required: a,
-          "aria-invalid": t || void 0,
-          "aria-required": a || void 0,
-          ...m
-        }
-      ),
-      /* @__PURE__ */ s("span", { className: o.indicator }),
-      r && /* @__PURE__ */ s("span", { className: o.label, "data-required": a || void 0, children: r })
-    ] });
-  }
-);
-b.displayName = "Checkbox";
-export {
-  b as Checkbox
-};

package/dist/components/forms/checkbox-group/checkbox-group.js

@@ -1,96 +0,0 @@
-import { jsxs as k, jsx as r } from "react/jsx-runtime";
-import d from "../../../core/src/components/forms/checkbox-group/checkbox-group.module.css.js";
-import { createContext as D, forwardRef as v, useId as G, useContext as E } from "react";
-import { cx as g } from "../../../utils/cx.js";
-import { useDataAttrs as N } from "../../../hooks/use-data-attrs.js";
-import { ErrorText as T } from "../error-text/error-text.js";
-import { HelperText as $ } from "../helper-text/helper-text.js";
-import { Label as y } from "../label/label.js";
-const I = D(void 0);
-function F() {
-  const e = E(I);
-  if (!e)
-    throw new Error("CheckboxGroup.Option must be used within CheckboxGroup");
-  return e;
-}
-const w = v(
-  ({
-    value: e,
-    onChange: c,
-    name: m,
-    label: n,
-    helper: a,
-    error: o,
-    required: h = !1,
-    disabled: i = !1,
-    direction: t = "column",
-    children: l,
-    className: s,
-    ...p
-  }, x) => {
-    const b = G(), u = p.id || b, f = a ? `${u}-helper` : void 0, C = o ? `${u}-error` : void 0, j = [f, C].filter(Boolean).join(" "), A = (q) => {
-      !i && c && c(q);
-    }, B = N({
-      disabled: i,
-      invalid: !!o
-    });
-    return /* @__PURE__ */ k("div", { ref: x, className: g(d.field, s), ...B, ...p, children: [
-      n && /* @__PURE__ */ r(y, { required: h, disabled: i, children: n }),
-      /* @__PURE__ */ r(I.Provider, { value: { disabled: i, name: m, onChange: A, value: e }, children: /* @__PURE__ */ r(
-        "div",
-        {
-          className: d.options,
-          "data-direction": t,
-          role: "group",
-          "aria-describedby": j || void 0,
-          "aria-invalid": o ? "true" : void 0,
-          children: l
-        }
-      ) }),
-      o && /* @__PURE__ */ r(T, { id: C, children: o }),
-      !o && a && /* @__PURE__ */ r($, { id: f, children: a })
-    ] });
-  }
-);
-w.displayName = "CheckboxGroup";
-const O = v(
-  ({ value: e, children: c, disabled: m, required: n = !1, className: a, ...o }, h) => {
-    const i = G(), t = F(), l = t.value.includes(e), s = t.disabled || m, p = () => {
-      if (!s) {
-        const b = l ? t.value.filter((u) => u !== e) : [...t.value, e];
-        t.onChange(b);
-      }
-    }, x = N({
-      disabled: s,
-      required: n
-    });
-    return /* @__PURE__ */ k("label", { className: g(d.option, a), ...x, children: [
-      /* @__PURE__ */ r(
-        "input",
-        {
-          ref: h,
-          type: "checkbox",
-          name: t.name,
-          value: e,
-          checked: l,
-          disabled: s,
-          required: n,
-          onChange: p,
-          className: d.input,
-          "aria-required": n || void 0,
-          ...o,
-          id: i
-        }
-      ),
-      /* @__PURE__ */ r("span", { className: d.indicator }),
-      c && /* @__PURE__ */ r(y, { required: n, disabled: s, htmlFor: i, children: c })
-    ] });
-  }
-);
-O.displayName = "CheckboxGroup.Option";
-const M = Object.assign(w, {
-  Option: O
-});
-export {
-  M as CheckboxGroup
-};

package/dist/components/forms/chip-multiple-input/chip-multiple-input.js

@@ -1,101 +0,0 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
-import h from "../../../core/src/components/forms/chip-multiple-input/chip-multiple-input.module.css.js";
-import { createContext as k, forwardRef as v, useId as D, useContext as E } from "react";
-import { cx as R } from "../../../utils/cx.js";
-import { useDataAttrs as x } from "../../../hooks/use-data-attrs.js";
-import { ErrorText as S } from "../error-text/error-text.js";
-import { HelperText as T } from "../helper-text/helper-text.js";
-import { Label as $ } from "../label/label.js";
-const b = k(void 0);
-function H() {
-  const e = E(b);
-  if (!e)
-    throw new Error("ChipMultipleInput.Option must be used within ChipMultipleInput");
-  return e;
-}
-const M = v(
-  ({
-    value: e,
-    onChange: p,
-    name: a,
-    label: s,
-    helper: n,
-    error: t,
-    required: l = !1,
-    disabled: i = !1,
-    gap: r = "2",
-    wrap: d = !0,
-    children: c,
-    className: u,
-    ...m
-  }, w) => {
-    const y = D(), f = m.id || y, C = n ? `${f}-helper` : void 0, I = t ? `${f}-error` : void 0, N = [C, I].filter(Boolean).join(" "), O = (A) => {
-      !i && p && p(A);
-    }, j = x({
-      invalid: !!t
-    });
-    return /* @__PURE__ */ B("div", { ref: w, className: R(h.field, u), ...j, ...m, children: [
-      s && /* @__PURE__ */ o($, { required: l, disabled: i, children: s }),
-      /* @__PURE__ */ o(
-        b.Provider,
-        {
-          value: {
-            disabled: i,
-            name: a,
-            onChange: O,
-            value: e
-          },
-          children: /* @__PURE__ */ o(
-            "div",
-            {
-              className: h.options,
-              "data-gap": r,
-              "data-wrap": d,
-              role: "group",
-              "aria-describedby": N || void 0,
-              "aria-invalid": t ? "true" : void 0,
-              children: c
-            }
-          )
-        }
-      ),
-      t && /* @__PURE__ */ o(S, { id: I, children: t }),
-      !t && n && /* @__PURE__ */ o(T, { id: C, children: n })
-    ] });
-  }
-);
-M.displayName = "ChipMultipleInput";
-const g = v(
-  ({ value: e, children: p, disabled: a, ...s }, n) => {
-    const t = H(), l = t.value.includes(e), i = t.disabled || a, r = () => {
-      if (!i && t.onChange) {
-        const c = l ? t.value.filter((u) => u !== e) : [...t.value, e];
-        t.onChange(c);
-      }
-    }, d = x({
-      disabled: i,
-      selected: l
-    });
-    return /* @__PURE__ */ o(
-      "button",
-      {
-        ref: n,
-        type: "button",
-        className: h.option,
-        onClick: r,
-        disabled: i,
-        "aria-pressed": l,
-        ...d,
-        ...s,
-        children: p
-      }
-    );
-  }
-);
-g.displayName = "ChipMultipleInput.Option";
-const K = Object.assign(M, {
-  Option: g
-});
-export {
-  K as ChipMultipleInput
-};