@kushagradhawan/kookie-ui 0.1.0

package/src/components/theme.props.tsx

@@ -0,0 +1,76 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColors, grayColors } from '../props/color.prop.js';
+import { radii } from '../props/radius.prop.js';
+
+import type { GetPropDefTypes, PropDef } from '../props/prop-def.js';
+
+const appearances = ['inherit', 'light', 'dark'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+const scalings = ['90%', '95%', '100%', '105%', '110%'] as const;
+
+const themePropDefs = {
+  ...asChildPropDef,
+  /**
+   * Whether to apply background color to the Theme element.
+   *
+   * Defaults to true for the root Theme and for Theme elements that
+   * have an explicit light or dark appearance prop.
+   */
+  hasBackground: { type: 'boolean', default: true },
+  /**
+   * Sets the color scheme of the theme, typcially referred to as light and dark mode.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/dark-mode
+   */
+  appearance: { type: 'enum', values: appearances, default: 'inherit' },
+  /**
+   * Selects one of the accent color options to use in the Theme.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/color
+   */
+  accentColor: { type: 'enum', values: accentColors, default: 'indigo' },
+  /**
+   * Selects one of the gray color options to use in the Theme.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/color
+   */
+  grayColor: { type: 'enum', values: grayColors, default: 'auto' },
+  /**
+   * Controls whether to use a solid or translucent background color on panelled
+   * elements such as Card or Table is solid or translucent.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/visual-style
+   */
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },
+  /**
+   * Sets the default radius of the components.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/visual-style
+   */
+  radius: { type: 'enum', values: radii, default: 'medium' },
+  /**
+   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.
+   *
+   * @link
+   * https://www.radix-ui.com/themes/docs/theme/layout
+   */
+  scaling: { type: 'enum', values: scalings, default: '100%' },
+} satisfies {
+  hasBackground: PropDef<boolean>;
+  appearance: PropDef<(typeof appearances)[number]>;
+  accentColor: PropDef<(typeof accentColors)[number]>;
+  grayColor: PropDef<(typeof grayColors)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;
+  radius: PropDef<(typeof radii)[number]>;
+  scaling: PropDef<(typeof scalings)[number]>;
+};
+
+type ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;
+
+export { themePropDefs };
+export type { ThemeOwnProps };

package/src/components/theme.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { themePropDefs } from './theme.props.js';
+
+import type { ThemeOwnProps } from './theme.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+const noop = () => {};
+
+type ThemeAppearance = (typeof themePropDefs.appearance.values)[number];
+type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
+type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
+type ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];
+type ThemeRadius = (typeof themePropDefs.radius.values)[number];
+type ThemeScaling = (typeof themePropDefs.scaling.values)[number];
+
+interface ThemeChangeHandlers {
+  onAppearanceChange: (appearance: ThemeAppearance) => void;
+  onAccentColorChange: (accentColor: ThemeAccentColor) => void;
+  onGrayColorChange: (grayColor: ThemeGrayColor) => void;
+  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;
+  onRadiusChange: (radius: ThemeRadius) => void;
+  onScalingChange: (scaling: ThemeScaling) => void;
+}
+
+interface ThemeContextValue extends ThemeChangeHandlers {
+  appearance: ThemeAppearance;
+  accentColor: ThemeAccentColor;
+  grayColor: ThemeGrayColor;
+  resolvedGrayColor: ThemeGrayColor;
+  panelBackground: ThemePanelBackground;
+  radius: ThemeRadius;
+  scaling: ThemeScaling;
+}
+const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
+
+function useThemeContext() {
+  const context = React.useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('`useThemeContext` must be used within a `Theme`');
+  }
+  return context;
+}
+
+interface ThemeProps extends ThemeImplPublicProps {}
+const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {
+  const context = React.useContext(ThemeContext);
+  const isRoot = context === undefined;
+  if (isRoot) {
+    return (
+      <TooltipPrimitive.Provider delayDuration={200}>
+        <Direction.Provider dir="ltr">
+          <ThemeRoot {...props} ref={forwardedRef} />
+        </Direction.Provider>
+      </TooltipPrimitive.Provider>
+    );
+  }
+  return <ThemeImpl {...props} ref={forwardedRef} />;
+});
+Theme.displayName = 'Theme';
+
+const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
+  (props, forwardedRef) => {
+    const {
+      appearance: appearanceProp = themePropDefs.appearance.default,
+      accentColor: accentColorProp = themePropDefs.accentColor.default,
+      grayColor: grayColorProp = themePropDefs.grayColor.default,
+      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,
+      radius: radiusProp = themePropDefs.radius.default,
+      scaling: scalingProp = themePropDefs.scaling.default,
+      hasBackground = themePropDefs.hasBackground.default,
+      ...rootProps
+    } = props;
+    const [appearance, setAppearance] = React.useState(appearanceProp);
+    React.useEffect(() => setAppearance(appearanceProp), [appearanceProp]);
+
+    const [accentColor, setAccentColor] = React.useState(accentColorProp);
+    React.useEffect(() => setAccentColor(accentColorProp), [accentColorProp]);
+
+    const [grayColor, setGrayColor] = React.useState(grayColorProp);
+    React.useEffect(() => setGrayColor(grayColorProp), [grayColorProp]);
+
+    const [panelBackground, setPanelBackground] = React.useState(panelBackgroundProp);
+    React.useEffect(() => setPanelBackground(panelBackgroundProp), [panelBackgroundProp]);
+
+    const [radius, setRadius] = React.useState(radiusProp);
+    React.useEffect(() => setRadius(radiusProp), [radiusProp]);
+
+    const [scaling, setScaling] = React.useState(scalingProp);
+    React.useEffect(() => setScaling(scalingProp), [scalingProp]);
+
+    return (
+      <ThemeImpl
+        {...rootProps}
+        ref={forwardedRef}
+        isRoot
+        hasBackground={hasBackground}
+        //
+        appearance={appearance}
+        accentColor={accentColor}
+        grayColor={grayColor}
+        panelBackground={panelBackground}
+        radius={radius}
+        scaling={scaling}
+        //
+        onAppearanceChange={setAppearance}
+        onAccentColorChange={setAccentColor}
+        onGrayColorChange={setGrayColor}
+        onPanelBackgroundChange={setPanelBackground}
+        onRadiusChange={setRadius}
+        onScalingChange={setScaling}
+      />
+    );
+  }
+);
+ThemeRoot.displayName = 'ThemeRoot';
+
+type ThemeImplElement = React.ElementRef<'div'>;
+interface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}
+interface ThemeImplPublicProps
+  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
+    ThemeOwnProps {}
+interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
+  isRoot?: boolean;
+}
+const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {
+  const context = React.useContext(ThemeContext);
+  const {
+    asChild,
+    isRoot,
+    hasBackground: hasBackgroundProp,
+    //
+    appearance = context?.appearance ?? themePropDefs.appearance.default,
+    accentColor = context?.accentColor ?? themePropDefs.accentColor.default,
+    grayColor = context?.resolvedGrayColor ?? themePropDefs.grayColor.default,
+    panelBackground = context?.panelBackground ?? themePropDefs.panelBackground.default,
+    radius = context?.radius ?? themePropDefs.radius.default,
+    scaling = context?.scaling ?? themePropDefs.scaling.default,
+    //
+    onAppearanceChange = noop,
+    onAccentColorChange = noop,
+    onGrayColorChange = noop,
+    onPanelBackgroundChange = noop,
+    onRadiusChange = noop,
+    onScalingChange = noop,
+    //
+    ...themeProps
+  } = props;
+  const Comp = asChild ? Slot.Root : 'div';
+  const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;
+  const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';
+  const hasBackground =
+    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
+  return (
+    <ThemeContext.Provider
+      value={React.useMemo(
+        () => ({
+          appearance,
+          accentColor,
+          grayColor,
+          resolvedGrayColor,
+          panelBackground,
+          radius,
+          scaling,
+          //
+          onAppearanceChange,
+          onAccentColorChange,
+          onGrayColorChange,
+          onPanelBackgroundChange,
+          onRadiusChange,
+          onScalingChange,
+        }),
+        [
+          appearance,
+          accentColor,
+          grayColor,
+          resolvedGrayColor,
+          panelBackground,
+          radius,
+          scaling,
+          //
+          onAppearanceChange,
+          onAccentColorChange,
+          onGrayColorChange,
+          onPanelBackgroundChange,
+          onRadiusChange,
+          onScalingChange,
+        ]
+      )}
+    >
+      <Comp
+        data-is-root-theme={isRoot ? 'true' : 'false'}
+        data-accent-color={accentColor}
+        data-gray-color={resolvedGrayColor}
+        // for nested `Theme` background
+        data-has-background={hasBackground ? 'true' : 'false'}
+        data-panel-background={panelBackground}
+        data-radius={radius}
+        data-scaling={scaling}
+        ref={forwardedRef}
+        {...themeProps}
+        className={classNames(
+          'radix-themes',
+          {
+            light: appearance === 'light',
+            dark: appearance === 'dark',
+          },
+          themeProps.className
+        )}
+      />
+    </ThemeContext.Provider>
+  );
+});
+ThemeImpl.displayName = 'ThemeImpl';
+
+export { Theme, ThemeContext, useThemeContext };
+export type { ThemeProps };

