@womp/kookie-ui 0.3.22

package/package.json

@@ -0,0 +1,210 @@
+{
+  "name": "@womp/kookie-ui",
+  "version": "0.3.22",
+  "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "themes",
+    "radix"
+  ],
+  "author": "Kushagra Dhawan",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "type": "commonjs",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "module": "./dist/esm/index.js",
+  "style": "./styles.css",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./components/*": {
+      "require": {
+        "types": "./dist/cjs/components/*.d.ts",
+        "default": "./dist/cjs/components/*.js"
+      },
+      "import": {
+        "types": "./dist/esm/components/*.d.ts",
+        "default": "./dist/esm/components/*.js"
+      }
+    },
+    "./helpers": {
+      "require": {
+        "types": "./dist/cjs/helpers/index.d.ts",
+        "default": "./dist/cjs/helpers/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/helpers/index.d.ts",
+        "default": "./dist/esm/helpers/index.js"
+      }
+    },
+    "./props": {
+      "require": {
+        "types": "./dist/cjs/props/index.d.ts",
+        "default": "./dist/cjs/props/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/props/index.d.ts",
+        "default": "./dist/esm/props/index.js"
+      }
+    },
+    "./schemas-json": "./schemas/index.json",
+    "./schemas-json/*": "./schemas/*.json",
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      "schemas-json": [
+        "schemas-json.d.ts"
+      ],
+      "schemas-json/*": [
+        "schemas-json.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "src/**",
+    "dist/**",
+    "schemas/**",
+    "schemas-json.d.ts",
+    "tokens/**",
+    "layout/**",
+    "*.css",
+    "postcss-breakpoints.cjs",
+    "postcss-whitespace.cjs"
+  ],
+  "scripts": {
+    "build": "pnpm clean:dist && pnpm build:js && pnpm build:schemas && pnpm build:css",
+    "clean:dist": "rm -rf dist && mkdir -p dist/cjs dist/esm",
+    "build:js": "pnpm build:js:cjs && pnpm build:js:esm && pnpm build:js:cjs:types && pnpm build:js:esm:types",
+    "build:schemas": "node scripts/generate-json-schemas.cjs",
+    "build:js:cjs": "node scripts/esbuild-cjs.js",
+    "build:js:cjs:types": "tsc --outdir dist/cjs",
+    "build:js:esm": "node scripts/esbuild-esm.js",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "pnpm build:css:index && pnpm build:css:tokens && pnpm build:css:components && pnpm build:css:utilities && pnpm build:css:layout",
+    "build:css:index": "postcss src/styles/index.css -o styles.css",
+    "build:css:components": "postcss src/components/index.css -o components.css",
+    "build:css:utilities": "postcss src/styles/utilities/index.css -o utilities.css",
+    "build:css:tokens": "pnpm build:css:tokens:index && pnpm build:css:tokens:base && pnpm build:css:tokens:colors",
+    "build:css:tokens:index": "postcss src/styles/tokens/index.css -o tokens.css",
+    "build:css:tokens:base": "postcss src/styles/tokens/base.css -o tokens/base.css",
+    "build:css:tokens:colors": "postcss src/styles/tokens/colors/*.css --dir tokens/colors",
+    "build:css:layout": "pnpm build:css:layout:index && pnpm build:css:layout:tokens && pnpm build:css:layout:components && pnpm build:css:layout:utilities",
+    "build:css:layout:index": "postcss src/styles/layout.css -o layout.css",
+    "build:css:layout:tokens": "postcss src/styles/tokens/layout.css -o layout/tokens.css",
+    "build:css:layout:components": "postcss src/components/layout.css -o layout/components.css",
+    "build:css:layout:utilities": "postcss src/styles/utilities/layout.css -o layout/utilities.css",
+    "dev": "pnpm dev:js & pnpm dev:css",
+    "dev:js": "pnpm dev:js:cjs & pnpm dev:js:esm & pnpm dev:js:cjs:types & pnpm dev:js:esm:types",
+    "dev:js:cjs": "node scripts/esbuild-cjs.js watch=true",
+    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
+    "dev:js:esm": "node scripts/esbuild-esm.js watch=true",
+    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm >/dev/null",
+    "dev:css": "postcss src/styles/index.css -o styles.css --watch",
+    "lint": "pnpm lint:js && pnpm lint:css && pnpm lint:ts",
+    "lint:js": "eslint \"src/**/*.ts*\"",
+    "lint:ts": "tsc --noEmit",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "clean": "rm -rf .turbo node_modules dist tokens layout *.css",
+    "prepublishOnly": "pnpm lint",
+    "release": "node scripts/release.js",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:types": "pnpm build:js:esm:types && tsd --typings tests/types/typings.d.ts --files \"tests/types/**/*.test-d.ts\""
+  },
+  "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@zag-js/react": "^1.22.1",
+    "@zag-js/splitter": "^1.22.1",
+    "classnames": "^2.3.2",
+    "cmdk": "^1.1.1",
+    "geist": "^1.4.2",
+    "motion": "^12.26.2",
+    "radix-ui": "^1.1.3",
+    "react-dropzone": "^14.3.8",
+    "react-remove-scroll-bar": "^2.3.8",
+    "zod": "^3.24.1",
+    "zod-to-json-schema": "^3.24.6"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jsdom": "^21.1.7",
+    "autoprefixer": "10.4.24",
+    "esbuild": "0.20.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "jsdom": "^25.0.1",
+    "postcss": "8.5.6",
+    "postcss-cli": "11.0.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-custom-media": "12.0.0",
+    "postcss-discard-empty": "7.0.1",
+    "postcss-import": "16.1.1",
+    "postcss-nesting": "14.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "stylelint": "16.6.1",
+    "tsd": "^0.33.0",
+    "typescript": "~5.8.0",
+    "typescript-eslint": "^8.18.1",
+    "vitest": "^4.0.16"
+  },
+  "homepage": "https://github.com/wompxyz/kookie-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wompxyz/kookie-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wompxyz/kookie-ui/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/KushagraDhawan1997"
+  }
+}

