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

package/README.md

@@ -183,6 +183,45 @@ import { DatePicker } from '@veevarts/design-system';
 
 For `mode="datetime"`, the design system does not convert timezones. The consuming app must pass the value already prepared in the business timezone it wants to present. The component hides timezone labels by default.
 
+`Modal`, `Drawer` and `Table` are also thin wrappers over HeroUI's: every HeroUI prop, ref and the generic `TableProps<Row>` type still work, and they add the accessibility defaults below.
+
+**Translatable close button (`Modal`, `Drawer`).** HeroUI hard-codes `aria-label="Close"` on the corner close button. Set `closeLabel` to localize it, either once on `HeroUIProvider` or per overlay. Resolution order: the `closeLabel` prop, then the `closeLabel` of the nearest `HeroUIProvider`, then HeroUI's default `"Close"` (its own button, untouched). A `closeButton` you pass is yours and is not relabelled; `hideCloseButton` still hides the button.
+
+```tsx
+<HeroUIProvider closeLabel="Fermer">
+  <Modal isOpen={isOpen} onOpenChange={setOpen} closeLabel="Fermer la fenêtre">
+    {/* ... */}
+  </Modal>
+</HeroUIProvider>
+```
+
+**React Aria locale (`HeroUIProvider`).** Set `locale` (BCP 47, e.g. `"fr-FR"`) so the strings React Aria renders follow the app's language: the hidden "Dismiss" buttons of every overlay, date and number formatting. Without it HeroUI uses `"en-US"`. `closeLabel` stays separate because HeroUI's close button text is not a React Aria string.
+
+```tsx
+<HeroUIProvider locale="fr-FR" closeLabel="Fermer">
+  {/* ... */}
+</HeroUIProvider>
+```
+
+**Reduced motion (`HeroUIProvider`).** `reducedMotion` defaults to `"user"`: overlays, toasts and every other framer-motion animation follow the OS "reduce motion" setting. HeroUI's own default is `"never"`, which animates regardless. Pass `"always"` to drop them for an app-level preference, or `"never"` to opt out.
+
+```tsx
+<HeroUIProvider reducedMotion={posPrefersStill ? 'always' : 'user'}>
+  {/* ... */}
+</HeroUIProvider>
+```
+
+**Readable toasts (`ToastProvider`).** The `ToastProvider` exported here wraps HeroUI's: same props, same `addToast` queue. Titles wrap instead of truncating to one line, and the animation is off when the OS or the POS (`data-pos-reduce-motion`) asks for reduced motion, unless you pass `disableAnimation`. A `toastProps.classNames.title` you pass is merged after the default. HeroUI replaces the provider `classNames` with a per-toast `addToast({ classNames })` as a whole object, so a per-toast `classNames` without a `title` key truncates that toast again.
+
+```tsx
+<HeroUIProvider>
+  <ToastProvider placement="top-right" />
+  {/* addToast({ title, description }) anywhere below */}
+</HeroUIProvider>
+```
+
+**Table header contrast (`Table`).** Column headers default to `text-default-600` (`text-default-700` on a hovered sortable column) so 12px header text clears 4.5:1 (WCAG 1.4.3). Your classes win: a `classNames.th` color on the table, or a `className` on a `TableColumn`, replaces the default.
+
 For complete HeroUI documentation, visit: [HeroUI Storybook](https://storybook.heroui.com/)
 
 ### Configure Tailwind CSS

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,17 @@
+import { DrawerProps as HeroUIDrawerProps } from '@heroui/react';
+export type DrawerProps = HeroUIDrawerProps & {
+    /**
+     * Accessible name of the corner close button, e.g. `"Fermer"`. HeroUI hard-codes `"Close"`.
+     *
+     * Falls back to the `closeLabel` of `HeroUIProvider`; with neither, HeroUI's own button is rendered
+     * untouched. It names the default button only: a `closeButton` you pass is yours, and
+     * `hideCloseButton` still hides the button.
+     */
+    closeLabel?: string;
+};
+/**
+ * HeroUI `Drawer` with a translatable close button (WCAG 3.1.2, 4.1.2). Every HeroUI prop is kept.
+ * HeroUI's Drawer renders its Modal underneath and forwards `closeButton` / `hideCloseButton` to it
+ * (@heroui/drawer chunk-VASKIHQC.mjs), so it takes the same fix as the DS `Modal`.
+ */
+export declare const Drawer: import('react').ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/Modal/CloseButton.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /** The accessible name. Applied after everything HeroUI passes, so its literal "Close" never wins. */
+    label: string;
+}
+/**
+ * The corner close button of a DS `Modal` / `Drawer` that carries a translated name.
+ *
+ * Not for direct use: HeroUI `cloneElement`s the `closeButton` it is given and passes its own props last
+ * (@heroui/modal chunk-NWAOTABO.mjs, `cloneElement(closeButton, getCloseButtonProps())`): the slot
+ * className, `role`, `tabIndex`, `data-focus-visible`, the react-aria press handlers and
+ * `aria-label: "Close"`. This component spreads all of that onto a `<button>` and sets `aria-label` last.
+ *
+ * The X is HeroUI's own default close icon, copied so the button renders identically: the SVG of
+ * `CloseIcon` in @heroui/shared-icons (dist/chunk-3JRSRN3Z.mjs, src/close.tsx, v2.1.10). It is not
+ * imported because `@heroui/shared-icons` is a transitive dependency of `@heroui/react`, not a DS one.
+ */
+export declare function CloseButton({ label, ...heroUIProps }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,15 @@
+import { ModalProps as HeroUIModalProps } from '@heroui/react';
+export type ModalProps = HeroUIModalProps & {
+    /**
+     * Accessible name of the corner close button, e.g. `"Fermer"`. HeroUI hard-codes `"Close"`.
+     *
+     * Falls back to the `closeLabel` of `HeroUIProvider`; with neither, HeroUI's own button is rendered
+     * untouched. It names the default button only: a `closeButton` you pass is yours, and
+     * `hideCloseButton` still hides the button.
+     */
+    closeLabel?: string;
+};
+/**
+ * HeroUI `Modal` with a translatable close button (WCAG 3.1.2, 4.1.2). Every HeroUI prop is kept.
+ */
+export declare const Modal: import('react').ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/components/Modal/useLabelledCloseButton.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+/**
+ * The `closeButton` to hand to HeroUI's Modal / Drawer.
+ *
+ * - A caller-supplied element is returned as is (HeroUI clones it and decides its props).
+ * - Otherwise, when a label resolves (the `closeLabel` prop, then the `HeroUIProvider` value; a blank one
+ *   counts as unset), a `CloseButton` carrying it.
+ * - Otherwise `undefined`: nothing is injected and HeroUI renders its own button, `aria-label="Close"`
+ *   included. `null` / `false` mean "no element supplied" here, as they do for HeroUI.
+ *
+ * `hideCloseButton` is not read here: it stays a HeroUI prop and still decides whether any of this renders.
+ */
+export declare function useLabelledCloseButton(closeLabel: string | undefined, closeButton: ReactNode): ReactNode;

package/dist/components/Select/Select.d.ts

@@ -3,6 +3,16 @@ type HeroSelectProps<T extends object = object> = HeroUISelectProps<T>;
 export type SelectPopoverProps = NonNullable<HeroSelectProps['popoverProps']> & {
     disableDialogFocus?: boolean;
     portalContainer?: Element;
+    /**
+     * Marks the popover root as a react-aria top layer. The Modal aria-hides every node added outside
+     * its dialog, and the list is portaled next to the dialog, so without the marker the open list is
+     * hidden from assistive tech (WCAG 4.1.2).
+     * - `undefined` (default): set to `'true'` only when the Select renders inside a dialog.
+     * - `'true'`: always set to `'true'`, inside or outside a dialog.
+     * - `'false'`: opt out. The attribute is not passed to HeroUI at all, because react-aria's focus
+     *   and outside-click checks match its presence, so a rendered `'false'` would still count there.
+     */
+    'data-react-aria-top-layer'?: 'true' | 'false';
 };
 export type SelectProps<T extends object = object> = Omit<HeroSelectProps<T>, 'popoverProps'> & {
     popoverProps?: SelectPopoverProps;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import { TableProps as HeroUITableProps } from '@heroui/react';
+/**
+ * HeroUI's full Table props: every slot in `classNames`, selection, sorting, `ref`, render-function children.
+ * Generic over the row type exactly like HeroUI's, so a consumer's `TableProps<Row>` keeps compiling.
+ */
+export type TableProps<T = object> = HeroUITableProps<T>;
+export declare const Table: import('react').ForwardRefExoticComponent<Omit<import('@heroui/system').MergeWithAs<Omit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">, Omit<Omit<any, "ref">, never>, HeroUITableProps<object>, import('@heroui/system').As<any>>, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps } from './Table';

package/dist/components/index.d.ts

@@ -17,7 +17,13 @@ export { Button } from './Button';
 export type { ButtonProps } from './Button';
 export { DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
 export { Select } from './Select';
 export type { SelectProps } from './Select';
+export { Table } from './Table';
+export type { TableProps } from './Table';
 export { RedeemCodeInput } from './RedeemCodeInput';
 export type { RedeemCodeInputProps, RedeemCodeInputState } from './RedeemCodeInput';