@womp/kookie-ui 0.3.22

package/src/props/margin.props.ts

@@ -0,0 +1,155 @@
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+// prettier-ignore
+const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12'] as const;
+
+const marginPropDefs = {
+  /**
+   * Sets the CSS **margin** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * m="4"
+   * m="100px"
+   * m={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
+   */
+  m: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-m',
+    customProperties: ['--m'],
+  },
+  /**
+   * Sets the CSS **margin-left** and **margin-right** properties.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * mx="4"
+   * mx="100px"
+   * mx={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+   */
+  mx: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-mx',
+    customProperties: ['--ml', '--mr'],
+  },
+  /**
+   * Sets the CSS **margin-top** and **margin-bottom** properties.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * my="4"
+   * my="100px"
+   * my={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   */
+  my: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-my',
+    customProperties: ['--mt', '--mb'],
+  },
+  /**
+   * Sets the CSS **margin-top** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * mt="4"
+   * mt="100px"
+   * mt={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+   */
+  mt: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-mt',
+    customProperties: ['--mt'],
+  },
+  /**
+   * Sets the CSS **margin-right** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * mr="4"
+   * mr="100px"
+   * mr={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+   */
+  mr: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-mr',
+    customProperties: ['--mr'],
+  },
+  /**
+   * Sets the CSS **margin-bottom** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * mb="4"
+   * mb="100px"
+   * mb={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   */
+  mb: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-mb',
+    customProperties: ['--mb'],
+  },
+  /**
+   * Sets the CSS **margin-left** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * ml="4"
+   * ml="100px"
+   * ml={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+   */
+  ml: {
+    type: 'enum | string',
+    values: marginValues,
+    responsive: true,
+    className: 'rt-r-ml',
+    customProperties: ['--ml'],
+  },
+} satisfies {
+  m: PropDef<(typeof marginValues)[number]>;
+  mx: PropDef<(typeof marginValues)[number]>;
+  my: PropDef<(typeof marginValues)[number]>;
+  mt: PropDef<(typeof marginValues)[number]>;
+  mr: PropDef<(typeof marginValues)[number]>;
+  mb: PropDef<(typeof marginValues)[number]>;
+  ml: PropDef<(typeof marginValues)[number]>;
+};
+
+type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
+
+export { marginPropDefs };
+export type { MarginProps };

package/src/props/padding.props.ts

