quirk-ui 0.0.4 → 0.0.6

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,45 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import "react";
+import { Label as h } from "../Label/index.js";
+import '../../assets/index10.css';const w = "_wrapper_a587t_1", x = "_select_a587t_7", p = {
+  wrapper: w,
+  select: x
+};
+function $({
+  id: r,
+  name: m,
+  label: s,
+  value: o,
+  options: i,
+  required: c = !1,
+  disabled: a = !1,
+  onChange: t,
+  className: n,
+  ...u
+}) {
+  const f = (e) => {
+    const _ = Array.from(e.target.selectedOptions).map((v) => v.value);
+    t == null || t(_);
+  };
+  return /* @__PURE__ */ d("div", { className: `${p.wrapper} ${n ?? ""}`, children: [
+    s && /* @__PURE__ */ l(h, { htmlFor: r, required: c, disabled: a, children: s }),
+    /* @__PURE__ */ l(
+      "select",
+      {
+        id: r,
+        name: m,
+        multiple: !0,
+        value: o,
+        required: c,
+        disabled: a,
+        onChange: f,
+        className: p.select,
+        ...u,
+        children: i.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+      }
+    )
+  ] });
+}
+export {
+  $ as MultiSelect
+};

package/dist/components/Radio/Radio.test.js

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import { d as l, i, r as n, g as o, s as t, v as r } from "../../index-BWTAh3RO.js";
+import { Radio as s } from "./index.js";
+l("Radio", () => {
+  i("renders correctly", () => {
+    n(
+      /* @__PURE__ */ a(s, { id: "option1", name: "testOptions", value: "1", label: "Option 1" })
+    ), o(t.getByRole("radio")).toBeInTheDocument(), o(t.getByLabelText("Option 1")).toBeInTheDocument();
+  }), i("can be disabled", () => {
+    n(
+      /* @__PURE__ */ a(
+        s,
+        {
+          id: "option2",
+          name: "testOptions",
+          value: "2",
+          label: "Option 2",
+          disabled: !0
+        }
+      )
+    );
+    const e = t.getByRole("radio");
+    o(e).toBeDisabled();
+  }), i("fires onChange event", () => {
+    const e = r.fn();
+    n(
+      /* @__PURE__ */ a(
+        s,
+        {
+          id: "option3",
+          name: "testOptions",
+          value: "3",
+          label: "Option 3",
+          onChange: e
+        }
+      )
+    ), t.getByRole("radio").click(), o(e).toHaveBeenCalled();
+  });
+});

package/dist/components/Radio/__mocks__/styles.module.css.js

@@ -0,0 +1,8 @@
+const a = {
+  radioWrapper: "radioWrapper",
+  radio: "radio",
+  label: "label"
+};
+export {
+  a as default
+};

package/dist/components/Radio/index.js

@@ -0,0 +1,37 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { Label as _ } from "../Label/index.js";
+import '../../assets/index9.css';const m = "_wrapper_1s0a7_1", d = "_radio_1s0a7_7", f = "_label_1s0a7_29", a = {
+  wrapper: m,
+  radio: d,
+  label: f
+};
+function h({
+  id: r,
+  name: o,
+  value: p,
+  label: t,
+  disabled: s = !1,
+  required: e = !1,
+  className: c,
+  ...i
+}) {
+  return /* @__PURE__ */ n("div", { className: `${a.wrapper} ${c ?? ""}`, children: [
+    /* @__PURE__ */ l(
+      "input",
+      {
+        type: "radio",
+        id: r,
+        name: o,
+        value: p,
+        disabled: s,
+        required: e,
+        className: a.radio,
+        ...i
+      }
+    ),
+    /* @__PURE__ */ l(_, { htmlFor: r, disabled: s, required: e, className: a.label, children: t })
+  ] });
+}
+export {
+  h as Radio
+};

