@veevarts/design-system 2.1.0-beta.2 → 2.1.0-beta.20

package/dist/providers/HeroUIProvider.d.ts

@@ -1,6 +1,25 @@
 import { ReactNode } from 'react';
 interface HeroUIProviderProps {
     children: ReactNode;
+    /**
+     * App-wide accessible name for the corner close button of every DS `Modal` and `Drawer`, e.g. `"Fermer"`.
+     * HeroUI hard-codes `"Close"`, so a localized app sets this once instead of on each overlay.
+     *
+     * A `closeLabel` on a `Modal` / `Drawer` wins over it. A nested provider without one inherits the
+     * outer provider's. With none anywhere, HeroUI's own button is rendered untouched.
+     */
+    closeLabel?: string;
+    /**
+     * BCP 47 locale for the React Aria strings HeroUI renders, e.g. `"fr-FR"`: the hidden "Dismiss"
+     * buttons of overlays, date and number formatting. Without it HeroUI uses `"en-US"`.
+     */
+    locale?: string;
+    /**
+     * How framer-motion animations (overlays, toasts, tabs) treat the OS "reduce motion" setting.
+     * Defaults to `"user"`: follow the OS. HeroUI's own default is `"never"`, which animates regardless.
+     * `"always"` drops them everywhere, e.g. for an app-level reduce-motion preference.
+     */
+    reducedMotion?: 'user' | 'always' | 'never';
 }
