@womp/kookie-ui 0.14.5 → 0.15.1

package/src/components/app-bar.tsx

@@ -1,261 +0,0 @@
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
-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`.
- */
-/** @deprecated Removed in 0.15.0. Put a `Toolbar` in `Shell.Header`, or at the top edge of the pane that owns it. */
-const AppBarRoot = React.forwardRef<AppBarRootElement, AppBarRootProps>(
-  (props, forwardedRef) => {
-    warnDeprecated(
-      'AppBar is deprecated and will be removed in 0.15.0. Put a Toolbar in Shell.Header, or at the top edge of the pane that owns it.',
-    );
-    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/callout.css

@@ -1,160 +0,0 @@
-.rt-CalloutRoot {
-  box-sizing: border-box;
-  display: grid;
-  align-items: flex-start;
-  justify-content: flex-start;
-  text-align: left;
-  color: var(--accent-ink);
-  transition: var(--transition-card);
-  border-radius: var(--callout-border-radius);
-
-  /* Material system defaults (solid) */
-  --material-blend: 100%;
-  --material-alpha: 0;
-
-  /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --material-blend: 60%;
-    --material-alpha: 1;
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parents */
-  isolation: isolate;
-
-  /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Focus styles for accessibility */
-  &:where(:focus-visible) {
-    outline: 2px solid var(--accent-8);
-    outline-offset: 2px;
-  }
-
-  /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
-  /* Forced colors support */
-  @media (forced-colors: active) {
-    border: 1px solid CanvasText;
-  }
-}
-
-.rt-CalloutIcon {
-  display: flex;
-  align-items: center;
-  grid-column-start: -2;
-  height: var(--callout-icon-height);
-}
-
-/* stylelint-disable-next-line selector-max-type */
-.rt-CalloutIcon :where(svg) {
-  width: var(--callout-icon-size);
-  height: var(--callout-icon-size);
-  flex-shrink: 0;
-}
-
-/* Anything that's not an icon goes to the right of the icon */
-.rt-CalloutRoot > :where(:not(.rt-CalloutIcon)) {
-  grid-column-start: -1;
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-CalloutRoot {
-    &:where(.rt-r-size-1) {
-      row-gap: var(--space-2);
-      column-gap: var(--space-2);
-      padding: var(--space-3);
-      --callout-border-radius: var(--radius-surface-1);
-      --callout-icon-height: var(--line-height-1);
-      --callout-icon-size: var(--content-icon-size-1);
-    }
-    &:where(.rt-r-size-2) {
-      row-gap: var(--space-2);
-      column-gap: var(--space-3);
-      padding: var(--space-4);
-      --callout-border-radius: var(--radius-surface-2);
-      --callout-icon-height: var(--line-height-2);
-      --callout-icon-size: var(--content-icon-size-2);
-    }
-    &:where(.rt-r-size-3) {
-      row-gap: var(--space-3);
-      column-gap: var(--space-4);
-      padding: var(--space-5);
-      --callout-border-radius: var(--radius-surface-3);
-      --callout-icon-height: var(--line-height-3);
-      --callout-icon-size: var(--content-icon-size-3);
-    }
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * VARIANTS                                                                                        *
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* soft */
-
-.rt-CalloutRoot:where(.rt-variant-soft) {
-  background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
-  color: var(--accent-ink);
-}
-
-/* surface */
-
-.rt-CalloutRoot:where(.rt-variant-surface) {
-  background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
-  color: var(--accent-ink);
-}
-
-/* outline */
-
-.rt-CalloutRoot:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
-  color: var(--accent-ink);
-}
-
-/* raised */
-
-.rt-CalloutRoot:where(.rt-variant-raised) {
-  --raised-surface: var(--color-surface-solid);
-  background-color: var(--raised-surface);
-  box-shadow: var(--shadow-2);
-  color: var(--accent-ink);
-  transition: var(--transition-text-field);
-
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    --raised-surface: var(--color-surface-translucent);
-  }
-
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    --raised-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    --raised-surface: var(--color-surface-translucent);
-  }
-}

package/src/components/callout.props.tsx

@@ -1,29 +0,0 @@
-import { parseVariant } from '../helpers/parse-variant.js';
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { grayAccentColorPropDef } from '../props/color.prop.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const sizes = ['1', '2', '3'] as const;
-const variants = ['raised', 'soft', 'surface', 'outline', 'classic'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
-const materials = ['solid', 'translucent'] as const;
-
-const calloutRootPropDefs = {
-  ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
-  ...grayAccentColorPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
-  /**
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
-};
-
-export { calloutRootPropDefs };

package/src/components/callout.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { Text } from './text.js';
-import { calloutRootPropDefs } from './callout.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { mapResponsiveProp, mapCalloutSizeToTextSize } from '../helpers/map-prop-values.js';
-import { marginPropDefs } from '../props/margin.props.js';
-
-import type { MarginProps } from '../props/margin.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type CalloutRootOwnProps = GetPropDefTypes<typeof calloutRootPropDefs>;
-
-type CalloutContextValue = {
-  size?: CalloutRootOwnProps['size'];
-  variant?: CalloutRootOwnProps['variant'];
-  color?: CalloutRootOwnProps['color'];
-};
-const CalloutContext = React.createContext<CalloutContextValue>({});
-
-type CalloutRootElement = React.ElementRef<'div'>;
-interface CalloutRootProps
-  extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
-    CalloutRootOwnProps {
-  /** Controls the ARIA live region behavior for screen readers */
-  live?: 'off' | 'polite' | 'assertive';
-  /** Semantic role for the callout */
-  role?: 'alert' | 'status' | 'note';
-}
-/** @deprecated Removed in 0.15.0. Use `Notice` for a condition that is true now, or `Text` for an aside. */
-const CalloutRoot = React.forwardRef<CalloutRootElement, CalloutRootProps>(
-  (props, forwardedRef) => {
-    warnDeprecated(
-      'Callout is deprecated and will be removed in 0.15.0. Use Notice for a condition that is true now, or Text for an aside.',
-    );
-    const {
-      size = calloutRootPropDefs.size.default,
-      live = 'polite',
-      role = 'status',
-      variant,
-    } = props;
-    const { asChild, children, className, color, panelBackground, material, ...rootProps } =
-      extractProps(props, calloutRootPropDefs, marginPropDefs);
-    const Comp = asChild ? Slot.Root : 'div';
-
-    // Determine appropriate ARIA attributes based on role and live
-    const ariaProps = {
-      role,
-      'aria-live': live,
-      'aria-atomic': true,
-    };
-
-    return (
-      <Comp
-        data-accent-color={color}
-        data-panel-background={panelBackground}
-        data-material={material}
-        {...rootProps}
-        {...ariaProps}
-        className={classNames('rt-CalloutRoot', className)}
-        ref={forwardedRef}
-      >
-        <CalloutContext.Provider
-          value={React.useMemo(() => ({ size, variant, color }), [size, variant, color])}
-        >
-          {children}
-        </CalloutContext.Provider>
-      </Comp>
-    );
-  },
-);
-CalloutRoot.displayName = 'Callout.Root';
-
-type CalloutIconElement = React.ElementRef<'div'>;
-interface CalloutIconProps extends ComponentPropsWithout<'div', RemovedProps> {}
-const CalloutIcon = React.forwardRef<CalloutIconElement, CalloutIconProps>(
-  ({ className, ...props }, forwardedRef) => {
-    return (
-      <div {...props} className={classNames('rt-CalloutIcon', className)} ref={forwardedRef} />
-    );
-  },
-);
-CalloutIcon.displayName = 'Callout.Icon';
-
-type CalloutTextElement = React.ElementRef<'p'>;
-type CalloutTextProps = ComponentPropsAs<typeof Text, 'p'>;
-const CalloutText = React.forwardRef<CalloutTextElement, CalloutTextProps>(
-  ({ className, ...props }, forwardedRef) => {
-    const { size } = React.useContext(CalloutContext);
-    return (
-      <Text
-        as="p"
-        size={mapResponsiveProp(size, mapCalloutSizeToTextSize)}
-        {...props}
-        asChild={false}
-        ref={forwardedRef}
-        className={classNames('rt-CalloutText', className)}
-      />
-    );
-  },
-);
-CalloutText.displayName = 'Callout.Text';
-
-export { CalloutRoot as Root, CalloutIcon as Icon, CalloutText as Text };
-export type {
-  CalloutRootProps as RootProps,
-  CalloutIconProps as IconProps,
-  CalloutTextProps as TextProps,
-};

package/src/components/sidebar.props.tsx

@@ -1,56 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { colorPropDef } from '../props/color.prop.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-// Re-export base menu props for sidebar menu components
-export {
-  baseMenuContentPropDefs as sidebarContentPropDefs,
-  baseMenuItemPropDefs as sidebarItemPropDefs,
-  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,
-  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,
-} from './_internal/base-menu.props.js';
-
-// Sidebar container props
-const sizes = ['1', '2', '3'] as const;
-const variants = ['soft', 'outline', 'surface', 'ghost'] as const;
-const menuVariants = ['solid', 'soft'] as const;
-const types = ['sidebar'] as const;
-const sides = ['left', 'right'] as const;
-const collapsibleModes = ['offcanvas', 'icon', 'none'] as const;
-const layouts = ['rail', 'panel'] as const;
-
-const sidebarPropDefs = {
-  ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },
-  /** @deprecated Removed in 0.15.0. Rows use the soft highlight, and the solid one under `prefers-contrast: more`. */
-  menuVariant: {
-    type: 'enum',
-    className: 'rt-menu-variant',
-    values: menuVariants,
-    default: 'soft',
-  },
-  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },
-  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },
-  collapsible: {
-    type: 'enum',
-    className: 'rt-collapsible',
-    values: collapsibleModes,
-    default: 'offcanvas',
-  },
-  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },
-  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },
-  ...colorPropDef,
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
-  menuVariant: PropDef<(typeof menuVariants)[number]>;
-  type: PropDef<(typeof types)[number]>;
-  side: PropDef<(typeof sides)[number]>;
-  collapsible: PropDef<(typeof collapsibleModes)[number]>;
-  layout: PropDef<(typeof layouts)[number]>;
-  panelBackground: PropDef<'solid' | 'translucent'>;
-};
-
-export { sidebarPropDefs };

package/src/components/user-card.css

@@ -1,29 +0,0 @@
-/* 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);
-    }
-  }
-}