@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/schemas/icon-button.schema.ts

@@ -1,142 +0,0 @@
-import { z } from 'zod';
-import { BaseButtonSchema } from './base-button.schema.js';
-
-/**
- * IconButton Zod schema - Single source of truth for IconButton component props
- *
- * IconButton is a specialized button component designed for icon-only interactions.
- * It requires proper accessibility attributes to meet WCAG guidelines and provides
- * comprehensive tooltip support for better user experience.
- *
- * Key features:
- * - Required accessibility attributes (aria-label, aria-labelledby, or children)
- * - Tooltip support for better UX
- * - Inherits all BaseButton functionality
- * - Optimized for icon-only interactions
- *
- * @example
- * ```tsx
- * // Basic icon button with aria-label
- * const props = IconButtonSchema.parse({
- *   'aria-label': 'Close dialog',
- *   variant: 'ghost'
- * });
- *
- * // Icon button with tooltip
- * const tooltipProps = IconButtonSchema.parse({
- *   'aria-label': 'Settings',
- *   tooltip: 'Open settings menu',
- *   tooltipSide: 'right'
- * });
- *
- * // Icon button with children (fallback accessibility)
- * const childrenProps = IconButtonSchema.parse({
- *   children: <SettingsIcon />,
- *   variant: 'soft'
- * });
- * ```
- */
-export const IconButtonSchema = BaseButtonSchema.extend({
-  /**
-   * Content to display in the tooltip on hover/focus
-   */
-  tooltip: z.string().optional().describe('Content to display in the tooltip on hover/focus'),
-
-  /**
-   * Side of the button where the tooltip should appear
-   * @default 'top'
-   */
-  tooltipSide: z
-    .enum(['top', 'right', 'bottom', 'left'])
-    .optional()
-    .default('top')
-    .describe('Side of the button where the tooltip should appear'),
-
-  /**
-   * Alignment of the tooltip relative to the button
-   * @default 'center'
-   */
-  tooltipAlign: z
-    .enum(['start', 'center', 'end'])
-    .optional()
-    .default('center')
-    .describe('Alignment of the tooltip relative to the button'),
-
-  /**
-   * Delay before showing the tooltip (in milliseconds)
-   */
-  tooltipDelayDuration: z
-    .number()
-    .optional()
-    .describe('Delay before showing the tooltip (in milliseconds)'),
-
-  /**
-   * Whether to disable hoverable content behavior
-   * @default false
-   */
-  tooltipDisableHoverableContent: z
-    .boolean()
-    .optional()
-    .default(false)
-    .describe('Whether to disable hoverable content behavior'),
-
-  /**
-   * ARIA label for accessibility (required if no aria-labelledby or children)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  'aria-label': z.string().optional().describe('ARIA label for accessibility'),
-
-  /**
-   * ARIA labelled by reference (required if no aria-label or children)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  'aria-labelledby': z.string().optional().describe('ARIA labelled by reference'),
-
-  /**
-   * Children elements (required if no aria-label or aria-labelledby)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  children: z
-    .any()
-    .optional()
-    .describe('Children elements (required for accessibility if no aria-label)'),
-}).refine((data) => data['aria-label'] || data['aria-labelledby'] || data.children, {
-  message:
-    "IconButton must have either 'aria-label', 'aria-labelledby', or 'children' for accessibility",
-  path: ['aria-label', 'aria-labelledby', 'children'],
-});
-
-/**
- * Type derived from IconButton Zod schema
- * This ensures type safety and consistency with the schema
- */
-export type IconButtonProps = z.infer<typeof IconButtonSchema>;
-
-/**
- * Development-only helper to validate and normalize IconButton props
- * This function should only be used in development mode
- *
- * @param props - Props to validate and normalize
- * @returns Validated and normalized props
- *
- * @example
- * ```tsx
- * // In development, this will validate props and show helpful errors
- * const validatedProps = parseIconButtonProps({
- *   variant: 'ghost'
- *   // Missing accessibility - will throw error
- * });
- * // Throws: "IconButton must have either 'aria-label', 'aria-labelledby', or 'children' for accessibility"
- *
- * const validProps = parseIconButtonProps({
- *   'aria-label': 'Close',
- *   variant: 'ghost'
- * });
- * ```
- */
-export function parseIconButtonProps(props: unknown): IconButtonProps {
-  if (process.env.NODE_ENV === 'development') {
-    return IconButtonSchema.parse(props);
-  }
-  return props as IconButtonProps;
-}

package/src/components/schemas/toggle-icon-button.schema.ts

@@ -1,195 +0,0 @@
-import { z } from 'zod';
-import { BaseButtonSchema } from './base-button.schema.js';
-
-/**
- * ToggleIconButton Zod schema - Single source of truth for ToggleIconButton component props
- *
- * ToggleIconButton extends IconButton with toggle functionality using Radix UI's Toggle primitive.
- * It provides proper accessibility announcements, controlled/uncontrolled state management,
- * and seamless integration with the existing IconButton component.
- *
- * Key features:
- * - Required accessibility attributes (aria-label, aria-labelledby, or children)
- * - Controlled and uncontrolled state management
- * - Live accessibility announcements for screen readers
- * - Tooltip support for better UX
- * - Proper ARIA attributes for toggle functionality
- *
- * @example
- * ```tsx
- * // Uncontrolled toggle icon button
- * const props = ToggleIconButtonSchema.parse({
- *   'aria-label': 'Toggle sidebar',
- *   defaultPressed: false,
- *   variant: 'ghost'
- * });
- *
- * // Controlled toggle icon button
- * const controlledProps = ToggleIconButtonSchema.parse({
- *   'aria-label': 'Toggle dark mode',
- *   pressed: true,
- *   onPressedChange: (pressed) => setDarkMode(pressed),
- *   variant: 'soft'
- * });
- *
- * // Toggle icon button with tooltip
- * const tooltipProps = ToggleIconButtonSchema.parse({
- *   'aria-label': 'Toggle notifications',
- *   defaultPressed: false,
- *   tooltip: 'Toggle notification settings',
- *   tooltipSide: 'right'
- * });
- * ```
- */
-export const ToggleIconButtonSchema = BaseButtonSchema.extend({
-  /**
-   * Content to display in the tooltip on hover/focus
-   */
-  tooltip: z.string().optional().describe('Content to display in the tooltip on hover/focus'),
-
-  /**
-   * Side of the button where the tooltip should appear
-   * @default 'top'
-   */
-  tooltipSide: z
-    .enum(['top', 'right', 'bottom', 'left'])
-    .optional()
-    .default('top')
-    .describe('Side of the button where the tooltip should appear'),
-
-  /**
-   * Alignment of the tooltip relative to the button
-   * @default 'center'
-   */
-  tooltipAlign: z
-    .enum(['start', 'center', 'end'])
-    .optional()
-    .default('center')
-    .describe('Alignment of the tooltip relative to the button'),
-
-  /**
-   * Delay before showing the tooltip (in milliseconds)
-   */
-  tooltipDelayDuration: z
-    .number()
-    .optional()
-    .describe('Delay before showing the tooltip (in milliseconds)'),
-
-  /**
-   * Whether to disable hoverable content behavior
-   * @default false
-   */
-  tooltipDisableHoverableContent: z
-    .boolean()
-    .optional()
-    .default(false)
-    .describe('Whether to disable hoverable content behavior'),
-
-  /**
-   * ARIA label for accessibility (required if no aria-labelledby or children)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  'aria-label': z.string().optional().describe('ARIA label for accessibility'),
-
-  /**
-   * ARIA labelled by reference (required if no aria-label or children)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  'aria-labelledby': z.string().optional().describe('ARIA labelled by reference'),
-
-  /**
-   * Children elements (required if no aria-label or aria-labelledby)
-   * Icon buttons must have an accessible name to meet WCAG guidelines
-   */
-  children: z
-    .any()
-    .optional()
-    .describe('Children elements (required for accessibility if no aria-label)'),
-
-  /**
-   * Controlled pressed state
-   * When provided, the component is controlled and the pressed state is managed externally
-   */
-  pressed: z.boolean().optional().describe('Controlled pressed state'),
-
-  /**
-   * Callback when pressed state changes
-   * Called with the new pressed state when the toggle is activated
-   */
-  onPressedChange: z.function().optional().describe('Callback when pressed state changes'),
-
-  /**
-   * Default pressed state for uncontrolled usage
-   * Used as the initial pressed state when the component is uncontrolled
-   */
-  defaultPressed: z.boolean().optional().describe('Default pressed state for uncontrolled usage'),
-})
-  .refine((data: any) => data['aria-label'] || data['aria-labelledby'] || data.children, {
-    message:
-      "ToggleIconButton must have either 'aria-label', 'aria-labelledby', or 'children' for accessibility",
-    path: ['aria-label', 'aria-labelledby', 'children'],
-  })
-  .refine(
-    (data: any) => {
-      // If pressed is provided, onPressedChange should also be provided for controlled usage
-      if (data.pressed !== undefined && data.onPressedChange === undefined) {
-        return false;
-      }
-      return true;
-    },
-    {
-      message: 'When using controlled mode (pressed prop), onPressedChange must also be provided',
-      path: ['onPressedChange'],
-    },
-  )
-  .refine(
-    (data: any) => {
-      // Cannot have both controlled and uncontrolled props
-      if (data.pressed !== undefined && data.defaultPressed !== undefined) {
-        return false;
-      }
-      return true;
-    },
-    {
-      message:
-        'Cannot use both controlled (pressed) and uncontrolled (defaultPressed) props together',
-      path: ['pressed', 'defaultPressed'],
-    },
-  );
-
-/**
- * Type derived from ToggleIconButton Zod schema
- * This ensures type safety and consistency with the schema
- */
-export type ToggleIconButtonProps = z.infer<typeof ToggleIconButtonSchema>;
-
-/**
- * Development-only helper to validate and normalize ToggleIconButton props
- * This function should only be used in development mode
- *
- * @param props - Props to validate and normalize
- * @returns Validated and normalized props
- *
- * @example
- * ```tsx
- * // In development, this will validate props and show helpful errors
- * const invalidProps = parseToggleIconButtonProps({
- *   pressed: true,
- *   defaultPressed: false
- *   // Missing onPressedChange, conflicting controlled/uncontrolled, and missing accessibility
- * });
- * // Throws multiple validation errors
- *
- * const validProps = parseToggleIconButtonProps({
- *   'aria-label': 'Toggle menu',
- *   pressed: true,
- *   onPressedChange: (pressed) => setMenuOpen(pressed)
- * });
- * ```
- */
-export function parseToggleIconButtonProps(props: unknown): ToggleIconButtonProps {
-  if (process.env.NODE_ENV === 'development') {
-    return ToggleIconButtonSchema.parse(props);
-  }
-  return props as ToggleIconButtonProps;
-}

package/src/components/section.css

@@ -1,25 +0,0 @@
-.rt-Section {
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-@breakpoints {
-  .rt-Section {
-    &:where(.rt-r-size-1) {
-      padding-top: var(--space-6);
-      padding-bottom: var(--space-6);
-    }
-    &:where(.rt-r-size-2) {
-      padding-top: var(--space-8);
-      padding-bottom: var(--space-8);
-    }
-    &:where(.rt-r-size-3) {
-      padding-top: var(--space-10);
-      padding-bottom: var(--space-10);
-    }
-    &:where(.rt-r-size-4) {
-      padding-top: calc(80px * var(--scale));
-      padding-bottom: calc(80px * var(--scale));
-    }
-  }
-}

package/src/components/section.props.tsx

@@ -1,63 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-
-import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
-
-const sizes = ['1', '2', '3', '4'] as const;
-const displayValues = ['none', 'initial'] as const;
-
-const sectionPropDefs = {
-  ...asChildPropDef,
-  /**
-   * Controls the vertical padding of the section.
-   *
-   * @values
-   * | Size     | Padding |
-   * | :------- | ------: |
-   * | size="1" | 24px    |
-   * | size="2" | 40px    |
-   * | size="3" | 64px    |
-   * | size="4" | 80px    |
-   *
-   * @example
-   * size="4"
-   * size={{ sm: '3', lg: '4' }}
-   *
-   * @link
-   * https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/components/section.css
-   */
-  size: {
-    type: 'enum',
-    className: 'rt-r-size',
-    values: sizes,
-    default: '3',
-    responsive: true,
-  },
-  /**
-   * Controls whether the section is visible or hidden.
-   * Supports "none", "initial", and responsive object values.
-   *
-   * @example
-   * display="none"
-   * display={{ sm: 'none', lg: 'initial' }}
-   */
-  display: {
-    type: 'enum',
-    className: 'rt-r-display',
-    values: displayValues,
-    parseValue: parseDisplayValue,
-    responsive: true,
-  },
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  display: PropDef<(typeof displayValues)[number]>;
-};
-
-function parseDisplayValue(value: string) {
-  return value === 'initial' ? 'block' : value;
-}
-
-// Use all of the imported prop defs to ensure that JSDoc works
-type SectionOwnProps = GetPropDefTypes<typeof sectionPropDefs & typeof asChildPropDef>;
-
-export { sectionPropDefs };
-export type { SectionOwnProps };

package/src/components/section.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { sectionPropDefs } from './section.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { layoutPropDefs } from '../props/layout.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
-
-import type { LayoutProps } from '../props/layout.props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { SectionOwnProps } from './section.props.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-
-type SectionElement = React.ElementRef<'div'>;
-interface SectionProps
-  extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
-    LayoutProps,
-    SectionOwnProps {}
-const Section = React.forwardRef<SectionElement, SectionProps>((props, forwardedRef) => {
-  const { asChild, className, ...sectionProps } = extractProps(
-    props,
-    sectionPropDefs,
-    layoutPropDefs,
-    marginPropDefs
-  );
-  const Comp = asChild ? Slot.Root : 'section';
-  return (
-    <Comp {...sectionProps} ref={forwardedRef} className={classNames('rt-Section', className)} />
-  );
-});
-Section.displayName = 'Section';
-
-export { Section };
-export type { SectionProps };

package/src/components/skeleton.css

@@ -1,55 +0,0 @@
-.rt-Skeleton {
-  --skeleton-radius: var(--skeleton-radius-override);
-  --skeleton-height: var(--skeleton-height-override);
-  border-radius: var(--radius-1);
-  animation: rt-skeleton-pulse 1000ms infinite alternate-reverse !important;
-  background-image: none !important;
-  background-clip: border-box !important;
-  border: none !important;
-  box-shadow: none !important;
-  box-decoration-break: clone !important;
-  color: transparent !important;
-  outline: none !important;
-  pointer-events: none !important;
-  user-select: none !important;
-  cursor: default !important;
-}
-
-/*
- * Take font differences out of equation for inline Skeletons that just wrap text.
- * This makes the dimensions consistent between the following non-Skeleton and Skeleton text:
- * ```
- * <Text>Example text</Text>
- *
- * <Text>
- *   <Skeleton>Example text</Skeleton>
- * </Text>
- * ```
- *
- * Will NOT collapse Skeletons as the browsers use line-height on inline elements just for alignment.
- */
-.rt-Skeleton:where([data-inline-skeleton]) {
-  line-height: 0;
-  /* Font metrics on Arial yield much nicer height for the text background bounding box */
-  font-family: Arial, sans-serif !important;
-}
-
-:where(.rt-Skeleton:empty) {
-  display: block;
-  height: var(--space-4);
-}
-
-.rt-Skeleton > *,
-.rt-Skeleton::after,
-.rt-Skeleton::before {
-  visibility: hidden !important;
-}
-
-@keyframes rt-skeleton-pulse {
-  from {
-    background-color: var(--gray-a3);
-  }
-  to {
-    background-color: var(--gray-a4);
-  }
-}

package/src/components/skeleton.props.tsx

@@ -1,14 +0,0 @@
-import { heightPropDefs } from '../props/height.props.js';
-import { widthPropDefs } from '../props/width.props.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const skeletonPropDefs = {
-  loading: { type: 'boolean', default: true },
-  ...widthPropDefs,
-  ...heightPropDefs,
-} satisfies {
-  loading: PropDef<boolean>;
-};
-
-export { skeletonPropDefs };

package/src/components/skeleton.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { inert } from '../helpers/inert.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
-import { skeletonPropDefs } from './skeleton.props.js';
-
-import type { MarginProps } from '../props/margin.props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-
-type SkeletonElement = React.ElementRef<'span'>;
-type SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;
-interface SkeletonProps
-  extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
-    SkeletonOwnProps {}
-const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
-  const { children, className, loading, ...skeletonProps } = extractProps(
-    props,
-    skeletonPropDefs,
-    marginPropDefs,
-  );
-
-  if (!loading) return children;
-
-  const Tag = React.isValidElement(children) ? Slot.Root : 'span';
-
-  return (
-    <Tag
-      ref={forwardedRef}
-      aria-hidden
-      className={classNames('rt-Skeleton', className)}
-      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
-      tabIndex={-1}
-      inert={inert}
-      {...skeletonProps}
-    >
-      {children}
-    </Tag>
-  );
-});
-Skeleton.displayName = 'Skeleton';
-
-export { Skeleton };
-export type { SkeletonProps };