-export declare function HeroUIProvider({ children }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeroUIProvider({ children, closeLabel, locale, reducedMotion }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/ToastProvider.d.ts

@@ -0,0 +1,16 @@
+import { ToastProvider as BaseToastProvider } from '@heroui/react';
+import { ComponentProps, JSX } from 'react';
+export type ToastProviderProps = ComponentProps<typeof BaseToastProvider>;
+/**
+ * Drop-in for HeroUI's `ToastProvider` (same props, same `addToast` queue).
+ *
+ * - Titles wrap instead of truncating. A `toastProps.classNames.title` you pass
+ *   is merged after the default, so it can still restyle the title.
+ * - Animation is off when the OS or the POS asks for reduced motion, unless
+ *   `disableAnimation` is passed.
+ *
+ * HeroUI merges an `addToast({ classNames })` over the provider's `classNames`
+ * as a whole object, so a per-toast `classNames` without a `title` key brings
+ * the truncation back for that toast.
+ */
+export declare function ToastProvider({ toastProps, disableAnimation, ...props }: ToastProviderProps): JSX.Element;

package/dist/providers/close-label-context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The app-wide default accessible name of an overlay's corner close button.
+ *
+ * HeroUI renders that button with the literal `aria-label="Close"`, so a French
+ * or Spanish screen announces English. `HeroUIProvider` carries a translated
+ * label here and the DS `Modal` / `Drawer` read it.
+ *
+ * A leaf file on purpose: `providers/` and `components/` never import each
+ * other. Both import this context, and neither imports the other's barrel.
+ * Split from `HeroUIProvider.tsx` so that file exports a component only (fast
+ * refresh), as `density.ts` does for the density context.
+ *
+ * `undefined` means "no app-wide label": the overlay keeps HeroUI's own button
+ * and its `"Close"` name untouched.
+ */
+export declare const CloseLabelContext: import('react').Context<string | undefined>;
+/** The label of the nearest `HeroUIProvider` that set `closeLabel`; `undefined` outside one. */
+export declare function useCloseLabel(): string | undefined;

package/dist/providers/density.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The density context and the hooks that read it. Split from
+ * `DensityProvider.tsx` so that file exports a component only (fast refresh).
+ */
+export type Density = 'default' | 'touch';
+/** The HeroUI control sizes a density maps onto. */
+export type ControlSize = 'sm' | 'md' | 'lg';
+export declare const DensityContext: import('react').Context<Density>;
+/** The density of the nearest `DensityProvider`; `'default'` outside one. */
+export declare function useDensity(): Density;
+/**
+ * The HeroUI size for a control whose everyday size is `base`.
+ *
+ * A component passes the size it has always had and gets `lg` back only under
+ * `touch`, so a page that never mounts the provider is untouched.
+ */
+export declare function useControlSize<TBase extends ControlSize>(base: TBase): TBase | 'lg';

package/dist/providers/index.d.ts

@@ -1 +1,7 @@
 export { HeroUIProvider } from './HeroUIProvider';
+export { ToastProvider } from './ToastProvider';
+export type { ToastProviderProps } from './ToastProvider';
+export { DensityProvider } from './DensityProvider';
+export type { DensityProviderProps } from './DensityProvider';
+export { useDensity, useControlSize } from './density';
+export type { Density, ControlSize } from './density';

package/dist/tailwind/index.cjs

@@ -274,6 +274,17 @@ var posSurfaceTokens = {
   line: "#E7E7E9",
   /** `--line2`: the lighter hairline under list rows and above the role bar. */
   "line-2": "#F1F1F3",
+  hair: "#F0F0F1",
+  page: "#FBFBFB",
+  field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",
@@ -288,6 +299,10 @@ var posSurfaceTokens = {
   /** `--ib` / `--if` */
   "info-fill": "#EAF1FC",
   info: "#1D4FA8",
+  "violet-fill": "#F1ECFB",
+  violet: "#6D28D9",
+  "neutral-fill": "#F4F4F5",
+  neutral: "#52525B",
   /** `.btn-dstr` — the fill behind an irreversible confirmation. */
   destructive: "#A32D2D"
 };
@@ -314,7 +329,16 @@ var tailwindTheme = {
   spacing,
   fontSize: typography.fontSize,
   fontWeight: typography.fontWeight,
-  lineHeight: typography.lineHeight
+  lineHeight: typography.lineHeight,
+  keyframes: {
+    "record-shimmer": {
+      "0%": { backgroundPosition: "-25rem 0" },
+      "100%": { backgroundPosition: "25rem 0" }
+    }
+  },
+  animation: {
+    "record-shimmer": "record-shimmer 1.3s linear infinite"
+  }
 };
 function deepMerge(target, source) {
   if (!source || typeof source !== "object") {

package/dist/tailwind/index.d.ts

@@ -120,6 +120,19 @@ export declare const tailwindTheme: {
         readonly normal: "1.5";
         readonly relaxed: "1.75";
     };
+    keyframes: {
+        'record-shimmer': {
+            '0%': {
+                backgroundPosition: string;
+            };
+            '100%': {
+                backgroundPosition: string;
+            };
+        };
+    };
+    animation: {
+        'record-shimmer': string;
+    };
 };
 /**
  * Deep merge utility for objects
@@ -322,6 +335,19 @@ export declare const veevartPreset: {
                 readonly normal: "1.5";
                 readonly relaxed: "1.75";
             };
+            keyframes: {
+                'record-shimmer': {
+                    '0%': {
+                        backgroundPosition: string;
+                    };
+                    '100%': {
+                        backgroundPosition: string;
+                    };
+                };
+            };
+            animation: {
+                'record-shimmer': string;
+            };
         };
     };
     darkMode: "class";
@@ -554,5 +580,18 @@ export declare const tokens: {
             readonly normal: "1.5";
             readonly relaxed: "1.75";
         };
+        keyframes: {
+            'record-shimmer': {
+                '0%': {
+                    backgroundPosition: string;
+                };
+                '100%': {
+                    backgroundPosition: string;
+                };
+            };
+        };
+        animation: {
+            'record-shimmer': string;
+        };
     };
 };

package/dist/tailwind/index.mjs

@@ -235,6 +235,17 @@ var posSurfaceTokens = {
   line: "#E7E7E9",
   /** `--line2`: the lighter hairline under list rows and above the role bar. */
   "line-2": "#F1F1F3",
+  hair: "#F0F0F1",
+  page: "#FBFBFB",
+  field: "#E5E5E5",
+  /** A hairline under the pointer (`default-300`). */
+  "line-strong": "#D4D4D8",
+  /** `--ink`: body text (`default-900`). */
+  ink: "#18181B",
+  /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+  muted: "#71717A",
+  /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+  faint: "#A1A1AA",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",
@@ -249,6 +260,10 @@ var posSurfaceTokens = {
   /** `--ib` / `--if` */
   "info-fill": "#EAF1FC",
   info: "#1D4FA8",
+  "violet-fill": "#F1ECFB",
+  violet: "#6D28D9",
+  "neutral-fill": "#F4F4F5",
+  neutral: "#52525B",
   /** `.btn-dstr` — the fill behind an irreversible confirmation. */
   destructive: "#A32D2D"
 };
@@ -275,7 +290,16 @@ var tailwindTheme = {
   spacing,
   fontSize: typography.fontSize,
   fontWeight: typography.fontWeight,
-  lineHeight: typography.lineHeight
+  lineHeight: typography.lineHeight,
+  keyframes: {
+    "record-shimmer": {
+      "0%": { backgroundPosition: "-25rem 0" },
+      "100%": { backgroundPosition: "25rem 0" }
+    }
+  },
+  animation: {
+    "record-shimmer": "record-shimmer 1.3s linear infinite"
+  }
 };
 function deepMerge(target, source) {
   if (!source || typeof source !== "object") {

package/dist/test/ReducedMotion.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function ReducedMotion({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/test/RootFontSize.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function RootFontSize({ size, children }: {
+    size: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/test/container-width.d.ts

@@ -0,0 +1,14 @@
+export declare class FakeResizeObserver {
+    static width: number;
+    static instances: FakeResizeObserver[];
+    disconnected: boolean;
+    private readonly callback;
+    private readonly targets;
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element): void;
+    unobserve(): void;
+    disconnect(): void;
+    emit(width: number): void;
+}
+export declare function stubContainerWidth(width: number): void;
+export declare function resizeContainers(width: number): void;

package/dist/test/contrast.d.ts

@@ -0,0 +1 @@
+export declare function contrastRatio(a: string, b: string): number;

package/dist/test/px-class-names.d.ts

@@ -0,0 +1 @@
+export declare const pxClasses: (root: Element) => string[];

package/dist/test/px-classes.d.ts

@@ -0,0 +1,3 @@
+import { pxClasses } from './px-class-names';
+export { pxClasses };
+export declare const expectNoPxClasses: (root: Element) => void;

package/dist/test/root-font-size.d.ts

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+export declare const LARGE_TEXT_ROOT = "137.5%";
+export declare const LARGE_TEXT_SCALE = 1.375;
+export declare const withRootFontSize: (size: string) => (Story: ComponentType) => import('react').FunctionComponentElement<{
+    size: string;
+    children?: import('react').ReactNode;
+}>;
+export declare const fontSizePx: (element: Element) => number;

package/dist/tokens/pos-surface.d.ts

@@ -4,10 +4,14 @@
  * The refund wizard is a pixel-signed-off surface: every fill, hairline and
  * status tone in it comes from the Jul-28 POS mockup, and "close enough from
  * the nearest scale step" is not the contract. Most of that mockup already
- * agrees with what we ship — its `--tc` is `primary-500` to the byte and its
- * `--ink`/`--muted`/`--muted2`/`--sec` are HeroUI's `default-900`/`500`/`600`/
- * `100`. Those are consumed through the semantic classes and are deliberately
- * NOT repeated here.
+ * agrees with what we ship — its `--tc` is `primary-500` to the byte, so the
+ * brand is consumed as `primary` and is deliberately NOT repeated here.
+ *
+ * Its text tones (`--ink`, `--muted`, the placeholder and hover greys) equal
+ * HeroUI's stock `default-900`/`500`/`400`/`300`, but they are kept below as
+ * DS tokens: POS and Quick surfaces style text with `pos-*`, never with the
+ * stock HeroUI semantic scale (decision of 2026-10-21). `--muted2`/`--sec`
+ * were already here as `neutral` / `neutral-fill`.
  *
  * What IS here is the remainder: the two hairlines and the warm status
  * fill/text pairs, none of which have an equivalent in either scale. They are
@@ -25,6 +29,17 @@ export declare const posSurfaceTokens: {
     readonly line: "#E7E7E9";
     /** `--line2`: the lighter hairline under list rows and above the role bar. */
     readonly 'line-2': "#F1F1F3";
+    readonly hair: "#F0F0F1";
+    readonly page: "#FBFBFB";
+    readonly field: "#E5E5E5";
+    /** A hairline under the pointer (`default-300`). */
+    readonly 'line-strong': "#D4D4D8";
+    /** `--ink`: body text (`default-900`). */
+    readonly ink: "#18181B";
+    /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
+    readonly muted: "#71717A";
+    /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
+    readonly faint: "#A1A1AA";
     /** `--okb` / `--okf` */
     readonly 'ok-fill': "#EAF3DE";
     readonly ok: "#3B6D11";
@@ -39,6 +54,10 @@ export declare const posSurfaceTokens: {
     /** `--ib` / `--if` */
     readonly 'info-fill': "#EAF1FC";
     readonly info: "#1D4FA8";
+    readonly 'violet-fill': "#F1ECFB";
+    readonly violet: "#6D28D9";
+    readonly 'neutral-fill': "#F4F4F5";
+    readonly neutral: "#52525B";
     /** `.btn-dstr` — the fill behind an irreversible confirmation. */
     readonly destructive: "#A32D2D";
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.1.0-beta.2",
+    "version": "2.1.0-beta.20",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -104,7 +104,7 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "eslint-plugin-storybook": "^10.0.8",
-        "framer-motion": "^11.15.0",
+        "framer-motion": "^12.43.0",
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
         "lucide-react": "^0.562.0",