quirk-ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,9 @@
+const s = {
+  button: "button",
+  primary: "primary",
+  secondary: "secondary",
+  ghost: "ghost"
+};
+export {
+  s as default
+};

package/dist/components/Button/index.js

@@ -1,12 +1,22 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../assets/index4.css';const r = "_button_1l043_1";
-function b({
-  className: t,
-  children: o,
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/index13.css';const c = "_button_v8ol8_1", y = "_primary_v8ol8_21", _ = "_secondary_v8ol8_29", e = "_ghost_v8ol8_37", o = {
+  button: c,
+  primary: y,
+  secondary: _,
+  ghost: e
+}, i = {
+  primary: o.primary,
+  secondary: o.secondary,
+  ghost: o.ghost
+};
+function p({
+  variant: t = "primary",
+  className: r,
+  children: s,
   ...n
 }) {
-  return /* @__PURE__ */ u("button", { className: `${t ?? ""} ${r}`, ...n, children: o });
+  return /* @__PURE__ */ a("button", { className: `${r ?? ""} ${o.button} ${i[t]}`, ...n, children: s });
 }
 export {
-  b as Button
+  p as Button
 };

package/dist/components/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +1,37 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { d as a, i, r, g as n, s as c } from "../../index-BWTAh3RO.js";
+import { ButtonGroup as s } from "./index.js";
+a("ButtonGroup", () => {
+  i("renders children", () => {
+    r(
+      /* @__PURE__ */ o(s, { children: [
+        /* @__PURE__ */ t("button", { children: "One" }),
+        /* @__PURE__ */ t("button", { children: "Two" })
+      ] })
+    ), n(c.getByText("One")).toBeInTheDocument(), n(c.getByText("Two")).toBeInTheDocument();
+  }), i("applies horizontal orientation by default", () => {
+    const { container: e } = r(
+      /* @__PURE__ */ o(s, { children: [
+        /* @__PURE__ */ t("button", { children: "One" }),
+        /* @__PURE__ */ t("button", { children: "Two" })
+      ] })
+    );
+    n(e.firstChild).toHaveClass("horizontal");
+  }), i("applies vertical orientation when specified", () => {
+    const { container: e } = r(
+      /* @__PURE__ */ o(s, { orientation: "vertical", children: [
+        /* @__PURE__ */ t("button", { children: "One" }),
+        /* @__PURE__ */ t("button", { children: "Two" })
+      ] })
+    );
+    n(e.firstChild).toHaveClass("vertical");
+  }), i("accepts a custom class anme", () => {
+    const { container: e } = r(
+      /* @__PURE__ */ o(s, { className: "custom-class", children: [
+        /* @__PURE__ */ t("button", { children: "One" }),
+        /* @__PURE__ */ t("button", { children: "Two" })
+      ] })
+    );
+    n(e.firstChild).toHaveClass("custom-class");
+  });
+});

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

@@ -0,0 +1,7 @@
+const t = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+export {
+  t as default
+};

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,26 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/index11.css';const l = "_buttonGroup_c695y_1", u = "_vertical_c695y_10", s = "_horizontal_c695y_14", o = {
+  buttonGroup: l,
+  vertical: u,
+  horizontal: s
+};
+function p({
+  children: t,
+  className: r,
+  orientation: n = "horizontal",
+  role: e = "group",
+  ...c
+}) {
+  const i = n === "vertical" ? o.vertical : o.horizontal;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `${o.buttonGroup} ${i} ${r ?? ""}`,
+      ...c,
+      children: t
+    }
+  );
+}
+export {
+  p as ButtonGroup
+};

package/dist/components/Calendar/Calendar.test.js