package/dist/components/Range/Range.test.js

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { d as g, i as l, r as n, g as e, s as a, v as i, f as m } from "../../index-BWTAh3RO.js";
+import { Range as s } from "./index.js";
+g("Range", () => {
+  l("renders with a label and value", () => {
+    n(
+      /* @__PURE__ */ r(s, { label: "Volume", name: "volume", defaultValue: 30, min: 0, max: 100 })
+    ), e(a.getByLabelText("Volume")).toBeInTheDocument(), e(a.getByText("30")).toBeInTheDocument();
+  }), l("calls onChange when value changes", () => {
+    const t = i.fn();
+    n(
+      /* @__PURE__ */ r(
+        s,
+        {
+          label: "Progress",
+          name: "progress",
+          defaultValue: 30,
+          min: 0,
+          max: 100,
+          onValueChange: t
+        }
+      )
+    );
+    const o = a.getByLabelText("Progress");
+    m.change(o, { target: { value: "70" } }), e(t).toHaveBeenCalled();
+  }), l("shows error message if error prop is set", () => {
+    n(
+      /* @__PURE__ */ r(
+        s,
+        {
+          label: "Brightness",
+          name: "brightness",
+          defaultValue: 30,
+          error: "Required field"
+        }
+      )
+    ), e(a.getByText("Required field")).toBeInTheDocument();
+  });
+});

package/dist/components/Range/index.js

@@ -0,0 +1,64 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as M, useEffect as $ } from "react";
+import { Label as I } from "../Label/index.js";
+import '../../assets/index8.css';const j = "_wrapper_7toxm_1", y = "_trackContainer_7toxm_7", E = "_track_7toxm_7", S = "_value_7toxm_44", b = "_error_7toxm_52", F = "_errorMessage_7toxm_56", s = {
+  wrapper: j,
+  trackContainer: y,
+  track: E,
+  value: S,
+  error: b,
+  errorMessage: F
+};
+function h({
+  label: i,
+  id: v,
+  value: c,
+  defaultValue: o,
+  onValueChange: r,
+  className: x,
+  error: t,
+  required: k,
+  optional: f,
+  tooltip: N,
+  ...a
+}) {
+  const [u, m] = M(), n = c != null, _ = v ?? a.name ?? `slider-${Math.random().toString(36).slice(2)}`, l = n ? c : u;
+  return $(() => {
+    n || (r == null || r(o ?? 0), m(o));
+  }, [o]), /* @__PURE__ */ d("div", { className: `${s.wrapper} ${x ?? ""}`, children: [
+    i && /* @__PURE__ */ e(
+      I,
+      {
+        htmlFor: _,
+        required: k,
+        optional: f,
+        intent: t ? "error" : "default",
+        tooltip: N,
+        showErrorIcon: !!t,
+        children: i
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: s.trackContainer, children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: _,
+          type: "range",
+          className: `${s.track} ${t ? s.error : ""}`,
+          "aria-invalid": !!t,
+          value: l ?? 0,
+          onChange: (w) => {
+            const p = Number(w.target.value);
+            n || m(p), r == null || r(p);
+          },
+          ...a
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: s.value, children: l })
+    ] }),
+    t && /* @__PURE__ */ e("div", { className: s.errorMessage, children: t })
+  ] });
+}
+export {
+  h as Range
+};

package/dist/components/Select/Select.test.js

@@ -0,0 +1,48 @@
+import { jsx as l } from "react/jsx-runtime";
+import { d as i, i as n, r as s, g as o, s as a, v as r, f as m } from "../../index-BWTAh3RO.js";
+import { Select as c } from "./index.js";
+i("Select", () => {
+  const t = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+    { label: "Option C", value: "c" }
+  ];
+  n("renders label and options", () => {
+    s(
+      /* @__PURE__ */ l(c, { id: "select1", name: "test", label: "Choose", options: t })
+    ), o(a.getByLabelText("Choose")).toBeInTheDocument(), t.forEach(
+      ({ label: e }) => o(a.getByRole("option", { name: e })).toBeInTheDocument()
+    );
+  }), n("calls onChange handler", () => {
+    const e = r.fn();
+    s(
+      /* @__PURE__ */ l(
+        c,
+        {
+          id: "select2",
+          name: "test",
+          label: "Pick",
+          options: t,
+          onChange: e
+        }
+      )
+    );
+    const b = a.getByRole("combobox");
+    m.change(b, { target: { value: "b" } }), o(e).toHaveBeenCalled();
+  }), n("respects default value", () => {
+    s(
+      /* @__PURE__ */ l(
+        c,
+        {
+          id: "select3",
+          name: "test",
+          label: "Choose",
+          options: t,
+          defaultValue: "b"
+        }
+      )
+    );
+    const e = a.getByRole("combobox");
+    o(e.value).toBe("b");
+  });
+});

