@womp/kookie-ui 0.3.22

package/src/components/toolbar.css

@@ -0,0 +1,203 @@
+/* stylelint-disable selector-max-specificity */
+/* Toolbar Component */
+
+.rt-Toolbar {
+  position: absolute;
+  z-index: 1;
+
+  /* --rt-toolbar-height and --rt-toolbar-width are set on parent element via JS */
+  /* Use pt/pb/pl/pr="var(--rt-toolbar-height)" on content to avoid overlap */
+}
+
+/* Grid layout for true centering */
+.rt-ToolbarInner {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: var(--space-2);
+}
+
+/* Vertical toolbars use row-based grid */
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*           Anchor positions          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Toolbar:where([data-anchor='top']) {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.rt-Toolbar:where([data-anchor='bottom']) {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.rt-Toolbar:where([data-anchor='left']) {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.rt-Toolbar:where([data-anchor='right']) {
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*          Inset mode (default)       */
+/*          Edge-to-edge positioning   */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* Remove border-radius in inset mode */
+.rt-Toolbar: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-Toolbar: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-Toolbar: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-Toolbar: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-Toolbar: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-Toolbar:where(.rt-variant-ghost:not([data-floating]))::after {
+  box-shadow: none;
+}
+
+/* Soft variant in normal mode has no border */
+.rt-Toolbar: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-ToolbarTitle {
+  /* Ensure title can truncate within flex container */
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Section alignment           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-ToolbarSection {
+  min-width: 0;
+}
+
+.rt-ToolbarLeft {
+  grid-column: 1;
+  justify-self: start;
+}
+
+.rt-ToolbarCenter {
+  grid-column: 2;
+  justify-self: center;
+}
+
+/* Ensure Right always stays in the right column */
+.rt-ToolbarRight {
+  grid-column: 3;
+  justify-self: end;
+}
+
+/* Vertical toolbar section alignment */
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+  align-self: start;
+  justify-self: center;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+  align-self: center;
+  justify-self: center;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+  align-self: end;
+  justify-self: center;
+}

package/src/components/toolbar.tsx

@@ -0,0 +1,242 @@
+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';
+
+// ============================================================================
+// Toolbar Root
+// ============================================================================
+
+type ToolbarRootElement = React.ElementRef<'div'>;
+type Anchor = 'top' | 'bottom' | 'left' | 'right';
+type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+
+interface ToolbarRootProps 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;
+}
+
+const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
+  (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;
+        }
+
+        if (isHorizontal) {
+          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);
+        } else {
+          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-Toolbar', className)}
+        style={computedStyle}
+        {...restProps}
+      >
+        <div className="rt-ToolbarInner">
+          {children}
+        </div>
+      </Card>
+    );
+  },
+);
+ToolbarRoot.displayName = 'Toolbar.Root';
+
+// ============================================================================
+// Toolbar Left (for horizontal) / Start (alias)
+// ============================================================================
+
+type ToolbarSectionElement = React.ElementRef<'div'>;
+type ToolbarSectionProps = FlexProps;
+
+const ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
+  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      gap={gap}
+      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+ToolbarLeft.displayName = 'Toolbar.Left';
+
+// ============================================================================
+// Toolbar Center
+// ============================================================================
+
+const ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+ToolbarCenter.displayName = 'Toolbar.Center';
+
+// ============================================================================
+// Toolbar Right (for horizontal) / End (alias)
+// ============================================================================
+
+const ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
+  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (
+    <Flex
+      ref={forwardedRef}
+      align={align}
+      justify={justify}
+      gap={gap}
+      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}
+      {...props}
+    >
+      {children}
+    </Flex>
+  ),
+);
+ToolbarRight.displayName = 'Toolbar.Right';
+
+// ============================================================================
+// Toolbar Title
+// ============================================================================
+
+type ToolbarTitleElement = React.ElementRef<typeof Heading>;
+type ToolbarTitleProps = React.ComponentPropsWithoutRef<typeof Heading>;
+
+const ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(
+  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
+    <Heading
+      ref={forwardedRef}
+      size={size}
+      weight={weight}
+      truncate={truncate}
+      className={classNames('rt-ToolbarTitle', className)}
+      {...props}
+    >
+      {children}
+    </Heading>
+  ),
+);
+ToolbarTitle.displayName = 'Toolbar.Title';
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+const Toolbar = ToolbarRoot as typeof ToolbarRoot & {
+  Left: typeof ToolbarLeft;
+  Center: typeof ToolbarCenter;
+  Right: typeof ToolbarRight;
+  Title: typeof ToolbarTitle;
+};
+
+Toolbar.Left = ToolbarLeft;
+Toolbar.Center = ToolbarCenter;
+Toolbar.Right = ToolbarRight;
+Toolbar.Title = ToolbarTitle;
+
+export {
+  Toolbar,
+  ToolbarRoot as Root,
+  ToolbarLeft as Left,
+  ToolbarCenter as Center,
+  ToolbarRight as Right,
+  ToolbarTitle as Title,
+};
+export type {
+  ToolbarRootProps as RootProps,
+  ToolbarSectionProps as LeftProps,
+  ToolbarSectionProps as CenterProps,
+  ToolbarSectionProps as RightProps,
+  ToolbarTitleProps as TitleProps,
+};

