quirk-ui 0.0.4 → 0.0.5

package/dist/assets/index.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "_label_bm5f3_1": string;
+};
+export = styles;
+

package/dist/assets/index2.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "_input_zg0ml_1": string;
+};
+export = styles;
+

package/dist/assets/index3.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5,h6{margin:0;padding:0;line-height:1.2}._heading_12n5i_13+*{margin-top:.75rem}
+._h1_4y3bu_1,._h2_4y3bu_2,._h3_4y3bu_3,._h4_4y3bu_4,._h5_4y3bu_5,._h6_4y3bu_6{margin:0;padding:0;line-height:1.2}._h1_4y3bu_1+*,._h2_4y3bu_2+*,._h3_4y3bu_3+*,._h4_4y3bu_4+*,._h5_4y3bu_5+*,._h6_4y3bu_6+*{margin-top:.75rem}._h1_4y3bu_1[class*=bg],._h2_4y3bu_2[class*=bg],._h3_4y3bu_3[class*=bg],._h4_4y3bu_4[class*=bg],._h5_4y3bu_5[class*=bg],._h6_4y3bu_6[class*=bg]{padding:.5rem .75rem;border-radius:5px}._h1_4y3bu_1{font-size:2.25rem;font-weight:700}._h2_4y3bu_2{font-size:1.875rem;font-weight:600}._h3_4y3bu_3{font-size:1.5rem;font-weight:600}._h4_4y3bu_4{font-size:1.25rem;font-weight:500}._h5_4y3bu_5{font-size:1rem;font-weight:500}._h6_4y3bu_6{font-size:.875rem;font-weight:500}._heading_4y3bu_52+*{margin-top:.75rem}

package/dist/assets/index3.css.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "_h1_4y3bu_1": string;
+  readonly "_h2_4y3bu_2": string;
+  readonly "_h3_4y3bu_3": string;
+  readonly "_h4_4y3bu_4": string;
+  readonly "_h5_4y3bu_5": string;
+  readonly "_h6_4y3bu_6": string;
+  readonly "_heading_4y3bu_52": string;
+};
+export = styles;
+

package/dist/assets/index4.css

@@ -1 +1 @@
-._button_1l043_1{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}._button_1l043_1:hover{border-color:#646cff}._button_1l043_1:focus,._button_1l043_1:focus-visible{outline:4px auto -webkit-focus-ring-color}
+._button_f8285_1{border-radius:8px;border:1px solid transparent;padding:1rem 1.25rem;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}._button_f8285_1:hover{border-color:#646cff}._button_f8285_1:focus,._button_f8285_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._button_f8285_1._primary_f8285_21{background-color:#646cff}._button_f8285_1._secondary_f8285_25{background-color:purple}._button_f8285_1._ghost_f8285_29{background-color:transparent;border-color:#646cff}

package/dist/assets/index4.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "_button_f8285_1": string;
+  readonly "_ghost_f8285_29": string;
+  readonly "_primary_f8285_21": string;
+  readonly "_secondary_f8285_25": string;
+};
+export = styles;
+

package/dist/components/Button/Button.test.js

@@ -0,0 +1,41 @@
+import { jsx as s } from "react/jsx-runtime";
+import { v as i, d as l, i as o, r as n, s as a, g as e, f as r } from "../../index-CGClT4BC.js";
+import { Button as c } from "./index.js";
+i.mock("./styles.module.css", () => ({
+  default: {
+    button: "button",
+    primary: "primary",
+    secondary: "secondary",
+    ghost: "ghost"
+  }
+}));
+l("Button", () => {
+  o('renders with default "primary" variant', () => {
+    n(/* @__PURE__ */ s(c, { children: "Click me" }));
+    const t = a.getByRole("button", { name: /click me/i });
+    e(t).toBeInTheDocument(), e(t.className).toContain("button"), e(t.className).toContain("primary");
+  }), o("applies custom className", () => {
+    n(/* @__PURE__ */ s(c, { className: "my-custom-class", children: "Custom Class" }));
+    const t = a.getByRole("button", { name: /custom class/i });
+    e(t.className).toContain("my-custom-class");
+  }), o("uses the correct variant class", () => {
+    n(/* @__PURE__ */ s(c, { variant: "ghost", children: "Ghost" }));
+    const t = a.getByRole("button", { name: /ghost/i });
+    e(t.className).toContain("ghost");
+  }), o("calls the onClick handler when clicked", () => {
+    const t = i.fn();
+    n(/* @__PURE__ */ s(c, { onClick: t, children: "Click me" })), r.click(a.getByRole("button")), e(t).toHaveBeenCalledTimes(1);
+  }), o("forwards all other props", () => {
+    n(
+      /* @__PURE__ */ s(c, { type: "submit", disabled: !0, children: "Submit" })
+    );
+    const t = a.getByRole("button", { name: /submit/i });
+    e(t).toHaveAttribute("type", "submit"), e(t).toBeDisabled();
+  }), o("renders children properly", () => {
+    n(
+      /* @__PURE__ */ s(c, { variant: "secondary", children: /* @__PURE__ */ s("span", { children: "Child Text" }) })
+    );
+    const t = a.getByText("Child Text");
+    e(t).toBeInTheDocument();
+  });
+});

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/index4.css';const c = "_button_f8285_1", y = "_primary_f8285_21", _ = "_secondary_f8285_25", e = "_ghost_f8285_29", t = {
+  button: c,
+  primary: y,
+  secondary: _,
+  ghost: e
+}, i = {
+  primary: t.primary,
+  secondary: t.secondary,
+  ghost: t.ghost
+};
+function p({
+  variant: o = "primary",
+  className: r,
+  children: s,
   ...n
 }) {
-  return /* @__PURE__ */ u("button", { className: `${t ?? ""} ${r}`, ...n, children: o });
+  return /* @__PURE__ */ a("button", { className: `${r ?? ""} ${t.button} ${i[o]}`, ...n, children: s });
 }
 export {
-  b as Button
+  p as Button
 };