package/dist/components/Select/index.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import "react";
+import { Label as d } from "../Label/index.js";
+import '../../assets/index7.css';const _ = "_wrapper_3s7ns_1", f = "_select_3s7ns_7", a = {
+  wrapper: _,
+  select: f
+};
+function j({
+  id: s,
+  name: o,
+  label: r,
+  options: p,
+  defaultValue: i,
+  required: t = !1,
+  disabled: c = !1,
+  onChange: m,
+  className: h,
+  ...u
+}) {
+  return /* @__PURE__ */ n("div", { className: `${a.wrapper} ${h ?? ""}`, children: [
+    r && /* @__PURE__ */ l(d, { htmlFor: s, required: t, disabled: c, children: r }),
+    /* @__PURE__ */ n(
+      "select",
+      {
+        id: s,
+        name: o,
+        defaultValue: i,
+        required: t,
+        disabled: c,
+        onChange: m,
+        className: a.select,
+        ...u,
+        children: [
+          /* @__PURE__ */ l("option", { value: "", disabled: !0, hidden: !0, children: "-- Select an option --" }),
+          p.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  j as Select
+};

package/dist/components/Spacer/Spacer.test.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { d as i, i as e, r as a, g as t } from "../../index-BWTAh3RO.js";
+import { Spacer as c } from "./index.js";
+i("Spacer", () => {
+  e("renders with default props", () => {
+    const { container: s } = a(/* @__PURE__ */ r(c, {}));
+    t(s.firstChild).toHaveClass("md", "horizontal", "spacer");
+  }), e("renders the correct classes", () => {
+    const { container: s } = a(/* @__PURE__ */ r(c, { axis: "vertical", size: "xl" }));
+    t(s.firstChild).toHaveClass("xl", "vertical", "spacer");
+  }), e("renders custom classes", () => {
+    const { container: s } = a(
+      /* @__PURE__ */ r(c, { className: "custom-class", axis: "vertical", size: "xl" })
+    );
+    t(s.firstChild).toHaveClass(
+      "custom-class",
+      "xl",
+      "vertical",
+      "spacer"
+    );
+  });
+});

package/dist/components/Spacer/__mocks__/styles.module.css.js

@@ -0,0 +1,12 @@
+const l = {
+  spacer: "spacer",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+export {
+  l as default
+};

package/dist/components/Spacer/index.js

@@ -0,0 +1,29 @@
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/index6.css';const r = "_spacer_1pz5u_1", _ = "_horizontal_1pz5u_6", n = "_vertical_1pz5u_11", i = "_sm_1pz5u_16", p = "_md_1pz5u_21", e = "_lg_1pz5u_26", m = "_xl_1pz5u_31", s = {
+  spacer: r,
+  horizontal: _,
+  vertical: n,
+  sm: i,
+  md: p,
+  lg: e,
+  xl: m
+}, z = {
+  sm: s.sm,
+  md: s.md,
+  lg: s.lg,
+  xl: s.xl
+}, u = {
+  horizontal: s.horizontal,
+  vertical: s.vertical
+};
+function d({
+  size: o = "md",
+  axis: t = "horizontal",
+  className: l,
+  ...a
+}) {
+  return /* @__PURE__ */ c("div", { className: `${s.spacer} ${z[o]} ${u[t]} ${l ?? ""}`, ...a });
+}
+export {
+  d as Spacer
+};

package/dist/components/Stack/Stack.test.js

@@ -0,0 +1,60 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { d as l, i as s, r as n, g as t, s as d } from "../../index-BWTAh3RO.js";
+import { Stack as a } from "./index.js";
+l("Stack", () => {
+  s("renders children", () => {
+    n(
+      /* @__PURE__ */ r(a, { children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    ), t(d.getByText("Item 1")).toBeInTheDocument(), t(d.getByText("Item 2")).toBeInTheDocument();
+  }), s("renders with default props", () => {
+    const { container: i } = n(
+      /* @__PURE__ */ r(a, { children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    );
+    t(i.firstChild).toHaveClass(
+      "stack",
+      "vertical",
+      "gapMd",
+      "alignStretch",
+      "justifyStart"
+    );
+  }), s("applies direction classes", () => {
+    const { container: i } = n(
+      /* @__PURE__ */ r(a, { direction: "horizontal", children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    );
+    t(i.firstChild).toHaveClass("horizontal");
+  }), s("applies align and justify classes", () => {
+    const { container: i } = n(
+      /* @__PURE__ */ r(a, { align: "center", justify: "space-between", children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    );
+    t(i.firstChild).toHaveClass("alignCenter"), t(i.firstChild).toHaveClass("justifySpaceBetween");
+  }), s("applies gap classes", () => {
+    const { container: i } = n(
+      /* @__PURE__ */ r(a, { gap: "lg", children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    );
+    t(i.firstChild).toHaveClass("gapLg");
+  }), s("respects the 'as' prop", () => {
+    var c;
+    const { container: i } = n(
+      /* @__PURE__ */ r(a, { as: "ul", children: [
+        /* @__PURE__ */ e("div", { children: "Item 1" }),
+        /* @__PURE__ */ e("div", { children: "Item 2" })
+      ] })
+    );
+    t((c = i.firstChild) == null ? void 0 : c.nodeName).toBe("UL");
+  });
+});

package/dist/components/Stack/__mocks__/styles.module.css.js

@@ -0,0 +1,21 @@
+const t = {
+  stack: "stack",
+  vertical: "vertical",
+  horizontal: "horizontal",
+  gapSm: "gapSm",
+  gapMd: "gapMd",
+  gapLg: "gapLg",
+  alignStart: "alignStart",
+  alignCenter: "alignCenter",
+  alignEnd: "alignEnd",
+  alignStretch: "alignStretch",
+  justifyStart: "justifyStart",
+  justifyCenter: "justifyCenter",
+  justifyEnd: "justifyEnd",
+  justifySpaceBetween: "justifySpaceBetween",
+  justifySpaceAround: "justifySpaceAround",
+  justifySpaceEvenly: "justifySpaceEvenly"
+};
+export {
+  t as default
+};

package/dist/components/Stack/index.js

@@ -0,0 +1,65 @@
+import { jsx as p } from "react/jsx-runtime";
+import '../../assets/index5.css';const g = "_stack_134u6_1", y = "_vertical_134u6_5", f = "_horizontal_134u6_9", S = "_wrap_134u6_13", j = "_gapSm_134u6_18", d = "_gapMd_134u6_22", v = "_gapLg_134u6_26", C = "_alignStart_134u6_31", E = "_alignCenter_134u6_35", h = "_alignEnd_134u6_39", m = "_alignStretch_134u6_43", w = "_justifyStart_134u6_48", M = "_justifyCenter_134u6_52", k = "_justifyEnd_134u6_56", z = "_justifySpaceBetween_134u6_60", B = "_justifySpaceAround_134u6_64", A = "_justifySpaceEvenly_134u6_68", t = {
+  stack: g,
+  vertical: y,
+  horizontal: f,
+  wrap: S,
+  gapSm: j,
+  gapMd: d,
+  gapLg: v,
+  alignStart: C,
+  alignCenter: E,
+  alignEnd: h,
+  alignStretch: m,
+  justifyStart: w,
+  justifyCenter: M,
+  justifyEnd: k,
+  justifySpaceBetween: z,
+  justifySpaceAround: B,
+  justifySpaceEvenly: A
+}, L = {
+  stack: t.stack,
+  vertical: t.vertical,
+  horizontal: t.horizontal
+}, x = {
+  sm: t.gapSm,
+  md: t.gapMd,
+  lg: t.gapLg
+}, b = {
+  start: t.alignStart,
+  center: t.alignCenter,
+  end: t.alignEnd,
+  stretch: t.alignStretch
+}, N = {
+  start: t.justifyStart,
+  center: t.justifyCenter,
+  end: t.justifyEnd,
+  "space-between": t.justifySpaceBetween,
+  "space-around": t.justifySpaceAround,
+  "space-evenly": t.justifySpaceEvenly
+};
+function q({
+  direction: a = "vertical",
+  gap: n = "md",
+  align: s = "stretch",
+  justify: e = "start",
+  wrap: c = !1,
+  as: i = "div",
+  className: r,
+  children: _,
+  ...u
+}) {
+  const o = i, l = [
+    t.stack,
+    L[a],
+    x[n],
+    b[s],
+    N[e],
+    c ? t.wrap : "",
+    r ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p(o, { className: l, ...u, children: _ });
+}
+export {
+  q as Stack
+};

package/dist/components/Switch/Switch.test.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { d as h, i as a, r as s, g as n, s as c, v as i, f as g } from "../../index-BWTAh3RO.js";
+import { Switch as l } from "./index.js";
+h("Switch", () => {
+  a("renders with label", () => {
+    s(
+      /* @__PURE__ */ e(
+        l,
+        {
+          name: "switch1",
+          checked: !1,
+          onChange: () => {
+          },
+          label: "Toggle 1"
+        }
+      )
+    ), n(c.getByText("Toggle 1")).toBeInTheDocument();
+  }), a("fires onChange when toggled", () => {
+    const o = i.fn();
+    s(
+      /* @__PURE__ */ e(
+        l,
+        {
+          name: "switch2",
+          checked: !1,
+          onChange: o,
+          label: "Toggle 2"
+        }
+      )
+    );
+    const t = c.getByRole("checkbox");
+    g.click(t), n(o).toBeCalled();
+  }), a("is disabled when passed disabled prop", () => {
+    s(
+      /* @__PURE__ */ e(
+        l,
+        {
+          name: "switch3",
+          checked: !1,
+          onChange: () => {
+          },
+          label: "Toggle 3",
+          disabled: !0
+        }
+      )
+    );
+  });
+});

package/dist/components/Switch/index.js

@@ -0,0 +1,57 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import "react";
+import { Label as u } from "../Label/index.js";
+import '../../assets/index4.css';const d = "_wrapper_fzy93_1", y = "_input_fzy93_7", w = "_slider_fzy93_11", b = "_label_fzy93_41", s = {
+  wrapper: d,
+  input: y,
+  slider: w,
+  label: b
+};
+function k({
+  id: r,
+  name: a,
+  checked: x,
+  disabled: l = !1,
+  label: t,
+  required: p,
+  optional: c,
+  intent: n = "default",
+  size: i,
+  tooltip: o,
+  showErrorIcon: _,
+  className: m,
+  ...f
+}) {
+  return /* @__PURE__ */ e("div", { className: `${s.wrapper} ${m ?? ""}`, children: /* @__PURE__ */ h(
+    u,
+    {
+      htmlFor: r,
+      intent: n,
+      size: i,
+      required: p,
+      optional: c,
+      disabled: l,
+      tooltip: o,
+      showErrorIcon: _,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "checkbox",
+            id: r,
+            name: a,
+            disabled: l,
+            required: p,
+            className: s.input,
+            ...f
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: s.slider }),
+        t && /* @__PURE__ */ e("span", { className: s.label, children: t })
+      ]
+    }
+  ) });
+}
+export {
+  k as Switch
+};

package/dist/components/Table/Table.test.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as g, i as n, r as a, g as e, s as t, v as i, f as h } from "../../index-BWTAh3RO.js";
+import { Table as c } from "./index.js";
+const s = [
+  { name: "Alice", age: 30 },
+  { name: "Bob", age: 33 }
+], l = [
+  { header: "Name", accessor: "name" },
+  { header: "Age", accessor: "age" }
+];
+g("Table", () => {
+  n("renders headers and rows", () => {
+    a(/* @__PURE__ */ o(c, { data: s, columns: l })), e(t.getByText("Name")).toBeInTheDocument(), e(t.getByText("Age")).toBeInTheDocument(), e(t.getByText("Alice")).toBeInTheDocument(), e(t.getByText("30")).toBeInTheDocument(), e(t.getByText("Bob")).toBeInTheDocument(), e(t.getByText("33")).toBeInTheDocument();
+  }), n("renders custom cell content with cellRenderer", () => {
+    a(/* @__PURE__ */ o(c, { data: s, columns: [
+      {
+        header: "Name",
+        accessor: "name",
+        cellRenderer: (m) => /* @__PURE__ */ o("strong", { children: m })
+      },
+      { header: "Age", accessor: "age" }
+    ] })), e(t.getByText("Alice").tagName).toBe("STRONG");
+  }), n("renders empty message when no data", () => {
+    a(/* @__PURE__ */ o(c, { data: [], columns: l, emptyMessage: "Nothing here!" })), e(t.getByText("Nothing here!")).toBeInTheDocument();
+  }), n("calls onRowClick when a row is clicked", () => {
+    const r = i.fn();
+    a(/* @__PURE__ */ o(c, { data: s, columns: l, onRowClick: r }));
+    const m = t.getByText("Alice").closest("tr");
+    h.click(m), e(r).toHaveBeenCalledWith(s[0]);
+  });
+});