@womp/kookie-ui 0.9.1 → 0.11.0

package/src/components/app-bar.css

@@ -0,0 +1,204 @@
+/* stylelint-disable selector-max-specificity */
+/* AppBar Component */
+
+.rt-AppBar {
+  position: absolute;
+  z-index: 1;
+
+  /* --rt-app-bar-height and --rt-app-bar-width are set on parent element via JS */
+  /* (the old --rt-toolbar-* names are still set too, for layouts written before the rename) */
+  /* Use pt/pb/pl/pr="var(--rt-app-bar-height)" on content to avoid overlap */
+}
+
+/* Grid layout for true centering */
+.rt-AppBarInner {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: var(--space-2);
+}
+
+/* Vertical app bars use row-based grid */
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarInner {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarLeft {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarCenter {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarRight {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Anchor positions          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-AppBar:where([data-anchor='top']) {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.rt-AppBar:where([data-anchor='bottom']) {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.rt-AppBar:where([data-anchor='left']) {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.rt-AppBar:where([data-anchor='right']) {
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*          Inset mode (default)       */
+/*          Edge-to-edge positioning   */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* Remove border-radius in inset mode */
+.rt-AppBar:where(:not([data-floating])) {
+  --base-card-border-radius: 0;
+  border-radius: 0;
+}
+
+/* Override Card's box-shadow to only show exposed edge */
+/* Top anchor: only show bottom border */
+.rt-AppBar:where([data-anchor='top']:not([data-floating])) {
+  &::after {
+    box-shadow: inset 0 -1px 0 0 var(--gray-6);
+  }
+  :where([data-panel-background='translucent'], [data-material='translucent']) &::after,
+  &:where([data-panel-background='translucent'], [data-material='translucent'])::after {
+    box-shadow: inset 0 -1px 0 0 var(--gray-a6);
+  }
+}
+
+/* Bottom anchor: only show top border */
+.rt-AppBar:where([data-anchor='bottom']:not([data-floating])) {
+  &::after {
+    box-shadow: inset 0 1px 0 0 var(--gray-6);
+  }
+  :where([data-panel-background='translucent'], [data-material='translucent']) &::after,
+  &:where([data-panel-background='translucent'], [data-material='translucent'])::after {
+    box-shadow: inset 0 1px 0 0 var(--gray-a6);
+  }
+}
+
+/* Left anchor: only show right border */
+.rt-AppBar:where([data-anchor='left']:not([data-floating])) {
+  &::after {
+    box-shadow: inset -1px 0 0 0 var(--gray-6);
+  }
+  :where([data-panel-background='translucent'], [data-material='translucent']) &::after,
+  &:where([data-panel-background='translucent'], [data-material='translucent'])::after {
+    box-shadow: inset -1px 0 0 0 var(--gray-a6);
+  }
+}
+
+/* Right anchor: only show left border */
+.rt-AppBar:where([data-anchor='right']:not([data-floating])) {
+  &::after {
+    box-shadow: inset 1px 0 0 0 var(--gray-6);
+  }
+  :where([data-panel-background='translucent'], [data-material='translucent']) &::after,
+  &:where([data-panel-background='translucent'], [data-material='translucent'])::after {
+    box-shadow: inset 1px 0 0 0 var(--gray-a6);
+  }
+}
+
+/* Ghost variant in normal mode has no border */
+.rt-AppBar:where(.rt-variant-ghost:not([data-floating]))::after {
+  box-shadow: none;
+}
+
+/* Soft variant in normal mode has no border */
+.rt-AppBar:where(.rt-variant-soft:not([data-floating]))::after {
+  box-shadow: none;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*            Floating mode            */
+/*            Full card treatment      */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* Floating mode: margin controlled via offset prop in JS */
+/* Inherits Card's border-radius (not overridden like inset mode) */
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Title truncation          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-AppBarTitle {
+  /* Ensure title can truncate within flex container */
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Section alignment           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-AppBarSection {
+  min-width: 0;
+}
+
+.rt-AppBarLeft {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.rt-AppBarCenter {
+  grid-column: 2;
+  justify-self: center;
+}
+
+/* Ensure Right always stays in the right column */
+.rt-AppBarRight {
+  grid-column: 3;
+  justify-self: end;
+}
+
+/* Vertical app bar section alignment */
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarLeft {
+  align-self: start;
+  justify-self: center;
+}
+
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarCenter {
+  align-self: center;
+  justify-self: center;
+}
+
+.rt-AppBar:where([data-anchor='left'], [data-anchor='right']) .rt-AppBarRight {
+  align-self: end;
+  justify-self: center;
+}

package/src/components/app-bar.tsx

@@ -0,0 +1,256 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Card } from './card.js';
+import { Flex } from './flex.js';
+import { Heading } from './heading.js';
+
+import type { CardProps } from './card.js';
+import type { FlexProps } from './flex.js';
+
+// ============================================================================
+// AppBar Root
+// ============================================================================
+
+type AppBarRootElement = React.ElementRef<'div'>;
+type Anchor = 'top' | 'bottom' | 'left' | 'right';
+type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+
+interface AppBarRootProps extends Omit<CardProps, 'asChild'> {
+  /**
+   * Which edge to anchor to. Sets position: sticky and the appropriate edge.
+   * @default "top"
+   */
+  anchor?: Anchor;
+  /**
+   * Floating mode adds margin from edges for a detached look with absolute positioning.
+   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Margin offset from edges when floating. Uses space scale values.
+   * @default "2"
+   */
+  offset?: SpaceScale;
+}
+
+/**
+ * An app bar: the band anchored to one edge of a pane, with left, center and right sections
+ * and a title. It publishes its height (or width) to its parent as `--rt-app-bar-height`
+ * (`--rt-app-bar-width`) so content can pad itself clear of it.
+ *
+ * This component was called `Toolbar` until 0.11.0. It is not a `role="toolbar"`: for a row of
+ * controls with one tab stop and arrow-key navigation, use `Toolbar`.
+ */
+const AppBarRoot = React.forwardRef<AppBarRootElement, AppBarRootProps>(
+  (props, forwardedRef) => {
+    const {
+      anchor = 'top',
+      floating = false,
+      offset = '2',
+      size = '1',
+      variant = 'ghost',
+      material,
+      className,
+      style,
+      children,
+      ...restProps
+    } = props;
+
+    const isHorizontal = anchor === 'top' || anchor === 'bottom';
+    const internalRef = React.useRef<HTMLDivElement>(null);
+
+    // Merge refs
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    // Expose height/width as CSS variable on parent element
+    React.useEffect(() => {
+      const element = internalRef.current;
+      if (!element) return;
+
+      const parent = element.parentElement;
+      if (!parent) return;
+
+      const update = () => {
+        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;
+
+        // For floating mode, include the margin in the total space
+        if (floating) {
+          const computedStyle = getComputedStyle(element);
+          const margin = parseFloat(computedStyle.marginTop) || 0;
+          dimension += margin * 2;
+        }
+
+        // `--rt-toolbar-*` are the names this bar published while it was called Toolbar.
+        // They are still written so existing layouts keep their offset; prefer `--rt-app-bar-*`.
+        if (isHorizontal) {
+          parent.style.setProperty('--rt-app-bar-height', `${dimension}px`);
+          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);
+        } else {
+          parent.style.setProperty('--rt-app-bar-width', `${dimension}px`);
+          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);
+        }
+      };
+
+      update();
+
+      const resizeObserver = new ResizeObserver(update);
+      resizeObserver.observe(element);
+
+      return () => resizeObserver.disconnect();
+    }, [isHorizontal, floating]);
+
+    const computedStyle = floating
+      ? { margin: `var(--space-${offset})`, ...style }
+      : style;
+
+    return (
+      <Card
+        ref={mergedRef}
+        size={size}
+        variant={variant}
+        material={material}
+        data-anchor={anchor}
+        data-floating={floating || undefined}
+        className={classNames('rt-AppBar', className)}
+        style={computedStyle}
+        {...restProps}
+      >
+        <div className="rt-AppBarInner">
+          {children}
+        </div>
+      </Card>
+    );
+  },
+);
+AppBarRoot.displayName = 'AppBar.Root';
+
+// ============================================================================
+// AppBar Left (for horizontal) / Start (alias)
+// ============================================================================
+
+type AppBarSectionElement = React.ElementRef<'div'>;
+type AppBarSectionProps = FlexProps;
+
+const AppBarLeft = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarLeft', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarLeft.displayName = 'AppBar.Left';
+
+// ============================================================================
+// AppBar Center
+// ============================================================================
+
+const AppBarCenter = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarCenter', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarCenter.displayName = 'AppBar.Center';
+
+// ============================================================================
+// AppBar Right (for horizontal) / End (alias)
+// ============================================================================
+
+const AppBarRight = React.forwardRef<AppBarSectionElement, AppBarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-AppBarSection', 'rt-AppBarRight', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+AppBarRight.displayName = 'AppBar.Right';
+
+// ============================================================================
+// AppBar Title
+// ============================================================================
+
+type AppBarTitleElement = React.ElementRef<typeof Heading>;
+type AppBarTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;
+
+const AppBarTitle = React.forwardRef<AppBarTitleElement, AppBarTitleProps>(
+  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
+    <Heading
+      ref={forwardedRef}
+      size={size}
+      weight={weight}
+      truncate={truncate}
+      className={classNames('rt-AppBarTitle', className)}
+      {...props}
+    >
+      {children}
+    </Heading>
+  ),
+);
+AppBarTitle.displayName = 'AppBar.Title';
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+const AppBar = AppBarRoot as typeof AppBarRoot & {
+  Root: typeof AppBarRoot;
+  Left: typeof AppBarLeft;
+  Center: typeof AppBarCenter;
+  Right: typeof AppBarRight;
+  Title: typeof AppBarTitle;
+};
+
+AppBar.Root = AppBarRoot;
+AppBar.Left = AppBarLeft;
+AppBar.Center = AppBarCenter;
+AppBar.Right = AppBarRight;
+AppBar.Title = AppBarTitle;
+
+export {
+  AppBar,
+  AppBarRoot as Root,
+  AppBarLeft as Left,
+  AppBarCenter as Center,
+  AppBarRight as Right,
+  AppBarTitle as Title,
+};
+export type {
+  AppBarRootProps as RootProps,
+  AppBarSectionProps as LeftProps,
+  AppBarSectionProps as CenterProps,
+  AppBarSectionProps as RightProps,
+  AppBarTitleProps as TitleProps,
+};

package/src/components/index.css

@@ -57,6 +57,8 @@
 @import './text-area.css';
 @import './text-field.css';
 @import './theme-panel.css';
+/* AppBar keeps the place its old toolbar.css had: it extends Card and must come after card.css */
+@import './app-bar.css';
 @import './toolbar.css';
 @import './tooltip.css';
 @import './user-card.css';

package/src/components/index.tsx

@@ -1,6 +1,7 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
 export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
+export { AppBar } from './app-bar.js';
 export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';
 export { Badge, type BadgeProps } from './badge.js';
@@ -71,7 +72,18 @@ export {
 export { Theme, ThemeContext, type ThemeContextValue, type ThemeProps, useThemeContext } from './theme.js';
 export { ToggleButton, type ToggleButtonProps } from './toggle-button.js';
 export { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';
-export { Toolbar } from './toolbar.js';
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarButton,
+  ToolbarSeparator,
+  ToolbarTitle,
+  type ToolbarProps,
+  type ToolbarGroupProps,
+  type ToolbarButtonProps,
+  type ToolbarSeparatorProps,
+  type ToolbarTitleProps,
+} from './toolbar.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
 export { UserCard, type UserCardProps } from './user-card.js';
 export { VirtualMenu, type VirtualMenuProps, type VirtualMenuItemProps, type VirtualMenuRenderItemProps } from './virtual-menu.js';

package/src/components/message-scroller.tsx

@@ -40,7 +40,10 @@ import {
   type MessageScrollerVisibilityState,
 } from '@shadcn/react/message-scroller';
 
+import { useComposedRefs } from 'radix-ui/internal';
+
 import { IconButton, type IconButtonProps } from './icon-button.js';
+import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 
 interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
@@ -78,14 +81,30 @@ interface ViewportProps extends React.ComponentPropsWithoutRef<'div'> {
   'aria-label'?: string;
   /** Keep the reader's place when older messages are added above. Default `true`. */
   preserveScrollOnPrepend?: boolean;
+  /**
+   * Fades messages toward the top and bottom edges while there is more past them. A floating
+   * band over an edge (a toolbar, a goal tray, a composer) can set `--scroll-fade-start` or
+   * `--scroll-fade-end` to its height, so messages fade as they pass under it. Default `true`.
+   */
+  fade?: boolean;
 }
 
 /** The scrolling element. */
-const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, 'aria-label': label, ...props }, forwardedRef) => (
-  // The primitive names an unnamed viewport "Messages", in English. An empty name is skipped by
-  // accessible-name computation, so a transcript is only named when the app names it.
-  <Primitive.Viewport aria-label={label ?? ''} {...props} ref={forwardedRef} className={classNames('rt-MessageScrollerViewport', className)} />
-));
+const Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(({ className, 'aria-label': label, fade = true, ...props }, forwardedRef) => {
+  const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
+  const ref = useComposedRefs(forwardedRef, setEdgesElement);
+  return (
+    // The primitive names an unnamed viewport "Messages", in English. An empty name is skipped by
+    // accessible-name computation, so a transcript is only named when the app names it.
+    <Primitive.Viewport
+      aria-label={label ?? ''}
+      {...props}
+      ref={ref}
+      data-fade={fade ? '' : undefined}
+      className={classNames('rt-MessageScrollerViewport', className)}
+    />
+  );
+});
 Viewport.displayName = 'MessageScroller.Viewport';
 
 type ContentProps = React.ComponentPropsWithoutRef<'div'>;

package/src/components/scroll-area.css

@@ -144,3 +144,47 @@
     }
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SCROLL FADE                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/*
+ * Content dissolves toward an edge that has more past it. A mask, not a painted gradient: a paint
+ * has to fade toward a colour, and the right colour differs on every surface, while a mask fades
+ * the content itself and lets whatever is behind show through.
+ *
+ * `--scroll-overflow-start/-end` are how far content is hidden past each edge, written by
+ * Kookie's scroll-edges hook. `min()` against the fade length is the whole behaviour: an edge
+ * with nothing past it fades over 0px, and the fade ramps in over the first pixels of scrolling.
+ * A floating band over an edge sets `--scroll-fade-start` or `--scroll-fade-end` to its height.
+ *
+ * Shared by ScrollArea (on its viewport) and MessageScroller (on its viewport). Scrollbars are
+ * siblings of the viewport, outside the mask, so the thumb stays crisp.
+ */
+:where(.rt-ScrollAreaRoot[data-fade]) > .rt-ScrollAreaViewport,
+.rt-MessageScrollerViewport:where([data-fade]) {
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))),
+    black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))),
+    transparent 100%
+  );
+}
+
+:root,
+.radix-themes {
+  --scroll-fade-size: var(--space-6);
+}
+
+/*
+ * A band is above the scroller it floats over and above nothing else. The reach hooks inherit,
+ * so a scroller nested inside another takes the designed length, not its ancestor's band.
+ */
+:where(.rt-ScrollAreaViewport, .rt-MessageScrollerViewport) :where(.rt-ScrollAreaRoot, .rt-MessageScrollerViewport) {
+  --scroll-fade-start: initial;
+  --scroll-fade-end: initial;
+}

