@kushagradhawan/kookie-ui 0.1.0

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'] 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,92 @@
+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;
+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 };
+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/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 = ['light', 'regular', 'medium', 'bold'] 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,22 @@
+/* Geist Font Variables */
+:root {
+  --font-geist-sans: 'GeistSans', 'Geist';
+  --font-geist-mono: 'GeistMono', 'Geist Mono';
+}
+
+/* Fallback font-face declarations for Geist */
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.4.2/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/npm/geist@1.4.2/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
+}

package/src/styles/index.css

@@ -0,0 +1,5 @@
+@import './fonts.css';
+@import './breakpoints.css';
+@import './tokens/index.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/tokens/base.css

@@ -0,0 +1,6 @@
+@import './color.css';
+@import './cursor.css';
+@import './layout.css';
+@import './radius.css';
+@import './shadow.css';
+@import './typography.css';