@vkzstudio/muza-ui 1.0.46 → 1.0.48

package/dist/components/UniversalFooter/UniversalFooter.js

@@ -0,0 +1,401 @@
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import * as i from "react";
+import { TypographyLink as w } from "../TypographyLink/TypographyLink.js";
+import { cn as s } from "../../utils/cn.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { Typography as v } from "../Typography/Typography.js";
+const N = [
+  "mx-auto w-full",
+  "max-md:max-w-[calc(100%-2*var(--spacing-layout-p-standard))]",
+  "max-lg:max-w-[calc(100%-2*var(--spacing-layout-p-standard))]",
+  "max-xl:max-w-[58.5rem]",
+  "max-w-[75rem]",
+  "2xl:max-w-[93.75rem]"
+], l = (e, t, r) => {
+  const a = i.useContext(e);
+  if (a === null)
+    throw new Error(
+      `\`${t}\` must be used within \`${r}\`.`
+    );
+  return a;
+}, p = i.createContext(null), d = i.createContext(null), g = i.createContext(null), F = i.createContext(null), U = i.createContext(null), x = i.createContext(null), y = i.createContext(null), C = i.forwardRef(
+  ({ className: e, contentClassName: t, children: r, ...a }, m) => /* @__PURE__ */ o(p.Provider, { value: !0, children: /* @__PURE__ */ o(
+    "footer",
+    {
+      ref: m,
+      "data-slot": "universal-footer",
+      className: s(
+        "w-full bg-surface-dark-def pt-5xl pb-3xl text-text-invert-def",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ o(
+        n,
+        {
+          "data-slot": "universal-footer-inner",
+          direction: "column",
+          align: "stretch",
+          className: s(
+            "gap-layout-gap-medium",
+            N,
+            t
+          ),
+          children: r
+        }
+      )
+    }
+  ) })
+);
+C.displayName = "UniversalFooter";
+const S = ({
+  className: e,
+  ...t
+}) => (l(p, "UniversalFooterBody", "UniversalFooter"), /* @__PURE__ */ o(d.Provider, { value: !0, children: /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-body",
+    direction: "column",
+    align: "stretch",
+    className: s("w-full gap-layout-gap-small", e),
+    ...t
+  }
+) }));
+S.displayName = "UniversalFooterBody";
+const B = ({
+  className: e,
+  ...t
+}) => (l(
+  d,
+  "UniversalFooterTop",
+  "UniversalFooterBody"
+), /* @__PURE__ */ o(g.Provider, { value: !0, children: /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-top",
+    direction: "column",
+    align: "start",
+    gap: "3xl",
+    className: s(
+      "w-full md:flex-row md:items-center md:justify-between md:gap-2xl",
+      e
+    ),
+    ...t
+  }
+) }));
+B.displayName = "UniversalFooterTop";
+const L = ({
+  className: e,
+  ...t
+}) => (l(
+  g,
+  "UniversalFooterLogo",
+  "UniversalFooterTop"
+), /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-logo",
+    align: "center",
+    className: s("shrink-0", e),
+    ...t
+  }
+));
+L.displayName = "UniversalFooterLogo";
+const k = ({
+  className: e,
+  ...t
+}) => (l(
+  g,
+  "UniversalFooterSocialList",
+  "UniversalFooterTop"
+), /* @__PURE__ */ o(F.Provider, { value: !0, children: /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-social-list",
+    component: "ul",
+    align: "center",
+    gap: "sm",
+    className: s("shrink-0", e),
+    ...t
+  }
+) }));
+k.displayName = "UniversalFooterSocialList";
+const T = i.forwardRef(({ className: e, children: t, ...r }, a) => (l(
+  F,
+  "UniversalFooterSocialLink",
+  "UniversalFooterSocialList"
+), /* @__PURE__ */ o("li", { "data-slot": "universal-footer-social-item", className: "flex", children: /* @__PURE__ */ o(
+  "a",
+  {
+    ref: a,
+    "data-slot": "universal-footer-social-link",
+    className: s(
+      "flex size-comp-button-h-sm items-center justify-center rounded-comp-button-radius",
+      "bg-comp-button-primary-bg-def text-comp-button-primary-text-def transition-colors",
+      "hover:bg-comp-button-primary-bg-hover hover:text-comp-button-primary-text-hover",
+      "focus-visible-default focus-visible:bg-comp-button-primary-bg-focused focus-visible:text-comp-button-primary-text-focused",
+      "active:bg-comp-button-primary-bg-pressed active:text-comp-button-primary-text-pressed",
+      "[&>svg]:size-icon-small",
+      e
+    ),
+    ...r,
+    children: t
+  }
+) })));
+T.displayName = "UniversalFooterSocialLink";
+const P = ({
+  className: e,
+  ...t
+}) => (l(
+  d,
+  "UniversalFooterSeparator",
+  "UniversalFooterBody"
+), /* @__PURE__ */ o(
+  "hr",
+  {
+    "data-slot": "universal-footer-separator",
+    className: s(
+      "w-full border-0 border-t border-surface-base-secondary/16",
+      e
+    ),
+    ...t
+  }
+));
+P.displayName = "UniversalFooterSeparator";
+const j = ({
+  className: e,
+  ...t
+}) => (l(
+  d,
+  "UniversalFooterSections",
+  "UniversalFooterBody"
+), /* @__PURE__ */ o(U.Provider, { value: !0, children: /* @__PURE__ */ o(
+  "div",
+  {
+    "data-slot": "universal-footer-sections",
+    className: s(
+      "flex w-full flex-col gap-4xl",
+      "md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-4xl md:gap-y-2xl md:[&>:first-child]:row-span-2",
+      "lg:flex lg:flex-row lg:items-start lg:justify-between lg:gap-x-2xl lg:gap-y-0",
+      e
+    ),
+    ...t
+  }
+) }));
+j.displayName = "UniversalFooterSections";
+const z = (e, t) => {
+  const r = i.Children.toArray(e);
+  if (r.length === 0) return [];
+  const a = Math.max(1, Math.ceil(r.length / t)), m = [];
+  for (let c = 0; c < t; c += 1) {
+    const u = r.slice(c * a, (c + 1) * a);
+    u.length > 0 && m.push(u);
+  }
+  return m;
+}, R = ({
+  className: e,
+  heading: t,
+  columns: r = 1,
+  children: a,
+  ...m
+}) => {
+  l(
+    U,
+    "UniversalFooterSection",
+    "UniversalFooterSections"
+  );
+  const c = r > 1, u = c ? z(a, r) : null;
+  return /* @__PURE__ */ o(x.Provider, { value: !0, children: /* @__PURE__ */ f(
+    n,
+    {
+      "data-slot": "universal-footer-section",
+      direction: "column",
+      align: "start",
+      gap: "xl",
+      className: e,
+      ...m,
+      children: [
+        /* @__PURE__ */ o(
+          v,
+          {
+            component: "span",
+            variant: "title",
+            size: "base",
+            weight: "medium",
+            fixY: !0,
+            className: "text-text-invert-def",
+            children: t
+          }
+        ),
+        c ? /* @__PURE__ */ o(
+          n,
+          {
+            direction: "column",
+            gap: "xl",
+            className: "lg:flex-row lg:items-start lg:gap-7xl",
+            children: u.map((h, b) => /* @__PURE__ */ o(
+              n,
+              {
+                "data-slot": "universal-footer-section-column",
+                direction: "column",
+                align: "start",
+                gap: "xl",
+                children: h
+              },
+              b
+            ))
+          }
+        ) : /* @__PURE__ */ o(n, { direction: "column", align: "start", gap: "xl", children: a })
+      ]
+    }
+  ) });
+};
+R.displayName = "UniversalFooterSection";
+const A = i.forwardRef(({ variant: e = "invertSecondary", underline: t = !1, ...r }, a) => (l(p, "UniversalFooterLink", "UniversalFooter"), /* @__PURE__ */ o(
+  w,
+  {
+    ref: a,
+    "data-slot": "universal-footer-link",
+    variant: e,
+    underline: t,
+    ...r
+  }
+)));
+A.displayName = "UniversalFooterLink";
+const G = ({
+  className: e,
+  ...t
+}) => (l(
+  x,
+  "UniversalFooterContactList",
+  "UniversalFooterSection"
+), /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-contact-list",
+    direction: "column",
+    align: "start",
+    gap: "md",
+    className: e,
+    ...t
+  }
+));
+G.displayName = "UniversalFooterContactList";
+const Y = ({
+  className: e,
+  ...t
+}) => (l(
+  x,
+  "UniversalFooterAppBadges",
+  "UniversalFooterSection"
+), /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-app-badges",
+    align: "start",
+    gap: "md",
+    className: e,
+    ...t
+  }
+));
+Y.displayName = "UniversalFooterAppBadges";
+const M = ({
+  className: e,
+  ...t
+}) => (l(
+  d,
+  "UniversalFooterBottom",
+  "UniversalFooterBody"
+), /* @__PURE__ */ o(y.Provider, { value: !0, children: /* @__PURE__ */ o(
+  n,
+  {
+    "data-slot": "universal-footer-bottom",
+    direction: "column",
+    align: "start",
+    gap: "4xl",
+    className: s(
+      "w-full md:flex-row md:items-start md:justify-between md:gap-2xl",
+      e
+    ),
+    ...t
+  }
+) }));
+M.displayName = "UniversalFooterBottom";
+const $ = ({
+  className: e,
+  label: t,
+  align: r = "start",
+  labelSize: a = "sm",
+  children: m,
+  ...c
+}) => (l(
+  y,
+  "UniversalFooterBottomGroup",
+  "UniversalFooterBottom"
+), /* @__PURE__ */ f(
+  n,
+  {
+    "data-slot": "universal-footer-bottom-group",
+    direction: "column",
+    align: "start",
+    gap: "sm",
+    className: s(r === "end" && "md:items-end", e),
+    ...c,
+    children: [
+      t != null && /* @__PURE__ */ o(
+        v,
+        {
+          component: "span",
+          variant: "body",
+          size: a,
+          weight: "regular",
+          fixY: !0,
+          className: "text-text-invert-def opacity-70",
+          children: t
+        }
+      ),
+      m
+    ]
+  }
+));
+$.displayName = "UniversalFooterBottomGroup";
+const E = ({
+  className: e,
+  ...t
+}) => (l(
+  p,
+  "UniversalFooterCopyright",
+  "UniversalFooter"
+), /* @__PURE__ */ o(
+  v,
+  {
+    component: "p",
+    variant: "body",
+    size: "sm",
+    weight: "regular",
+    fixY: !0,
+    "data-slot": "universal-footer-copyright",
+    className: s(
+      "w-full text-center text-text-invert-def opacity-40",
+      e
+    ),
+    ...t
+  }
+));
+E.displayName = "UniversalFooterCopyright";
+export {
+  C as UniversalFooter,
+  Y as UniversalFooterAppBadges,
+  S as UniversalFooterBody,
+  M as UniversalFooterBottom,
+  $ as UniversalFooterBottomGroup,
+  G as UniversalFooterContactList,
+  E as UniversalFooterCopyright,
+  A as UniversalFooterLink,
+  L as UniversalFooterLogo,
+  R as UniversalFooterSection,
+  j as UniversalFooterSections,
+  P as UniversalFooterSeparator,
+  T as UniversalFooterSocialLink,
+  k as UniversalFooterSocialList,
+  B as UniversalFooterTop
+};

