@mezo-org/mezo-clay 0.1.0-dev.9 → 0.2.0-dev.1

package/dist/themes/provider.d.ts

@@ -1,8 +1,15 @@
 import { ReactNode } from 'react';
+import { StandardEngine } from 'styletron-standard';
 import { Theme } from 'baseui';
-type ClayProviderProps = {
+export type ClayProviderProps = {
     children: ReactNode;
     theme: Theme;
+    engine?: StandardEngine;
 };
-export default function ClayProvider({ children, theme }: ClayProviderProps): import("react/jsx-runtime").JSX.Element;
-export {};
+/**
+ * ClayProvider - Wraps BaseUI and Styletron providers
+ *
+ * @param engine - Optional. Only required for SSR setups (Next.js with _document.tsx)
+ *                 For client-only React apps, this can be omitted
+ */
+export default function ClayProvider({ children, theme, engine, }: ClayProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/themes/provider.js

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as l } from "react";
+import { Provider as s } from "styletron-react";
+import { Server as d, Client as o } from "styletron-engine-monolithic";
+import { BaseProvider as m } from "baseui";
+import { filterWarnings as u, filterErrors as a } from "../utils/console.js";
+console.warn = u;
+console.error = a;
+let r = null;
+function p() {
+  if (!r && typeof window < "u") {
+    const e = document.getElementsByClassName(
+      "_styletron_hydrate_"
+    );
+    e.length > 0 ? r = new o({
+      hydrate: e
+    }) : r = new o();
+  }
+  return r;
+}
+function C({
+  children: e,
+  theme: i,
+  engine: t
+}) {
+  const f = l(() => t || (typeof window < "u" ? p() : new d()), [t]);
+  return /* @__PURE__ */ n(s, { value: f, children: /* @__PURE__ */ n(m, { theme: i, children: e }) });
+}
+export {
+  C as default
+};

package/dist/themes/typography.js

@@ -0,0 +1,184 @@
+const i = {
+  primaryFontFamily: "RiformaLLWeb-Regular, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  secondaryFontFamily: "RiformaLLWeb-Medium, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  monoPrimaryFontFamily: "RiformaMonoLLWeb-Regular, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif",
+  monoSecondaryFontFamily: "RiformaMonoLLWeb-Bold, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif"
+}, o = {
+  fontFamily: i.primaryFontFamily,
+  fontWeight: 400
+}, e = {
+  fontFamily: i.secondaryFontFamily,
+  fontWeight: 500
+}, n = {
+  fontFamily: i.monoPrimaryFontFamily,
+  fontWeight: 400
+}, a = {
+  fontFamily: i.monoSecondaryFontFamily,
+  fontWeight: 700
+}, t = {
+  ...e,
+  fontSize: "96px",
+  lineHeight: "112px"
+}, l = {
+  ...e,
+  fontSize: "52px",
+  lineHeight: "64px"
+}, r = {
+  ...e,
+  fontSize: "44px",
+  lineHeight: "52px"
+}, p = {
+  ...e,
+  fontSize: "36px",
+  lineHeight: "44px"
+}, g = {
+  ...e,
+  fontSize: "40px",
+  lineHeight: "52px"
+}, m = {
+  ...e,
+  fontSize: "36px",
+  lineHeight: "44px"
+}, s = {
+  ...e,
+  fontSize: "32px",
+  lineHeight: "40px"
+}, c = {
+  ...e,
+  fontSize: "28px",
+  lineHeight: "36px"
+}, y = {
+  ...e,
+  fontSize: "24px",
+  lineHeight: "32px"
+}, H = {
+  ...e,
+  fontSize: "20px",
+  lineHeight: "28px"
+}, x = {
+  ...e,
+  fontSize: "18px",
+  lineHeight: "24px"
+}, S = {
+  ...e,
+  fontSize: "16px",
+  lineHeight: "20px"
+}, f = {
+  ...e,
+  fontSize: "14px",
+  lineHeight: "16px"
+}, h = {
+  ...e,
+  fontSize: "12px",
+  lineHeight: "16px"
+}, d = {
+  ...o,
+  fontSize: "18px",
+  lineHeight: "28px"
+}, M = {
+  ...o,
+  fontSize: "16px",
+  lineHeight: "24px"
+}, L = {
+  ...o,
+  fontSize: "14px",
+  lineHeight: "20px"
+}, F = {
+  ...o,
+  fontSize: "12px",
+  lineHeight: "20px"
+}, u = {
+  DisplayLarge: t,
+  DisplayMedium: l,
+  DisplaySmall: r,
+  DisplayXSmall: p,
+  HeadingXXLarge: g,
+  HeadingXLarge: m,
+  HeadingLarge: s,
+  HeadingMedium: c,
+  HeadingSmall: y,
+  HeadingXSmall: H,
+  LabelLarge: x,
+  LabelMedium: S,
+  LabelSmall: f,
+  LabelXSmall: h,
+  ParagraphLarge: d,
+  ParagraphMedium: M,
+  ParagraphSmall: L,
+  ParagraphXSmall: F,
+  MonoDisplayLarge: {
+    ...t,
+    ...n
+  },
+  MonoDisplayMedium: {
+    ...l,
+    ...n
+  },
+  MonoDisplaySmall: {
+    ...r,
+    ...n
+  },
+  MonoDisplayXSmall: {
+    ...p,
+    ...n
+  },
+  MonoHeadingXXLarge: {
+    ...g,
+    ...a
+  },
+  MonoHeadingXLarge: {
+    ...m,
+    ...a
+  },
+  MonoHeadingLarge: {
+    ...s,
+    ...a
+  },
+  MonoHeadingMedium: {
+    ...c,
+    ...a
+  },
+  MonoHeadingSmall: {
+    ...y,
+    ...a
+  },
+  MonoHeadingXSmall: {
+    ...H,
+    ...a
+  },
+  MonoLabelLarge: {
+    ...x,
+    ...n
+  },
+  MonoLabelMedium: {
+    ...S,
+    ...n
+  },
+  MonoLabelSmall: {
+    ...f,
+    ...n
+  },
+  MonoLabelXSmall: {
+    ...h,
+    ...n
+  },
+  MonoParagraphLarge: {
+    ...d,
+    ...n
+  },
+  MonoParagraphMedium: {
+    ...M,
+    ...n
+  },
+  MonoParagraphSmall: {
+    ...L,
+    ...n
+  },
+  MonoParagraphXSmall: {
+    ...F,
+    ...n
+  }
+};
+export {
+  u as default
+};

package/dist/utils/console.d.ts

@@ -0,0 +1,2 @@
+export declare function filterWarnings(...args: any[]): void;
+export declare function filterErrors(...args: any[]): void;

package/dist/utils/console.js

@@ -0,0 +1,23 @@
+const i = console.warn, t = console.error, s = [
+  "baseui:Overrides Props as a function will be removed in the next major version.",
+  "`preventOverflow` modifier is required by `hide` modifier in order to work, be sure to include it before `hide`!",
+  "Blocked aria-hidden on an element because its descendant retained focus.",
+  "endEnhancerDescription will not be rendered if endEnhancer is not a string",
+  "Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead."
+];
+function r(...e) {
+  const o = e.map((n) => String(n)).join(" ");
+  return s.some(
+    (n) => o.includes(n)
+  );
+}
+function a(...e) {
+  r(...e) || i(...e);
+}
+function c(...e) {
+  r(...e) || t(...e);
+}
+export {
+  c as filterErrors,
+  a as filterWarnings
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,9 @@
-import { ContextType } from 'react';
+import { ContextType, ReactElement, ReactNode } from 'react';
+export { mergeOverrides } from 'baseui';
 export declare function hexToRgba(hex: any, alpha?: any): string;
 export declare function toTitleCase(str?: string): string;
 export declare function checkForContextError(context: ContextType<any>, componentName: string): void;
+export declare function getComponentName(component: ReactElement): string;
+export declare function getInitials(name?: string): string;
+export type MapChildrenCallback = (child: ReactElement, index: number) => ReactNode | null;
+export declare function mapChildren(children: ReactNode, callback: MapChildrenCallback): any[];

package/dist/utils/index.js

@@ -0,0 +1,45 @@
+import { Children as l } from "react";
+import { mergeOverrides as w } from "baseui";
+function g(e, r) {
+  const t = /^#?([a-f\d])([a-f\d])([a-f\d])$/i, n = (e || "").replace(
+    t,
+    (s, u, c, p) => u + u + c + c + p + p
+  ), o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
+  if (!o)
+    return null;
+  const [d, i, a, f] = o.map((s) => parseInt(s, 16));
+  return r ? `rgba(${i}, ${a}, ${f}, ${r})` : `rgb(${i}, ${a}, ${f})`;
+}
+function $(e = "") {
+  return e.replace(/\b\w/g, (r) => r.toUpperCase());
+}
+function h(e, r) {
+  if (!e)
+    throw new Error(
+      `${r}Context used outside of ${r}Provider component`
+    );
+}
+function C(e) {
+  if (typeof e == "string")
+    return null;
+  const { type: r } = e;
+  return typeof r == "string" ? r : r.displayName || r.name || "";
+}
+function x(e = "") {
+  return e.match(/(^\S\S?|\s\S)?/g).map((r) => r.trim()).join("").match(/(^\S|\S$)?/g).join("").toLocaleUpperCase();
+}
+function S(e, r) {
+  const t = [];
+  return l.forEach(e, (n, o) => {
+    n || t.push(null), t.push(r(n, o));
+  }), t;
+}
+export {
+  h as checkForContextError,
+  C as getComponentName,
+  x as getInitials,
+  g as hexToRgba,
+  S as mapChildren,
+  w as mergeOverrides,
+  $ as toTitleCase
+};

package/package.json

@@ -1,49 +1,32 @@
 {
   "name": "@mezo-org/mezo-clay",
-  "version": "0.1.0-dev.9",
+  "version": "0.2.0-dev.1",
   "repository": "git@github.com:mezo-org/clay.git",
-  "packageManager": "pnpm@9.15.0",
-  "main": "./dist/mezo-clay.umd.js",
-  "module": "./dist/mezo-clay.es.js",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "./dist/assets/**"
+  ],
   "files": [
     "dist"
   ],
   "prettier": "@thesis/prettier-config",
-  "scripts": {
-    "dev": "pnpm run storybook",
-    "build": "pnpm run build-storybook",
-    "build:lib": "tsc && vite build",
-    "lint:config": "prettier -c '**/*.@(json|yaml|toml)'",
-    "lint:config:fix": "prettier -w '**/*.@(json|yaml|toml)'",
-    "lint:eslint": "eslint . --ext ts,tsx,mts",
-    "lint:eslint:fix": "eslint . --fix",
-    "format": "pnpm run lint:eslint && pnpm run lint:config",
-    "format:fix": "pnpm run lint:eslint:fix && pnpm run lint:config:fix",
-    "test": "vitest run",
-    "test-watch": "vitest",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "dependencies": {
+    "use-fit-text": "^2.4.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/experimental-addon-test": "^8.4.7",
     "@storybook/preview-api": "^8.4.7",
     "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@storybook/theming": "^8.4.7",
-    "@vitejs/plugin-react": "^4.3.4",
-    "baseui": "0.0.0-next-18f01efe0",
-    "storybook-dark-mode": "^4.0.2",
-    "styletron-react": "^6.1.1",
-    "vite": "^6.0.3",
-    "vite-plugin-dts": "^4.3.0",
-    "vitest": "^2.1.8"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
     "@thesis-co/eslint-config": "^0.6.1",
     "@thesis/prettier-config": "github:thesis/prettier-config",
     "@types/node": "^22.10.2",
@@ -51,20 +34,285 @@
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitest/browser": "^2.1.8",
+    "baseui": "0.0.0-next-18f01efe0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-baseui": "^13.0.0",
     "eslint-plugin-storybook": "^0.11.1",
+    "glob": "^11.0.3",
     "playwright": "^1.49.1",
     "prettier": "^3.4.2",
     "storybook": "^8.4.7",
+    "storybook-dark-mode": "^4.0.2",
+    "styletron-react": "^6.1.1",
+    "styletron-standard": "^3.1.0",
+    "tsx": "^4.20.6",
     "typescript": "5.5.4",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vitest": "^2.1.8",
     "wrangler": "^3.96.0"
   },
   "peerDependencies": {
+    "baseui": "0.0.0-next-18f01efe0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styletron-engine-monolithic": "^1.0.0"
+    "styletron-engine-monolithic": "^1.0.0",
+    "styletron-react": "^6.1.1"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ssr": {
+      "types": "./dist/ssr/index.d.ts",
+      "default": "./dist/ssr/index.js"
+    },
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "default": "./dist/styles/index.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "default": "./dist/themes/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/accordion/index.d.ts",
+      "default": "./dist/components/accordion/index.js"
+    },
+    "./avatar": {
+      "types": "./dist/components/avatar/index.d.ts",
+      "default": "./dist/components/avatar/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/badge/index.d.ts",
+      "default": "./dist/components/badge/index.js"
+    },
+    "./banner": {
+      "types": "./dist/components/banner/index.d.ts",
+      "default": "./dist/components/banner/index.js"
+    },
+    "./block": {
+      "types": "./dist/components/block/index.d.ts",
+      "default": "./dist/components/block/index.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/components/breadcrumbs/index.d.ts",
+      "default": "./dist/components/breadcrumbs/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "default": "./dist/components/button/index.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/button-group/index.d.ts",
+      "default": "./dist/components/button-group/index.js"
+    },
+    "./button-icon": {
+      "types": "./dist/components/button-icon/index.d.ts",
+      "default": "./dist/components/button-icon/index.js"
+    },
+    "./callout-card": {
+      "types": "./dist/components/callout-card/index.d.ts",
+      "default": "./dist/components/callout-card/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "default": "./dist/components/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "default": "./dist/components/checkbox/index.js"
+    },
+    "./content-stepper": {
+      "types": "./dist/components/content-stepper/index.d.ts",
+      "default": "./dist/components/content-stepper/index.js"
+    },
+    "./divider": {
+      "types": "./dist/components/divider/index.d.ts",
+      "default": "./dist/components/divider/index.js"
+    },
+    "./flex-grid": {
+      "types": "./dist/components/flex-grid/index.d.ts",
+      "default": "./dist/components/flex-grid/index.js"
+    },
+    "./form-control": {
+      "types": "./dist/components/form-control/index.d.ts",
+      "default": "./dist/components/form-control/index.js"
+    },
+    "./icon": {
+      "types": "./dist/components/icon/index.d.ts",
+      "default": "./dist/components/icon/index.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "default": "./dist/components/icons/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "default": "./dist/components/input/index.js"
+    },
+    "./input-group": {
+      "types": "./dist/components/input-group/index.d.ts",
+      "default": "./dist/components/input-group/index.js"
+    },
+    "./layer": {
+      "types": "./dist/components/layer/index.d.ts",
+      "default": "./dist/components/layer/index.js"
+    },
+    "./layout-grid": {
+      "types": "./dist/components/layout-grid/index.d.ts",
+      "default": "./dist/components/layout-grid/index.js"
+    },
+    "./link": {
+      "types": "./dist/components/link/index.d.ts",
+      "default": "./dist/components/link/index.js"
+    },
+    "./list": {
+      "types": "./dist/components/list/index.d.ts",
+      "default": "./dist/components/list/index.js"
+    },
+    "./menu": {
+      "types": "./dist/components/menu/index.d.ts",
+      "default": "./dist/components/menu/index.js"
+    },
+    "./message-card": {
+      "types": "./dist/components/message-card/index.d.ts",
+      "default": "./dist/components/message-card/index.js"
+    },
+    "./mobile-header": {
+      "types": "./dist/components/mobile-header/index.d.ts",
+      "default": "./dist/components/mobile-header/index.js"
+    },
+    "./modal": {
+      "types": "./dist/components/modal/index.d.ts",
+      "default": "./dist/components/modal/index.js"
+    },
+    "./page-control": {
+      "types": "./dist/components/page-control/index.d.ts",
+      "default": "./dist/components/page-control/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "default": "./dist/components/pagination/index.js"
+    },
+    "./phone-input": {
+      "types": "./dist/components/phone-input/index.d.ts",
+      "default": "./dist/components/phone-input/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "default": "./dist/components/popover/index.js"
+    },
+    "./progress-bar": {
+      "types": "./dist/components/progress-bar/index.d.ts",
+      "default": "./dist/components/progress-bar/index.js"
+    },
+    "./progress-steps": {
+      "types": "./dist/components/progress-steps/index.d.ts",
+      "default": "./dist/components/progress-steps/index.js"
+    },
+    "./radio": {
+      "types": "./dist/components/radio/index.d.ts",
+      "default": "./dist/components/radio/index.js"
+    },
+    "./section-heading": {
+      "types": "./dist/components/section-heading/index.d.ts",
+      "default": "./dist/components/section-heading/index.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/components/segmented-control/index.d.ts",
+      "default": "./dist/components/segmented-control/index.js"
+    },
+    "./segmented-progress-bar": {
+      "types": "./dist/components/segmented-progress-bar/index.d.ts",
+      "default": "./dist/components/segmented-progress-bar/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "default": "./dist/components/select/index.js"
+    },
+    "./side-navigation": {
+      "types": "./dist/components/side-navigation/index.d.ts",
+      "default": "./dist/components/side-navigation/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/skeleton/index.d.ts",
+      "default": "./dist/components/skeleton/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/slider/index.d.ts",
+      "default": "./dist/components/slider/index.js"
+    },
+    "./snackbar": {
+      "types": "./dist/components/snackbar/index.d.ts",
+      "default": "./dist/components/snackbar/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/spinner/index.d.ts",
+      "default": "./dist/components/spinner/index.js"
+    },
+    "./stepper": {
+      "types": "./dist/components/stepper/index.d.ts",
+      "default": "./dist/components/stepper/index.js"
+    },
+    "./table": {
+      "types": "./dist/components/table/index.d.ts",
+      "default": "./dist/components/table/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "default": "./dist/components/tabs/index.js"
+    },
+    "./tag": {
+      "types": "./dist/components/tag/index.d.ts",
+      "default": "./dist/components/tag/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea/index.d.ts",
+      "default": "./dist/components/textarea/index.js"
+    },
+    "./tile": {
+      "types": "./dist/components/tile/index.d.ts",
+      "default": "./dist/components/tile/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/tooltip/index.d.ts",
+      "default": "./dist/components/tooltip/index.js"
+    },
+    "./top-navigation": {
+      "types": "./dist/components/top-navigation/index.d.ts",
+      "default": "./dist/components/top-navigation/index.js"
+    },
+    "./typography": {
+      "types": "./dist/components/typography/index.d.ts",
+      "default": "./dist/components/typography/index.js"
+    },
+    "./fonts.css": "./dist/assets/fonts/riforma/font-face.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm run storybook",
+    "build": "pnpm run build-storybook",
+    "build:lib": "tsc && vite build",
+    "generate-exports": "tsx scripts/generate-exports.ts",
+    "lint:config": "prettier -c '**/*.@(json|yaml|toml)'",
+    "lint:config:fix": "prettier -w '**/*.@(json|yaml|toml)'",
+    "lint:eslint": "eslint . --ext ts,tsx,mts",
+    "lint:eslint:fix": "eslint . --fix",
+    "format": "pnpm run lint:eslint && pnpm run lint:config",
+    "format:fix": "pnpm run lint:eslint:fix && pnpm run lint:config:fix",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}

package/dist/components/button-group/constants.d.ts

@@ -1,5 +0,0 @@
-export { BUTTON_SHAPE as SHAPE } from '../button';
-export declare const SIZE: {
-    small: "compact";
-    medium: "default";
-};

package/dist/components/button-icon/overrides.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-import { ButtonIconProps } from './types';
-export declare function getIconSize(size: ButtonIconProps["size"]): "16px" | "24px" | "20px";
-export declare function formatButtonLabel(label: ReactNode): string | number | boolean | import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode>;
-export declare function getButtonIconOverrides({ overrides, shape }: ButtonIconProps): import('baseui/helpers/overrides').Overrides<any>;