@@ -0,0 +1,40 @@
+import { jsx as c } from "react/jsx-runtime";
+import { d as D, i as s, r as l, g as n, s as a, v as y, f as d } from "../../index-BWTAh3RO.js";
+import { f as h, C as r } from "../../index-DhqFdMqD.js";
+D("Calendar", () => {
+  s("renders the current month and year", () => {
+    const t = new Date(2025, 4, 15);
+    l(/* @__PURE__ */ c(r, { selectedDate: t, onSelectDate: () => {
+    } })), n(a.getByText("May 2025")).toBeInTheDocument();
+  }), s("renders the day names (Sun to Sat)", () => {
+    l(/* @__PURE__ */ c(r, { selectedDate: /* @__PURE__ */ new Date(), onSelectDate: () => {
+    } })), ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].forEach((e) => {
+      n(a.getByText(e)).toBeInTheDocument();
+    });
+  }), s("renders all days for the visible calendar grid", () => {
+    const t = new Date(2025, 4, 1);
+    l(/* @__PURE__ */ c(r, { selectedDate: t, onSelectDate: () => {
+    } }));
+    const e = a.getAllByRole("button").filter(
+      (i) => /^\d+$/.test(i.textContent || "")
+    );
+    n(e.length).toBeGreaterThanOrEqual(28);
+  }), s("calls onSelectDate with the correct date when a day is clicked", () => {
+    const t = new Date(2025, 4, 1), o = y.fn();
+    l(
+      /* @__PURE__ */ c(r, { selectedDate: t, onSelectDate: o })
+    );
+    const e = a.getAllByRole("button").find((u) => u.textContent === "15");
+    n(e).toBeTruthy(), e && d.click(e), n(o).toHaveBeenCalledTimes(1);
+    const i = o.mock.calls[0][0];
+    n(h(i, "yyyy-MM-dd")).toBe("2025-05-15");
+  }), s("navigates to previous and next months", () => {
+    const t = new Date(2025, 4, 1);
+    l(/* @__PURE__ */ c(r, { selectedDate: t, onSelectDate: () => {
+    } }));
+    const o = a.getByLabelText("Decrease month number");
+    d.click(o), n(a.getByText("April 2025")).toBeInTheDocument();
+    const e = a.getByLabelText("Increase month number");
+    d.click(e), d.click(e), n(a.getByText("June 2025")).toBeInTheDocument();
+  });
+});

package/dist/components/Calendar/index.js

@@ -0,0 +1,7 @@
+import "react/jsx-runtime";
+import "react";
+import "../IconButton/index.js";
+import { C as a } from "../../index-DhqFdMqD.js";
+export {
+  a as Calendar
+};

