@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/badge.css

@@ -1,162 +0,0 @@
-.rt-Badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  font-family: var(--default-font-family);
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-  flex-shrink: 0;
-  line-height: 1;
-
-  /* Make sure that the height is not stretched in a Flex/Grid layout */
-  height: fit-content;
-
-  /* Fix Chrome background bleeding on rounded corners */
-  background-clip: padding-box;
-
-  /* Force Chrome to recalculate styles when radius changes */
-  will-change: border-radius;
-
-  isolation: isolate;
-
-  /* Forced colors support */
-  @media (forced-colors: active) {
-    border: 1px solid CanvasText;
-    color: CanvasText;
-    background-color: Canvas;
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
-@breakpoints {
-  .rt-Badge {
-    &:where(.rt-r-size-1) {
-      font-size: var(--font-size-1);
-      line-height: var(--line-height-1);
-      letter-spacing: var(--letter-spacing-1);
-      padding: var(--space-1) var(--space-2);
-      gap: var(--space-2);
-      border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
-    }
-    &:where(.rt-r-size-2) {
-      font-size: var(--font-size-1);
-      line-height: var(--line-height-1);
-      letter-spacing: var(--letter-spacing-1);
-      padding: var(--space-2) var(--space-3);
-      gap: var(--space-2);
-      border-radius: var(--radius-control-1);
-
-      &:where(.rt-variant-ghost) {
-        padding: var(--space-1) var(--space-2);
-      }
-    }
-    &:where(.rt-r-size-3) {
-      font-size: var(--font-size-2);
-      line-height: var(--line-height-2);
-      letter-spacing: var(--letter-spacing-2);
-      padding: var(--space-2) var(--space-4);
-      gap: var(--space-3);
-      border-radius: var(--radius-control-2);
-
-      &:where(.rt-variant-ghost) {
-        padding: var(--space-1) var(--space-3);
-        gap: var(--space-2);
-      }
-    }
-    &:where(.rt-r-size-4) {
-      font-size: var(--font-size-3);
-      line-height: var(--line-height-3);
-      letter-spacing: var(--letter-spacing-3);
-      padding: var(--space-2) var(--space-4);
-      gap: var(--space-3);
-      border-radius: var(--radius-control-3);
-
-      &:where(.rt-variant-ghost) {
-        padding: var(--space-2) var(--space-3);
-      }
-    }
-  }
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * VARIANTS                                                                                        *
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* solid */
-
-.rt-Badge:where(.rt-variant-solid) {
-  background-color: var(--accent-solid);
-  color: var(--accent-solid-contrast);
-
-  &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
-    outline: none;
-    filter: none;
-    cursor: default;
-  }
-}
-
-/* surface */
-
-.rt-Badge:where(.rt-variant-surface) {
-  background-color: var(--accent-2);
-  box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-ink);
-}
-
-/* soft / ghost */
-
-.rt-Badge:where(.rt-variant-soft, .rt-variant-ghost) {
-  color: var(--accent-ink);
-
-  &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
-    cursor: default;
-  }
-}
-
-.rt-Badge:where(.rt-variant-soft) {
-  background-color: var(--accent-3);
-
-  &:where([data-disabled]) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
-    cursor: default;
-  }
-}
-
-/* outline */
-
-.rt-Badge:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-ink);
-}
-
-/* ghost */
-
-.rt-Badge:where(.rt-variant-ghost) {
-  background-color: transparent;
-  color: var(--accent-ink);
-}
-
-/* raised */
-
-.rt-Badge:where(.rt-variant-raised) {
-  position: relative;
-  top: var(--raised-elevation-offset);
-  color: var(--accent-ink);
-  box-shadow: var(--shadow-2);
-
-  --raised-surface: var(--color-surface-solid);
-  background-color: var(--raised-surface);
-}

package/src/components/badge.props.tsx

@@ -1,21 +0,0 @@
-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', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
-
-const badgePropDefs = {
-  ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  ...grayAccentColorPropDef,
-  ...radiusPropDef,
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
-};
-
-export { badgePropDefs };

package/src/components/badge.tsx