package/src/components/tooltip.css

@@ -0,0 +1,38 @@
+.rt-TooltipContent {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  background-color: var(--gray-12);
+  border-radius: var(--radius-2);
+
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+
+  animation-duration: 140ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+
+  @media (prefers-reduced-motion: no-preference) {
+    &:where([data-state='delayed-open']) {
+      &:where([data-side='top']) {
+        animation-name: rt-slide-from-top, rt-fade-in;
+      }
+      &:where([data-side='bottom']) {
+        animation-name: rt-slide-from-bottom, rt-fade-in;
+      }
+      &:where([data-side='left']) {
+        animation-name: rt-slide-from-left, rt-fade-in;
+      }
+      &:where([data-side='right']) {
+        animation-name: rt-slide-from-right, rt-fade-in;
+      }
+    }
+  }
+}
+
+.rt-TooltipText {
+  color: var(--gray-1);
+  user-select: none;
+  cursor: default;
+}
+
+.rt-TooltipArrow {
+  fill: var(--gray-12);
+}

package/src/components/tooltip.props.tsx

@@ -0,0 +1,20 @@
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const tooltipPropDefs = {
+  content: { type: 'ReactNode', required: true },
+  width: widthPropDefs.width,
+  minWidth: widthPropDefs.minWidth,
+  maxWidth: { ...widthPropDefs.maxWidth, default: '360px' },
+} satisfies {
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+  content: PropDef<React.ReactNode>;
+};
+
+type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs & typeof widthPropDefs>;
+
+export { tooltipPropDefs };
+export type { TooltipOwnProps };

package/src/components/tooltip.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { Text } from './text.js';
+import { Theme } from './theme.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { tooltipPropDefs } from './tooltip.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
+type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
+interface TooltipProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+    ComponentPropsWithout<typeof TooltipPrimitive.Content, RemovedProps | 'content'>,
+    TooltipOwnProps {
+  content: React.ReactNode;
+  container?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Portal>['container'];
+}
+const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    open,
+    defaultOpen,
+    onOpenChange,
+    delayDuration,
+    disableHoverableContent,
+    content,
+    container,
+    forceMount,
+    ...tooltipContentProps
+  } = extractProps(props, tooltipPropDefs);
+  const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
+  return (
+    <TooltipPrimitive.Root {...rootProps}>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <TooltipPrimitive.Content
+            sideOffset={4}
+            collisionPadding={10}
+            {...tooltipContentProps}
+            asChild={false}
+            ref={forwardedRef}
+            className={classNames('rt-TooltipContent', className)}
+          >
+            <Text as="p" className="rt-TooltipText" size="1">
+              {content}
+            </Text>
+            <TooltipPrimitive.Arrow className="rt-TooltipArrow" />
+          </TooltipPrimitive.Content>
+        </Theme>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  );
+});
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };
+export type { TooltipProps };

