@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/app-bar.css

@@ -1,204 +0,0 @@
-/* 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

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