package/src/components/tooltip.css

@@ -0,0 +1,39 @@
+.rt-TooltipContent {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  background-color: var(--gray-12);
+  border-radius: var(--radius-1);
+  z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
+
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+
+  animation-duration: var(--motion-duration-small);
+  animation-timing-function: var(--motion-spring-snappy);
+
+  @media (prefers-reduced-motion: no-preference) {
+    &:where([data-state='delayed-open']) {
+      &:where([data-side='top']) {
+        animation-name: rt-slide-from-top, rt-fade-in;
+      }
+      &:where([data-side='bottom']) {
+        animation-name: rt-slide-from-bottom, rt-fade-in;
+      }
+      &:where([data-side='left']) {
+        animation-name: rt-slide-from-left, rt-fade-in;
+      }
+      &:where([data-side='right']) {
+        animation-name: rt-slide-from-right, rt-fade-in;
+      }
+    }
+  }
+}
+
+.rt-TooltipText {
+  color: var(--gray-1);
+  user-select: none;
+  cursor: default;
+}
+
+.rt-TooltipArrow {
+  fill: var(--gray-12);
+}

package/src/components/tooltip.props.tsx

@@ -0,0 +1,20 @@
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const tooltipPropDefs = {
+  content: { type: 'ReactNode', required: true },
+  width: widthPropDefs.width,
+  minWidth: widthPropDefs.minWidth,
+  maxWidth: { ...widthPropDefs.maxWidth, default: '360px' },
+} satisfies {
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+  content: PropDef<React.ReactNode>;
+};
+
+type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs & typeof widthPropDefs>;
+
+export { tooltipPropDefs };
+export type { TooltipOwnProps };

package/src/components/tooltip.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { Text } from './text.js';
+import { Theme } from './theme.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { tooltipPropDefs } from './tooltip.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
+type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
+interface TooltipProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+    ComponentPropsWithout<typeof TooltipPrimitive.Content, RemovedProps | 'content'>,
+    TooltipOwnProps {
+  content: React.ReactNode;
+  container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>['container'];
+}
+const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    open,
+    defaultOpen,
+    onOpenChange,
+    delayDuration,
+    disableHoverableContent,
+    content,
+    container,
+    forceMount,
+    ...tooltipContentProps
+  } = extractProps(props, tooltipPropDefs);
+  const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
+  return (
+    <TooltipPrimitive.Root {...rootProps}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <TooltipPrimitive.Content
+            sideOffset={4}
+            collisionPadding={10}
+            {...tooltipContentProps}
+            asChild={false}
+            ref={forwardedRef}
+            className={classNames('rt-TooltipContent', className)}
+          >
+            <Text as="p" className="rt-TooltipText" size="1">
+              {content}
+            </Text>
+            <TooltipPrimitive.Arrow className="rt-TooltipArrow" />
+          </TooltipPrimitive.Content>
+        </Theme>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+});
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };
+export type { TooltipProps };

package/src/components/user-card.css

@@ -0,0 +1,29 @@
+/* UserCard component styles */
+.rt-UserCard {
+  /* Base styles inherited from Card */
+  
+  /* Size-specific gap adjustments */
+  &:where(.rt-r-size-1) {
+    & :where(.rt-Flex) {
+      gap: var(--space-2);
+    }
+  }
+  
+  &:where(.rt-r-size-2) {
+    & :where(.rt-Flex) {
+      gap: var(--space-3);
+    }
+  }
+  
+  &:where(.rt-r-size-3) {
+    & :where(.rt-Flex) {
+      gap: var(--space-4);
+    }
+  }
+  
+  &:where(.rt-r-size-4) {
+    & :where(.rt-Flex) {
+      gap: var(--space-5);
+    }
+  }
+} 

package/src/components/user-card.props.tsx

@@ -0,0 +1,45 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['ghost', 'surface', 'classic'] as const;
+const avatarVariants = ['solid', 'soft', 'surface', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+
+const userCardPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+
+  // Content props
+  src: { type: 'string' },
+  fallback: { type: 'ReactNode', required: true },
+  name: { type: 'string', required: true },
+  description: { type: 'string' },
+
+  // Avatar styling
+  avatarVariant: { type: 'enum', values: avatarVariants, default: 'soft' },
+  ...radiusPropDef,
+
+  // Card styling
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  src: PropDef<string>;
+  fallback: PropDef<React.ReactNode>;
+  name: PropDef<string>;
+  description: PropDef<string>;
+  avatarVariant: PropDef<(typeof avatarVariants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
+};
+
+export { userCardPropDefs };