package/src/components/visually-hidden.tsx

@@ -0,0 +1,4 @@
+import { VisuallyHidden as VisuallyHiddenPrimitive } from 'radix-ui';
+export const VisuallyHidden = VisuallyHiddenPrimitive.Root;
+export const Root = VisuallyHiddenPrimitive.Root;
+export type VisuallyHiddenProps = VisuallyHiddenPrimitive.VisuallyHiddenProps;

package/src/helpers/component-props.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+
+type ComponentPropsAs<
+  C extends React.ElementType<any>,
+  T extends React.ComponentPropsWithoutRef<C>['as']
+> = Omit<Extract<React.ComponentPropsWithoutRef<C>, { as: T }>, 'as' | 'asChild'>;
+
+// Omits the specified props from the component props. Autocomplete will suggest props
+// of the component, but won't restrict the omittable props to those that actually exist.
+type ComponentPropsWithout<
+  T extends React.ElementType,
+  O extends
+    | Omit<string, keyof React.ComponentPropsWithoutRef<T>>
+    | keyof React.ComponentPropsWithoutRef<T>
+> = Omit<React.ComponentPropsWithoutRef<T>, O & string>;
+
+type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'color';
+
+export type { ComponentPropsAs, ComponentPropsWithout, RemovedProps };

package/src/helpers/extract-margin-props.ts

@@ -0,0 +1,6 @@
+import type { MarginProps } from '../props/margin.props.js';
+
+export function extractMarginProps<T extends MarginProps>(props: T) {
+  const { m, mx, my, mt, mr, mb, ml, ...rest } = props;
+  return { m, mx, my, mt, mr, mb, ml, rest };
+}

package/src/helpers/extract-props.ts

@@ -0,0 +1,124 @@
+import classNames from 'classnames';
+
+import { getResponsiveClassNames, getResponsiveStyles } from './get-responsive-styles.js';
+import { isResponsiveObject } from './is-responsive-object.js';
+import { mergeStyles } from './merge-styles.js';
+
+import type * as React from 'react';
+import type { PropDef } from '../props/prop-def.js';
+
+type PropDefsWithClassName<T> = T extends Record<string, PropDef>
+  ? { [K in keyof T]: T[K] extends { className: string } ? K : never }[keyof T]
+  : never;
+
+function mergePropDefs<T extends Record<string, PropDef>[]>(...args: T): Record<string, PropDef> {
+  return Object.assign({}, ...args);
+}
+
+/**
+ * Takes props, checks them against prop defs that have a `className` on them,
+ * adds necessary CSS classes and inline styles, and returns the props without
+ * the corresponding prop defs that were used to formulate the new `className`
+ * and `style` values. Also applies prop def defaults to every prop.
+ */
+function extractProps<
+  P extends { className?: string; style?: React.CSSProperties; [key: string]: any },
+  T extends Record<string, PropDef>[]
+>(
+  props: P,
+  ...propDefs: T
+): Omit<P & { className?: string; style?: React.CSSProperties }, PropDefsWithClassName<T[number]>> {
+  let className: string | undefined;
+  let style: ReturnType<typeof mergeStyles>;
+  const extractedProps = { ...props };
+  const allPropDefs = mergePropDefs(...propDefs);
+
+  for (const key in allPropDefs) {
+    let value = extractedProps[key];
+    const propDef = allPropDefs[key];
+
+    // Apply prop def defaults
+    if (propDef.default !== undefined && value === undefined) {
+      value = propDef.default;
+    }
+
+    // Apply the default value if the value is not a valid enum value
+    if (propDef.type === 'enum') {
+      const values = [propDef.default, ...propDef.values];
+
+      if (!values.includes(value) && !isResponsiveObject(value)) {
+        value = propDef.default;
+      }
+    }
+
+    // Apply the value with defaults
+    (extractedProps as Record<string, any>)[key] = value;
+
+    if ('className' in propDef && propDef.className) {
+      delete extractedProps[key];
+
+      const isResponsivePropDef = 'responsive' in propDef;
+      // Make sure we are not threading through responsive values for non-responsive prop defs
+      if (!value || (isResponsiveObject(value) && !isResponsivePropDef)) {
+        continue;
+      }
+
+      if (isResponsiveObject(value)) {
+        // Apply prop def defaults to the `initial` breakpoint
+        if (propDef.default !== undefined && value.initial === undefined) {
+          value.initial = propDef.default;
+        }
+
+        // Apply the default value to the `initial` breakpoint when it is not a valid enum value
+        if (propDef.type === 'enum') {
+          const values = [propDef.default, ...propDef.values];
+
+          if (!values.includes(value.initial)) {
+            value.initial = propDef.default;
+          }
+        }
+      }
+
+      if (propDef.type === 'enum') {
+        const propClassName = getResponsiveClassNames({
+          allowArbitraryValues: false,
+          value,
+          className: propDef.className,
+          propValues: propDef.values,
+          parseValue: propDef.parseValue,
+        });
+
+        className = classNames(className, propClassName);
+        continue;
+      }
+
+      if (propDef.type === 'string' || propDef.type === 'enum | string') {
+        const propDefValues = propDef.type === 'string' ? [] : propDef.values;
+
+        const [propClassNames, propCustomProperties] = getResponsiveStyles({
+          className: propDef.className,
+          customProperties: propDef.customProperties,
+          propValues: propDefValues,
+          parseValue: propDef.parseValue,
+          value,
+        });
+
+        style = mergeStyles(style, propCustomProperties);
+        className = classNames(className, propClassNames);
+        continue;
+      }
+
+      if (propDef.type === 'boolean' && value) {
+        // TODO handle responsive boolean props
+        className = classNames(className, propDef.className);
+        continue;
+      }
+    }
+  }
+
+  extractedProps.className = classNames(className, props.className);
+  extractedProps.style = mergeStyles(style, props.style);
+  return extractedProps;
+}
+
+export { extractProps };

