@exsto/ds 0.0.1-rc.3 → 0.0.1-rc.4

package/dist/ui/src/components/ui/scroll-area/scroll-area.d.ts

@@ -1,7 +1,14 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { ComponentProps, RefObject } from 'react';
-/** When the bar shows: 'hover' on area hover or while scrolling (default), 'scroll' only while scrolling, 'always' permanent. */
+/**
+ * When the bar shows: 'hover' on area hover or while scrolling (default),
+ * 'scroll' only while scrolling, 'always' permanent. In every mode the bar is
+ * mounted only while that axis actually overflows, so 'always' means "always
+ * when there is something to scroll", never a bar on a list that fits.
+ */
 export type TScrollbarVisibility = 'hover' | 'scroll' | 'always';
+/** Surface the edge fades blend into. */
+export type TScrollAreaFadeFrom = 'card' | 'background' | 'sidebar' | 'popover';
 export interface IScrollBarProps extends ComponentProps<typeof BaseScrollArea.Scrollbar> {
     visibility?: TScrollbarVisibility;
 }
@@ -11,11 +18,27 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
     orientation?: 'horizontal' | 'vertical' | 'both';
     /** Scrollbar reveal behavior (mirrors the Radix ScrollArea `type` prop). */
     type?: TScrollbarVisibility;
-    viewPortId?: string;
+    /** Edge fades hinting at clipped content; each one shows only while its own edge hides something. */
+    fade?: boolean;
+    /** Surface the fades blend into: 'card' inside a card (default), 'background' page-level, 'sidebar', 'popover' for popup lists. */
+    fadeFrom?: TScrollAreaFadeFrom;
+    /** Places both bars, for a host that gives them a gutter of their own (a sidebar menu). */
+    scrollbarClassName?: string;
+    viewportId?: string;
     /** Access to the scrollable viewport (e.g. to reset scroll position on route changes). */
+    viewportRef?: RefObject<HTMLDivElement | null>;
+    viewportClassName?: string;
+    /** Published on the viewport as data-scroll-restoration-id, for a router that restores scroll position. */
+    scrollRestorationId?: string;
+    /** @deprecated Use `viewportId`. */
+    viewPortId?: string;
+    /** @deprecated Use `viewportRef`. */
     viewPortRef?: RefObject<HTMLDivElement | null>;
+    /** @deprecated Use `viewportClassName`. */
     viewPortClassName?: string;
+    /** Places the vertical bar only; `scrollbarClassName` covers both. */
     scrollVerticalClassName?: string;
+    /** Places the horizontal bar only; `scrollbarClassName` covers both. */
     scrollHorizontalClassName?: string;
 }
 /**
@@ -24,9 +47,20 @@ export interface IScrollAreaProps extends ComponentProps<typeof BaseScrollArea.R
  * rule: wide/tall content (tables, lists, code) always goes through this, never a bare
  * overflow-* utility.
  *
+ * Cap the height with a plain class on the component itself, e.g.
+ * `<ScrollArea className="max-h-88">`. The viewport picks the cap up through
+ * `max-h-inherit`, which matters because the viewport is the element that actually
+ * scrolls: a cap that lands only on the root leaves tall content spilling out
+ * underneath with no scrollbar, and that reads as a working height right up until the
+ * content outgrows it.
+ *
+ * `fade` draws an edge fade on each side that is currently hiding content, rather than
+ * always painting one: a permanent fade is a lie half the time, dimming the last row
+ * that fits and promising more below when the reader is already at the end. The static
+ * faded-* utilities in @edyn/theme/utilities.css are the other tool, for DECORATIVE
+ * edges that do not track scroll position.
+ *
  * The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
- * so children can size against the visible area. Edge fades are NOT built in; apply
- * the faded-* utilities from @edyn/theme/utilities.css on the ScrollArea (it is the
- * positioning root) where a fade is wanted.
+ * so children can size against the visible area.
  */
-export declare const ScrollArea: ({ className, children, orientation, type, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;
+export declare const ScrollArea: ({ className, children, orientation, type, fade, fadeFrom, scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }: IScrollAreaProps) => import('react').JSX.Element;

package/dist/ui/src/components/ui/separator/separator.behavior.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Orientation styling for Separator, and a guard for the bug class behind it.
+ *
+ * Base UI publishes orientation as `data-orientation="horizontal|vertical"`. It
+ * has no `data-horizontal` / `data-vertical` attribute, so a bare
+ * `data-vertical:` variant compiles to a selector that matches nothing: the
+ * component looks styled, and silently is not. A vertical Separator came out
+ * with no width at all that way.
+ *
+ * PATH TAKEN: happy-dom renders no layout, so this asserts the class the
+ * component chose per orientation plus the attribute Base UI emitted, and the
+ * second block greps the package for the dead variant form.
+ */
+export {};

package/dist/ui/src/components/ui/separator/separator.d.ts

@@ -1,2 +1,16 @@
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+/**
+ * Hairline rule between content, announced as `role="separator"`.
+ *
+ * The orientation styles are branched in TS rather than written as
+ * `data-[orientation=*]:` variants on purpose. A variant carries two
+ * selectors' worth of specificity, so it would outrank a plain class passed in
+ * by the caller: the sidebar's own `w-auto` lost to `w-full` that way. Branching
+ * emits one plain class per axis, which `cn` can dedupe and a caller can
+ * override.
+ *
+ * Vertical uses `self-stretch` instead of `h-full`: a percentage height needs a
+ * definite parent, and the usual host is an `items-center` row whose height
+ * comes from its content.
+ */
 export declare const Separator: ({ className, orientation, ...props }: SeparatorPrimitive.Props) => import('react').JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.3",
+  "version": "0.0.1-rc.4",
   "description": "The eDynamix design system: React components, design tokens, and optional web components.",
   "license": "Apache-2.0",
   "keywords": [