@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/image.tsx

@@ -1,308 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-import { imagePropDefs } from './image.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
-import { widthPropDefs } from '../props/width.props.js';
-import { heightPropDefs } from '../props/height.props.js';
-import { layoutPropDefs } from '../props/layout.props.js';
-import { Skeleton } from './skeleton.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { WidthProps } from '../props/width.props.js';
-import type { HeightProps } from '../props/height.props.js';
-import type { LayoutProps } from '../props/layout.props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type ImageElement = React.ElementRef<'img'>;
-
-type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
-  /**
-   * Native loading behavior for the image
-   * @default 'lazy'
-   */
-  loading?: 'eager' | 'lazy';
-  /**
-   * Placeholder image URL to show while the main image is loading (LQIP pattern)
-   */
-  placeholder?: string;
-  /**
-   * Shows a skeleton placeholder while loading
-   */
-  showSkeleton?: boolean;
-  /**
-   * Callback fired when the image successfully loads
-   */
-  onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  /**
-   * Callback fired when the image fails to load
-   */
-  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
-  /**
-   * Alternative text for the image (required for accessibility)
-   */
-  alt: string;
-  /**
-   * Image source URL
-   */
-  src: string;
-  /**
-   * When true, the image will fill its parent container (for Next.js Image compatibility).
-   * Parent must have `position: relative` and defined dimensions.
-   */
-  fill?: boolean;
-};
-
-interface CommonImageProps
-  extends MarginProps,
-    WidthProps,
-    HeightProps,
-    LayoutProps,
-    ImageOwnProps {}
-
-type ImageImgProps = { as?: 'img' } & ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>;
-type ImageComponentProps = { as: React.ComponentType<any> } & Record<string, any>;
-type ImageProps = CommonImageProps & (ImageImgProps | ImageComponentProps);
-
-/**
- * Image component for displaying images with enhanced loading states and accessibility.
- *
- * Supports polymorphic rendering via the `as` prop for Next.js Image compatibility.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <Image src="/photo.jpg" alt="Team photo" />
- *
- * // With Next.js Image (fixed dimensions)
- * import NextImage from 'next/image';
- * <Image as={NextImage} src="/photo.jpg" alt="..." width={400} height={300} />
- *
- * // With Next.js Image (fill mode - parent needs position: relative and dimensions)
- * <div style={{ position: 'relative', width: '100%', aspectRatio: '16/9' }}>
- *   <Image as={NextImage} src="/photo.jpg" alt="..." fill />
- * </div>
- *
- * // With placeholder and skeleton
- * <Image
- *   src="/high-res.jpg"
- *   placeholder="/low-res.jpg"
- *   showSkeleton
- *   alt="Product showcase"
- * />
- *
- * // With caption
- * <Image
- *   src="/chart.png"
- *   alt="Sales data visualization"
- *   caption="Q3 2024 Sales Performance"
- * />
- * ```
- */
-const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
-  // Extract native width/height before extractProps consumes them (for Next.js Image compatibility)
-  const nativeWidth = typeof props.width === 'number' ? props.width : undefined;
-  const nativeHeight = typeof props.height === 'number' ? props.height : undefined;
-  // Check if fill prop is used (for Next.js Image compatibility)
-  const hasFill = 'fill' in props && props.fill === true;
-
-  const {
-    as: Component = 'img',
-    asChild: _asChild, // Extract to prevent passing to DOM element
-    fill: _fill, // Extract to prevent passing to native img element (only used for custom components)
-    className,
-    style,
-    loading = 'lazy',
-    alt,
-    src,
-    placeholder,
-    showSkeleton = false,
-    loadingAriaLabel = 'Loading image...',
-    errorAriaLabel = 'Failed to load image',
-    radius,
-    caption,
-    onLoad: userOnLoad,
-    onError: userOnError,
-    ...restProps
-  } = extractProps(
-    props,
-    imagePropDefs,
-    marginPropDefs,
-    widthPropDefs,
-    heightPropDefs,
-    layoutPropDefs,
-  );
-
-  // When using a custom component (like Next.js Image), pass native width/height and fill
-  const isCustomComponent = Component !== 'img';
-  const componentDimensionProps = isCustomComponent
-    ? { width: nativeWidth, height: nativeHeight, ...(hasFill ? { fill: true } : {}) }
-    : {};
-
-  const [loadingState, setLoadingState] = React.useState<'loading' | 'loaded' | 'error'>('loading');
-  const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);
-  const imgRef = React.useRef<HTMLImageElement>(null);
-
-  const handleLoad = React.useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement>) => {
-      setLoadingState('loaded');
-      setShowPlaceholder(false);
-      userOnLoad?.(event);
-    },
-    [userOnLoad],
-  );
-
-  const handleError = React.useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement>) => {
-      setLoadingState('error');
-      setShowPlaceholder(false);
-      userOnError?.(event);
-    },
-    [userOnError],
-  );
-
-  // Check if image is already cached
-  React.useEffect(() => {
-    const img = imgRef.current;
-    if (img && img.complete && img.naturalWidth > 0) {
-      setLoadingState('loaded');
-      setShowPlaceholder(false);
-    }
-  }, [src]);
-
-  if (!src) {
-    console.warn('Image component: src prop is required');
-    return null;
-  }
-
-  const isLoading = loadingState === 'loading';
-  const isError = loadingState === 'error';
-  const isLoaded = loadingState === 'loaded';
-
-  // When using fill (Next.js Image), don't add dimension/position styles as Next.js handles them
-  const imgStyle: React.CSSProperties = hasFill
-    ? {
-        display: 'block',
-        opacity: isLoaded ? 1 : 0,
-      }
-    : {
-        width: '100%',
-        height: '100%',
-        display: 'block',
-        opacity: isLoaded ? 1 : 0,
-      };
-
-  const mergeRefs = (node: HTMLImageElement | null) => {
-    (imgRef as React.RefObject<HTMLImageElement | null>).current = node;
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(node);
-    } else if (forwardedRef) {
-      forwardedRef.current = node;
-    }
-  };
-
-  const imageElement = (
-    <Component
-      ref={mergeRefs}
-      loading={loading}
-      style={hasFill ? imgStyle : { ...imgStyle, position: 'relative', zIndex: 1 }}
-      className={classNames('rt-reset', 'rt-Image')}
-      alt={alt}
-      src={src}
-      data-radius={radius}
-      onLoad={handleLoad}
-      onError={handleError}
-      aria-busy={isLoading}
-      aria-invalid={isError}
-      aria-describedby={isError ? 'image-error' : undefined}
-      {...componentDimensionProps}
-      {...restProps}
-    />
-  );
-
-  const loadingAnnouncement = isLoading && (
-    <div className="rt-sr-only" aria-live="polite" role="status">
-      {loadingAriaLabel}
-    </div>
-  );
-
-  const errorAnnouncement = isError && (
-    <div id="image-error" className="rt-sr-only" aria-live="polite" role="alert">
-      {errorAriaLabel}
-    </div>
-  );
-
-  const skeletonElement = showSkeleton && isLoading && (
-    <Skeleton width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} />
-  );
-
-  const placeholderElement = placeholder && showPlaceholder && (
-    <img
-      style={{
-        ...imgStyle,
-        position: 'absolute',
-        inset: 0,
-        filter: 'blur(4px)',
-        opacity: 0.7,
-        zIndex: 0,
-      }}
-      className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder')}
-      alt=""
-      src={placeholder}
-    />
-  );
-
-  // Simple flat structure when no caption
-  if (!caption) {
-    // When using fill, wrapper uses absolute positioning to fill the nearest positioned ancestor
-    const wrapperStyle: React.CSSProperties = hasFill
-      ? { position: 'absolute', inset: 0, ...style }
-      : { position: 'relative', ...style };
-    return (
-      <div className={className} style={wrapperStyle}>
-        {loadingAnnouncement}
-        {errorAnnouncement}
-        {skeletonElement}
-        {placeholderElement}
-        {imageElement}
-      </div>
-    );
-  }
-
-  // Flexbox structure when caption is present
-  return (
-    <div
-      className={className}
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          position: 'relative',
-          flex: '1 1 0%',
-          minHeight: 0,
-        }}
-      >
-        {loadingAnnouncement}
-        {errorAnnouncement}
-        {skeletonElement}
-        {placeholderElement}
-        {imageElement}
-      </div>
-
-      <div className="rt-Image-caption" style={{ flex: '0 0 auto' }}>
-        {caption}
-      </div>
-    </div>
-  );
-});
-
-Image.displayName = 'Image';
-
-export { Image };
-export type { ImageProps };