package/dist/components/UniversalFooter/UniversalFooter.stories.d.ts

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { UniversalFooter } from './UniversalFooter';
+declare const meta: Meta<typeof UniversalFooter>;
+export default meta;
+type Story = StoryObj<typeof UniversalFooter>;
+/**
+ * Full Market-style footer matching the design-system reference. Resize the
+ * viewport to see the responsive layout shift between desktop (`lg`), tablet
+ * (`md` 2-col grid with the first section spanning both rows), and mobile
+ * (stacked single column).
+ */
+export declare const Market: Story;
+/**
+ * Minimal composition for surfaces with fewer footer slots — a single link
+ * column, contact info, and a copyright line. Useful for help / docs sites
+ * where the link inventory is small.
+ */
+export declare const HelpStyle: Story;
+//# sourceMappingURL=UniversalFooter.stories.d.ts.map

package/dist/components/UniversalFooter/UniversalFooter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/UniversalFooter/UniversalFooter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,eAAe,EAehB,MAAM,mBAAmB,CAAA;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAqDtC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AA4B7C;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,KAqHpB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KA2DvB,CAAA"}

package/dist/components/UniversalFooter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UniversalFooter';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UniversalFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UniversalFooter/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/components/index.d.ts

@@ -7,10 +7,12 @@ export * from './Button';
 export * from './ButtonArrow';
 export * from './Calendar';
 export * from './Card';
+export * from './CardCheckboxAmount';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
 export * from './DatePicker';
+export * from './DatePickerButton';
 export * from './Dialog';
 export * from './DropdownMenu';
 export * from './EdgeButton';
@@ -53,6 +55,8 @@ export * from './ToggleCheckButton';
 export * from './ToggleGroup';
 export * from './Tooltip';
 export * from './Typography';
+export * from './TypographyLink';
+export * from './UniversalFooter';
 export * from './DataTable';
 export * from './ExpandableTable';
 export * from './ResponsiveLayoutTable';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA;AAG/B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,wBAAwB,CAAA;AACtC,cAAc,UAAU,CAAA;AACxB,cAAc,oBAAoB,CAAA;AAClC,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,YAAY,CAAA"}

package/dist/globals.css

@@ -7,7 +7,6 @@
 @import './styles/white-label.css';
 @import './styles/token-colors.css';
 @import './styles/token-sizes.css';
-@import './styles/legacy-tokens.css';
 @import './styles/typography.css';
 @import './styles/animations.css';
 @import './styles/utilities.css';