package/src/components/strong.css

@@ -1,13 +0,0 @@
-.rt-Strong {
-  font-family: var(--strong-font-family);
-  font-size: calc(var(--strong-font-size-adjust) * 1em);
-  font-style: var(--strong-font-style);
-  font-weight: var(--strong-font-weight);
-  letter-spacing: calc(
-    var(--strong-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))
-  );
-
-  & :where(&) {
-    font-size: inherit;
-  }
-}

package/src/components/strong.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 strongPropDefs = {
-  ...asChildPropDef,
-  ...truncatePropDef,
-  ...textWrapPropDef,
-};
-
-export { strongPropDefs };

package/src/components/strong.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { extractProps } from '../helpers/extract-props.js';
-import { strongPropDefs } from './strong.props.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type StrongElement = React.ElementRef<'strong'>;
-type StrongOwnProps = GetPropDefTypes<typeof strongPropDefs>;
-interface StrongProps extends ComponentPropsWithout<'strong', RemovedProps>, StrongOwnProps {}
-const Strong = React.forwardRef<StrongElement, StrongProps>((props, forwardedRef) => {
-  const { asChild, className, ...strongProps } = extractProps(props, strongPropDefs);
-  const Comp = asChild ? Slot.Root : 'strong';
-  return (
-    <Comp {...strongProps} ref={forwardedRef} className={classNames('rt-Strong', className)} />
-  );
-});
-Strong.displayName = 'Strong';
-
-export { Strong };
-export type { StrongProps };

package/src/components/tab-nav.css

@@ -1,5 +0,0 @@
-@import './_internal/base-tab-list.css';
-
-.rt-TabNavItem {
-  display: flex;
-}

package/src/components/tab-nav.props.tsx

@@ -1,13 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const tabNavLinkPropDefs = {
-  ...asChildPropDef,
-  active: { type: 'boolean', default: false },
-} satisfies {
-  active: PropDef<boolean>;
-};
-
-export { baseTabListPropDefs as tabNavRootPropDefs } from './_internal/base-tab-list.props.js';
-export { tabNavLinkPropDefs };