quirk-ui 0.0.6 → 0.0.7

package/dist/components/Switch/index.js

@@ -1,18 +1,19 @@
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import "react";
+import "../Tabs/index.js";
 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 = {
+import '../../assets/index6.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({
+function $({
   id: r,
   name: a,
   checked: x,
-  disabled: l = !1,
-  label: t,
+  disabled: t = !1,
+  label: l,
   required: p,
   optional: c,
   intent: n = "default",
@@ -30,7 +31,7 @@ function k({
       size: i,
       required: p,
       optional: c,
-      disabled: l,
+      disabled: t,
       tooltip: o,
       showErrorIcon: _,
       children: [
@@ -40,18 +41,18 @@ function k({
             type: "checkbox",
             id: r,
             name: a,
-            disabled: l,
+            disabled: t,
             required: p,
             className: s.input,
             ...f
           }
         ),
         /* @__PURE__ */ e("span", { className: s.slider }),
-        t && /* @__PURE__ */ e("span", { className: s.label, children: t })
+        l && /* @__PURE__ */ e("span", { className: s.label, children: l })
       ]
     }
   ) });
 }
 export {
-  k as Switch
+  $ as Switch
 };

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

@@ -1,6 +1,7 @@
 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 { d as g, i as n, r as a, g as e, s as t, v as i, f as h } from "../../vi.B-PuvDzu-a048kFcX.js";
 import { Table as c } from "./index.js";
