quirk-ui 0.0.64 → 0.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- ._footer_1h6ng_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_1h6ng_8{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:var(--layout-width, 1200px);margin:0 auto}._logo_1h6ng_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_1h6ng_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_1h6ng_22{min-width:140px}._groupTitle_1h6ng_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}._linkList_1h6ng_37{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_1h6ng_37{color:var(--color-text-primary);text-decoration:none;display:block}._link_1h6ng_37:hover{color:var(--color-primary)}._bottom_1h6ng_56{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
1
+ ._footer_gfid4_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_gfid4_8{display:flex;flex-direction:column;gap:var(--spacing-xl)}._logo_gfid4_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_gfid4_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_gfid4_22{min-width:140px}._groupTitle_gfid4_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_gfid4_37{position:relative}._linkList_gfid4_41{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_gfid4_41{color:var(--color-text-primary);text-decoration:none;display:block}._link_gfid4_41:hover{color:var(--color-primary)}._bottom_gfid4_60{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
@@ -1,13 +1,14 @@
1
1
  declare const styles: {
2
- readonly "_bottom_1h6ng_56": string;
3
- readonly "_container_1h6ng_8": string;
4
- readonly "_footer_1h6ng_1": string;
5
- readonly "_groupTitle_1h6ng_32": string;
6
- readonly "_group_1h6ng_22": string;
7
- readonly "_groups_1h6ng_22": string;
8
- readonly "_linkList_1h6ng_37": string;
9
- readonly "_link_1h6ng_37": string;
10
- readonly "_logo_1h6ng_16": string;
2
+ readonly "_bottom_gfid4_60": string;
3
+ readonly "_container_gfid4_8": string;
4
+ readonly "_footer_gfid4_1": string;
5
+ readonly "_groupTitle_gfid4_32": string;
6
+ readonly "_group_gfid4_22": string;
7
+ readonly "_groups_gfid4_22": string;
8
+ readonly "_linkList_gfid4_41": string;
9
+ readonly "_link_gfid4_41": string;
10
+ readonly "_logo_gfid4_16": string;
11
+ readonly "_sublinks_gfid4_37": string;
11
12
  };
12
13
  export = styles;
13
14
 
@@ -1,39 +1,36 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
2
  import { d as r, i as a, r as s, g as e, s as t } from "../../vi.ClIskdbk-CZ8iFAMK.js";
3
- import { Footer as l } from "./index.js";
4
- const c = [
3
+ import { Footer as n } from "./index.js";
4
+ const l = [
5
+ { label: "Home", href: "/" },
5
6
  {
6
- title: "Company",
7
- links: [
8
- { label: "About", href: "/about" },
9
- { label: "Careers", href: "/careers" },
10
- { label: "Press", href: "/press" }
11
- ]
7
+ label: "About",
8
+ sublinks: [{ label: "Leadership", href: "/about/leadership" }]
12
9
  },
13
10
  {
14
- title: "Support",
15
- links: [
16
- { label: "Help Center", href: "/help" },
17
- { label: "Contact", href: "/contact" },
18
- { label: "Privacy Policy", href: "/privacy" }
19
- ]
20
- }
21
- ], n = /* @__PURE__ */ o("div", { "data-testid": "logo", children: "LOGO" }), i = "© 2025 Your Company";
11
+ label: "Services",
12
+ href: "/services"
13
+ },
14
+ { label: "External", href: "https://example.com", isExternal: !0 }
15
+ ], i = /* @__PURE__ */ o("div", { "data-testid": "logo", children: "LOGO" }), c = "© 2025 Your Company";
22
16
  r("Footer", () => {
23
17
  a("renders the footer with all groups and links", () => {
24
18
  s(
25
19
  /* @__PURE__ */ o(
26
- l,
20
+ n,
27
21
  {
28
- items: c,
29
- logo: n,
30
- copyright: i,
22
+ items: l,
23
+ logo: i,
24
+ copyright: c,
31
25
  className: "custom-footer"
32
26
  }
33
27
  )
34
- ), e(t.getByTestId("logo")).toBeInTheDocument(), e(t.getByText("Company")).toBeInTheDocument(), e(t.getByText("Support")).toBeInTheDocument(), e(t.getByText("About")).toHaveAttribute("href", "/about"), e(t.getByText("Careers")).toHaveAttribute("href", "/careers"), e(t.getByText("Press")).toHaveAttribute("href", "/press"), e(t.getByText("Help Center")).toHaveAttribute("href", "/help"), e(t.getByText("Contact")).toHaveAttribute("href", "/contact"), e(t.getByText("Privacy Policy")).toHaveAttribute(
28
+ ), e(t.getByTestId("logo")).toBeInTheDocument(), e(t.getByText("Home")).toBeInTheDocument(), e(t.getByText("About")).toBeInTheDocument(), e(t.getByText("Services")).toBeInTheDocument(), e(t.getByText("External")).toBeInTheDocument(), e(t.getByText("Leadership")).toBeInTheDocument(), e(t.getByText("Home")).toHaveAttribute("href", "/"), e(t.getByText("Services")).toHaveAttribute("href", "/services"), e(t.getByText("External")).toHaveAttribute(
29
+ "href",
30
+ "https://example.com"
31
+ ), e(t.getByText("External")).toHaveAttribute("target", "_blank"), e(t.getByText("Leadership")).toHaveAttribute(
35
32
  "href",
36
- "/privacy"
33
+ "/about/leadership"
37
34
  ), e(t.getByText(/© 2025 Your Company/i)).toBeInTheDocument(), e(t.getByRole("contentinfo")).toHaveClass("custom-footer");
38
35
  });
39
36
  });
@@ -1,44 +1,53 @@
1
- import { jsxs as e, jsx as n } from "react/jsx-runtime";
2
- import '../../assets/index.css';import '../../assets/index35.css';/* empty css */
3
- import { Heading as g } from "../Heading/index.js";
4
- import "react";
5
- import "../../index-CxrBcaoP.js";
6
- import "../Tabs/index.js";
7
- const m = "_footer_1h6ng_1", p = "_container_1h6ng_8", h = "_logo_1h6ng_16", d = "_groups_1h6ng_22", u = "_group_1h6ng_22", f = "_groupTitle_1h6ng_32", N = "_linkList_1h6ng_37", k = "_link_1h6ng_37", b = "_bottom_1h6ng_56", o = {
1
+ import { jsxs as s, jsx as r } from "react/jsx-runtime";
2
+ import '../../assets/index35.css';const m = "_footer_gfid4_1", f = "_container_gfid4_8", b = "_logo_gfid4_16", p = "_groups_gfid4_22", h = "_group_gfid4_22", $ = "_groupTitle_gfid4_32", N = "_sublinks_gfid4_37", v = "_link_gfid4_41", k = "_bottom_gfid4_60", e = {
8
3
  footer: m,
9
- container: p,
10
- logo: h,
11
- groups: d,
12
- group: u,
13
- groupTitle: f,
14
- linkList: N,
15
- link: k,
16
- bottom: b
4
+ container: f,
5
+ logo: b,
6
+ groups: p,
7
+ group: h,
8
+ groupTitle: $,
9
+ sublinks: N,
10
+ link: v,
11
+ bottom: k
17
12
  };
18
- function $({ logo: t, items: i, className: c, copyright: l }) {
19
- return /* @__PURE__ */ e("footer", { className: `${c ?? ""} ${o.footer}`, children: [
20
- /* @__PURE__ */ e("div", { className: o.container, children: [
21
- t && /* @__PURE__ */ e("div", { className: o.logo, children: [
13
+ function T({ logo: n, items: u, className: _, copyright: t }) {
14
+ const l = (d, g = "") => d.map((o) => {
15
+ var c;
16
+ const i = `${g}/${o.label}`, a = (c = o.sublinks) == null ? void 0 : c.length;
17
+ return /* @__PURE__ */ s("div", { className: `${e.group}`, children: [
18
+ /* @__PURE__ */ r(
19
+ "a",
20
+ {
21
+ href: o.href,
22
+ className: `${e.link} ${a ? e.groupTitle : ""}`,
23
+ target: o.isExternal ? "_blank" : "_self",
24
+ rel: o.isExternal ? "noopener noreferrer" : void 0,
25
+ role: "menuitem",
26
+ children: o.label
27
+ }
28
+ ),
29
+ a && /* @__PURE__ */ r(
30
+ "div",
31
+ {
32
+ className: `${e.sublinks}`,
33
+ role: "menu",
34
+ "aria-label": `${o.label} submenu`,
35
+ children: l(o.sublinks, i)
36
+ }
37
+ )
38
+ ] }, i);
39
+ });
40
+ return /* @__PURE__ */ s("footer", { className: `${_ ?? ""} ${e.footer}`, children: [
41
+ /* @__PURE__ */ s("div", { className: e.container, children: [
42
+ n && /* @__PURE__ */ s("div", { className: e.logo, children: [
22
43
  " ",
23
- t
44
+ n
24
45
  ] }),
25
- /* @__PURE__ */ n("div", { className: o.groups, children: i.map((s, a) => /* @__PURE__ */ e("div", { className: o.group, children: [
26
- /* @__PURE__ */ n(g, { level: 6, className: o.groupTitle, children: s.title }),
27
- /* @__PURE__ */ n("ul", { className: o.linkList, children: s.links.map((r, _) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
28
- "a",
29
- {
30
- href: r.href,
31
- target: r.isExternal ? "_blank" : "_self",
32
- rel: r.isExternal ? "noopener noreferrer" : "",
33
- className: o.link,
34
- children: r.label
35
- }
36
- ) }, _)) })
37
- ] }, a)) })
46
+ /* @__PURE__ */ r("nav", { className: `${e.container}`, id: "footer-menu", role: "menubar", children: /* @__PURE__ */ r("div", { className: e.groups, children: l(u) }) })
38
47
  ] }),
39
- l && /* @__PURE__ */ n("div", { className: o.bottom, children: /* @__PURE__ */ n("span", { children: l }) })
48
+ t && /* @__PURE__ */ r("div", { className: e.bottom, children: /* @__PURE__ */ r("span", { children: t }) })
40
49
  ] });
41
50
  }
42
51
  export {
43
- $ as Footer
52
+ T as Footer
44
53
  };
@@ -1,16 +1,14 @@
1
1
  import { default as React } from 'react';
2
2
  type FooterLink = {
3
3
  label: string;
4
- href: string;
4
+ href?: string;
5
+ sublinks?: FooterLink[];
5
6
  isExternal?: boolean;
6
- };
7
- type FooterGroup = {
8
- title: string;
9
- links: FooterLink[];
7
+ onClick?: () => void;
10
8
  };
11
9
  type FooterProps = {
12
10
  logo?: React.ReactNode;
13
- items: FooterGroup[];
11
+ items: FooterLink[];
14
12
  className?: string;
15
13
  copyright?: string;
16
14
  };
package/dist/styles.css CHANGED
@@ -32,7 +32,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
32
32
  ._drawer_55xty_1{position:fixed;background-color:var(--color-background);transition:transform .3s ease-in-out;z-index:1000;width:300px;height:100%;box-shadow:0 0 10px #00000026;padding:var(--spacing-md)}._right_55xty_12{top:0;right:0;transform:translate(100%)}._left_55xty_18{top:0;left:0;transform:translate(-100%)}._top_55xty_24{top:0;left:0;width:100%;height:auto;transform:translateY(-100%)}._bottom_55xty_32{bottom:0;left:0;width:100%;height:auto;transform:translateY(100%)}._open_55xty_40._right_55xty_12,._open_55xty_40._left_55xty_18{transform:translate(0)}._open_55xty_40._top_55xty_24,._open_55xty_40._bottom_55xty_32{transform:translateY(0)}._overlay_55xty_50{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:999}._overlay_55xty_50._show_55xty_60{opacity:1;pointer-events:all}
33
33
  ._tabs_f06du_1{display:flex;flex-direction:column;width:100%}._tabsList_f06du_7{display:flex;border-bottom:2px solid var(--color-border)}._left_f06du_12{justify-content:flex-start}._center_f06du_16{justify-content:center}._right_f06du_20{justify-content:flex-end}._tabsTrigger_f06du_24{padding:var(--spacing-md);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;color:var(--color-muted);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);transition:color .3s ease,border-color .3s ease;position:relative;top:2px}._tabsTrigger_f06du_24._active_f06du_38{border-color:var(--color-primary);color:var(--color-primary)}._tabsPanelWrapper_f06du_43{position:relative;min-height:100px}._tabsPanel_f06du_43{animation:_fadeSlide_f06du_1 .3s ease both;position:absolute;width:100%;top:0;left:0;padding:var(--spacing-md);color:var(--color-text-primary)}@keyframes _fadeSlide_f06du_1{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
34
34
  ._breadcrumbs_1nbgu_1{display:block;font-size:var(--font-size-sm);line-height:1.5}._list_1nbgu_7{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}._item_1nbgu_15{display:flex;align-items:center}._separator_1nbgu_20{margin:0 var(--spacing-xs);color:var(--color-muted)}._link_1nbgu_25{color:var(--color-muted);text-decoration:none;transition:color .3s ease}._link_1nbgu_25:hover{color:var(--color-primary)}._label_1nbgu_35{color:var(--color-muted)}._active_1nbgu_39{font-weight:var(--font-weight-bold);color:var(--color-primary)}
35
- ._footer_1h6ng_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_1h6ng_8{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:var(--layout-width, 1200px);margin:0 auto}._logo_1h6ng_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_1h6ng_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_1h6ng_22{min-width:140px}._groupTitle_1h6ng_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}._linkList_1h6ng_37{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_1h6ng_37{color:var(--color-text-primary);text-decoration:none;display:block}._link_1h6ng_37:hover{color:var(--color-primary)}._bottom_1h6ng_56{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
35
+ ._footer_gfid4_1{background-color:var(--color-background);padding:var(--spacing-xl) var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-primary)}._container_gfid4_8{display:flex;flex-direction:column;gap:var(--spacing-xl)}._logo_gfid4_16{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}._groups_gfid4_22{display:flex;flex-wrap:wrap;gap:var(--spacing-xl)}._group_gfid4_22{min-width:140px}._groupTitle_gfid4_32{font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}._sublinks_gfid4_37{position:relative}._linkList_gfid4_41{display:flex;flex-direction:column;gap:var(--spacing-xs);list-style:none;padding:0;margin:0}._link_gfid4_41{color:var(--color-text-primary);text-decoration:none;display:block}._link_gfid4_41:hover{color:var(--color-primary)}._bottom_gfid4_60{margin-top:var(--spacing-xl);text-align:right;font-size:var(--font-size-sm);color:var(--color-muted)}
36
36
  ._form_s0yvj_1{display:flex;flex-direction:column;gap:var(--spacing-md)}
37
37
  ._wrapper_1fwv5_1{display:flex;flex-direction:column;gap:.25rem}._input_1fwv5_7{padding:var(--spacing-sm) var(--spacing-sm);border:2px solid var(--color-border, #ccc);border-radius:var(--radius-md);font-size:var(--font-size-md);outline:none;background-color:var(--color-background);color:var(--color-text-primary)}._input_1fwv5_7::placeholder{color:var(--color-muted)}._input_1fwv5_7:focus{border-color:var(--color-primary)}._error_1fwv5_25{border-color:var(--color-error, #e00)}._errorMessage_1fwv5_29{border-color:var(--color-error, #e00);font-size:var(--font-size-sm)}
38
38
  ._fieldset_1i2zv_1{border:1px solid var(--color-border, #ccc);padding:var(--spacing-md);border-radius:var(--radius-md);margin:0}._legend_1i2zv_8{font-weight:700;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-xs)}
@@ -27,9 +27,9 @@ declare const styles: {
27
27
  readonly "_borderThin_1242k_86": string;
28
28
  readonly "_bottom-left_1p460_41": string;
29
29
  readonly "_bottom-right_1p460_36": string;
30
- readonly "_bottom_1h6ng_56": string;
31
30
  readonly "_bottom_55xty_32": string;
32
31
  readonly "_bottom_94xs9_26": string;
32
+ readonly "_bottom_gfid4_60": string;
33
33
  readonly "_box_1242k_1": string;
34
34
  readonly "_breadcrumbs_1nbgu_1": string;
35
35
  readonly "_busy_xustn_67": string;
@@ -54,8 +54,8 @@ declare const styles: {
54
54
  readonly "_closed_1ozgm_48": string;
55
55
  readonly "_container_12ooa_25": string;
56
56
  readonly "_container_171d6_1": string;
57
- readonly "_container_1h6ng_8": string;
58
57
  readonly "_container_61msx_1": string;
58
+ readonly "_container_gfid4_8": string;
59
59
  readonly "_content_1tdql_125": string;
60
60
  readonly "_content_7amar_60": string;
61
61
  readonly "_content_cqo68_37": string;
@@ -98,8 +98,8 @@ declare const styles: {
98
98
  readonly "_fill_a1m8u_18": string;
99
99
  readonly "_flex_1242k_52": string;
100
100
  readonly "_fluid_171d6_29": string;
101
- readonly "_footer_1h6ng_1": string;
102
101
  readonly "_footer_7amar_131": string;
102
+ readonly "_footer_gfid4_1": string;
103
103
  readonly "_form_s0yvj_1": string;
104
104
  readonly "_full_171d6_25": string;
105
105
  readonly "_gapLg_134u6_26": string;
@@ -107,9 +107,9 @@ declare const styles: {
107
107
  readonly "_gapSm_134u6_18": string;
108
108
  readonly "_grid_1242k_60": string;
109
109
  readonly "_grid_1pzcn_1": string;
110
- readonly "_groupTitle_1h6ng_32": string;
111
- readonly "_group_1h6ng_22": string;
112
- readonly "_groups_1h6ng_22": string;
110
+ readonly "_groupTitle_gfid4_32": string;
111
+ readonly "_group_gfid4_22": string;
112
+ readonly "_groups_gfid4_22": string;
113
113
  readonly "_h1_nzfad_7": string;
114
114
  readonly "_h2_nzfad_8": string;
115
115
  readonly "_h3_nzfad_9": string;
@@ -176,17 +176,17 @@ declare const styles: {
176
176
  readonly "_lg_xustn_29": string;
177
177
  readonly "_linkInverted_1tdql_85": string;
178
178
  readonly "_linkItem_12ooa_63": string;
179
- readonly "_linkList_1h6ng_37": string;
179
+ readonly "_linkList_gfid4_41": string;
180
180
  readonly "_linkWrapper_12ooa_57": string;
181
181
  readonly "_link_12ooa_57": string;
182
- readonly "_link_1h6ng_37": string;
183
182
  readonly "_link_1nbgu_25": string;
184
183
  readonly "_link_1tdql_76": string;
184
+ readonly "_link_gfid4_41": string;
185
185
  readonly "_listItem_4w9h5_13": string;
186
186
  readonly "_list_1nbgu_7": string;
187
187
  readonly "_list_4w9h5_1": string;
188
188
  readonly "_logo_12ooa_35": string;
189
- readonly "_logo_1h6ng_16": string;
189
+ readonly "_logo_gfid4_16": string;
190
190
  readonly "_marginLg_1242k_35": string;
191
191
  readonly "_marginMd_1242k_31": string;
192
192
  readonly "_marginNone_1242k_23": string;
@@ -281,6 +281,7 @@ declare const styles: {
281
281
  readonly "_sticky_12ooa_19": string;
282
282
  readonly "_sublinkToggle_12ooa_71": string;
283
283
  readonly "_sublinks_12ooa_102": string;
284
+ readonly "_sublinks_gfid4_37": string;
284
285
  readonly "_success_18z15_50": string;
285
286
  readonly "_success_1txoc_32": string;
286
287
  readonly "_success_a1m8u_33": string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quirk-ui",
3
3
  "private": false,
4
- "version": "0.0.64",
4
+ "version": "0.0.65",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {