@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/icon-button.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-
-import { BaseButton } from './_internal/base-button.js';
-import { Button } from './button.js';
-import type { BaseButtonProps } from './_internal/base-button.js';
-import type { ButtonRankProps } from './button.js';
-
-type IconButtonElement = React.ElementRef<typeof BaseButton>;
-
-/**
- * Required accessibility props for icon buttons
- * Icon buttons must have an accessible name to meet WCAG guidelines
- *
- * Three ways to provide accessibility:
- * 1. aria-label: Direct descriptive text
- * 2. aria-labelledby: Reference to a label element
- * 3. children: Visible text content (fallback)
- */
-type AccessibilityProps =
-  | { 'aria-label': string; 'aria-labelledby'?: never }
-  | { 'aria-label'?: never; 'aria-labelledby': string }
-  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };
-
-/**
- * Tooltip configuration props that can be passed to IconButton
- * These props are forwarded to the underlying Tooltip component
- */
-interface IconButtonTooltipProps {
-  /** Content to display in the tooltip on hover/focus */
-  tooltip?: React.ReactNode;
-  /** Side of the button where the tooltip should appear */
-  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
-  /** Alignment of the tooltip relative to the button */
-  tooltipAlign?: 'start' | 'center' | 'end';
-  /** Delay before showing the tooltip (in milliseconds) */
-  tooltipDelayDuration?: number;
-  /** Whether to disable hoverable content behavior */
-  tooltipDisableHoverableContent?: boolean;
-}
-
-/**
- * Core IconButton props excluding the 'as' prop for polymorphic behavior
- * Combines BaseButton props with accessibility requirements and tooltip functionality
- */
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant' | 'fullWidth'> & ButtonRankProps & AccessibilityProps & IconButtonTooltipProps;
-
-/**
- * Polymorphic IconButton props that support rendering as different HTML elements
- * @template C - The element type to render as (defaults to 'button')
- */
-type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
-  /** Element type to render as (e.g., 'a', 'span', etc.) */
-  as?: C;
-} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;
-
-/**
- * IconButton component type that supports polymorphic rendering
- * @template C - The element type to render as
- */
-type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> }) => React.ReactElement | null;
-
-/**
- * IconButton component for compact, accessible icon-only interactions. It is `Button` with
- * `iconOnly` set, kept as its own name for its stricter type: an accessible name is required.
- *
- * The IconButton component extends Button with specialized behavior for visual symbols.
- * It enforces accessibility requirements, provides automatic square sizing, and includes
- * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces
- * while maintaining accessibility compliance.
- *
- * Key features:
- * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
- * - Automatic square aspect ratios for consistent visual alignment
- * - Built-in tooltip support for context and guidance
- * - Same variant and size system as Button for consistency
- * - Runtime validation for accessibility compliance
- *
- * @example
- * ```tsx
- * // Basic icon button with aria-label
- * <IconButton aria-label="Settings">
- *   <Settings />
- * </IconButton>
- *
- * // Icon button with tooltip
- * <IconButton aria-label="Save" tooltip="Save your progress">
- *   <Save />
- * </IconButton>
- *
- * // Icon button with aria-labelledby
- * <IconButton aria-labelledby="settings-label">
- *   <Settings />
- * </IconButton>
- * <span id="settings-label">Open settings panel</span>
- *
- * // Icon button with visible text (fallback)
- * <IconButton>
- *   <Settings />
- *   Settings
- * </IconButton>
- * ```
- */
-const IconButton = React.forwardRef(
-  (props: IconButtonProps, forwardedRef: React.ForwardedRef<IconButtonElement>) => <Button {...props} iconOnly ref={forwardedRef} />,
-) as IconButtonComponent & { displayName?: string };
-
-IconButton.displayName = 'IconButton';
-
-export { IconButton };
-export type { IconButtonProps };

package/src/components/image.css

