@kushagradhawan/kookie-ui 0.1.0

package/src/helpers/get-matching-gray-color.ts

@@ -0,0 +1,40 @@
+import type { accentColors } from '../props/color.prop.js';
+
+type ThemeAccentColor = (typeof accentColors)[number];
+
+export function getMatchingGrayColor(accentColor: ThemeAccentColor) {
+  switch (accentColor) {
+    case 'tomato':
+    case 'red':
+    case 'ruby':
+    case 'crimson':
+    case 'pink':
+    case 'plum':
+    case 'purple':
+    case 'violet':
+      return 'mauve';
+    case 'iris':
+    case 'indigo':
+    case 'blue':
+    case 'sky':
+    case 'cyan':
+      return 'slate';
+    case 'teal':
+    case 'jade':
+    case 'mint':
+    case 'green':
+      return 'sage';
+    case 'grass':
+    case 'lime':
+      return 'olive';
+    case 'yellow':
+    case 'amber':
+    case 'orange':
+    case 'brown':
+    case 'gold':
+    case 'bronze':
+      return 'sand';
+    case 'gray':
+      return 'gray';
+  }
+}

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

@@ -0,0 +1,156 @@
+import { breakpoints } from '../props/prop-def.js';
+import { hasOwnProperty } from './has-own-property.js';
+import { isResponsiveObject } from './is-responsive-object.js';
+
+import type { Responsive, Union } from '../props/prop-def.js';
+
+interface GetResponsiveStylesOptions {
+  className: string;
+  customProperties: `--${string}`[];
+  value: Responsive<Union> | Responsive<string> | undefined;
+  propValues: string[] | readonly string[];
+  parseValue?: (value: string) => string | undefined;
+}
+
+function getResponsiveStyles({ className, customProperties, ...args }: GetResponsiveStylesOptions) {
+  const responsiveClassNames = getResponsiveClassNames({
+    allowArbitraryValues: true,
+    className,
+    ...args,
+  });
+
+  const responsiveCustomProperties = getResponsiveCustomProperties({ customProperties, ...args });
+  return [responsiveClassNames, responsiveCustomProperties] as const;
+}
+
+interface GetResponsiveClassNamesOptions {
+  allowArbitraryValues?: boolean;
+  className: string;
+  value: Responsive<Union> | Responsive<string> | undefined;
+  propValues: string[] | readonly string[];
+  parseValue?: (value: string) => string | undefined;
+}
+
+function getResponsiveClassNames({
+  allowArbitraryValues,
+  value,
+  className,
+  propValues,
+  parseValue = (value) => value,
+}: GetResponsiveClassNamesOptions): string | undefined {
+  const classNames: string[] = [];
+
+  if (!value) {
+    return undefined;
+  }
+
+  if (typeof value === 'string' && propValues.includes(value)) {
+    return getBaseClassName(className, value, parseValue);
+  }
+
+  if (isResponsiveObject(value)) {
+    const object = value;
+
+    for (const bp in object) {
+      // Make sure we are not iterating over keys that aren't breakpoints
+      if (!hasOwnProperty(object, bp) || !breakpoints.includes(bp)) {
+        continue;
+      }
+
+      const value = object[bp];
+
+      if (value !== undefined) {
+        if (propValues.includes(value)) {
+          const baseClassName = getBaseClassName(className, value, parseValue);
+          const bpClassName = bp === 'initial' ? baseClassName : `${bp}:${baseClassName}`;
+          classNames.push(bpClassName);
+        } else if (allowArbitraryValues) {
+          const bpClassName = bp === 'initial' ? className : `${bp}:${className}`;
+          classNames.push(bpClassName);
+        }
+      }
+    }
+
+    return classNames.join(' ');
+  }
+
+  if (allowArbitraryValues) {
+    return className;
+  }
+}
+
+function getBaseClassName(
+  className: string,
+  value: string,
+  parseValue: (value: string) => string | undefined
+): string {
+  const delimiter = className ? '-' : '';
+  const matchedValue = parseValue(value);
+  const isNegative = matchedValue?.startsWith('-');
+  const minus = isNegative ? '-' : '';
+  const absoluteValue = isNegative ? matchedValue?.substring(1) : matchedValue;
+  return `${minus}${className}${delimiter}${absoluteValue}`;
+}
+
+interface GetResponsiveCustomPropertiesOptions {
+  customProperties: `--${string}`[];
+  value: Responsive<Union> | Responsive<string> | undefined;
+  propValues: string[] | readonly string[];
+  parseValue?: (value: string) => string | undefined;
+}
+
+function getResponsiveCustomProperties({
+  customProperties,
+  value,
+  propValues,
+  parseValue = (value) => value,
+}: GetResponsiveCustomPropertiesOptions) {
+  let styles: Record<string, string | undefined> = {};
+
+  // Don't generate custom properties if the value is not arbitrary
+  if (!value || (typeof value === 'string' && propValues.includes(value))) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    styles = Object.fromEntries(customProperties.map((prop) => [prop, value]));
+  }
+
+  if (isResponsiveObject(value)) {
+    const object = value;
+
+    for (const bp in object) {
+      // Make sure we are not iterating over keys that aren't breakpoints
+      if (!hasOwnProperty(object, bp) || !breakpoints.includes(bp)) {
+        continue;
+      }
+
+      const value = object[bp];
+
+      // Don't generate a custom property if the value is not arbitrary
+      if (propValues.includes(value)) {
+        continue;
+      }
+
+      for (const customProperty of customProperties) {
+        const bpProperty = bp === 'initial' ? customProperty : `${customProperty}-${bp}`;
+
+        styles = {
+          [bpProperty]: value,
+          ...styles,
+        };
+      }
+    }
+  }
+
+  for (const key in styles) {
+    const value = styles[key];
+    if (value !== undefined) {
+      styles[key] = parseValue(value);
+    }
+  }
+
+  return styles;
+}
+
+export { getResponsiveStyles, getResponsiveCustomProperties, getResponsiveClassNames };

