@womp/kookie-ui 0.14.4 → 0.15.0

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

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

@@ -1,46 +0,0 @@
-import { parseVariant } from '../helpers/parse-variant.js';
-import { avatarPropDefs } from './avatar.props.js';
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { grayAccentColorPropDef } from '../props/color.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 = ['raised', 'ghost', 'surface', 'classic'] as const;
-// The same list as Avatar.
-const avatarVariants = avatarPropDefs.variant.values;
-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: 'raised', parseValue: parseVariant },
-
-  // 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
-  ...grayAccentColorPropDef,
-  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 };

package/src/components/user-card.tsx

@@ -1,106 +0,0 @@
-'use client';
-
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
-import * as React from 'react';
-import classNames from 'classnames';
-
-import { userCardPropDefs } from './user-card.props.js';
-import { Avatar } from './avatar.js';
-import { Card } from './card.js';
-import { Text } from './text.js';
-import { Flex } from './flex.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { getSubtree } from '../helpers/get-subtree.js';
-import { marginPropDefs } from '../props/margin.props.js';
-import { useThemeContext } from './theme.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type UserCardOwnProps = GetPropDefTypes<typeof userCardPropDefs>;
-
-type UserCardElement = React.ElementRef<'div'>;
-interface UserCardProps
-  extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
-    UserCardOwnProps {}
-
-/** @deprecated Removed from the package in 0.15.0. Copy the UserCard block from the docs instead. */
-const UserCard = React.forwardRef<UserCardElement, UserCardProps>((props, forwardedRef) => {
-  warnDeprecated(
-    'UserCard is deprecated as a package export and will be removed in 0.15.0. Copy the UserCard block from the docs into your project.',
-  );
-  const themeContext = useThemeContext();
-  const resolvedPanelBackground = props.panelBackground ?? themeContext.panelBackground;
-
-  const {
-    asChild,
-    children,
-    className,
-    src,
-    fallback,
-    name,
-    description,
-    avatarVariant,
-    radius,
-    color,
-    panelBackground,
-    flush,
-    ...restProps
-  } = extractProps(props, userCardPropDefs, marginPropDefs);
-
-  // Size mappings for avatar and text
-  const sizeMap = {
-    '1': { avatar: '1', name: '1', description: '0' },
-    '2': { avatar: '2', name: '2', description: '1' },
-    '3': { avatar: '3', name: '3', description: '2' },
-    '4': { avatar: '4', name: '4', description: '3' },
-  } as const;
-
-  const currentSize = props.size || '2';
-  const sizes = sizeMap[currentSize as keyof typeof sizeMap];
-
-  const content = (
-    <Flex align="center" gap="3">
-      <Avatar
-        size={sizes.avatar as any}
-        variant={avatarVariant}
-        radius={radius}
-        src={src}
-        fallback={fallback!}
-        color={color}
-      />
-      <Flex direction="column" gap="0" style={{ minWidth: 0 }}>
-        <Text size={sizes.name as any} weight="medium" truncate>
-          {name}
-        </Text>
-        {description && (
-          <Text size={sizes.description as any} emphasis="medium" truncate>
-            {description}
-          </Text>
-        )}
-      </Flex>
-    </Flex>
-  );
-
-  return (
-    <Card
-      {...restProps}
-      asChild={asChild}
-      size={props.size}
-      variant={props.variant}
-      panelBackground={resolvedPanelBackground}
-      flush={flush}
-      ref={forwardedRef}
-      className={classNames('rt-UserCard', className)}
-    >
-      {getSubtree({ asChild, children }, content)}
-    </Card>
-  );
-});
-
-UserCard.displayName = 'UserCard';
-
-export { UserCard };
-export type { UserCardProps };

package/src/helpers/parse-variant.ts

@@ -1,21 +0,0 @@
-import { warnDeprecated } from './warn-deprecated.js';
-
-/**
- * `classic` was renamed `raised` in 0.14.0. The old name still renders, as `raised`, with a
- * one-time warning in development. Button's `override` is not a look but a way out of the
- * styles, so it warns too. Both are removed in 0.15.0.
- */
-function parseVariant(value: string): string {
-  if (value === 'classic') {
-    warnDeprecated('`variant="classic"` is deprecated and will be removed in 0.15.0. Use `variant="raised"`.');
-    return 'raised';
-  }
-  if (value === 'override') {
-    warnDeprecated(
-      '`variant="override"` is deprecated and will be removed in 0.15.0. Style the component with `className`, `style` or its CSS variables instead.',
-    );
-  }
-  return value;
-}
-
-export { parseVariant };