+import "../../index-Bgo8MuTU.js";
 const s = [
   { name: "Alice", age: 30 },
   { name: "Bob", age: 33 }

package/dist/components/Table/index.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import '../../assets/index3.css';const m = "_wrapper_g45ha_1", b = "_table_g45ha_5", _ = "_empty_g45ha_24", g = "_clickableRow_g45ha_30", t = {
+import '../../assets/index5.css';const m = "_wrapper_g45ha_1", b = "_table_g45ha_5", _ = "_empty_g45ha_24", g = "_clickableRow_g45ha_30", t = {
   wrapper: m,
   table: b,
   empty: _,

package/dist/components/Tabs/Context.js

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as n } from "react";
+const o = e(null);
+function r() {
+  const t = n(o);
+  if (!t) throw new Error("Tabs.* must be used inside <Tabs>");
+  return t;
+}
+export {
+  o as TabsContext,
+  r as useTabsContext
+};

package/dist/components/Tabs/Tabs.test.js

@@ -0,0 +1,49 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { d as h, i as o, g as t, s as e, f as r, r as c } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { Tabs as a } from "./index.js";
+import "../../index-Bgo8MuTU.js";
+h("Tabs", () => {
+  const i = () => {
+    c(
+      /* @__PURE__ */ l(a, { defaultIndex: 0, align: "center", children: [
+        /* @__PURE__ */ l(a.List, { children: [
+          /* @__PURE__ */ n(a.Trigger, { index: 0, children: "Tab 1" }),
+          /* @__PURE__ */ n(a.Trigger, { index: 1, children: "Tab 2" })
+        ] }),
+        /* @__PURE__ */ n(a.Panel, { index: 0, children: /* @__PURE__ */ n("p", { children: "This is the first panel" }) }),
+        /* @__PURE__ */ n(a.Panel, { index: 1, children: /* @__PURE__ */ n("p", { children: "This is the second panel" }) })
+      ] })
+    );
+  };
+  o("renders tab triggers and default panel", () => {
+    i(), t(e.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument(), t(e.getByRole("tab", { name: /tab 2/i })).toBeInTheDocument(), t(e.getByRole("tabpanel")).toHaveTextContent(
+      "This is the first panel"
+    ), t(
+      e.queryByText("This is the second panel")
+    ).not.toBeInTheDocument();
+  }), o("changes panel when tab is clicked", () => {
+    i(), r.click(e.getByRole("tab", { name: /tab 2/i })), t(e.getByRole("tabpanel")).toHaveTextContent(
+      "This is the second panel"
+    ), t(
+      e.queryByText("This is the first panel")
+    ).not.toBeInTheDocument();
+  }), o("responds to ArrowRight key to switch tabs", () => {
+    i();
+    const s = e.getByRole("tab", { name: /tab 1/i });
+    r.keyDown(s, { key: "ArrowRight" }), t(e.getByRole("tabpanel")).toHaveTextContent(
+      "This is the second panel"
+    );
+  }), o("responds to ArrowLeft key to switch tabs", () => {
+    i();
+    const s = e.getByRole("tab", { name: /tab 1/i });
+    r.keyDown(s, { key: "ArrowRight" }), r.keyDown(e.getByRole("tab", { name: /tab 2/i }), {
+      key: "ArrowLeft"
+    }), t(e.getByRole("tabpanel")).toHaveTextContent(
+      "This is the first panel"
+    );
+  }), o("applies alignment class to list", () => {
+    i();
+    const s = e.getByRole("tablist");
+    t(s.className).toMatch(/center/i);
+  });
+});

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

@@ -0,0 +1,8 @@
+const e = {
+  left: "left",
+  center: "center",
+  right: "right"
+};
+export {
+  e as default
+};

package/dist/components/Tabs/index.js

@@ -0,0 +1,89 @@
+import { jsx as o, jsxs as P } from "react/jsx-runtime";
+import d, { useState as m, useId as T, useMemo as $, useRef as y } from "react";
+import { TabsContext as L, useTabsContext as u } from "./Context.js";
+import '../../assets/index32.css';const x = "_tabs_f06du_1", I = "_tabsList_f06du_7", A = "_left_f06du_12", C = "_center_f06du_16", N = "_right_f06du_20", w = "_tabsTrigger_f06du_24", W = "_active_f06du_38", k = "_tabsPanelWrapper_f06du_43", M = "_tabsPanel_f06du_43", n = {
+  tabs: x,
+  tabsList: I,
+  left: A,
+  center: C,
+  right: N,
+  tabsTrigger: w,
+  active: W,
+  tabsPanelWrapper: k,
+  tabsPanel: M
+}, R = {
+  left: n.left,
+  center: n.center,
+  right: n.right
+};
+function _({
+  children: r,
+  defaultIndex: t = 0,
+  align: a = "left"
+}) {
+  const [s, f] = m(t), i = T(), c = [], l = [], b = $(
+    () => ({ activeIndex: s, setActiveIndex: f, idPrefix: i, align: a }),
+    [s, i, a]
+  );
+  return d.Children.forEach(r, (e) => {
+    var p;
+    (e == null ? void 0 : e.type) === g ? c.push(e) : ((e == null ? void 0 : e.type) === v || ((p = e == null ? void 0 : e.type) == null ? void 0 : p.name) === "Panel") && l.push(e);
+  }), /* @__PURE__ */ o(L.Provider, { value: b, children: /* @__PURE__ */ P("div", { className: n.tabs, children: [
+    c,
+    /* @__PURE__ */ o("div", { className: n.tabsPanelWrapper, children: l })
+  ] }) });
+}
+function g({ children: r }) {
+  const { align: t } = u();
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `${n.tabsList} ${R[t]}`,
+      role: "tablist",
+      "aria-label": "Tabs",
+      children: r
+    }
+  );
+}
+function j({ children: r, index: t }) {
+  const { activeIndex: a, setActiveIndex: s, idPrefix: f } = u(), i = y(null), c = (b) => {
+    b.key === "ArrowRight" ? s((e) => e + 1) : b.key === "ArrowLeft" && s((e) => Math.max(0, e - 1));
+  }, l = a === t;
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      className: `${n.tabsTrigger} ${l ? n.active : ""}`,
+      role: "tab",
+      ref: i,
+      id: `${f}-tab-${t}`,
+      "aria-selected": a === t,
+      tabIndex: a === t ? 0 : -1,
+      onClick: () => s(t),
+      onKeyDown: c,
+      children: r
+    }
+  );
+}
+function v({ children: r, index: t }) {
+  const { activeIndex: a, idPrefix: s } = u();
+  return t !== a ? null : /* @__PURE__ */ o(
+    "div",
+    {
+      className: n.tabsPanel,
+      role: "tabpanel",
+      id: `${s}-panel-${t}`,
+      "aria-labelledby": `${s}-tab-${t}`,
+      "aria-hidden": a !== t,
+      hidden: a !== t,
+      children: r
+    }
+  );
+}
+_.List = g;
+_.Trigger = j;
+_.Panel = v;
+export {
+  _ as Tabs,
+  R as alignClassMap,
+  _ as default
+};