package/src/components/quote.css

@@ -1,16 +0,0 @@
-.rt-Quote {
-  box-sizing: border-box;
-  font-family: var(--quote-font-family);
-  font-size: calc(var(--quote-font-size-adjust) * 1em);
-  font-style: var(--quote-font-style);
-  font-weight: var(--quote-font-weight);
-  line-height: 1.25;
-  letter-spacing: calc(
-    var(--quote-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))
-  );
-  color: inherit;
-
-  & :where(&) {
-    font-size: inherit;
-  }
-}

package/src/components/quote.props.tsx

@@ -1,11 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { textWrapPropDef } from '../props/text-wrap.prop.js';
-import { truncatePropDef } from '../props/truncate.prop.js';
-
-const quotePropDefs = {
-  ...asChildPropDef,
-  ...truncatePropDef,
-  ...textWrapPropDef,
-};
-
-export { quotePropDefs };

package/src/components/quote.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { quotePropDefs } from './quote.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type QuoteElement = React.ElementRef<'q'>;
-type QuoteOwnProps = GetPropDefTypes<typeof quotePropDefs>;
-interface QuoteProps extends ComponentPropsWithout<'q', RemovedProps>, QuoteOwnProps {}
-const Quote = React.forwardRef<QuoteElement, QuoteProps>((props, forwardedRef) => {
-  const { asChild, className, ...quoteProps } = extractProps(props, quotePropDefs);
-  const Comp = asChild ? Slot.Root : 'q';
-  return <Comp {...quoteProps} ref={forwardedRef} className={classNames('rt-Quote', className)} />;
-});
-Quote.displayName = 'Quote';
-
-export { Quote };
-export type { QuoteProps };