@@ -0,0 +1,154 @@
+import type { GetPropDefTypes, PropDef } from './prop-def.js';
+
+const paddingValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+
+const paddingPropDefs = {
+  /**
+   * Sets the CSS **padding** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * p="4"
+   * p="100px"
+   * p={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
+   */
+  p: {
+    type: 'enum | string',
+    className: 'rt-r-p',
+    customProperties: ['--p'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-left** and **padding-right** properties.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * px="4"
+   * px="100px"
+   * px={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+   */
+  px: {
+    type: 'enum | string',
+    className: 'rt-r-px',
+    customProperties: ['--pl', '--pr'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-top** and **padding-bottom** properties.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * py="4"
+   * py="100px"
+   * py={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   */
+  py: {
+    type: 'enum | string',
+    className: 'rt-r-py',
+    customProperties: ['--pt', '--pb'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-top** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * pt="4"
+   * pt="100px"
+   * pt={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+   */
+  pt: {
+    type: 'enum | string',
+    className: 'rt-r-pt',
+    customProperties: ['--pt'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-right** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * pr="4"
+   * pr="100px"
+   * pr={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+   */
+  pr: {
+    type: 'enum | string',
+    className: 'rt-r-pr',
+    customProperties: ['--pr'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-bottom** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * pb="4"
+   * pb="100px"
+   * pb={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+   */
+  pb: {
+    type: 'enum | string',
+    className: 'rt-r-pb',
+    customProperties: ['--pb'],
+    values: paddingValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **padding-left** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * pl="4"
+   * pl="100px"
+   * pl={{ sm: '6', lg: '9' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+   */
+  pl: {
+    type: 'enum | string',
+    className: 'rt-r-pl',
+    customProperties: ['--pl'],
+    values: paddingValues,
+    responsive: true,
+  },
+} satisfies {
+  p: PropDef<(typeof paddingValues)[number]>;
+  px: PropDef<(typeof paddingValues)[number]>;
+  py: PropDef<(typeof paddingValues)[number]>;
+  pt: PropDef<(typeof paddingValues)[number]>;
+  pr: PropDef<(typeof paddingValues)[number]>;
+  pb: PropDef<(typeof paddingValues)[number]>;
+  pl: PropDef<(typeof paddingValues)[number]>;
+};
+
+type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
+
+export { paddingPropDefs };
+export type { PaddingProps };

package/src/props/prop-def.ts

@@ -0,0 +1,93 @@
+import type React from 'react';
+
+// Creates a union type of string literals with strings, but retains intellisense for the literals.
+// Union<string, 'foo' | 'bar'> => string | Omit<string, 'foo' | 'bar'>
+type Union<S = string, T extends string | number = string> = T | Omit<S, T>;
+
+const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+const breakpointSet: Set<string> = new Set(breakpoints);
+type Breakpoint = (typeof breakpoints)[number];
+type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+type BooleanPropDef = {
+  type: 'boolean';
+  default?: boolean;
+  required?: boolean;
+  className?: string;
+};
+type StringPropDef = {
+  type: 'string';
+  default?: string;
+  required?: boolean;
+};
+type ReactNodePropDef = {
+  type: 'ReactNode';
+  default?: React.ReactNode;
+  required?: boolean;
+};
+type EnumPropDef<T> = {
+  type: 'enum';
+  values: readonly T[];
+  default?: T;
+  required?: boolean;
+};
+type EnumOrStringPropDef<T> = {
+  type: 'enum | string';
+  values: readonly T[];
+  default?: T | string;
+  required?: boolean;
+};
+
+type NonStylingPropDef = {
+  className?: never;
+  customProperties?: never;
+  parseValue?: never;
+};
+
+type StylingPropDef = {
+  className: string;
+  parseValue?: (value: string) => string | undefined;
+};
+
+type ArbitraryStylingPropDef = {
+  className: string;
+  customProperties: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+};
+
+type RegularPropDef<T> =
+  | ReactNodePropDef
+  | BooleanPropDef
+  | (StringPropDef & ArbitraryStylingPropDef)
+  | (StringPropDef & NonStylingPropDef)
+  | (EnumPropDef<T> & StylingPropDef)
+  | (EnumPropDef<T> & NonStylingPropDef)
+  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
+  | (EnumOrStringPropDef<T> & NonStylingPropDef);
+type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
+type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
+
+// prettier-ignore
+type GetPropDefType<Def> =
+    Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive<boolean> : boolean)
+  : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive<string> : string)
+  : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive<React.ReactNode> : React.ReactNode)
+  : Def extends EnumOrStringPropDef<infer Type> ?
+    Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Type
+  : Def extends EnumPropDef<infer Type> ? (Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type)
+  : never;
+
+type GetPropDefTypes<P> = {
+  [K in keyof P]?: GetPropDefType<P[K]>;
+};
+
+export { breakpoints, breakpointSet };
+export type {
+  PropDef,
+  GetPropDefTypes,
+  ResponsivePropDef,
+  //
+  Breakpoint,
+  Responsive,
+  Union,
+};

package/src/props/radius.prop.ts

@@ -0,0 +1,15 @@
+import type { PropDef } from './prop-def.js';
+
+const radii = ['none', 'small', 'medium', 'large', 'full'] as const;
+
+const radiusPropDef = {
+  radius: {
+    type: 'enum',
+    values: radii,
+    default: undefined,
+  },
+} satisfies {
+  radius: PropDef<(typeof radii)[number]>;
+};
+
+export { radiusPropDef, radii };

package/src/props/shadow.props.ts

@@ -0,0 +1,30 @@
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const shadowValues = ['1', '2', '3', '4', '5', '6'] as const;
+
+const shadowPropDefs = {
+  /**
+   * Sets the CSS **box-shadow** property using design system shadow tokens.
+   * Supports shadow scale values and responsive objects.
+   *
+   * @example
+   * shadow="3"
+   * shadow={{ sm: '2', lg: '4' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+   */
+  shadow: {
+    type: 'enum',
+    className: 'rt-r-shadow',
+    values: shadowValues,
+    responsive: true,
+  },
+} satisfies {
+  shadow: PropDef<(typeof shadowValues)[number]>;
+};
+
+type ShadowProps = GetPropDefTypes<typeof shadowPropDefs>;
+
+export { shadowPropDefs };
+export type { ShadowProps };

package/src/props/text-align.prop.ts

@@ -0,0 +1,16 @@
+import type { PropDef } from './prop-def.js';
+
+const textAlignValues = ['left', 'center', 'right'] as const;
+
+const textAlignPropDef = {
+  align: {
+    type: 'enum',
+    className: 'rt-r-ta',
+    values: textAlignValues,
+    responsive: true,
+  },
+} satisfies {
+  align: PropDef<(typeof textAlignValues)[number]>;
+};
+
+export { textAlignPropDef };

package/src/props/text-wrap.prop.ts

@@ -0,0 +1,16 @@
+import type { PropDef } from './prop-def.js';
+
+const textWrapValues = ['wrap', 'nowrap', 'pretty', 'balance'] as const;
+
+const textWrapPropDef = {
+  wrap: {
+    type: 'enum',
+    className: 'rt-r-tw',
+    values: textWrapValues,
+    responsive: true,
+  },
+} satisfies {
+  wrap: PropDef<(typeof textWrapValues)[number]>;
+};
+
+export { textWrapPropDef };

package/src/props/truncate.prop.ts

@@ -0,0 +1,12 @@
+import type { PropDef } from './prop-def.js';
+
+const truncatePropDef = {
+  truncate: {
+    type: 'boolean',
+    className: 'rt-truncate',
+  },
+} satisfies {
+  truncate: PropDef<boolean>;
+};
+
+export { truncatePropDef };

package/src/props/weight.prop.ts

@@ -0,0 +1,16 @@
+import type { PropDef } from './prop-def.js';
+
+const weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;
+
+const weightPropDef = {
+  weight: {
+    type: 'enum',
+    className: 'rt-r-weight',
+    values: weights,
+    responsive: true,
+  },
+} satisfies {
+  weight: PropDef<(typeof weights)[number]>;
+};
+
+export { weightPropDef };

package/src/props/width.props.ts

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

package/src/styles/breakpoints.css

@@ -0,0 +1,5 @@
+@custom-media --xs (min-width: 520px);
+@custom-media --sm (min-width: 768px);
+@custom-media --md (min-width: 1024px);
+@custom-media --lg (min-width: 1280px);
+@custom-media --xl (min-width: 1640px);

package/src/styles/fonts.css

@@ -0,0 +1,35 @@
+/* Inter, JetBrains Mono, and Playfair Display from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
+/* Font Variables - Customize these to change fonts throughout your app */
+:root {
+  /* Base font definitions - these are the actual font stacks */
+  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-jetbrains-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  --font-playfair-display: 'Playfair Display', 'Times New Roman', 'Times', 'Georgia', 'Cambria', serif;
+
+  /* Theme font family overrides - change these to customize fonts globally */
+  --font-sans: var(--font-inter); /* Override this for custom sans-serif */
+  --font-mono: var(--font-jetbrains-mono); /* Override this for custom monospace */
+  --font-serif: var(--font-playfair-display); /* Override this for custom serif */
+
+  /* Force proper font weight rendering */
+  font-synthesis: none; /* Prevent browser from synthesizing weights */
+}
+
+/* Radix Themes font weight enforcement */
+.radix-themes {
+  font-synthesis: none;
+  font-family: var(--default-font-family);
+}
+
+/* System font fallback for critical loading scenarios */
+@font-face {
+  font-family: 'System Fallback';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: block;
+  src: local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto');
+}

package/src/styles/index.css

@@ -0,0 +1,6 @@
+@import './fonts.css';
+@import './tokens/index.css';
+@import './breakpoints.css';
+@import './scrollbar.css';
+@import '../components/index.css';
+@import './utilities/index.css';

package/src/styles/layout.css

@@ -0,0 +1,3 @@
+@import './tokens/layout.css';
+@import '../components/layout.css';
+@import './utilities/layout.css';

package/src/styles/scrollbar.css

@@ -0,0 +1,31 @@
+/* Global scrollbar styling for kookie-ui */
+/* Provides thin, subtle scrollbars that match the design system */
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a5) transparent;
+}
+
+/* WebKit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--gray-a5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-a7);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

package/src/styles/tokens/base.css

@@ -0,0 +1,9 @@
+@import './color.css';
+@import './cursor.css';
+@import './layout.css';
+@import './radius.css';
+@import './shadow.css';
+@import './transition.css';
+@import './typography.css';
+@import './blur.css';
+@import './opacity.css';