@@ -1,85 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { badgePropDefs } from './badge.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
-import { Tooltip } from './tooltip.js';
-
-import type { MarginProps } from '../props/margin.props.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { GetPropDefTypes } from '../props/prop-def.js';
-
-type BadgeElement = React.ElementRef<'span'>;
-type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
-
-// Tooltip props that can be passed to Badge
-interface BadgeTooltipProps {
-  tooltip?: React.ReactNode;
-  tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
-  tooltipAlign?: 'start' | 'center' | 'end';
-  tooltipDelayDuration?: number;
-  tooltipDisableHoverableContent?: boolean;
-}
-
-interface BadgeProps
-  extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
-    BadgeOwnProps,
-    BadgeTooltipProps {}
-
-const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) => {
-  const {
-    asChild,
-    className,
-    children,
-    color,
-    radius,
-    tooltip,
-    tooltipSide = 'top',
-    tooltipAlign = 'center',
-    tooltipDelayDuration,
-    tooltipDisableHoverableContent,
-    ...badgeProps
-  } = extractProps(props, badgePropDefs, marginPropDefs);
-
-
-
-  // Memoize component variable to prevent unnecessary re-renders
-  const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
-
-  const badge = (
-    <Comp
-      data-accent-color={color}
-      data-radius={radius}
-      {...badgeProps}
-      ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Badge', className)}
-    >
-      {children}
-    </Comp>
-  );
-
-  // If no tooltip is provided, return the badge as-is
-  if (!tooltip) {
-    return badge;
-  }
-
-  // Wrap with Tooltip when tooltip content is provided
-  return (
-    <Tooltip
-      content={tooltip}
-      side={tooltipSide}
-      align={tooltipAlign}
-      delayDuration={tooltipDelayDuration}
-      disableHoverableContent={tooltipDisableHoverableContent}
-    >
-      {badge}
-    </Tooltip>
-  );
-});
-Badge.displayName = 'Badge';
-
-export { Badge };
-export type { BadgeProps };

package/src/components/checkbox-cards.css