package/src/components/radio-cards.css

@@ -1,110 +0,0 @@
-@import './_internal/base-card.css';
-@import './_internal/base-radio.css';
-
-.rt-RadioCardsRoot {
-  line-height: var(--line-height);
-  letter-spacing: var(--letter-spacing);
-  cursor: default;
-}
-
-.rt-RadioCardsItem {
-  --base-card-border-width: var(--border-width-standard);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-
-  & > * {
-    /* Avoid unintentional drag interactions (e.g. on images) */
-    pointer-events: none;
-  }
-  /* stylelint-disable-next-line selector-max-type */
-  & > :where(svg) {
-    /* Don't squish icons */
-    flex-shrink: 0;
-  }
-
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Sizes                */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-@breakpoints {
-  .rt-RadioCardsRoot {
-    /* Size 1 */
-    &:where(.rt-r-size-1) {
-      font-size: var(--font-size-2);
-      --line-height: var(--line-height-2);
-      --letter-spacing: var(--letter-spacing-2);
-    }
-    /* Size 2 */
-    &:where(.rt-r-size-2) {
-      font-size: var(--font-size-2);
-      --line-height: var(--line-height-2);
-      --letter-spacing: var(--letter-spacing-2);
-    }
-    /* Size 3 */
-    &:where(.rt-r-size-3) {
-      font-size: var(--font-size-3);
-      --line-height: var(--line-height-3);
-      --letter-spacing: var(--letter-spacing-3);
-    }
-    /* Size 4 */
-    &:where(.rt-r-size-4) {
-      font-size: var(--font-size-3);
-      --line-height: var(--line-height-3);
-      --letter-spacing: var(--letter-spacing-3);
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*             All checked             */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-RadioCardsItem:where([data-state='checked']) {
-  outline: var(--focus-outline-width) solid var(--accent-solid-indicator);
-  outline-offset: -1px;
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*              All focus              */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-RadioCardsItem:where(:focus-visible) {
-  outline: var(--focus-outline-width) solid var(--focus-8);
-  outline-offset: -1px;
-  &:where([data-state='checked']) {
-    &::before {
-      background-image: linear-gradient(var(--focus-a3), var(--focus-a3));
-    }
-    outline-color: var(--focus-10);
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*            All disabled             */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-RadioCardsItem:where(:disabled) {
-  cursor: var(--cursor-disabled);
-  color: var(--gray-a9);
-
-  &::selection {
-    background-color: var(--gray-a5);
-  }
-  &::before {
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  }
-  outline-color: var(--gray-8);
-}

package/src/components/radio-cards.props.tsx

@@ -1,27 +0,0 @@
-import { cardPropDefs } from './card.props.js';
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { colorPropDef } from '../props/color.prop.js';
-import { gridPropDefs } from './grid.props.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const sizes = ['1', '2', '3', '4'] as const;
-// The same list as Card: a selectable card looks like any other card.
-const variants = cardPropDefs.variant.values;
-
-const radioCardsRootPropDefs = {
-  ...asChildPropDef,
-  /** The Card surface ladder: padding --surface-p-N, corner --radius-surface-N. Unset, it follows the Theme size. */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  ...colorPropDef,
-  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
-  gap: { ...gridPropDefs.gap, default: '4' },
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
-  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
-  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
-};
-
-export { radioCardsRootPropDefs };

package/src/components/radio-cards.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
-
-import { radioCardsRootPropDefs } from './radio-cards.props.js';
-import { Grid } from './grid.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
-
-import type { MarginProps } from '../props/margin.props.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes, Responsive } from '../props/prop-def.js';
-
-type RadioCardsContextValue = {
-  size?: Responsive<(typeof radioCardsRootPropDefs.size.values)[number]>;
-  variant?: (typeof radioCardsRootPropDefs.variant.values)[number];
-};
-
-const RadioCardsContext = React.createContext<RadioCardsContextValue | undefined>(undefined);
-
-const useRadioCardsContext = () => {
-  const context = React.useContext(RadioCardsContext);
-  return context;
-};
-
-type RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
-type RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;
-interface RadioCardsRootProps
-  extends ComponentPropsWithout<
-      typeof RadioGroupPrimitive.Root,
-      'asChild' | 'color' | 'defaultChecked'
-    >,
-    MarginProps,
-    RadioCardsRootOwnProps {}
-const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
-  (ownProps, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, radioCardsRootPropDefs.size);
-    const {
-      className,
-      color,
-      ...rootProps
-    } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
-    // Items read the resolved size, so an unset size still pads them at the default.
-    const size = props.size ?? radioCardsRootPropDefs.size.default;
-    const variant = props.variant;
-    const context = React.useMemo(() => ({ size, variant }), [size, variant]);
-    return (
-      <RadioCardsContext.Provider value={context}>
-        <Grid asChild>
-          <RadioGroupPrimitive.Root
-            data-accent-color={color}
-            {...rootProps}
-            ref={forwardedRef}
-            className={classNames('rt-RadioCardsRoot', className)}
-          />
-        </Grid>
-      </RadioCardsContext.Provider>
-    );
-  },
-);
-RadioCardsRoot.displayName = 'RadioCards.Root';
-
-type RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
-interface RadioCardsItemProps
-  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,
-    MarginProps {}
-const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(
-  ({ className, ...props }, forwardedRef) => {
-    const context = useRadioCardsContext();
-    const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
-    // extractProps writes the responsive size classes (`md:rt-r-size-3`) a template string cannot.
-    const { className: sizeClass } = extractProps(
-      { size: context?.size },
-      { size: radioCardsRootPropDefs.size },
-    );
-
-    return (
-      <RadioGroupPrimitive.Item
-        {...props}
-        asChild={false}
-        ref={forwardedRef}
-        className={classNames(
-          'rt-reset',
-          'rt-BaseCard',
-          'rt-RadioCardsItem',
-          variantClass,
-          sizeClass,
-          className,
-        )}
-      />
-    );
-  },
-);
-RadioCardsItem.displayName = 'RadioCards.Item';
-
-export { RadioCardsRoot as Root, RadioCardsItem as Item };
-export type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };