@womp/kookie-ui 0.20.0 → 0.21.0

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

package/src/components/container.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { containerPropDefs } from './container.props.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { getSubtree } from '../helpers/get-subtree.js';
-import { heightPropDefs } from '../props/height.props.js';
-import { layoutPropDefs } from '../props/layout.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
-import { widthPropDefs } from '../props/width.props.js';
-
-import type { LayoutProps } from '../props/layout.props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { ContainerOwnProps } from './container.props.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-
-type ContainerElement = React.ElementRef<'div'>;
-interface ContainerProps
-  extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
-    LayoutProps,
-    ContainerOwnProps {}
-const Container = React.forwardRef<ContainerElement, ContainerProps>(
-  ({ width, minWidth, maxWidth, height, minHeight, maxHeight, ...props }, forwardedRef) => {
-    const { asChild, children, className, ...containerProps } = extractProps(
-      props,
-      containerPropDefs,
-      layoutPropDefs,
-      marginPropDefs
-    );
-
-    const { className: innerClassName, style: innerStyle } = extractProps(
-      { width, minWidth, maxWidth, height, minHeight, maxHeight },
-      widthPropDefs,
-      heightPropDefs
-    );
-
-    const Comp = asChild ? Slot.Root : 'div';
-
-    return (
-      <Comp
-        {...containerProps}
-        ref={forwardedRef}
-        className={classNames('rt-Container', className)}
-      >
-        {getSubtree({ asChild, children }, (children) => (
-          <div className={classNames('rt-ContainerInner', innerClassName)} style={innerStyle}>
-            {children}
-          </div>
-        ))}
-      </Comp>
-    );
-  }
-);
-Container.displayName = 'Container';
-
-export { Container };
-export type { ContainerProps };

package/src/components/data-list.css

