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

package/dist/patterns/FeedbackState/FeedbackState.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { EmptyStateProps, ErrorStateProps, FeedbackStateProps, LoadingStateProps, SuccessStateProps } from './type';
-export declare function FeedbackState({ variant, surface, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
+export declare function FeedbackState(props: FeedbackStateProps): JSX.Element;
 export declare namespace FeedbackState {
     var displayName: string;
 }

package/dist/patterns/FeedbackState/type.d.ts

@@ -20,6 +20,8 @@ export interface FeedbackStateClassNames {
     spinner?: string;
     title?: string;
     description?: string;
+    /** The `ErrorState` reference code line. */
+    referenceCode?: string;
     actions?: string;
 }
 export interface FeedbackStateProps {
@@ -50,6 +52,14 @@ export interface FeedbackStateProps {
     'data-testid'?: string;
 }
 export type EmptyStateProps = Omit<FeedbackStateProps, 'variant'>;
-export type ErrorStateProps = Omit<FeedbackStateProps, 'variant'>;
+export interface ErrorStateProps extends Omit<FeedbackStateProps, 'variant'> {
+    /**
+     * Support code for this failure, e.g. `"FR-QE-900"`, shown on a small line under the description
+     * so a user can quote it from a screenshot. Nothing is rendered without it.
+     */
+    referenceCode?: string;
+    /** Text before the code. Defaults to `"Reference code:"`; the caller owns i18n. */
+    referenceCodeLabel?: string;
+}
 export type LoadingStateProps = Omit<FeedbackStateProps, 'variant'>;
 export type SuccessStateProps = Omit<FeedbackStateProps, 'variant'>;

package/dist/patterns/Notice/Notice.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { NoticeProps } from './type';
+/**
+ * An inline message with a severity: the DS answer to HeroUI's
+ * `Alert variant="flat" isClosable={false}` repeated per call, and to the
+ * hand-rolled red lines and boxes of the POS.
+ *
+ * Danger and warning are `role="alert"` (assertive), info and success
+ * `role="status"` (polite). Copy comes in as props; the caller owns i18n.
+ * The only motion is the dismiss button's press feedback, which is dropped
+ * when the OS or the POS asks for reduced motion.
+ */
+export declare function Notice({ tone, variant, title, description, actions, onDismiss, dismissLabel, role, className, 'data-testid': dataTestId, }: NoticeProps): JSX.Element;
+export declare namespace Notice {
+    var displayName: string;
+}

package/dist/patterns/Notice/index.d.ts

@@ -0,0 +1,2 @@
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeTone, NoticeVariant } from './type';

package/dist/patterns/Notice/styles.d.ts

@@ -0,0 +1,35 @@
+import { NoticeTone, NoticeVariant } from './type';
+/**
+ * One glyph per tone, on every variant. Solar `bold` so the shape reads at
+ * callout size; the danger tone had four different glyphs across the apps
+ * before this (HeroUI's own, two Solar outlines and a gravity-ui fill).
+ */
+export declare const NOTICE_ICON: Record<NoticeTone, string>;
+export declare const NOTICE_DISMISS_ICON = "solar:close-circle-linear";
+/**
+ * Every size is rem (or em off a rem font size), so the POS "Text size"
+ * setting, which scales the root font size, scales the notice with it. The
+ * values are the design hub's px at a 16px root.
+ */
+export declare const noticeClass: Record<NoticeVariant, {
+    root: string;
+    iconWrapper: string;
+    iconSize: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+    dismiss: string;
+}>;
+/**
+ * Tints. All `pos-*` tokens, the palette the Quick and POS surfaces style
+ * with; each text tone clears 4.5:1 on its fill (`pos-surface.test.ts`). The
+ * banner discs for danger and warning are the mockup's own tints; info and
+ * success have none in the mockup, so their disc is the tone at 15%.
+ */
+export declare const noticeTone: Record<NoticeTone, {
+    callout: string;
+    banner: string;
+    disc: string;
+    title: string;
+}>;

package/dist/patterns/Notice/type.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/** Severity. Picks the tint, the glyph and the default live-region role. */
+export type NoticeTone = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Which of the design hub's two notice shapes to draw.
+ *
+ * `callout` is the inline note of the Quick Donation and Quick Membership
+ * mockups (`.callout-info`, `.callout-warn`): a small tinted block, the glyph
+ * on the first line, the title run in bold ahead of the text.
+ *
+ * `banner` is the POS `.banner`: the glyph in a filled disc, the title in the
+ * tone on its own line, muted body copy and an action row under it.
+ */
+export type NoticeVariant = 'callout' | 'banner';
+export interface NoticeProps {
+    /** Severity. Defaults to `info`. */
+    tone?: NoticeTone;
+    /** `callout` (default) or `banner`. */
+    variant?: NoticeVariant;
+    /** Short lead: run in bold before the description on a callout, its own line on a banner. */
+    title?: ReactNode;
+    /** The message. Phrasing content (text, links, `strong`): it shares a line with a callout's title. */
+    description?: ReactNode;
+    /** Buttons or links, rendered under the text. */
+    actions?: ReactNode;
+    /** Shows a dismiss button that calls this. The notice does not hide itself: the caller stops rendering it. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button. Defaults to `"Dismiss"`. */
+    dismissLabel?: string;
+    /**
+     * Live-region role. Defaults to `alert` for `danger` and `warning`, `status`
+     * for `info` and `success`; the matching `aria-live` follows it.
+     */
+    role?: 'alert' | 'status';
+    /** Root className, for layout (margins, width). */
+    className?: string;
+    /** Root test id; the parts are suffixed (`-icon`, `-title`, `-description`, `-actions`, `-dismiss`). */
+    'data-testid'?: string;
+}

package/dist/patterns/index.d.ts

@@ -170,3 +170,5 @@ export { CellText, ChipStack } from './CellText';
 export type { CellTextProps, CellTextVariant, ChipStackProps } from './CellText';
 export { SessionExpiredCard } from './SessionExpiredCard';
 export type { SessionExpiredCardProps } from './SessionExpiredCard';
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeTone, NoticeVariant } from './Notice';

package/dist/providers/HeroUIProvider.d.ts

@@ -14,6 +14,12 @@ interface HeroUIProviderProps {
      * 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, closeLabel, locale }: 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/index.d.ts

@@ -1,4 +1,6 @@
 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';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.1.0-beta.18",
+    "version": "2.1.0-beta.20",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",