package/dist/components/Heading/Heading.test.js

@@ -0,0 +1,36 @@
+import { jsx as l } from "react/jsx-runtime";
+import { v as h, d as i, i as t, r as a, s as d, g as s } from "../../index-CGClT4BC.js";
+import { Heading as n } from "./index.js";
+h.mock("./styles.module.css", () => ({
+  default: {
+    h1: "style-h1",
+    h2: "style-h2",
+    h3: "style-h3",
+    h4: "style-h4",
+    h5: "style-h5",
+    h6: "style-h6"
+  }
+}));
+i("Heading", () => {
+  t("renders with default level (h1)", () => {
+    a(/* @__PURE__ */ l(n, { children: "Test Heading" }));
+    const e = d.getByText("Test Heading");
+    s(e.tagName).toBe("H1");
+  }), t("renders the correct heading level", () => {
+    a(/* @__PURE__ */ l(n, { level: 3, children: "Heading Level 3" }));
+    const e = d.getByText("Heading Level 3");
+    s(e.tagName).toBe("H3");
+  }), t("applies className and style from level", () => {
+    a(
+      /* @__PURE__ */ l(n, { level: 2, className: "custom-class", children: "Styled Heading" })
+    );
+    const e = d.getByText("Styled Heading");
+    s(e).toHaveClass("custom-class"), s(e).toHaveClass("style-h2");
+  }), t("renders children properly", () => {
+    a(
+      /* @__PURE__ */ l(n, { level: 4, children: /* @__PURE__ */ l("span", { children: "Child Text" }) })
+    );
+    const e = d.getByText("Child Text");
+    s(e).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,11 @@
+const h = {
+  h1: "style-h1",
+  h2: "style-h2",
+  h3: "style-h3",
+  h4: "style-h4",
+  h5: "style-h5",
+  h6: "style-h6"
+};
+export {
+  h as default
+};

package/dist/components/Heading/index.js

@@ -1,12 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../../assets/index3.css';const o = "_heading_12n5i_13";
-function r({
-  className: n,
+import o from "react";
+import '../../assets/index3.css';const e = "_h1_4y3bu_1", a = "_h2_4y3bu_2", u = "_h3_4y3bu_3", y = "_h4_4y3bu_4", b = "_h5_4y3bu_5", i = "_h6_4y3bu_6", r = "_heading_4y3bu_52", d = {
+  h1: e,
+  h2: a,
+  h3: u,
+  h4: y,
+  h5: b,
+  h6: i,
+  heading: r
+};
+function l({
+  level: h = 1,
+  className: _,
   children: t,
-  ...e
+  ...n
 }) {
-  return /* @__PURE__ */ i("button", { className: `${n ?? ""} ${o}`, ...e, children: t });
+  const s = `h${h}`, c = d[`h${h}`] || "";
+  return o.createElement(
+    s,
+    { className: `${_ ?? ""} ${c}`, ...n },
+    t
+  );
 }
 export {
-  r as Heading
+  l as Heading
 };