package/src/helpers/use-deprecation-warning.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-const PANEL_BACKGROUND_MESSAGE = 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.';
-
-const warned = new Set<string>();
-
-function warnOnce(message: string) {
-  if (warned.has(message)) return;
-  warned.add(message);
-  console.warn(message);
-}
-
-/**
- * Warns, in development only, that `panelBackground` is deprecated.
- *
- * The `process.env.NODE_ENV` check is a compile-time constant, so a production
- * bundle minifies the effect body away to an empty function instead of reading
- * props and formatting a message per mounted component. The message is also
- * logged once per session rather than once per component instance.
- */
-export function useDeprecatedPanelBackgroundWarning(panelBackground: unknown) {
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'production') return;
-    if (panelBackground !== undefined) warnOnce(PANEL_BACKGROUND_MESSAGE);
-  }, [panelBackground]);
-}

package/src/styles/tokens/transition.css

@@ -1,189 +0,0 @@
-.radix-themes {
-  /* Duration tokens */
-  --duration-1: 50ms; /* Micro interactions */
-  --duration-2: 75ms; /* Fast transitions */
-  --duration-3: 100ms; /* Standard transitions */
-  --duration-4: 150ms; /* Slower transitions */
-  --duration-5: 200ms; /* Slow animations */
-
-  /* Spring-specific duration tokens */
-  --duration-spring-1: 100ms; /* Quick spring */
-  --duration-spring-2: 150ms; /* Standard spring */
-  --duration-spring-3: 200ms; /* Slow spring */
-
-  /* Easing tokens (spring-aligned) */
-  --ease-1: var(--ease-spring-1); /* Spring default */
-  --ease-2: var(--ease-spring-2); /* Spring bounce */
-  --ease-3: var(--ease-spring-3); /* Spring elastic */
-  --ease-4: var(--ease-spring-1);
-  --ease-5: var(--ease-spring-2);
-
-  /* Spring-specific easing tokens */
-  --ease-spring-1: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Spring out back */
-  --ease-spring-2: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Spring bounce */
-  --ease-spring-3: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring elastic */
-
-  /* Common transition combinations (semantic) */
-  --transition-fast: var(--motion-duration-micro) var(--motion-ease-standard);
-  --transition-standard: var(--motion-duration-small) var(--motion-ease-standard);
-  --transition-slow: var(--motion-duration-medium) var(--motion-ease-smooth);
-
-  /* Spring transition combinations (semantic) */
-  --transition-spring-fast: var(--motion-duration-micro) var(--motion-spring-snappy);
-  --transition-spring-standard: var(--motion-duration-small) var(--motion-spring-snappy);
-  --transition-spring-slow: var(--motion-duration-medium) var(--motion-spring-snappy);
-  --transition-spring-bounce: var(--motion-duration-small) var(--motion-spring-bounce);
-  --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
-
-  /* Semantic motion tokens */
-  --motion-duration-micro: 75ms; /* Micro-interactions (150–250ms) */
-  --motion-duration-small: 150ms; /* Small UI changes (200–400ms) */
-  --motion-duration-medium: 250ms; /* Medium/large changes (400–800ms) */
-  --motion-duration-large: 350ms; /* Large movements (400–800ms) */
-
-  --motion-ease-standard: ease-in-out; /* Most UI changes */
-  --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material-like */
-  --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
-  --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  /* Spring semantics mapped to existing spring curves */
-  --motion-spring-snappy: var(--ease-spring-1);
-  --motion-spring-bounce: var(--ease-spring-2);
-  --motion-spring-elastic: var(--ease-spring-3);
-
-  /* Stagger tokens */
-  --motion-stagger-1: 15ms;
-  --motion-stagger-2: 30ms;
-  --motion-stagger-3: 45ms;
-
-  /* JS-friendly spring params (for future usage) */
-  --spring-snappy-mass: 1;
-  --spring-snappy-stiffness: 280;
-  --spring-snappy-damping: 24;
-  --spring-snappy-initial-velocity: 0;
-
-  --spring-smooth-mass: 1;
-  --spring-smooth-stiffness: 200;
-  --spring-smooth-damping: 30;
-  --spring-smooth-initial-velocity: 0;
-
-  /* Specific component transitions */
-  --transition-button:
-    background var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    transform var(--motion-duration-small) var(--motion-ease-standard),
-    scale var(--motion-duration-small) var(--motion-ease-standard),
-    padding var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-text-field:
-    background var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    scale var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-select:
-    background var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-badge:
-    background var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    padding var(--motion-duration-micro) var(--motion-ease-standard);
-
-  --transition-card:
-    background var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    transform var(--motion-duration-small) var(--motion-ease-standard),
-    scale var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-tabs:
-    color var(--motion-duration-micro) var(--motion-ease-standard),
-    background-color var(--motion-duration-micro) var(--motion-ease-standard),
-    font-weight var(--motion-duration-small) var(--motion-ease-standard),
-    letter-spacing var(--motion-duration-small) var(--motion-ease-standard),
-    word-spacing var(--motion-duration-small) var(--motion-ease-standard),
-    transform var(--motion-duration-micro) var(--motion-spring-snappy);
-
-  --transition-segmented-control:
-    opacity var(--motion-duration-small) var(--motion-ease-standard),
-    transform var(--motion-duration-small) var(--motion-spring-snappy),
-    background-color var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-menu:
-    background var(--motion-duration-micro) var(--motion-ease-standard),
-    color var(--motion-duration-small) var(--motion-ease-standard);
-
-  --transition-checkbox:
-    background-color var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    color var(--motion-duration-micro) var(--motion-ease-standard);
-
-  --transition-radio:
-    background-color var(--motion-duration-small) var(--motion-ease-standard),
-    box-shadow var(--motion-duration-small) var(--motion-ease-standard),
-    color var(--motion-duration-micro) var(--motion-ease-standard);
-
-  --transition-focus:
-    outline var(--motion-duration-small) var(--motion-ease-standard),
-    outline-offset var(--motion-duration-small) var(--motion-ease-standard);
-
-  /* Progress component transition */
-  --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
-
-  /* Accordion component transitions */
-  --transition-accordion-content:
-    height var(--motion-duration-small) var(--motion-spring-snappy),
-    opacity var(--motion-duration-small) var(--motion-spring-snappy),
-    transform var(--motion-duration-small) var(--motion-spring-snappy);
-  --transition-accordion-trigger:
-    background-color var(--motion-duration-small) var(--motion-spring-snappy),
-    transform var(--motion-duration-micro) var(--motion-spring-snappy);
-  --transition-accordion-trigger-active: transform var(--motion-duration-micro)
-    var(--motion-spring-bounce);
-
-  /* GPU-optimized spring transitions */
-  --transition-spring-gpu:
-    transform var(--motion-duration-small) var(--motion-spring-snappy),
-    opacity var(--motion-duration-small) var(--motion-spring-snappy);
-  --transition-spring-gpu-fast:
-    transform var(--motion-duration-micro) var(--motion-spring-snappy),
-    opacity var(--motion-duration-micro) var(--motion-spring-snappy);
-}
-
-/* Respect user preference for reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .radix-themes {
-    --duration-1: 0ms;
-    --duration-2: 0ms;
-    --duration-3: 0ms;
-    --duration-4: 0ms;
-    --duration-5: 0ms;
-    --duration-spring-1: 0ms;
-    --duration-spring-2: 0ms;
-    --duration-spring-3: 0ms;
-    --transition-fast: none;
-    --transition-standard: none;
-    --transition-slow: none;
-    --transition-spring-fast: none;
-    --transition-spring-standard: none;
-    --transition-spring-slow: none;
-    --transition-spring-bounce: none;
-    --transition-spring-elastic: none;
-    --transition-button: none;
-    --transition-text-field: none;
-    --transition-select: none;
-    --transition-badge: none;
-    --transition-card: none;
-    --transition-tabs: none;
-    --transition-segmented-control: none;
-    --transition-menu: none;
-    --transition-checkbox: none;
-    --transition-radio: none;
-    --transition-focus: none;
-    --transition-progress: none;
-    --transition-accordion-content: none;
-    --transition-accordion-trigger: none;
-    --transition-accordion-trigger-active: none;
-    --transition-spring-gpu: none;
-    --transition-spring-gpu-fast: none;
-  }
-}