package/postcss-breakpoints.cjs

@@ -0,0 +1,110 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+
+// Build a list of breakpoints from "@custom media" rules in "breakpoints.css"
+const breakpointsFile = path.resolve('./src/styles/breakpoints.css');
+const breakpointsCss = fs.readFileSync(breakpointsFile, 'utf-8');
+const breakpoints = postcss
+  .parse(breakpointsCss)
+  .nodes.map((node) => {
+    if (node.type === 'atrule' && node.name === 'custom-media') {
+      const [_match, name, params] = node.params.match(/--(\w+)\s+(.+)/);
+      return { name, params };
+    }
+
+    return null;
+  })
+  .filter(Boolean);
+
+const cache = new WeakMap();
+
+module.exports = () => ({
+  postcssPlugin: 'postcss-breakpoints',
+  Rule(rule) {
+    if (rule.parent.name === 'breakpoints') {
+      const breakpointsRule = rule.parent;
+
+      // when we first meet a given @breakpoints at-rule
+      if (!cache.has(breakpointsRule)) {
+        // create the final media rules for this @breakpoints at-rule
+        const medias = breakpoints.reduce((breakpointsMedias, breakpoint) => {
+          breakpointsMedias[breakpoint.name] = new postcss.AtRule({
+            name: 'media',
+            params: breakpoint.params,
+          });
+          return breakpointsMedias;
+        }, {});
+
+        // add an entry to the cache
+        cache.set(breakpointsRule, medias);
+
+        // add final media rules after the @breakpoints at-rule
+        const mediaRules = Object.values(medias).reverse();
+        mediaRules.forEach((media) => {
+          breakpointsRule.after(media);
+        });
+      }
+
+      // move the rule itself before @breakpoints at-rule
+      breakpointsRule.before(rule);
+
+      // save clone of the rule before we modify it
+      const originalRule = rule.clone();
+      // clean up the extra indentation
+      rule.selector = rule.selector.replace(/\n\s\s/g, '\n');
+      rule.cleanRaws();
+
+      // add breakpoint-level rules
+      breakpoints.forEach((breakpoint) => {
+        const clone = originalRule.clone();
+        addPrefix(clone, breakpoint.name);
+        cache.get(breakpointsRule)[breakpoint.name].append(clone);
+      });
+
+      // remove @breakpoints at-rule and clear cache if it has no rules
+      if (breakpointsRule.nodes.length === 0) {
+        breakpointsRule.remove();
+        cache.delete(breakpointsRule);
+      }
+    }
+  },
+});
+
+module.exports.postcss = true;
+
+function addPrefix(node, prefix) {
+  if (node.type === 'atrule') {
+    node.each((child) => addPrefix(child, prefix));
+  }
+
+  /**
+   * Should match responsive classes (rt-r- prefix):
+   * ```
+   * .rt-r-size-1
+   * .rt-m-2
+   * .-rt-m-2
+   * .rt-Button.rt-r-size-1 (captures "rt-r-size-1")
+   * ```
+   *
+   * Should not match:
+   * .rt-Button
+   */
+  const classNameRegexp = /\.(-?rt-r-[a-z0-9-]+)/g;
+
+  // Check for rules that use compound props on a component:
+  // - a component name (prefixed with "rt-" and pascal cased)
+  // - followed by 2 or more prop selectors (lowercase, numbers, -)
+  //
+  // e.g. ".rt-DialogContent.rt-r-size-2.gray"
+  if (/\.rt-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
+    throw Error(`
+      "${node.selector}" looks like it uses compound props on a component.
+      "@breakpoints" does not support compound props yet.
+    `);
+  }
+
+  if (classNameRegexp.test(node.selector)) {
+    node.selector = node.selector.replace(classNameRegexp, `.${prefix}\\:$1`);
+  }
+}

