@veevarts/design-system 2.0.0-beta.6 → 2.0.0-csm.1

package/README.md

@@ -183,6 +183,28 @@ 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>
+```
+
+**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
@@ -243,6 +265,20 @@ module.exports = {
 | `colors` | Color tokens (brand, semantic, neutral, palettes) |
 | `typography` | Typography tokens (fontFamily, fontSize, fontWeight, lineHeight) |
 | `spacing` | Spacing tokens |
+| `assistantSurfaceTokens` | The assistant (`ai-*`) palette as hex, `{ light, dark }` |
+| `assistantSurfacePlugin` | Writes the `--ai-*` custom properties. Already inside `veevartPreset`; add it yourself only if you extend `tokens.tailwindTheme` without the preset |
+
+#### Assistant color (`ai-*`), light and dark
+
+The preset adds an `ai` colour family for assistant surfaces: `ai-accent`, `ai-fill`, `ai-border`, `ai-user-bubble`, `ai-assistant-bubble` and `ai-focus` (`text-ai-accent`, `bg-ai-fill/50`, `ring-ai-focus`, …).
+
+- Each color reads a custom property (`--ai-accent`, …) that the preset's plugin writes. **The `.dark` class is the switch:** dark values under `.dark`, light values on `:root`, `.light` and `[data-theme="light"]`, the selectors every HeroUI 2.x in the peer range writes its own variables under, so the palette flips together with HeroUI's semantic colors (a test compiles both and compares). `.dark` on a subtree darkens that subtree only.
+- `data-theme="dark"` is **not** a switch: HeroUI 2.8 no longer writes its dark variables there, so neither palette turns dark under it.
+- As with HeroUI's own `.dark` theme, Tailwind emits the dark values only when your content uses the `dark` class, which any app that toggles it does.
+- The properties hold channels (`29 78 216`), so in plain CSS write `rgb(var(--ai-accent))`.
+- Without the plugin, every `ai-*` colour falls back to its light value.
+- **The hue is a placeholder** (the info blue scale for accent, fill, border and focus) until Design picks the assistant color. The two turns are HeroUI neutrals (`content1` for the assistant, `content2` for the person), so only the assistant wears the hue. Values and contrast tests live in `src/tokens/assistant-surface.ts`; see Storybook → Foundations → Assistant color.
+- Storybook has a **Theme** toolbar (light / dark); dark wraps the story in `.dark`, the way apps scope it.
 
 ---
 

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';