package/src/components/scroll-area.props.tsx

@@ -11,9 +11,17 @@ const scrollAreaPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   ...radiusPropDef,
   scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' },
+  /**
+   * Fades the content toward the top and bottom edges while there is more content past them.
+   * An edge with nothing hidden past it does not fade. A floating band over an edge can set
+   * `--scroll-fade-start` or `--scroll-fade-end` to its height, so content fades as it passes
+   * under the band.
+   */
+  fade: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   scrollbars: PropDef<(typeof scrollbarsValues)[number]>;
+  fade: PropDef<boolean>;
 };
 
 export { scrollAreaPropDefs };

package/src/components/scroll-area.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import { useComposedRefs } from 'radix-ui/internal';
 
 import { scrollAreaPropDefs } from './scroll-area.props.js';
+import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 import { extractMarginProps } from '../helpers/extract-margin-props.js';
 import { getMarginStyles } from '../helpers/get-margin-styles.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
@@ -35,14 +37,18 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     size = scrollAreaPropDefs.size.default,
     radius = scrollAreaPropDefs.radius.default,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
+    fade = scrollAreaPropDefs.fade.default,
     ...viewportProps
   } = marginRest;
+  const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
+  const viewportRef = useComposedRefs(forwardedRef, setEdgesElement);
 
   return (
     <ScrollAreaPrimitive.Root
       type={type}
       scrollHideDelay={scrollHideDelay}
       className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}
+      data-fade={fade ? '' : undefined}
       style={mergeStyles(marginCustomProperties, style)}
       asChild={asChild}
     >
@@ -50,7 +56,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
         <>
           <ScrollAreaPrimitive.Viewport
             {...viewportProps}
-            ref={forwardedRef}
+            ref={viewportRef}
             className="rt-ScrollAreaViewport"
           >
             {children}