@@ -1,221 +0,0 @@
-/**
- * Image Component Styles
- * 
- * This file contains the core styling for the Image component, providing
- * responsive image display with accessibility features, interactive states,
- * and comprehensive support for different usage contexts.
- * 
- * Key features:
- * - Object-fit control for responsive image scaling
- * - Interactive states for clickable images
- * - Accessibility support (forced colors, reduced motion, screen readers)
- * - Caption styling for additional context
- * - Placeholder and loading state support
- * - AsChild pattern compatibility
- */
-
-/* stylelint-disable selector-max-type */
-/* Disable selector-max-type rule to target `button` and `a` tags. */
-/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
-
-/* 
- * Base Image styling
- * Provides foundation styles for all image instances
- */
-.rt-Image {
-  display: block;
-  object-fit: var(--object-fit); /* Controlled by fit prop */
-  border-radius: var(--radius-2); /* Default radius, can be overridden */
-}
-
-/* 
- * Screen reader only class for accessibility announcements
- * Visually hidden but available to assistive technology
- * Used for error messages and loading state announcements
- */
-.rt-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* 
- * Reduced motion support for accessibility
- * Respects user's motion preferences and disables animations
- */
-
-/* 
- * Forced colors support for high contrast mode
- * Ensures images remain visible in Windows high contrast mode
- */
-@media (forced-colors: active) {
-  .rt-Image {
-    border: 1px solid CanvasText;
-  }
-
-  /* Enhanced focus visibility in forced colors mode */
-  .rt-Image:where(:focus-visible) {
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-}
-
-/* 
- * Interactive states for clickable images
- * Follows the Card component pattern for consistent interaction feedback
- * Applied when Image is used as a link, button, or label
- */
-.rt-Image:where(:any-link, button, label) {
-  cursor: pointer;
- /* Smooth transitions for interactive states */
-
-  /* 
-   * Hover effects with progressive enhancement
-   * Only applies on devices that support hover (excludes touch devices)
-   */
-  @media (hover: hover) {
-    &:where(:hover) {
-      box-shadow: var(--shadow-3); /* Subtle elevation on hover */
-      filter: brightness(1.08) contrast(1.02); /* Slight brightness/contrast boost */
-    }
-  }
-
-  /* 
-   * Active state for pressed/clicked feedback
-   * Provides immediate visual response to user interaction
-   */
-  &:where(:active) {
-    filter: brightness(0.98) contrast(1.02); /* Slightly darker when pressed */
-  }
-
-  /* 
-   * Focus-visible state for keyboard navigation
-   * Ensures accessibility for keyboard users
-   */
-  &:where(:focus-visible) {
-    outline: 2px solid var(--focus-8);
-    outline-offset: -2px; /* Inner outline to stay within image bounds */
-  }
-}
-
-/* 
- * Interactive states for asChild usage
- * When Image is used with asChild pattern, styles apply to the wrapper element
- * This ensures interactive feedback works correctly in composed scenarios
- */
-:where(:any-link, button, label) {
-  cursor: pointer;
- /* Smooth transitions for interactive states */
-
-  /* Hover effects for wrapper elements */
-  @media (hover: hover) {
-    &:where(:hover) {
-      /* box-shadow: var(--shadow-3); */
-      filter: brightness(1.08) contrast(1.02);
-    }
-  }
-
-  /* Active state for wrapper elements */
-  &:where(:active) {
-    filter: brightness(0.98) contrast(1.02);
-  }
-}
-
-/* 
- * Focus states for asChild usage
- * Apply focus outline to the wrapper element when using composition pattern
- */
-:where(:any-link, button, label):where(:focus-visible) .rt-Image {
-  outline: 2px solid var(--focus-8);
-  outline-offset: -2px;
-}
-
-/* 
- * Object-fit variants for responsive image scaling
- * These classes control how images are resized to fit their containers
- * Each variant serves different use cases and design requirements
- */
-
-/* 
- * Cover fit: Scales image to cover entire container
- * May crop edges but ensures no empty space
- * Best for: Hero images, thumbnails, card backgrounds
- */
-.rt-r-fit-cover {
-  --object-fit: cover;
-}
-
-/* 
- * Contain fit: Scales image to fit entirely within container
- * May leave empty space but shows complete image
- * Best for: Product images, logos, artwork
- */
-.rt-r-fit-contain {
-  --object-fit: contain;
-}
-
-/* 
- * Fill fit: Stretches image to fill container exactly
- * May distort aspect ratio, use with caution
- * Best for: When exact dimensions are required regardless of distortion
- */
-.rt-r-fit-fill {
-  --object-fit: fill;
-}
-
-/* 
- * Scale-down fit: Acts like contain but never scales up
- * Prevents small images from becoming pixelated
- * Best for: User-uploaded content, variable-sized images
- */
-.rt-r-fit-scale-down {
-  --object-fit: scale-down;
-}
-
-/* 
- * None fit: Image keeps original size
- * May overflow container or leave empty space
- * Best for: Pixel-perfect images, sprites, when original sizing is important
- */
-.rt-r-fit-none {
-  --object-fit: none;
-}
-
-/* 
- * Loading and placeholder states
- * Styles for different image loading phases
- */
-
-/* 
- * Placeholder image styling
- * Positioned behind the main image with lower z-index
- */
-.rt-Image--placeholder {
-  z-index: 0; /* Ensures placeholder appears behind main image */
-}
-
-/* 
- * Caption styling for additional image context
- * Provides consistent typography and layout for image descriptions
- */
-.rt-Image-caption {
-  font-size: var(--font-size-1); /* Small, readable text */
-  font-weight: var(--font-weight-regular); /* Regular weight for readability */
-  color: var(--gray-11); /* Subtle but readable color */
-  margin-top: var(--space-3); /* Consistent spacing from image */
-  text-align: center; /* Centered alignment for visual balance */
-
-  /* 
-   * Text wrapping and hyphenation for better layout
-   * Prevents caption text from breaking the layout
-   */
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto; /* Automatic hyphenation for long words */
-}

package/src/components/image.props.ts

@@ -1,163 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { radiusPropDef } from '../props/radius.prop.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-/**
- * Available object-fit values for controlling image scaling behavior
- * 
- * - cover: Scales image to cover entire container, may crop edges
- * - contain: Scales image to fit entirely within container, may have empty space
- * - fill: Stretches image to fill container exactly, may distort aspect ratio
- * - scale-down: Acts like 'contain' but never scales up beyond original size
- * - none: Image keeps original size, may overflow or leave empty space
- */
-const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
-
-/**
- * Image component prop definitions that define the component's API
- * 
- * These props control the visual appearance, behavior, and accessibility
- * features of the Image component. The component supports responsive
- * design, accessibility compliance, and flexible layout options.
- * 
- * Key features:
- * - Object-fit control for responsive image scaling
- * - Radius control for rounded corners
- * - Caption support for additional context
- * - Accessibility labels for loading and error states
- * - AsChild pattern for flexible composition
- * 
- * @example
- * ```tsx
- * // Basic image with cover fit
- * <Image src="/photo.jpg" alt="Team photo" fit="cover" />
- * 
- * // Image with caption and custom radius
- * <Image 
- *   src="/chart.png" 
- *   alt="Sales data"
- *   caption="Q3 2024 Performance"
- *   radius="medium"
- * />
- * 
- * // Responsive object-fit
- * <Image 
- *   src="/banner.jpg" 
- *   alt="Hero banner"
- *   fit={{ initial: 'cover', md: 'contain' }}
- * />
- * ```
- */
-const imagePropDefs = {
-  ...asChildPropDef,
-  ...radiusPropDef,
-  /**
-   * Controls how the image should be resized to fit its container
-   * 
-   * Sets the CSS object-fit property with responsive support.
-   * Choose the right fit based on your design needs:
-   * 
-   * - 'cover': Best for hero images, thumbnails, and cards where you want to fill the space
-   * - 'contain': Best for product images, logos, and content where the entire image must be visible
-   * - 'fill': Use carefully, only when you want to stretch the image to exact dimensions
-   * - 'scale-down': Good for user-uploaded content where you don't want to enlarge small images
-   * - 'none': Useful for pixel-perfect images or when you want original sizing
-   * 
-   * @example
-   * ```tsx
-   * // Fill the container, may crop edges
-   * <Image src="/hero.jpg" fit="cover" alt="Hero image" />
-   * 
-   * // Show entire image, may have empty space
-   * <Image src="/logo.png" fit="contain" alt="Company logo" />
-   * 
-   * // Responsive fit
-   * <Image 
-   *   src="/banner.jpg" 
-   *   fit={{ initial: 'cover', lg: 'contain' }}
-   *   alt="Responsive banner"
-   * />
-   * ```
-   *
-   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-   */
-  fit: {
-    type: 'enum',
-    className: 'rt-r-fit',
-    values: objectFitValues,
-    default: 'cover',
-    responsive: true,
-  },
-  /**
-   * ARIA label announced by screen readers during image loading
-   * 
-   * Provides accessibility feedback for users with visual impairments.
-   * Customize this message to match your application's language and tone.
-   * 
-   * @example
-   * ```tsx
-   * <Image 
-   *   src="/chart.jpg" 
-   *   loadingAriaLabel="Loading sales chart..."
-   *   alt="Sales performance chart"
-   * />
-   * ```
-   */
-  loadingAriaLabel: {
-    type: 'string',
-    default: 'Loading image...',
-  },
-  /**
-   * ARIA label announced by screen readers when image loading fails
-   * 
-   * Provides accessibility feedback for error states.
-   * Should clearly indicate that the image failed to load and may suggest alternatives.
-   * 
-   * @example
-   * ```tsx
-   * <Image 
-   *   src="/photo.jpg" 
-   *   errorAriaLabel="Photo failed to load. Please refresh the page."
-   *   alt="Team photo"
-   * />
-   * ```
-   */
-  errorAriaLabel: {
-    type: 'string',
-    default: 'Failed to load image',
-  },
-  /**
-   * Optional caption text displayed below the image
-   * 
-   * Provides additional context, description, or attribution for the image.
-   * The caption is styled consistently and positioned below the image content.
-   * 
-   * Use captions for:
-   * - Photo credits and attributions
-   * - Additional context or explanation
-   * - Data source information for charts
-   * - Descriptive text that supplements the alt attribute
-   * 
-   * @example
-   * ```tsx
-   * <Image 
-   *   src="/chart.png" 
-   *   alt="Q3 sales performance showing 25% growth"
-   *   caption="Data source: Internal sales tracking system"
-   * />
-   * ```
-   */
-  caption: {
-    type: 'string',
-    default: undefined,
-  },
-} satisfies {
-  fit: PropDef<(typeof objectFitValues)[number]>;
-  loadingAriaLabel: PropDef<string>;
-  errorAriaLabel: PropDef<string>;
-  radius: PropDef<'none' | 'small' | 'medium' | 'large' | 'full'>;
-  caption: PropDef<string | undefined>;
-};
-
-export { imagePropDefs };