@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,8 +1,15 @@
 import { ButtonProps, DatePickerProps as HeroUIDatePickerProps, TimeInputProps as HeroUITimeInputProps } from '@heroui/react';
-type DateOnlyProps = HeroUIDatePickerProps & {
+type CalendarMarkProps = {
+    /**
+     * Rings today's cell in the calendar. HeroUI only flags it. Off by
+     * default; `DATE_PICKER_DAY_DEFAULTS` turns it on.
+     */
+    markToday?: boolean;
+};
+type DateOnlyProps = HeroUIDatePickerProps & CalendarMarkProps & {
     mode?: 'date';
 };
-type DateTimeProps = HeroUIDatePickerProps & {
+type DateTimeProps = HeroUIDatePickerProps & CalendarMarkProps & {
     mode: 'datetime';
 };
 type TimeOnlyProps = HeroUITimeInputProps & {

package/dist/components/DatePicker/defaults.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The calendar for picking one day the way the program page does, in one
+ * spread: weeks start on Monday, the month and the year can be jumped to (a
+ * program can be set up a year ahead), and today is marked with a ring so
+ * people know where they are. Nothing is preselected: leave `value` empty and
+ * the field stays empty.
+ *
+ * Opt-in. A `DatePicker` without it keeps HeroUI's behaviour (the locale's
+ * first weekday, month-by-month paging, today unmarked).
+ *
+ * @example
+ * ```tsx
+ * <DatePicker {...DATE_PICKER_DAY_DEFAULTS} label={t('startDate')} value={start} onChange={setStart} />
+ * ```
+ */
+export declare const DATE_PICKER_DAY_DEFAULTS: {
+    readonly firstDayOfWeek: "mon";
+    readonly showMonthAndYearPickers: true;
+    readonly markToday: true;
+};
+/**
+ * What `markToday` adds to every calendar cell. HeroUI only flags today
+ * (`data-today`) and draws nothing for it. The ring is the primary color, so
+ * once today is selected it disappears into the primary fill, which the
+ * `DayDefaults` story measures. (A `data-[selected=true]:ring-0` would not
+ * help: it loses to the ring in the generated CSS.)
+ */
+export declare const TODAY_RING_CLASS = "data-[today=true]:font-semibold data-[today=true]:ring-1 data-[today=true]:ring-inset data-[today=true]:ring-primary";

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

@@ -1,2 +1,3 @@
 export { DatePicker } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { DATE_PICKER_DAY_DEFAULTS } from './defaults';

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/Skeleton/Skeleton.d.ts

@@ -0,0 +1,37 @@
+import { SkeletonProps as HeroUISkeletonProps } from '@heroui/react';
+export type SkeletonProps = HeroUISkeletonProps;
+/**
+ * What HeroUI's own `disableAnimation` adds to the skeleton, applied only while
+ * the OS asks for reduced motion (`prefers-reduced-motion: reduce`).
+ *
+ * HeroUI draws the shimmer on the block's `::before` (`before:animate-shimmer`),
+ * so `motion-reduce:animate-none` on the block never reaches it: the sweep kept
+ * running for anyone who had turned motion off. Each pseudo-element and
+ * property needs its own utility:
+ *
+ * - `before:animate-none` stops the shimmer. The `::before` stays parked at
+ *   `-translate-x-full`, outside the block, so what is left is the plain grey
+ *   block, at the same size and in the same place.
+ * - `animate-none` stops an animation on the block itself (a caller's
+ *   `animate-pulse`, for one).
+ * - `transition-none`, `before:transition-none` and `after:transition-none`
+ *   drop the fade HeroUI runs when `isLoaded` flips.
+ *
+ * Every utility sits behind `motion-reduce:`, so with motion allowed the class
+ * list resolves exactly as before and the shimmer is unchanged. Tailwind emits
+ * the `motion-reduce` rules after the plain `before:` ones, so they win at
+ * equal specificity.
+ */
+export declare const SKELETON_REDUCED_MOTION_CLASS = "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:before:animate-none motion-reduce:before:transition-none motion-reduce:after:transition-none";
+/**
+ * HeroUI `Skeleton` that holds still under reduced motion. Every HeroUI prop is
+ * kept, and an explicit `disableAnimation` still turns the shimmer off for
+ * everyone.
+ *
+ * The defaults go first in `classNames.base`, ahead of the caller's
+ * `classNames.base` and `className`, so a caller can still override any of
+ * them. Every DS skeleton (`EntityListSkeleton`, `OfferCardSkeleton`,
+ * `RevenueDistributionSkeleton`, `InstallmentScheduleSkeleton`,
+ * `InstallmentFundAssignmentSkeleton`) draws its blocks with this component.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<Omit<HeroUISkeletonProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

@@ -15,9 +15,17 @@ export { AppliedCodeCard } from './AppliedCodeCard';
 export type { AppliedCodeCardProps } from './AppliedCodeCard';
 export { Button } from './Button';
 export type { ButtonProps } from './Button';
-export { DatePicker } from './DatePicker';
+export { DatePicker, DATE_PICKER_DAY_DEFAULTS } 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 { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+export { Table } from './Table';
+export type { TableProps } from './Table';
 export { RedeemCodeInput } from './RedeemCodeInput';
 export type { RedeemCodeInputProps, RedeemCodeInputState } from './RedeemCodeInput';