package/src/helpers/get-margin-styles.ts

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+
+import { getResponsiveStyles } from './get-responsive-styles.js';
+import { mergeStyles } from './merge-styles.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+
+const marginValues = marginPropDefs.m.values;
+
+export function getMarginStyles(props: MarginProps) {
+  const [mClassNames, mCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-m',
+    customProperties: ['--margin'],
+    propValues: marginValues,
+    value: props.m,
+  });
+
+  const [mxClassNames, mxCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-mx',
+    customProperties: ['--margin-left', '--margin-right'],
+    propValues: marginValues,
+    value: props.mx,
+  });
+
+  const [myClassNames, myCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-my',
+    customProperties: ['--margin-top', '--margin-bottom'],
+    propValues: marginValues,
+    value: props.my,
+  });
+
+  const [mtClassNames, mtCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-mt',
+    customProperties: ['--margin-top'],
+    propValues: marginValues,
+    value: props.mt,
+  });
+
+  const [mrClassNames, mrCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-mr',
+    customProperties: ['--margin-right'],
+    propValues: marginValues,
+    value: props.mr,
+  });
+
+  const [mbClassNames, mbCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-mb',
+    customProperties: ['--margin-bottom'],
+    propValues: marginValues,
+    value: props.mb,
+  });
+
+  const [mlClassNames, mlCustomProperties] = getResponsiveStyles({
+    className: 'rt-r-ml',
+    customProperties: ['--margin-left'],
+    propValues: marginValues,
+    value: props.ml,
+  });
+
+  return [
+    classNames(
+      mClassNames,
+      mxClassNames,
+      myClassNames,
+      mtClassNames,
+      mrClassNames,
+      mbClassNames,
+      mlClassNames
+    ),
+    mergeStyles(
+      mCustomProperties,
+      mxCustomProperties,
+      myCustomProperties,
+      mtCustomProperties,
+      mrCustomProperties,
+      mbCustomProperties,
+      mlCustomProperties
+    ),
+  ] as const;
+}