package/dist/components/Checkbox/Checkbox.test.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import { d as n, i as b, r as s, g as c, s as o, v as h } from "../../index-BWTAh3RO.js";
+import { Checkbox as a } from "./index.js";
+n("Checkbox", () => {
+  b("renders correctly", () => {
+    s(
+      /* @__PURE__ */ t(a, { id: "checkbox1", name: "testCheckboxes", label: "Accept terms" })
+    ), c(o.getByRole("checkbox")).toBeInTheDocument(), c(o.getByLabelText("Accept terms")).toBeInTheDocument();
+  }), b("can be disabled", () => {
+    s(
+      /* @__PURE__ */ t(
+        a,
+        {
+          id: "checkbox2",
+          name: "testCheckboxes",
+          label: "Disabled checkbox",
+          disabled: !0
+        }
+      )
+    );
+    const e = o.getByRole("checkbox");
+    c(e).toBeDisabled();
+  }), b("fires onChange event", () => {
+    const e = h.fn();
+    s(
+      /* @__PURE__ */ t(
+        a,
+        {
+          id: "checkbox3",
+          name: "testCheckboxes",
+          label: "Checkbox with onChange",
+          onChange: e
+        }
+      )
+    ), o.getByRole("checkbox").click(), c(e).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,8 @@
+const e = {
+  checkboxWrapper: "checkboxWrapper",
+  checkbox: "checkbox",
+  label: "label"
+};
+export {
+  e as default
+};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,45 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import "react";
+import { Label as x } from "../Label/index.js";
+import '../../assets/index23.css';const b = "_wrapper_zxmf0_1", n = "_checkbox_zxmf0_7", h = "_label_zxmf0_29", e = {
+  wrapper: b,
+  checkbox: n,
+  label: h
+};
+function i({
+  id: c,
+  name: a,
+  label: s,
+  disabled: o = !1,
+  required: l = !1,
+  className: p,
+  ...t
+}) {
+  return /* @__PURE__ */ m("div", { className: `${e.wrapper} ${p ?? ""}`, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        type: "checkbox",
+        id: c,
+        name: a,
+        disabled: o,
+        required: l,
+        className: e.checkbox,
+        ...t
+      }
+    ),
+    /* @__PURE__ */ r(
+      x,
+      {
+        htmlFor: c,
+        disabled: o,
+        required: l,
+        className: e.label,
+        children: s
+      }
+    )
+  ] });
+}
+export {
+  i as Checkbox
+};

package/dist/components/Container/Container.test.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { d as c, i as t, r as i, g as n, s as o } from "../../index-BWTAh3RO.js";
+import { Container as a } from "./index.js";
+c("Container", () => {
+  t("renders children", () => {
+    i(/* @__PURE__ */ s(a, { children: "Test content" })), n(o.getByText("Test content")).toBeInTheDocument();
+  }), t("applies the default size class", () => {
+    const { container: e } = i(/* @__PURE__ */ s(a, { children: "Test" }));
+    n(e.firstChild).toHaveClass("md");
+  }), t("applies a custom size class", () => {
+    const { container: e } = i(/* @__PURE__ */ s(a, { size: "lg", children: "Test" }));
+    n(e.firstChild).toHaveClass("lg");
+  }), t("applies fluid class", () => {
+    const { container: e } = i(/* @__PURE__ */ s(a, { fluid: !0, children: "Fluid Container" }));
+    n(e.firstChild).toHaveClass("fluid");
+  }), t("applies a custom className", () => {
+    const { container: e } = i(
+      /* @__PURE__ */ s(a, { className: "custom-class", children: "Test" })
+    );
+    n(e.firstChild).toHaveClass("custom-class");
+  }), t("renders with a custom tag", () => {
+    const { container: e } = i(/* @__PURE__ */ s(a, { as: "section", children: "Test" }));
+    n(e.querySelector("section")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,11 @@
+const l = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  full: "full",
+  fluid: "fluid"
+};
+export {
+  l as default
+};

package/dist/components/Container/index.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/index17.css';const a = "_container_171d6_1", f = "_sm_171d6_9", m = "_md_171d6_13", r = "_lg_171d6_17", u = "_xl_171d6_21", x = "_full_171d6_25", g = "_fluid_171d6_29", n = {
+  container: a,
+  sm: f,
+  md: m,
+  lg: r,
+  xl: u,
+  full: x,
+  fluid: g
+};
+function p({
+  children: s,
+  className: _ = "",
+  as: l = "div",
+  size: t = "md",
+  fluid: o = !1,
+  ...c
+}) {
+  const d = l, i = o ? n.fluid : n[t] ?? "";
+  return /* @__PURE__ */ e(
+    d,
+    {
+      className: `${n.container} ${i} ${_ ?? ""}`,
+      ...c,
+      children: s
+    }
+  );
+}
+export {
+  p as Container
+};

package/dist/components/DatePicker/DatePicker.test.js

@@ -0,0 +1,42 @@
+import { jsx as n } from "react/jsx-runtime";
+import { v as r, d as k, i as c, r as d, g as t, s as a, f as l } from "../../index-BWTAh3RO.js";
+import { DatePicker as o } from "./index.js";
+import { f as u } from "../../index-DhqFdMqD.js";
+r.mock("../Calendar", () => ({
+  Calendar: ({ onSelectDate: e }) => /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: () => e(/* @__PURE__ */ new Date("2025-05-02")),
+      "data-testid": "mock-calendar",
+      children: "Select Date"
+    }
+  )
+}));
+k("DatePicker", () => {
+  c("renders label and input", () => {
+    d(/* @__PURE__ */ n(o, { id: "date", name: "date", label: "Pick a date" })), t(a.getByText("Pick a date")).toBeInTheDocument();
+  }), c("opens a calendar on input click", () => {
+    d(/* @__PURE__ */ n(o, { id: "date", name: "date", label: "Pick a date" }));
+    const e = a.getByPlaceholderText("Select date");
+    l.click(e), t(a.getByTestId("mock-calendar")).toBeInTheDocument();
+  }), c("calls onValueChange and updates the value", () => {
+    const e = r.fn();
+    d(
+      /* @__PURE__ */ n(
+        o,
+        {
+          id: "date",
+          name: "date",
+          label: "Pick a date",
+          onValueChange: e
+        }
+      )
+    );
+    const i = a.getByPlaceholderText("Select date");
+    l.click(i);
+    const s = a.getByTestId("mock-calendar");
+    l.click(s);
+    const m = u(/* @__PURE__ */ new Date("2025-05-02"), "yyyy-MM-dd");
+    t(e).toHaveBeenCalledWith(/* @__PURE__ */ new Date("2025-05-02")), t(i).toHaveValue(m);
+  });
+});

package/dist/components/DatePicker/index.js

@@ -0,0 +1,56 @@
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { Label as w } from "../Label/index.js";
+import { f as x, C as D } from "../../index-DhqFdMqD.js";
+import '../../assets/index24.css';const S = "_wrapper_13tha_1", N = "_input_13tha_7", O = "_popover_13tha_25", s = {
+  wrapper: S,
+  input: N,
+  popover: O
+};
+function F({
+  id: o,
+  name: i,
+  label: m,
+  onValueChange: r,
+  required: a = !1,
+  disabled: c = !1,
+  min: f,
+  max: _,
+  className: d,
+  ...v
+}) {
+  const [p, y] = n(null), [u, l] = n(!1);
+  return /* @__PURE__ */ h("div", { className: `${s.wrapper} ${d ?? ""}`, children: [
+    /* @__PURE__ */ t(w, { htmlFor: o, required: a, disabled: c, children: m }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: o,
+        name: i,
+        type: "text",
+        readOnly: !0,
+        value: p ? x(p, "yyyy-MM-dd") : "",
+        onClick: () => l((e) => !e),
+        placeholder: "Select date",
+        required: a,
+        disabled: c,
+        min: f,
+        max: _,
+        className: s.input,
+        ...v
+      }
+    ),
+    u && /* @__PURE__ */ t("div", { className: s.popover, children: /* @__PURE__ */ t(
+      D,
+      {
+        selectedDate: p,
+        onSelectDate: (e) => {
+          r == null || r(e), y(e), l(!1);
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  F as DatePicker
+};

package/dist/components/Divider/Divider.test.js

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

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

@@ -0,0 +1,8 @@
+const e = {
+  divider: "divider",
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+export {
+  e as default
+};

package/dist/components/Divider/index.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../assets/index19.css';const s = "_divider_zjbsg_1", e = "_horizontal_zjbsg_6", l = "_vertical_zjbsg_11", i = {
+  divider: s,
+  horizontal: e,
+  vertical: l
+}, n = {
+  horizontal: i.horizontal,
+  vertical: i.vertical
+};
+function v({
+  axis: o = "horizontal",
+  className: r,
+  ...t
+}) {
+  return /* @__PURE__ */ a("div", { className: `${i.divider} ${n[o]} ${r ?? ""}`, ...t });
+}
+export {
+  v as Divider
+};

package/dist/components/Fieldset/Fieldset.test.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { d as l, i as t, r, g as n, s as d } from "../../index-BWTAh3RO.js";
+import { Fieldset as i } from "./index.js";
+l("Fieldset", () => {
+  t("renders children", () => {
+    r(
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("input", { type: "text", placeholder: "Text input" }) })
+    ), n(d.getByPlaceholderText("Text input")).toBeInTheDocument();
+  }), t("renders legend if provided", () => {
+    r(/* @__PURE__ */ e(i, { legend: "Test legend", children: "Content" })), n(d.getByText("Test legend")).toBeInTheDocument();
+  });
+});

package/dist/components/Fieldset/index.js

@@ -0,0 +1,19 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import '../../assets/index22.css';const c = "_fieldset_1i2zv_1", f = "_legend_1i2zv_8", s = {
+  fieldset: c,
+  legend: f
+};
+function r({
+  legend: e,
+  className: l,
+  children: t,
+  ...d
+}) {
+  return /* @__PURE__ */ i("fieldset", { className: `${s.fieldset} ${l ?? ""}`, ...d, children: [
+    e && /* @__PURE__ */ n("legend", { className: s.legend, children: e }),
+    t
+  ] });
+}
+export {
+  r as Fieldset
+};

package/dist/components/FileUpload/FileUpload.test.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import { d as c, i as t, r as l, g as s, s as n, v as a, f as d } from "../../index-BWTAh3RO.js";
+import { FileUpload as r } from "./index.js";
+c("FileUpload", () => {
+  t("renders the label correctly", () => {
+    l(/* @__PURE__ */ o(r, { label: "Upload your resume", onFilesChange: () => {
+    } })), s(n.getByText("Upload your resume")).toBeInTheDocument();
+  }), t("opens file picker on click", () => {
+    l(/* @__PURE__ */ o(r, { label: "Upload your resume", onFilesChange: () => {
+    } }));
+    const e = n.getByLabelText("Upload your resume");
+    s(e).toBeInTheDocument();
+  }), t("triggers onFilesChange when files are dropped", () => {
+    const e = a.fn();
+    l(
+      /* @__PURE__ */ o(
+        r,
+        {
+          label: "Upload your resume",
+          onFilesChange: e
+        }
+      )
+    );
+    const i = n.getByRole("button"), p = {
+      files: [new File(["file content"], "test.txt", {
+        type: "text/plain"
+      })],
+      types: ["Files"],
+      getData: a.fn()
+    };
+    d.drop(i, { dataTransfer: p });
+  });
+});

package/dist/components/FileUpload/index.js

@@ -0,0 +1,99 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useRef as x, useState as h } from "react";
+import { IconButton as N } from "../IconButton/index.js";
+import { Label as Z } from "../Label/index.js";
+import { T as z } from "../../trash-2-2Rn0a4s6.js";
+import '../../assets/index25.css';const I = "_wrapper_s8dew_1", R = "_dropZone_s8dew_7", T = "_dragging_s8dew_25", j = "_input_s8dew_30", A = "_fileList_s8dew_34", i = {
+  wrapper: I,
+  dropZone: R,
+  dragging: T,
+  input: j,
+  fileList: A
+};
+function b({
+  id: D,
+  name: w,
+  label: p = "Upload files",
+  accept: y,
+  multiple: k = !1,
+  required: f = !1,
+  disabled: o = !1,
+  className: v,
+  onFilesChange: s
+}) {
+  const a = x(null), [d, l] = h(!1), [t, u] = h([]), m = (e) => {
+    if (!e) return;
+    const r = Array.from(e);
+    u((_) => [..._, ...r]), s(r);
+  }, L = (e) => {
+    const r = t.filter((_, $) => $ !== e);
+    u(r), s == null || s(r);
+  }, g = D ?? `upload-${Math.random().toString(36).slice(2)}`;
+  return /* @__PURE__ */ c("div", { className: `${i.wrapper} ${v ?? ""}`, children: [
+    p && /* @__PURE__ */ n(Z, { htmlFor: g, required: f, disabled: o, children: p }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: `${i.dropZone} ${d ? i.dragging : ""}`,
+        onClick: () => {
+          var e;
+          return !o && ((e = a.current) == null ? void 0 : e.click());
+        },
+        onDragOver: (e) => {
+          e.preventDefault(), o || l(!0);
+        },
+        onDragLeave: () => l(!1),
+        onDrop: (e) => {
+          e.preventDefault(), o || (l(!1), m(e.dataTransfer.files));
+        },
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          var r;
+          (e.key === "Enter" || e.key === " ") && ((r = a.current) == null || r.click());
+        },
+        "aria-disabled": o,
+        children: /* @__PURE__ */ n("p", { children: d ? "Drop files here" : "Drag files here or click to upload" })
+      }
+    ),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        ref: a,
+        id: g,
+        name: w,
+        type: "file",
+        accept: y,
+        multiple: k,
+        required: f,
+        disabled: o,
+        onChange: (e) => m(e.target.files),
+        className: i.input,
+        hidden: !0
+      }
+    ),
+    (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n("ul", { className: i.fileList, children: t == null ? void 0 : t.map((e, r) => /* @__PURE__ */ c("li", { children: [
+      /* @__PURE__ */ c("span", { children: [
+        " ",
+        e.name,
+        " (",
+        (e.size / 1024).toFixed(1),
+        " KB)"
+      ] }),
+      /* @__PURE__ */ n(
+        N,
+        {
+          type: "button",
+          icon: /* @__PURE__ */ n(z, { size: 21 }),
+          size: "sm",
+          intent: "error",
+          srOnlyLabel: "Decrease month number",
+          onClick: () => L(r)
+        }
+      )
+    ] }, `${e.name}-${r}`)) })
+  ] });
+}
+export {
+  b as FileUpload
+};