@@ -1,254 +0,0 @@
-.rt-DataListRoot {
-  overflow-wrap: anywhere;
-  font-family: var(--default-font-family);
-  font-weight: var(--font-weight-normal);
-  font-style: normal;
-  text-align: start;
-}
-
-.rt-DataListLabel {
-  display: flex;
-  color: var(--gray-ink-muted);
-
-  /* Emphasis ladder. The prop defaults to 'medium', which matches the base colour above. */
-  &:where(.rt-emphasis-loud) {
-    color: var(--gray-ink);
-  }
-  &:where(.rt-emphasis-quiet) {
-    color: var(--gray-ink-faint);
-  }
-  &:where([data-accent-color]) {
-    color: var(--accent-ink);
-  }
-  &:where([data-accent-color].rt-emphasis-medium) {
-    color: var(--accent-ink-muted);
-  }
-  &:where([data-accent-color].rt-emphasis-quiet) {
-    color: var(--accent-ink-faint);
-  }
-}
-
-.rt-DataListValue {
-  display: flex;
-  margin: 0;
-
-  /* Ensure value can be truncated */
-  min-width: 0px;
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * ORIENTATION                                                                                     *
- *                                                                                                 *
- ***************************************************************************************************/
-
-.rt-DataListItem {
-  /* The actual margins that value part gets. These are re-assigned to other vars depending on the orientation */
-  --data-list-value-margin-top: 0px;
-  --data-list-value-margin-bottom: 0px;
-  --data-list-first-item-value-margin-top: 0px;
-  --data-list-last-item-value-margin-bottom: 0px;
-
-  /* How much the value part can poke outside of the row when in a horizontal data list */
-  --data-list-value-trim-start: -0.25em;
-  --data-list-value-trim-end: -0.25em;
-  --data-list-first-item-value-trim-start: 0px;
-  --data-list-last-item-value-trim-end: 0px;
-}
-
-.rt-DataListValue {
-  margin-top: var(--data-list-value-margin-top);
-  margin-bottom: var(--data-list-value-margin-bottom);
-
-  /*
-   * The first/last item should not poke out of the Root boundaries –
-   * unless it has "align-items: center", but that’s handled later.
-   */
-  :where(.rt-DataListItem:first-child) & {
-    margin-top: var(--data-list-first-item-value-margin-top);
-  }
-  :where(.rt-DataListItem:last-child) & {
-    margin-bottom: var(--data-list-last-item-value-margin-bottom);
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Sizes                */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-@breakpoints {
-  .rt-DataListRoot {
-    &:where(.rt-r-size-1) {
-      gap: var(--space-4);
-    }
-    &:where(.rt-r-size-2) {
-      gap: var(--space-5);
-    }
-    &:where(.rt-r-size-3) {
-      gap: calc(var(--space-5) * 1.25);
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*             Orientation             */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-@breakpoints {
-  .rt-DataListRoot {
-    &:where(.rt-r-orientation-vertical) {
-      display: flex;
-      flex-direction: column;
-
-      & :where(.rt-DataListItem) {
-        /* No poking out of the row when orientation is vertical */
-        --data-list-value-margin-top: 0px;
-        --data-list-value-margin-bottom: 0px;
-        --data-list-first-item-value-margin-top: 0px;
-        --data-list-last-item-value-margin-bottom: 0px;
-
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-2);
-      }
-
-      & :where(.rt-DataListLabel) {
-        /* Ensure label can be truncated */
-        min-width: 0px;
-      }
-    }
-
-    &:where(.rt-r-orientation-horizontal) {
-      display: grid;
-      grid-template-columns: auto 1fr;
-
-      & :where(.rt-DataListItem) {
-        /* Allow the value to poke out of the row when orientation is horizontal */
-        --data-list-value-margin-top: var(--data-list-value-trim-start);
-        --data-list-value-margin-bottom: var(--data-list-value-trim-end);
-        --data-list-first-item-value-margin-top: var(--data-list-first-item-value-trim-start);
-        --data-list-last-item-value-margin-bottom: var(--data-list-last-item-value-trim-end);
-
-        display: grid;
-        /* Use subgrid so all the label columns remain aligned */
-        grid-template-columns: inherit; /* Fallback */
-        grid-template-columns: subgrid;
-        gap: inherit;
-        grid-column: span 2;
-        align-items: baseline;
-      }
-
-      & :where(.rt-DataListLabel) {
-        /* Set an implicit min. width when orientation is horizontal */
-        min-width: 120px;
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*              Alignment              */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-DataListLabel,
-.rt-DataListValue {
-  &::before {
-    /*
-     * Zero-width joiner to establish a baseline.
-     * Allows Flex children with text to align automatically.
-     */
-    content: '‍';
-  }
-}
-
-@breakpoints {
-  /*
-   * Make sure that the margin adjustments cooperate with "align-items".
-   * To do that, we need to remove the corresponding margin adjustment depending on the "align-items" value.
-   * We can't set `--data-list-value-margin-top` directly because at breakpoints it would lose the orientation value.
-   */
-  .rt-DataListItem {
-    /* Match the default: poke out at the top and bottom, but not when it’s the first or last item */
-    &:where(.rt-r-ai-baseline) {
-      --data-list-value-trim-start: -0.25em;
-      --data-list-value-trim-end: -0.25em;
-      --data-list-first-item-value-trim-start: 0px;
-      --data-list-last-item-value-trim-end: 0px;
-    }
-    /* No poking out at the top; and not at the bottom when it’s the first or last item */
-    &:where(.rt-r-ai-start) {
-      --data-list-value-trim-start: 0px;
-      --data-list-value-trim-end: -0.25em;
-      --data-list-first-item-value-trim-start: 0px;
-      --data-list-last-item-value-trim-end: 0px;
-    }
-    /* Allow to poke out from any side, as for centering to work the top and bottom margins have to be always equal */
-    &:where(.rt-r-ai-center) {
-      --data-list-value-trim-start: -0.25em;
-      --data-list-value-trim-end: -0.25em;
-      --data-list-first-item-value-trim-start: -0.25em;
-      --data-list-last-item-value-trim-end: -0.25em;
-    }
-    /* No poking out at the bottom; and not at the top when it’s the first or last item */
-    &:where(.rt-r-ai-end) {
-      --data-list-value-trim-start: -0.25em;
-      --data-list-value-trim-end: 0px;
-      --data-list-first-item-value-trim-start: 0px;
-      --data-list-last-item-value-trim-end: 0px;
-    }
-    /* No poking out when stretched */
-    &:where(.rt-r-ai-stretch) {
-      --data-list-value-trim-start: 0px;
-      --data-list-value-trim-end: 0px;
-      --data-list-first-item-value-trim-start: 0px;
-      --data-list-last-item-value-trim-end: 0px;
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Trim                 */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-DataListRoot {
-  --data-list-leading-trim-start: calc(var(--default-leading-trim-start) - var(--line-height) / 2);
-  --data-list-leading-trim-end: calc(var(--default-leading-trim-end) - var(--line-height) / 2);
-}
-
-.rt-DataListItem {
-  &:where(:first-child) {
-    margin-top: var(--leading-trim-start);
-  }
-  &:where(:last-child) {
-    margin-bottom: var(--leading-trim-end);
-  }
-}
-
-@breakpoints {
-  .rt-DataListRoot {
-    &:where(.rt-r-trim-normal) {
-      --leading-trim-start: initial;
-      --leading-trim-end: initial;
-    }
-    &:where(.rt-r-trim-start) {
-      --leading-trim-start: var(--data-list-leading-trim-start);
-      --leading-trim-end: initial;
-    }
-    &:where(.rt-r-trim-end) {
-      --leading-trim-start: initial;
-      --leading-trim-end: var(--data-list-leading-trim-end);
-    }
-    &:where(.rt-r-trim-both) {
-      --leading-trim-start: var(--data-list-leading-trim-start);
-      --leading-trim-end: var(--data-list-leading-trim-end);
-    }
-  }
-}

package/src/components/data-list.props.tsx

@@ -1,57 +0,0 @@
-import { colorPropDef } from '../props/color.prop.js';
-import { emphasisPropDef, emphases } from '../props/emphasis.prop.js';
-import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
-import { widthPropDefs } from '../props/width.props.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
-const orientationValues = ['horizontal', 'vertical'] as const;
-const sizes = ['1', '2', '3'] as const;
-
-const dataListRootPropDefs = {
-  orientation: {
-    type: 'enum',
-    className: 'rt-r-orientation',
-    values: orientationValues,
-    default: 'horizontal',
-    responsive: true,
-  },
-  size: {
-    type: 'enum',
-    className: 'rt-r-size',
-    values: sizes,
-    default: '2',
-    responsive: true,
-  },
-  trim: {
-    ...leadingTrimPropDef.trim,
-    className: 'rt-r-trim', // Custom trim styles due to grid layout
-  },
-} satisfies {
-  orientation: PropDef<(typeof orientationValues)[number]>;
-  size: PropDef<(typeof sizes)[number]>;
-  trim: typeof leadingTrimPropDef.trim;
-};
-
-const dataListItemPropDefs = {
-  align: {
-    type: 'enum',
-    className: 'rt-r-ai',
-    values: alignValues,
-    responsive: true,
-  },
-} satisfies {
-  align: PropDef<(typeof alignValues)[number]>;
-};
-
-const dataListLabelPropDefs = {
-  ...widthPropDefs,
-  ...colorPropDef,
-  // Labels read as secondary copy by default; 'loud' gives them full-strength ink.
-  emphasis: { ...emphasisPropDef.emphasis, default: 'medium' },
-} satisfies {
-  emphasis: PropDef<(typeof emphases)[number]>;
-};
-
-export { dataListRootPropDefs, dataListItemPropDefs, dataListLabelPropDefs };

package/src/components/data-list.tsx

@@ -1,102 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-
-import { Text } from './text.js';
-import {
-  dataListRootPropDefs,
-  dataListItemPropDefs,
-  dataListLabelPropDefs,
-} from './data-list.props.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 } from '../props/prop-def.js';
-
-type DataListRootElement = HTMLDListElement;
-type DataListRootOwnProps = GetPropDefTypes<typeof dataListRootPropDefs>;
-interface DataListRootProps
-  extends ComponentPropsWithout<'dl', RemovedProps>,
-    MarginProps,
-    DataListRootOwnProps {}
-const DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(
-  (ownProps, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, dataListRootPropDefs.size);
-    const { className, ...dataListProps } = extractProps(
-      props,
-      dataListRootPropDefs,
-      marginPropDefs
-    );
-    return (
-      <Text asChild>
-        <dl
-          {...dataListProps}
-          ref={forwardedRef}
-          className={classNames('rt-DataListRoot', className)}
-        />
-      </Text>
-    );
-  }
-);
-DataListRoot.displayName = 'DataList.Root';
-
-type DataListItemElement = HTMLDivElement;
-type DataListItemOwnProps = GetPropDefTypes<typeof dataListItemPropDefs>;
-interface DataListItemProps
-  extends ComponentPropsWithout<'div', RemovedProps>,
-    DataListItemOwnProps {}
-const DataListItem = React.forwardRef<DataListItemElement, DataListItemProps>(
-  (props, forwardedRef) => {
-    const { className, ...itemProps } = extractProps(props, dataListItemPropDefs);
-    return (
-      <div {...itemProps} ref={forwardedRef} className={classNames('rt-DataListItem', className)} />
-    );
-  }
-);
-DataListItem.displayName = 'DataList.Item';
-
-type DataListLabelElement = React.ElementRef<'dt'>;
-type DataListLabelOwnProps = GetPropDefTypes<typeof dataListLabelPropDefs>;
-interface DataListLabelProps
-  extends ComponentPropsWithout<'dt', RemovedProps>,
-    DataListLabelOwnProps {}
-const DataListLabel = React.forwardRef<DataListLabelElement, DataListLabelProps>(
-  (props, forwardedRef) => {
-    const { className, color, ...labelProps } = extractProps(props, dataListLabelPropDefs);
-    return (
-      <dt
-        {...labelProps}
-        data-accent-color={color}
-        ref={forwardedRef}
-        className={classNames('rt-DataListLabel', className)}
-      />
-    );
-  }
-);
-DataListLabel.displayName = 'DataList.Label';
-
-type DataListValueElement = React.ElementRef<'dd'>;
-interface DataListValueProps extends ComponentPropsWithout<'dd', RemovedProps> {}
-const DataListValue = React.forwardRef<DataListValueElement, DataListValueProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <dd {...props} ref={forwardedRef} className={classNames(className, 'rt-DataListValue')}>
-      {children}
-    </dd>
-  )
-);
-DataListValue.displayName = 'DataList.Value';
-
-export {
-  DataListRoot as Root,
-  DataListItem as Item,
-  DataListLabel as Label,
-  DataListValue as Value,
-};
-export type {
-  DataListRootProps as RootProps,
-  DataListItemProps as ItemProps,
-  DataListLabelProps as LabelProps,
-  DataListValueProps as ValueProps,
-};

package/src/components/em.css

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

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

package/src/components/em.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { Slot } from 'radix-ui';
-
-import { emPropDefs } from './em.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 EmElement = React.ElementRef<'em'>;
-type EmOwnProps = GetPropDefTypes<typeof emPropDefs>;
-interface EmProps extends ComponentPropsWithout<'em', RemovedProps>, EmOwnProps {}
-const Em = React.forwardRef<EmElement, EmProps>((props, forwardedRef) => {
-  const { asChild, className, ...emProps } = extractProps(props, emPropDefs);
-  const Comp = asChild ? Slot.Root : 'em';
-  return <Comp {...emProps} ref={forwardedRef} className={classNames('rt-Em', className)} />;
-});
-Em.displayName = 'Em';
-
-export { Em };
-export type { EmProps };

package/src/components/hover-card.css

@@ -1,39 +0,0 @@
-.rt-HoverCardContent {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-4);
-  overflow: auto;
-  position: relative;
-  z-index: 200; /* Above dialogs (100) so hover cards inside dialogs/sheets work */
-
-  padding: var(--hover-card-content-padding);
-  box-sizing: border-box;
-
-  transform-origin: var(--radix-hover-card-content-transform-origin);
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-HoverCardContent {
-    &:where(.rt-r-size-1) {
-      --hover-card-content-padding: var(--surface-p-1);
-      border-radius: var(--radius-surface-1);
-    }
-    &:where(.rt-r-size-2) {
-      --hover-card-content-padding: var(--surface-p-2);
-      border-radius: var(--radius-surface-2);
-    }
-    &:where(.rt-r-size-3) {
-      --hover-card-content-padding: var(--surface-p-3);
-      border-radius: var(--radius-surface-3);
-    }
-    &:where(.rt-r-size-4) {
-      --hover-card-content-padding: var(--surface-p-4);
-      border-radius: var(--radius-surface-4);
-    }
-  }
-}

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

@@ -1,37 +0,0 @@
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { heightPropDefs } from '../props/height.props.js';
-import { widthPropDefs } from '../props/width.props.js';
-
-import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
-
-const contentSizes = ['1', '2', '3', '4'] as const;
-
-const hoverCardContentPropDefs = {
-  ...asChildPropDef,
-  size: {
-    type: 'enum',
-    className: 'rt-r-size',
-    values: contentSizes,
-    default: '2',
-    responsive: true,
-  },
-  width: widthPropDefs.width,
-  minWidth: widthPropDefs.minWidth,
-  maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
-  ...heightPropDefs,
-} satisfies {
-  width: PropDef<string>;
-  minWidth: PropDef<string>;
-  maxWidth: PropDef<string>;
-  size: PropDef<(typeof contentSizes)[number]>;
-};
-
-type HoverCardContentOwnProps = GetPropDefTypes<
-  typeof hoverCardContentPropDefs &
-    typeof asChildPropDef &
-    typeof widthPropDefs &
-    typeof heightPropDefs
->;
-
-export { hoverCardContentPropDefs };
-export type { HoverCardContentOwnProps };