npm - @mond-design-system/react - Versions diffs - 1.0.0 → 2.0.0 - Mend

@mond-design-system/react 1.0.0 → 2.0.0

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.

Files changed (11) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Aaron Blum
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,100 @@
+# @mond-design-system/react
+Brand-agnostic React components. Self-styled, WCAG 2.2 AA, no theme object and
+no product vocabulary.
+Every component reads CSS custom properties from
+[`@mond-design-system/tokens`](https://www.npmjs.com/package/@mond-design-system/tokens),
+so restyling the whole library is one CSS file in your app.
+```sh
+pnpm add @mond-design-system/react @mond-design-system/tokens
+```
+React 19 or newer, as a peer dependency.
+## Setup
+Load the tokens, then the components, then your brand. The order is the
+mechanism: your brand file re-declares the same properties and wins by coming
+last.
+```ts
+import "@mond-design-system/tokens/styles.css";
+import "@mond-design-system/react/styles.css";
+import "./tokens/brand-acme.css";
+```
+```tsx
+import { Button, Card, Field, Input, Stack } from "@mond-design-system/react";
+export function SignIn() {
+  return (
+    <Card>
+      <Stack gap="loose">
+        <Field label="Email">
+          <Input type="email" />
+        </Field>
+        <Button variant="primary">Continue</Button>
+      </Stack>
+    </Card>
+  );
+}
+```
+Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
+## Components
+**Typography** — `Text`, `Heading`, `Link`, `Icon` (with `IconProvider`)
+**Actions** — `Button`, `CountButton`
+**Forms** — `Field`, `Input`, `PasswordInput`, `Textarea`, `Select`, `Checkbox`,
+`Radio`, `Switch`, `SegmentedControl`, `SearchField`, `DateTimePicker`
+**Content** — `Card`, `Avatar`, `AvatarGroup`, `Badge`, `Tag`, `Chip`,
+`ChipGroup`, `ChipBar`, `Divider`, `ListGroup`, `ListItem`, `EmptyState`
+**Feedback** — `Spinner`, `Skeleton`, `ProgressBar`, `ToastProvider` / `useToast`
+**Layout** — `Stack`, `Inline`, `Container`, `Screen`, `ScreenContent`
+**Navigation** — `Tabs`, `TabList`, `Tab`, `TabPanel`, `AppBar`, `TabBar`
+**Overlays** — `Modal`, `Sheet`, `ConfirmDialog`
+**Hooks** — `useOverlay`, `usePresence`, `useRovingGroup`, `useFieldContext`,
+`cx`
+## Overlays and browser history
+`Sheet` and `Modal` claim a history entry through `useOverlay`, so the back
+gesture on a phone dismisses the overlay instead of leaving the screen behind
+it. The library owns _when_, not _how_ — it has no router, and reaching for
+`history.pushState` behind one corrupts the router's own index.
+Supply the mechanism through `OverlayHistoryContext`. It is optional and null by
+default, which is the right value in Storybook and unit tests.
+```tsx
+import { OverlayHistoryContext } from "@mond-design-system/react";
+```
+## Icons
+`Icon` renders whatever you give it. `IconProvider` sets the renderer once, so
+components that draw an icon internally use your icon set rather than one the
+library chose for you.
+## Accessibility
+Focus is one treatment, declared once in the tokens package; components do not
+restyle it. Disabled states are a color change, not opacity — compositing an
+opacity over an arbitrary brand surface has no predictable contrast. Motion
+collapses under `prefers-reduced-motion`, including the literal-duration
+animations.
+## License
+MIT

package/dist/index.cjs CHANGED Viewed

@@ -130,8 +130,8 @@ function Icon({ name, size = "md", label, className, ...rest }) {
 }
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped
-var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
-var SPINNER_PX = { sm: 16, md: 18, lg: 20 };
+var Button_module_default = { "button": "mds-Button__button", "size-sm": "mds-Button__size-sm", "size-md": "mds-Button__size-md", "size-lg": "mds-Button__size-lg", "slot": "mds-Button__slot", "variant-primary": "mds-Button__variant-primary", "variant-secondary": "mds-Button__variant-secondary", "variant-ghost": "mds-Button__variant-ghost", "variant-highlight": "mds-Button__variant-highlight", "variant-danger": "mds-Button__variant-danger", "variant-warning": "mds-Button__variant-warning", "fullWidth": "mds-Button__fullWidth", "icon-only": "mds-Button__icon-only" };
+var ICON_PX = { sm: 16, md: 20, lg: 24 };
 function Button({
   variant = "primary",
   size = "md",
@@ -166,9 +166,9 @@ function Button({
       ...own,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX[size], label: "", "aria-hidden": "true" }) : iconLeft,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_PX[size], label: "", "aria-hidden": "true" }) }) : iconLeft ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconLeft }) : null,
         children,
-        !loading && iconRight
+        !loading && iconRight ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module_default.slot, children: iconRight }) : null
       ]
     }
   );
@@ -279,7 +279,7 @@ function Badge({ tone = "neutral", className, ...rest }) {
 }
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Chip/Chip.module.css?mds-scoped
-var Chip_module_default = { "chip": "mds-Chip__chip", "variant-soft": "mds-Chip__variant-soft", "variant-outline": "mds-Chip__variant-outline", "variant-highlight": "mds-Chip__variant-highlight", "selected": "mds-Chip__selected", "interactive": "mds-Chip__interactive", "disabled": "mds-Chip__disabled" };
+var Chip_module_default = { "chip": "mds-Chip__chip", "icon": "mds-Chip__icon", "variant-soft": "mds-Chip__variant-soft", "variant-outline": "mds-Chip__variant-outline", "variant-highlight": "mds-Chip__variant-highlight", "selected": "mds-Chip__selected", "interactive": "mds-Chip__interactive", "disabled": "mds-Chip__disabled" };
 function Chip({
   children,
   variant = "soft",
@@ -303,7 +303,7 @@ function Chip({
     ...rest
   };
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon,
+    icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Chip_module_default.icon, children: icon }) : null,
     children
   ] });
   return interactive ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -347,7 +347,7 @@ function ChipBar({
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped
 var CountButton_module_default = { "button": "mds-CountButton__button", "tone-accent": "mds-CountButton__tone-accent", "tone-danger": "mds-CountButton__tone-danger", "glyph": "mds-CountButton__glyph" };
-var SPINNER_PX2 = 20;
+var SPINNER_PX = 20;
 function CountButton({
   icon,
   label,
@@ -371,7 +371,7 @@ function CountButton({
       className: cx(CountButton_module_default.button, active && CountButton_module_default[`tone-${tone}`], className),
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX2, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: icon }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: SPINNER_PX, label: "", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: CountButton_module_default.glyph, children: icon }),
         children != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : null
       ]
     }