@kushagradhawan/kookie-ui 0.1.0

package/src/components/grid.props.tsx

@@ -0,0 +1,181 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { gapPropDefs } from '../props/gap.props.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const as = ['div', 'span'] as const;
+const displayValues = ['none', 'inline-grid', 'grid'] as const;
+const columnsValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const rowsValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const flowValues = ['row', 'column', 'dense', 'row-dense', 'column-dense'] as const;
+const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+const justifyValues = ['start', 'center', 'end', 'between'] as const;
+
+const gridPropDefs = {
+  /**
+   * Controls whether to render **div** or **span**
+   *
+   * @example
+   * as="div"
+   * as="span"
+   */
+  as: { type: 'enum', values: as, default: 'div' },
+  ...asChildPropDef,
+  /**
+   * Sets the CSS **display** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * display="inline-grid"
+   * display={{ sm: 'none', lg: 'grid' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   */
+  display: {
+    type: 'enum',
+    className: 'rt-r-display',
+    values: displayValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **grid-template** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * template='"header header" "sidebar content"'
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+   */
+  areas: {
+    type: 'string',
+    className: 'rt-r-gta',
+    customProperties: ['--grid-template-areas'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **grid-template-columns** property.
+   * Supports numeric string values, CSS strings and responsive objects.
+   *
+   * Use numeric string values to create grid columns of even size.
+   *
+   * @example
+   * columns="3"
+   * columns="100px 1fr"
+   * columns={{ xs: '1', md: 'auto 1fr' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+   */
+  columns: {
+    type: 'enum | string',
+    className: 'rt-r-gtc',
+    customProperties: ['--grid-template-columns'],
+    values: columnsValues,
+    parseValue: parseGridValue,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **grid-template-rows** property.
+   * Supports numeric string values, CSS strings and responsive objects.
+   *
+   * Use numeric string values to create grid rows of even size.
+   *
+   * @example
+   * rows="3"
+   * rows="100px 1fr"
+   * rows={{ xs: '1', md: 'auto 1fr' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+   */
+  rows: {
+    type: 'enum | string',
+    className: 'rt-r-gtr',
+    customProperties: ['--grid-template-rows'],
+    values: rowsValues,
+    parseValue: parseGridValue,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **grid-auto-flow** property.
+   * Supports the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * flow="column"
+   * flow={{ sm: 'column', lg: 'row' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+   */
+  flow: {
+    type: 'enum',
+    className: 'rt-r-gaf',
+    values: flowValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **align-items** property.
+   * Supports the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * align="center"
+   * align={{ sm: 'baseline', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+   */
+  align: {
+    type: 'enum',
+    className: 'rt-r-ai',
+    values: alignValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **justify-content** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * justify="between"
+   * justify={{ sm: 'start', lg: 'center' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+   */
+  justify: {
+    type: 'enum',
+    className: 'rt-r-jc',
+    values: justifyValues,
+    parseValue: parseJustifyValue,
+    responsive: true,
+  },
+  ...gapPropDefs,
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+  display: PropDef<(typeof displayValues)[number]>;
+  areas: PropDef<string>;
+  columns: PropDef<(typeof columnsValues)[number]>;
+  rows: PropDef<(typeof rowsValues)[number]>;
+  flow: PropDef<(typeof flowValues)[number]>;
+  align: PropDef<(typeof alignValues)[number]>;
+  justify: PropDef<(typeof justifyValues)[number]>;
+};
+
+function parseGridValue(value: string): string {
+  if ((gridPropDefs.columns.values as readonly string[]).includes(value)) {
+    return value;
+  }
+
+  return value?.match(/^\d+$/) ? `repeat(${value}, minmax(0, 1fr))` : value;
+}
+
+function parseJustifyValue(value: string) {
+  return value === 'between' ? 'space-between' : value;
+}
+
+// Use all of the imported prop defs to ensure that JSDoc works
+type GridOwnProps = GetPropDefTypes<typeof gridPropDefs & typeof asChildPropDef>;
+
+export { gridPropDefs };
+export type { GridOwnProps };

package/src/components/grid.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Slot } from './slot.js';
+import { gridPropDefs } from './grid.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 { GridOwnProps } from './grid.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type GridElement = React.ElementRef<'div'>;
+interface CommonGridProps extends MarginProps, LayoutProps, GridOwnProps {}
+type GridDivProps = { as?: 'div' } & ComponentPropsWithout<'div', RemovedProps>;
+type GridSpanProps = { as: 'span' } & ComponentPropsWithout<'span', RemovedProps>;
+type GridProps = CommonGridProps & (GridSpanProps | GridDivProps);
+
+const Grid = React.forwardRef<GridElement, GridProps>((props, forwardedRef) => {
+  const {
+    className,
+    asChild,
+    as: Tag = 'div',
+    ...gridProps
+  } = extractProps(props, gridPropDefs, layoutPropDefs, marginPropDefs);
+  const Comp = asChild ? Slot : Tag;
+  return <Comp {...gridProps} ref={forwardedRef} className={classNames('rt-Grid', className)} />;
+});
+Grid.displayName = 'Grid';
+
+export { Grid };
+export type { GridProps };

package/src/components/heading.css

@@ -0,0 +1,82 @@
+.rt-Heading {
+  --leading-trim-start: var(--heading-leading-trim-start);
+  --leading-trim-end: var(--heading-leading-trim-end);
+  font-family: var(--heading-font-family);
+  font-style: var(--heading-font-style);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height);
+
+  :where(&) {
+    margin: 0;
+  }
+
+  &:where([data-accent-color]) {
+    color: var(--accent-a11);
+  }
+
+  &:where([data-accent-color].rt-high-contrast),
+  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Heading {
+    &:where(.rt-r-size-0) {
+      font-size: calc(var(--font-size-0) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-0);
+      letter-spacing: calc(var(--letter-spacing-0) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-1) {
+      font-size: calc(var(--font-size-1) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-1);
+      letter-spacing: calc(var(--letter-spacing-1) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-2) {
+      font-size: calc(var(--font-size-2) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-2);
+      letter-spacing: calc(var(--letter-spacing-2) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-3) {
+      font-size: calc(var(--font-size-3) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-3);
+      letter-spacing: calc(var(--letter-spacing-3) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-4) {
+      font-size: calc(var(--font-size-4) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-4);
+      letter-spacing: calc(var(--letter-spacing-4) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-5) {
+      font-size: calc(var(--font-size-5) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-5);
+      letter-spacing: calc(var(--letter-spacing-5) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-6) {
+      font-size: calc(var(--font-size-6) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-6);
+      letter-spacing: calc(var(--letter-spacing-6) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-7) {
+      font-size: calc(var(--font-size-7) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-7);
+      letter-spacing: calc(var(--letter-spacing-7) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-8) {
+      font-size: calc(var(--font-size-8) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-8);
+      letter-spacing: calc(var(--letter-spacing-8) + var(--heading-letter-spacing));
+    }
+    &:where(.rt-r-size-9) {
+      font-size: calc(var(--font-size-9) * var(--heading-font-size-adjust));
+      --line-height: var(--heading-line-height-9);
+      letter-spacing: calc(var(--letter-spacing-9) + var(--heading-letter-spacing));
+    }
+  }
+}

package/src/components/heading.props.tsx

@@ -0,0 +1,37 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
+import { textAlignPropDef } from '../props/text-align.prop.js';
+import { textWrapPropDef } from '../props/text-wrap.prop.js';
+import { truncatePropDef } from '../props/truncate.prop.js';
+import { weightPropDef } from '../props/weight.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const as = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+
+const headingPropDefs = {
+  as: { type: 'enum', values: as, default: 'h1' },
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    default: '6',
+    responsive: true,
+  },
+  ...weightPropDef,
+  ...textAlignPropDef,
+  ...leadingTrimPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+  ...colorPropDef,
+  ...highContrastPropDef,
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+  size: PropDef<(typeof sizes)[number]>;
+};
+
+export { headingPropDefs };

package/src/components/heading.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { headingPropDefs } from './heading.props.js';
+import { extractProps } from '../helpers/extract-props.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 HeadingElement = React.ElementRef<'h1'>;
+type HeadingOwnProps = GetPropDefTypes<typeof headingPropDefs>;
+interface HeadingProps
+  extends ComponentPropsWithout<'h1', RemovedProps>,
+    MarginProps,
+    HeadingOwnProps {}
+
+const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    asChild,
+    as: Tag = 'h1',
+    color,
+    ...headingProps
+  } = extractProps(props, headingPropDefs, marginPropDefs);
+  return (
+    <Slot.Root
+      data-accent-color={color}
+      {...headingProps}
+      ref={forwardedRef}
+      className={classNames('rt-Heading', className)}
+    >
+      {asChild ? children : <Tag>{children}</Tag>}
+    </Slot.Root>
+  );
+});
+Heading.displayName = 'Heading';
+
+export { Heading };
+export type { HeadingProps };

package/src/components/hover-card.css

@@ -0,0 +1,38 @@
+.rt-HoverCardContent {
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-4);
+  overflow: auto;
+  position: relative;
+
+  --inset-padding-top: var(--hover-card-content-padding);
+  --inset-padding-right: var(--hover-card-content-padding);
+  --inset-padding-bottom: var(--hover-card-content-padding);
+  --inset-padding-left: var(--hover-card-content-padding);
+  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(--space-3);
+      border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-2) {
+      --hover-card-content-padding: var(--space-4);
+      border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-3) {
+      --hover-card-content-padding: var(--space-5);
+      border-radius: var(--radius-5);
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+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'] 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 };

package/src/components/hover-card.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+
+import { hoverCardContentPropDefs } from './hover-card.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { requireReactElement } from '../helpers/require-react-element.js';
+import { Theme } from './theme.js';
+
+import type { HoverCardContentOwnProps } from './hover-card.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+interface HoverCardRootProps
+  extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root> {}
+const HoverCardRoot: React.FC<HoverCardRootProps> = (props) => (
+  <HoverCardPrimitive.Root closeDelay={150} openDelay={200} {...props} />
+);
+HoverCardRoot.displayName = 'HoverCard.Root';
+
+type HoverCardTriggerElement = React.ElementRef<typeof HoverCardPrimitive.Trigger>;
+interface HoverCardTriggerProps
+  extends ComponentPropsWithout<typeof HoverCardPrimitive.Trigger, RemovedProps> {}
+const HoverCardTrigger = React.forwardRef<HoverCardTriggerElement, HoverCardTriggerProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <HoverCardPrimitive.Trigger
+      ref={forwardedRef}
+      className={classNames('rt-HoverCardTrigger', className)}
+      {...props}
+      asChild
+    >
+      {requireReactElement(children)}
+    </HoverCardPrimitive.Trigger>
+  )
+);
+HoverCardTrigger.displayName = 'HoverCard.Trigger';
+
+type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
+interface HoverCardContentProps
+  extends ComponentPropsWithout<typeof HoverCardPrimitive.Content, RemovedProps>,
+    HoverCardContentOwnProps {
+  container?: React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Portal>['container'];
+}
+const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
+  (props, forwardedRef) => {
+    const { className, forceMount, container, ...contentProps } = extractProps(
+      props,
+      hoverCardContentPropDefs
+    );
+    return (
+      <HoverCardPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <HoverCardPrimitive.Content
+            align="start"
+            sideOffset={8}
+            collisionPadding={10}
+            {...contentProps}
+            ref={forwardedRef}
+            className={classNames('rt-PopperContent', 'rt-HoverCardContent', className)}
+          />
+        </Theme>
+      </HoverCardPrimitive.Portal>
+    );
+  }
+);
+HoverCardContent.displayName = 'HoverCard.Content';
+
+export { HoverCardRoot as Root, HoverCardTrigger as Trigger, HoverCardContent as Content };
+export type {
+  HoverCardRootProps as RootProps,
+  HoverCardTriggerProps as TriggerProps,
+  HoverCardContentProps as ContentProps,
+};

package/src/components/icon-button.css

@@ -0,0 +1,89 @@
+@import './_internal/base-button.css';
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-IconButton {
+  &:where(:not(.rt-variant-ghost)) {
+    height: var(--base-button-height);
+    width: var(--base-button-height);
+  }
+  &:where(.rt-variant-ghost) {
+    padding: var(--icon-button-ghost-padding);
+
+    /* We reset the defined margin variables to avoid inheriting them from a higher component */
+    /* If a margin IS defined on the component itself, the utility class will win and reset it */
+    --margin-top: 0px;
+    --margin-right: 0px;
+    --margin-bottom: 0px;
+    --margin-left: 0px;
+
+    /* Define the overrides to incorporate the negative margins */
+    --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
+    --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
+    --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
+    --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
+
+    /* Reset the overrides on direct children */
+    :where(&) > * {
+      --margin-top-override: initial;
+      --margin-right-override: initial;
+      --margin-bottom-override: initial;
+      --margin-left-override: initial;
+    }
+
+    margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
+      var(--margin-left-override);
+  }
+}
+
+@breakpoints {
+  .rt-IconButton {
+    &:where(.rt-r-size-1) {
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 13px;
+        height: 13px;
+      }
+    }
+    &:where(.rt-r-size-2) {
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 15px;
+        height: 15px;
+      }
+    }
+    &:where(.rt-r-size-3) {
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 17px;
+        height: 17px;
+      }
+    }
+    &:where(.rt-r-size-4) {
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 19px;
+        height: 19px;
+      }
+    }
+  }
+
+  .rt-IconButton:where(.rt-variant-ghost) {
+    &:where(.rt-r-size-1) {
+      --icon-button-ghost-padding: var(--space-1);
+    }
+    &:where(.rt-r-size-2) {
+      --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
+    }
+    &:where(.rt-r-size-3) {
+      --icon-button-ghost-padding: var(--space-2);
+    }
+    &:where(.rt-r-size-4) {
+      --icon-button-ghost-padding: var(--space-3);
+    }
+  }
+}

package/src/components/icon-button.props.tsx

@@ -0,0 +1 @@
+export { baseButtonPropDefs as iconButtonPropDefs } from './_internal/base-button.props.js';

package/src/components/icon-button.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { BaseButton } from './_internal/base-button.js';
+
+type IconButtonElement = React.ElementRef<typeof BaseButton>;
+interface IconButtonProps extends React.ComponentPropsWithoutRef<typeof BaseButton> {}
+const IconButton = React.forwardRef<IconButtonElement, IconButtonProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <BaseButton {...props} ref={forwardedRef} className={classNames('rt-IconButton', className)} />
+  )
+);
+IconButton.displayName = 'IconButton';
+
+export { IconButton };
+export type { IconButtonProps };