@veevarts/design-system 2.1.0-beta.15 → 2.1.0-beta.17

package/README.md

@@ -183,6 +183,20 @@ 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>
+```
+
+**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/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';