@veevarts/design-system 2.0.0-alpha.55 → 2.0.0-alpha.57

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/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

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