@veevarts/design-system 2.1.0-beta.23 → 2.1.0-beta.25

package/README.md

@@ -211,7 +211,13 @@ For `mode="datetime"`, the design system does not convert timezones. The consumi
 </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.
+**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`.
+
+From `sm` up a toast takes the width its text needs, between HeroUI's 356px and `min(32rem, 100vw - 11rem)`, instead of a fixed 356px: both bounds are `rem`, so it keeps up when the root font grows (the POS Text size setting, or a larger browser default). The close button sits inside the toast beside the title, always visible, as a 44px (`2.75rem`) target, instead of HeroUI's hover-only circle on the corner. A short toast at the default text size is the same 356px as before.
+
+A `toastProps.classNames` you pass is merged after these defaults, slot by slot (`base`, `closeButton`, `closeIcon`, `title`, `description`). HeroUI replaces the provider `classNames` with a per-toast `addToast({ classNames })` as a whole object, so a per-toast `classNames` drops these defaults for that toast.
+
+**Still skeletons (`Skeleton`).** The `Skeleton` exported here wraps HeroUI's: same props. HeroUI draws the shimmer on the block's `::before`, so `motion-reduce:animate-none` on the block never stops it. This one adds `motion-reduce:before:animate-none` (and the transition equivalents), so under the OS "reduce motion" setting the block is a plain grey shape at the same size; with motion allowed nothing changes. `EntityListSkeleton` and the other DS skeletons draw their blocks with it.
 
 ```tsx
 <HeroUIProvider>

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

@@ -15,7 +15,7 @@ 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';
@@ -23,6 +23,8 @@ 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';