package/postcss-whitespace.cjs

@@ -0,0 +1,27 @@
+// Clean up the whitespace mess left behind by other plugins
+module.exports = () => ({
+  postcssPlugin: 'postcss-whitespace',
+  Comment(comment) {
+    // Remove all comments
+    comment.remove();
+  },
+  Declaration(decl) {
+    if (decl.value.includes('\n')) {
+      // Remove line breaks and consequent spaces
+      decl.value = decl.value.replace(/\s+/g, ' ');
+      // Collapse whitespace around round brackets
+      decl.value = decl.value.replace(/\(\s/g, '(');
+      decl.value = decl.value.replace(/\s\)/g, ')');
+    }
+  },
+  AtRule(rule) {
+    // Remove line breaks before and after the rule
+    delete rule.raws.before;
+    delete rule.raws.after;
+  },
+  Rule(rule) {
+    rule.cleanRaws();
+  },
+});
+
+module.exports.postcss = true;

package/schemas/base-button.d.ts

@@ -0,0 +1,2 @@
+declare const schema: any;
+export default schema;

package/schemas/base-button.json

@@ -0,0 +1,284 @@
+{
+  "$ref": "#/definitions/Base-buttonSchema",
+  "definitions": {
+    "Base-buttonSchema": {
+      "type": "object",
+      "properties": {
+        "as": {
+          "type": "string",
+          "description": "HTML element type to render as"
+        },
+        "asChild": {
+          "type": "boolean",
+          "description": "Merge props with child element instead of rendering wrapper"
+        },
+        "size": {
+          "anyOf": [
+            {
+              "type": "string",
+              "enum": [
+                "1",
+                "2",
+                "3",
+                "4"
+              ]
+            },
+            {
+              "type": "object",
+              "properties": {
+                "initial": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "sm": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "md": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "lg": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
+                "xl": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                }
+              },
+              "additionalProperties": false
+            }
+          ],
+          "default": "2",
+          "description": "Button size for responsive design and interface density"
+        },
+        "variant": {
+          "type": "string",
+          "enum": [
+            "classic",
+            "solid",
+            "soft",
+            "surface",
+            "outline",
+            "ghost",
+            "override"
+          ],
+          "default": "solid",
+          "description": "Visual variant that determines the button's appearance and context"
+        },
+        "color": {
+          "type": "string",
+          "enum": [
+            "tomato",
+            "red",
+            "ruby",
+            "crimson",
+            "pink",
+            "plum",
+            "purple",
+            "violet",
+            "iris",
+            "indigo",
+            "blue",
+            "cyan",
+            "teal",
+            "jade",
+            "green",
+            "grass",
+            "brown",
+            "orange",
+            "sky",
+            "mint",
+            "lime",
+            "yellow",
+            "amber",
+            "gold",
+            "bronze",
+            "gray"
+          ],
+          "description": "Accent color for the button"
+        },
+        "highContrast": {
+          "type": "boolean",
+          "default": false,
+          "description": "High contrast mode for better accessibility"
+        },
+        "radius": {
+          "type": "string",
+          "enum": [
+            "none",
+            "small",
+            "medium",
+            "large",
+            "full"
+          ],
+          "description": "Border radius for the button"
+        },
+        "loading": {
+          "type": "boolean",
+          "default": false,
+          "description": "Loading state that shows a spinner and disables interaction"
+        },
+        "fullWidth": {
+          "type": "boolean",
+          "default": false,
+          "description": "Full width mode that expands the button to fill its container"
+        },
+        "material": {
+          "type": "string",
+          "enum": [
+            "solid",
+            "translucent"
+          ],
+          "description": "Material type for visual rendering and depth effects"
+        },
+        "panelBackground": {
+          "type": "string",
+          "enum": [
+            "solid",
+            "translucent"
+          ],
+          "description": "Panel background type (deprecated - use material instead)"
+        },
+        "flush": {
+          "type": "boolean",
+          "default": false,
+          "description": "Flush mode that removes visual padding for seamless text integration"
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Disabled state"
+        },
+        "type": {
+          "type": "string",
+          "enum": [
+            "button",
+            "submit",
+            "reset"
+          ],
+          "description": "Type attribute for form buttons"
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS class name"
+        },
+        "style": {
+          "type": "object",
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "description": "Inline styles"
+        },
+        "tabIndex": {
+          "type": "number",
+          "description": "Tab index for keyboard navigation"
+        },
+        "aria-label": {
+          "type": "string",
+          "description": "ARIA label for accessibility"
+        },
+        "aria-labelledby": {
+          "type": "string",
+          "description": "ARIA labelled by reference"
+        },
+        "aria-describedby": {
+          "type": "string",
+          "description": "ARIA described by reference"
+        },
+        "aria-expanded": {
+          "type": "boolean",
+          "description": "ARIA expanded state"
+        },
+        "aria-pressed": {
+          "type": "boolean",
+          "description": "ARIA pressed state"
+        },
+        "aria-current": {
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string",
+              "enum": [
+                "page",
+                "step",
+                "location",
+                "date",
+                "time"
+              ]
+            }
+          ],
+          "description": "ARIA current state"
+        },
+        "aria-controls": {
+          "type": "string",
+          "description": "ARIA controls reference"
+        },
+        "aria-owns": {
+          "type": "string",
+          "description": "ARIA owns reference"
+        },
+        "data-*": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "description": "Data attributes"
+        },
+        "id": {
+          "type": "string",
+          "description": "ID attribute"
+        },
+        "title": {
+          "type": "string",
+          "description": "Title attribute for tooltip"
+        },
+        "role": {
+          "type": "string",
+          "description": "Role attribute"
+        },
+        "children": {
+          "description": "Children elements"
+        }
+      },
+      "additionalProperties": false
+    }
+  },
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Base-button Component Props",
+  "description": "Props schema for the base-button component in Kookie UI",
+  "version": "1.0.0",
+  "generatedAt": "2026-05-06T17:58:51.952Z",
+  "source": "Zod schema"
+}

package/schemas/button.d.ts

@@ -0,0 +1,2 @@
+declare const schema: any;
+export default schema;