package/src/helpers/get-subtree.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+/**
+ * This is a helper function that is used when a component supports `asChild`
+ * using the `Slot` component but its implementation contains nested DOM elements.
+ *
+ * Using it ensures if a consumer uses the `asChild` prop, the elements are in
+ * correct order in the DOM, adopting the intended consumer `children`.
+ */
+export function getSubtree(
+  options: { asChild: boolean | undefined; children: React.ReactNode },
+  content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode)
+) {
+  const { asChild, children } = options;
+  if (!asChild) return typeof content === 'function' ? content(children) : content;
+
+  const firstChild = React.Children.only(children) as React.ReactElement;
+  return React.cloneElement(firstChild, {
+    // @ts-expect-error
+    children: typeof content === 'function' ? content(firstChild.props.children) : content,
+  });
+}

package/src/helpers/has-own-property.ts

@@ -0,0 +1,9 @@
+/** A util to check whether the object has a key, while inferring the correct key type */
+function hasOwnProperty<K extends string | number | symbol>(
+  obj: Record<K, unknown>,
+  key: string | number | symbol
+): key is K {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+
+export { hasOwnProperty };

package/src/helpers/index.ts

@@ -0,0 +1,13 @@
+export * from './component-props.js';
+export * from './extract-margin-props.js';
+export * from './extract-props.js';
+export * from './get-margin-styles.js';
+export * from './get-matching-gray-color.js';
+export * from './get-responsive-styles.js';
+export * from './get-subtree.js';
+export * from './has-own-property.js';
+export * from './input-attributes.js';
+export * from './is-responsive-object.js';
+export * from './map-prop-values.js';
+export * from './merge-styles.js';
+export * from './require-react-element.js';

package/src/helpers/inert.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+// "inert" works differently between React versions
+// https://github.com/facebook/react/pull/24730
+export const inert = parseFloat(React.version) >= 19 || '';

package/src/helpers/input-attributes.ts

@@ -0,0 +1,82 @@
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
+
+type InputAttributes =
+  | 'accept'
+  | 'alt'
+  | 'autocapitalize'
+  | 'autocomplete'
+  | 'capture'
+  | 'checked'
+  | 'defaultChecked'
+  | 'defaultValue'
+  | 'disabled'
+  | 'form'
+  | 'formaction'
+  | 'formenctype'
+  | 'formmethod'
+  | 'formnovalidate'
+  | 'formtarget'
+  | 'height'
+  | 'list'
+  | 'max'
+  | 'maxlength'
+  | 'min'
+  | 'minlength'
+  | 'multiple'
+  | 'name'
+  | 'pattern'
+  | 'placeholder'
+  | 'popovertarget'
+  | 'popovertargetaction'
+  | 'readonly'
+  | 'required'
+  | 'size'
+  | 'src'
+  | 'step'
+  | 'type'
+  | 'value'
+  | 'width';
+
+// Includes all text-like inputs, e.g. text, email, password, number, date, etc.
+type InputTextualAttributes =
+  | 'autoCapitalize'
+  | 'autoComplete'
+  | 'defaultValue'
+  | 'disabled'
+  | 'form'
+  | 'list'
+  | 'maxLength'
+  | 'minLength'
+  | 'min'
+  | 'multiple'
+  | 'max'
+  | 'name'
+  | 'pattern'
+  | 'placeholder'
+  | 'readOnly'
+  | 'required'
+  | 'size'
+  | 'step'
+  | 'type'
+  | 'value';
+
+type InputRadioAttributes =
+  | 'checked'
+  | 'defaultChecked'
+  | 'defaultValue'
+  | 'disabled'
+  | 'form'
+  | 'name'
+  | 'required'
+  | 'value';
+
+type NotInputRadioAttributes = Exclude<InputAttributes, InputRadioAttributes>;
+type NotInputTextualAttributes = Exclude<InputAttributes, InputTextualAttributes>;
+
+export type {
+  InputAttributes,
+  InputRadioAttributes,
+  InputTextualAttributes,
+  NotInputRadioAttributes,
+  NotInputTextualAttributes,
+};

package/src/helpers/is-responsive-object.ts

@@ -0,0 +1,12 @@
+import { breakpoints } from '../props/prop-def.js';
+
+import type { Responsive, Breakpoint } from '../props/prop-def.js';
+
+export function isResponsiveObject<Value extends string>(
+  obj: Responsive<Value | Omit<string, Value>> | undefined
+): obj is Record<Breakpoint, string> {
+  return (
+    typeof obj === 'object' &&
+    Object.keys(obj).some((key) => (breakpoints as readonly string[]).includes(key))
+  );
+}

package/src/helpers/map-prop-values.ts

@@ -0,0 +1,40 @@
+import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';
+import type { calloutRootPropDefs } from '../components/callout.props.js';
+import type { spinnerPropDefs } from '../components/spinner.props.js';
+import type { textPropDefs } from '../components/text.props.js';
+import type { Responsive } from '../props/prop-def.js';
+
+function mapResponsiveProp<Input extends string, Output>(
+  propValue: Responsive<Input> | undefined,
+  mapValue: (value: Input) => Output
+): Responsive<Output> | undefined {
+  if (propValue === undefined) return undefined;
+  if (typeof propValue === 'string') {
+    return mapValue(propValue);
+  }
+  return Object.fromEntries(
+    Object.entries(propValue).map(([key, value]) => [key, mapValue(value)])
+  );
+}
+
+function mapCalloutSizeToTextSize(
+  size: (typeof calloutRootPropDefs.size.values)[number]
+): (typeof textPropDefs.size.values)[number] {
+  return size === '3' ? '3' : '2';
+}
+
+function mapButtonSizeToSpinnerSize(
+  size: (typeof baseButtonPropDefs.size.values)[number]
+): (typeof spinnerPropDefs.size.values)[number] {
+  switch (size) {
+    case '1':
+      return '1';
+    case '2':
+    case '3':
+      return '2';
+    case '4':
+      return '3';
+  }
+}
+
+export { mapResponsiveProp, mapCalloutSizeToTextSize, mapButtonSizeToSpinnerSize };

package/src/helpers/merge-styles.ts

@@ -0,0 +1,17 @@
+type InlineStyle =
+  | React.CSSProperties
+  | Record<string, string | number | null | undefined>
+  | undefined;
+
+// Merges CSS styles like `classNames` merges CSS classes
+export function mergeStyles(...styles: Array<InlineStyle>): InlineStyle {
+  let result: InlineStyle = {};
+
+  for (const style of styles) {
+    if (style) {
+      result = { ...result, ...style };
+    }
+  }
+
+  return Object.keys(result).length ? result : undefined;
+}

package/src/helpers/require-react-element.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+/** A function that throws an error when a value isn't a valid React Element, otherwise returns the value */
+export const requireReactElement = <T extends React.ReactNode>(children: T): T => {
+  const isReactElement = React.isValidElement(children);
+
+  if (!isReactElement) {
+    throw Error(
+      `Expected a single React Element child, but got: ${React.Children.toArray(children)
+        .map((child) =>
+          typeof child === 'object' && 'type' in child && typeof child.type === 'string'
+            ? child.type
+            : typeof child
+        )
+        .join(', ')}`
+    );
+  }
+
+  return children;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/src/props/as-child.prop.ts

@@ -0,0 +1,15 @@
+import type { PropDef } from './prop-def.js';
+
+const asChildPropDef = {
+  /**
+   * Composes the component into its immediate child instead of rendering its own HTML element.
+   * You’ll have to provide a single React Element child.
+   */
+  asChild: {
+    type: 'boolean',
+  },
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+export { asChildPropDef };

package/src/props/color.prop.ts

@@ -0,0 +1,36 @@
+import type { PropDef } from './prop-def.js';
+
+// prettier-ignore
+const accentColors = ['gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass', 'lime', 'mint', 'sky'] as const;
+
+const grayColors = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;
+
+const colorPropDef = {
+  color: {
+    type: 'enum',
+    values: accentColors,
+    default: undefined as (typeof accentColors)[number] | undefined,
+  },
+} satisfies {
+  color: PropDef<(typeof accentColors)[number]>;
+};
+
+// 1. When used on components that compose Text, sets the color of the text to the current accent.
+// 2. Defines accent color for descendant text components with `highContrast={true}`.
+const accentColorPropDef = {
+  color: {
+    type: 'enum',
+    values: accentColors,
+    default: '' as (typeof accentColors)[number],
+  },
+} satisfies {
+  color: PropDef<(typeof accentColors)[number]>;
+};
+
+export {
+  accentColorPropDef,
+  colorPropDef,
+  //
+  accentColors,
+  grayColors,
+};

package/src/props/gap.props.ts

@@ -0,0 +1,69 @@
+import type { PropDef } from './prop-def.js';
+
+const gapValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+
+const gapPropDefs = {
+  /**
+   * Sets the CSS **gap** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * gap="4"
+   * gap="20px"
+   * gap={{ sm: '2', lg: '3em' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+   */
+  gap: {
+    type: 'enum | string',
+    className: 'rt-r-gap',
+    customProperties: ['--gap'],
+    values: gapValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **row-gap** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * gapX="4"
+   * gapX="20px"
+   * gapX={{ sm: '2', lg: '3em' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+   */
+  gapX: {
+    type: 'enum | string',
+    className: 'rt-r-cg',
+    customProperties: ['--column-gap'],
+    values: gapValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **column-gap** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * gapY="4"
+   * gapY="20px"
+   * gapY={{ sm: '2', lg: '3em' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+   */
+  gapY: {
+    type: 'enum | string',
+    className: 'rt-r-rg',
+    customProperties: ['--row-gap'],
+    values: gapValues,
+    responsive: true,
+  },
+} satisfies {
+  gap: PropDef<(typeof gapValues)[number]>;
+  gapX: PropDef<(typeof gapValues)[number]>;
+  gapY: PropDef<(typeof gapValues)[number]>;
+};
+
+export { gapPropDefs };

package/src/props/height.props.ts

@@ -0,0 +1,64 @@
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const heightPropDefs = {
+  /**
+   * Sets the CSS **height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * height="100px"
+   * height={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/height
+   */
+  height: {
+    type: 'string',
+    className: 'rt-r-h',
+    customProperties: ['--height'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **min-height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * minHeight="100px"
+   * minHeight={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+   */
+  minHeight: {
+    type: 'string',
+    className: 'rt-r-min-h',
+    customProperties: ['--min-height'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **max-height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * maxHeight="100px"
+   * maxHeight={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+   */
+  maxHeight: {
+    type: 'string',
+    className: 'rt-r-max-h',
+    customProperties: ['--max-height'],
+    responsive: true,
+  },
+} satisfies {
+  height: PropDef<string>;
+  minHeight: PropDef<string>;
+  maxHeight: PropDef<string>;
+};
+
+type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
+
+export { heightPropDefs };
+export type { HeightProps };

package/src/props/high-contrast.prop.ts

@@ -0,0 +1,13 @@
+import type { PropDef } from './prop-def.js';
+
+const highContrastPropDef = {
+  highContrast: {
+    type: 'boolean',
+    className: 'rt-high-contrast',
+    default: undefined,
+  },
+} satisfies {
+  highContrast: PropDef<boolean>;
+};
+
+export { highContrastPropDef };