package/dist/components/Text/Text.test.js

@@ -1,6 +1,7 @@
 import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import { d as u, i as r, r as a, s as n, g as e, a as m } from "../../index-BWTAh3RO.js";
+import { d as u, i as r, r as a, s as n, g as e, b as m } from "../../vi.B-PuvDzu-a048kFcX.js";
 import { Text as i } from "./index.js";
+import "../../index-Bgo8MuTU.js";
 u("Text", () => {
   r("renders default paragraph text", () => {
     a(/* @__PURE__ */ s(i, { children: "Hello world" }));

package/dist/components/Text/index.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import o from "react";
-import '../../assets/index2.css';const c = "_text_17qk6_1", _ = "_muted_17qk6_59", d = "_lead_17qk6_63", m = "_small_17qk6_68", a = {
+import '../../assets/index4.css';const c = "_text_17qk6_1", _ = "_muted_17qk6_59", d = "_lead_17qk6_63", m = "_small_17qk6_68", a = {
   text: c,
   default: "_default_17qk6_55",
   muted: _,

package/dist/components/Textarea/Textarea.test.js

@@ -1,6 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import { d as x, i as o, r as n, g as t, s as a, v as i, f as d } from "../../index-BWTAh3RO.js";
+import { d as x, i as o, r as n, g as t, s as a, v as i, f as d } from "../../vi.B-PuvDzu-a048kFcX.js";
 import { Textarea as s } from "./index.js";
+import "../../index-Bgo8MuTU.js";
 x("Textarea", () => {
   o("renders correctly", () => {
     n(/* @__PURE__ */ r(s, { id: "textarea1", name: "testText", label: "Your message" })), t(a.getByRole("textbox")).toBeInTheDocument(), t(a.getByLabelText("Your message")).toBeInTheDocument();

package/dist/components/Textarea/index.js

@@ -1,23 +1,24 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import "react";
+import "../Tabs/index.js";
 import { Label as l } from "../Label/index.js";
-import '../../assets/index.css';const _ = "_wrapper_162xi_1", w = "_textarea_162xi_11", s = {
+import '../../assets/index3.css';const _ = "_wrapper_162xi_1", w = "_textarea_162xi_11", p = {
   wrapper: _,
   textarea: w
 };
-function u({
+function N({
   id: r,
   name: f,
   label: t,
   error: e,
-  disabled: n,
+  disabled: s,
   required: a,
-  className: p,
+  className: n,
   optional: x,
-  tooltip: c,
-  ...m
+  tooltip: m,
+  ...c
 }) {
-  return /* @__PURE__ */ i("div", { className: `${s.wrapper} ${p ?? ""}`, children: [
+  return /* @__PURE__ */ i("div", { className: `${p.wrapper} ${n ?? ""}`, children: [
     t && /* @__PURE__ */ o(
       l,
       {
@@ -25,7 +26,7 @@ function u({
         required: a,
         optional: x,
         intent: e ? "error" : "default",
-        tooltip: c,
+        tooltip: m,
         showErrorIcon: !!e,
         children: t
       }
@@ -34,14 +35,14 @@ function u({
       "textarea",
       {
         id: r,
-        className: s.textarea,
-        disabled: n,
+        className: p.textarea,
+        disabled: s,
         required: a,
-        ...m
+        ...c
       }
     )
   ] });
 }
 export {
-  u as Textarea
+  N as Textarea
 };

package/dist/components/Tooltip/Tooltip.test.js

@@ -0,0 +1,43 @@
+import { jsx as t } from "react/jsx-runtime";
+import { d as a, i, r as s, g as n, s as o, f as c } from "../../vi.B-PuvDzu-a048kFcX.js";
+import { Tooltip as r } from "./index.js";
+import "../../index-Bgo8MuTU.js";
+a("Tooltip", () => {
+  i("renders children correctly", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    ), n(o.getByText("Hover me")).toBeInTheDocument();
+  }), i("does not show the tooltip by default", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    );
+    const e = o.queryByText("Tooltip content");
+    n(e).not.toHaveClass("visible");
+  }), i("shows the tooltip on hover", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    );
+    const e = o.getByText("Hover me");
+    c.mouseEnter(e);
+    const l = o.getByText("Tooltip content");
+    n(l).toHaveClass("visible");
+  }), i("hides the tooltip on mouse leave", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    );
+    const e = o.getByText("Hover me"), l = o.getByText("Tooltip content");
+    c.mouseEnter(e), n(l).toHaveClass("visible"), c.mouseLeave(e), n(l).not.toHaveClass("visible");
+  }), i("applies custom className to the container", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", className: "custom-class", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    );
+    const e = o.getByText("Hover me").parentElement;
+    n(e).toHaveClass("custom-class");
+  }), i("renders the tooltip in the correct position", () => {
+    s(
+      /* @__PURE__ */ t(r, { content: "Tooltip content", position: "top", children: /* @__PURE__ */ t("button", { children: "Hover me" }) })
+    );
+    const e = o.getByText("Tooltip content");
+    n(e).toHaveClass("top");
+  });
+});

package/dist/components/Tooltip/index.js

@@ -0,0 +1,45 @@
+import { jsxs as _, jsx as p } from "react/jsx-runtime";
+import { useState as r } from "react";
+import '../../assets/index2.css';const c = "_tooltipContainer_94xs9_1", a = "_tooltip_94xs9_1", b = "_top_94xs9_19", m = "_bottom_94xs9_26", f = "_left_94xs9_33", x = "_right_94xs9_40", h = "_visible_94xs9_47", t = {
+  tooltipContainer: c,
+  tooltip: a,
+  top: b,
+  bottom: m,
+  left: f,
+  right: x,
+  visible: h
+}, v = {
+  top: t.top,
+  bottom: t.bottom,
+  left: t.left,
+  right: t.right
+};
+function C({
+  content: s,
+  children: i,
+  position: e = "top",
+  className: l
+}) {
+  const [n, o] = r(!1);
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      className: `${t.tooltipContainer} ${l ?? ""}`,
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      children: [
+        i,
+        /* @__PURE__ */ p(
+          "div",
+          {
+            className: `${t.tooltip} ${v[e]} ${n ? t.visible : ""}`,
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  C as Tooltip
+};

package/dist/{index-BtY6pil2.js → index-BXkubhGb.js}

@@ -1,6 +1,6 @@
 import { jsx as _, jsxs as Se, Fragment as ke } from "react/jsx-runtime";
 import * as s from "react";
-import './assets/index27.css';const Pe = "_link_98em4_1", Le = "_muted_98em4_13", $e = "_underline_98em4_17", Ie = "_icon_98em4_21", N = {
+import './assets/index45.css';const Pe = "_link_98em4_1", Le = "_muted_98em4_13", $e = "_underline_98em4_17", Ie = "_icon_98em4_21", N = {
   link: Pe,
   default: "_default_98em4_9",
   muted: Le,