@@ -1,124 +0,0 @@
-@import './_internal/base-card.css';
-@import './_internal/base-checkbox.css';
-
-.rt-CheckboxCardsRoot {
-  line-height: var(--line-height);
-  letter-spacing: var(--letter-spacing);
-  cursor: default;
-}
-
-.rt-CheckboxCardsItem {
-  --base-card-border-width: var(--border-width-standard);
-  --base-card-padding-right: calc(
-    var(--base-card-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
-  );
-
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  cursor: var(--cursor-button);
-  -webkit-tap-highlight-color: transparent;
-
-  &:where(:has(:focus-visible)) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
-    outline-offset: var(--focus-outline-offset-inset);
-
-    &::after {
-      outline: inherit;
-    }
-  }
-
-  & > * {
-    /* 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;
-  }
-}
-
-.rt-CheckboxCardCheckbox {
-  position: absolute;
-  top: var(--base-card-padding-top);
-  right: var(--base-card-padding-left);
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Sizes                */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-@breakpoints {
-  .rt-CheckboxCardsRoot {
-    /* 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);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-1, calc(16px * var(--scale)));
-    }
-    /* 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);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-2, calc(20px * var(--scale)));
-    }
-    /* 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);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-3, calc(24px * var(--scale)));
-    }
-    /* 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);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-4, calc(26px * var(--scale)));
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         All tap highlights          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-/* Better -webkit-tap-highlight-color */
-.rt-CheckboxCardsItem {
-  @media (pointer: coarse) {
-    &:where(:active:not(:focus-visible)) {
-      &::before {
-        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*            All disabled             */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-CheckboxCardsItem:where(:has(:disabled)) {
-  cursor: var(--cursor-disabled);
-  color: var(--gray-a9);
-
-  &::before {
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  }
-  &::selection {
-    background-color: var(--gray-a5);
-  }
-}

package/src/components/checkbox-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 checkboxCardsRootPropDefs = {
-  ...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(200px, 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 { checkboxCardsRootPropDefs };

package/src/components/checkbox-cards.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import classNames from 'classnames';
-import { Context } from 'radix-ui/internal';
-
-import * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';
-import { createCheckboxGroupScope } from './checkbox-group.primitive.js';
-import { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';
-import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
-import { Grid } from './grid.js';
-import { ThickCheckIcon } from './icons.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { Responsive, GetPropDefTypes } from '../props/prop-def.js';
-
-const CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';
-
-type ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };
-const [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [
-  createCheckboxGroupScope,
-]);
-const useCheckboxGroupScope = createCheckboxGroupScope();
-
-type CheckboxCardsContextValue = {
-  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
-  variant?: (typeof checkboxCardsRootPropDefs.variant.values)[number];
-};
-
-const [CheckboxCardsProvider, useCheckboxCardsContext] =
-  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);
-
-type CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
-type CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;
-interface CheckboxCardsRootProps
-  extends ComponentPropsWithout<
-      typeof CheckboxGroupPrimitive.Root,
-      'asChild' | 'color' | 'defaultChecked'
-    >,
-    MarginProps,
-    CheckboxCardsRootOwnProps {}
-const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
-  (ownProps: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, checkboxCardsRootPropDefs.size);
-    const {
-      __scopeCheckboxCards,
-      className,
-      color,
-      ...rootProps
-    } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
-    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
-    return (
-      <CheckboxCardsProvider
-        scope={__scopeCheckboxCards}
-        size={props.size ?? checkboxCardsRootPropDefs.size.default}
-        variant={props.variant}
-      >
-        <Grid asChild>
-          <CheckboxGroupPrimitive.Root
-            {...checkboxGroupScope}
-            data-accent-color={color}
-            {...rootProps}
-            ref={forwardedRef}
-            className={classNames('rt-CheckboxCardsRoot', className)}
-          />
-        </Grid>
-      </CheckboxCardsProvider>
-    );
-  },
-);
-CheckboxCardsRoot.displayName = 'CheckboxCards.Root';
-
-type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
-interface CheckboxCardsItemProps
-  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
-    MarginProps {}
-const CheckboxCardsItem = React.forwardRef<
-  CheckboxCardsItemElement,
-  ScopedProps<CheckboxCardsItemProps>
->(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {
-  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);
-  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
-
-  const { className: checkboxClassName } = extractProps(
-    // Pass size and variant values from the context to generate styles
-    {
-      size: context?.size,
-      variant: context?.variant || 'solid',
-    },
-    // Pass size & variant prop defs to allow it to be extracted
-    baseCheckboxPropDefs,
-  );
-  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: checkboxCardsRootPropDefs.size },
-  );
-
-  return (
-    <label
-      className={classNames(
-        'rt-BaseCard',
-        'rt-CheckboxCardsItem',
-        variantClass,
-        sizeClass,
-        className,
-      )}
-      style={style}
-    >
-      {children}
-      <CheckboxGroupPrimitive.Item
-        {...checkboxGroupScope}
-        {...props}
-        ref={forwardedRef}
-        className={classNames(
-          'rt-reset',
-          'rt-BaseCheckboxRoot',
-          'rt-CheckboxCardCheckbox',
-          checkboxClassName,
-        )}
-      >
-        <CheckboxGroupPrimitive.Indicator
-          {...checkboxGroupScope}
-          asChild
-          className="rt-BaseCheckboxIndicator"
-        >
-          <ThickCheckIcon />
-        </CheckboxGroupPrimitive.Indicator>
-      </CheckboxGroupPrimitive.Item>
-    </label>
-  );
-});
-CheckboxCardsItem.displayName = 'CheckboxCards.Item';
-
-export { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };
-export type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };

package/src/components/container.css

@@ -1,43 +0,0 @@
-.radix-themes {
-  --container-1: 448px;
-  --container-2: 688px;
-  --container-3: 880px;
-  --container-4: 1136px;
-}
-
-.rt-Container {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.rt-ContainerInner {
-  width: 100%;
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ContainerInner {
-    :where(.rt-Container.rt-r-size-1) & {
-      max-width: var(--container-1);
-    }
-    :where(.rt-Container.rt-r-size-2) & {
-      max-width: var(--container-2);
-    }
-    :where(.rt-Container.rt-r-size-3) & {
-      max-width: var(--container-3);
-    }
-    :where(.rt-Container.rt-r-size-4) & {
-      max-width: var(--container-4);
-    }
-  }
-}

package/src/components/container.props.tsx

@@ -1,84 +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 alignValues = ['left', 'center', 'right'] as const;
-
-const containerPropDefs = {
-  ...asChildPropDef,
-  /**
-   * Controls the **max-width** of the content within the container.
-   * Supports the predefined values and responsive objects.
-   *
-   * @values
-   * | Size     | Max. width |
-   * | :------- | ---------: |
-   * | size="1" | 448px      |
-   * | size="2" | 688px      |
-   * | size="3" | 880px      |
-   * | size="4" | 1136px     |
-   *
-   * @example
-   * size="4"
-   * size={{ sm: '3', lg: '4' }}
-   *
-   * @link
-   * https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/components/container.css
-   */
-  size: {
-    type: 'enum',
-    className: 'rt-r-size',
-    values: sizes,
-    default: '4',
-    responsive: true,
-  },
-  /**
-   * Controls whether the container 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,
-  },
-  /**
-   * Controls the alignment of the content within the container.
-   *
-   * @example
-   * align="center"
-   * align={{ initial: 'left', lg: 'center' }}
-   */
-  align: {
-    type: 'enum',
-    className: 'rt-r-ai',
-    values: alignValues,
-    parseValue: parseAlignValue,
-    responsive: true,
-  },
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  display: PropDef<(typeof displayValues)[number]>;
-  align: PropDef<(typeof alignValues)[number]>;
-};
-
-function parseDisplayValue(value: string) {
-  return value === 'initial' ? 'flex' : value;
-}
-
-function parseAlignValue(value: string) {
-  return value === 'left' ? 'start' : value === 'right' ? 'end' : value;
-}
-
-// Use all of the imported prop defs to ensure that JSDoc works
-type ContainerOwnProps = GetPropDefTypes<typeof containerPropDefs & typeof asChildPropDef>;
-
-export { containerPropDefs };
-export type { ContainerOwnProps };