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

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.22",
     "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",