@kushagradhawan/kookie-ui 0.1.0

package/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "@kushagradhawan/kookie-ui",
+  "version": "0.1.0",
+  "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"
+      }
+    },
+    "./*": "./*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "license": "MIT",
+  "files": [
+    "src/**",
+    "dist/**",
+    "tokens/**",
+    "layout/**",
+    "*.css",
+    "postcss-breakpoints.cjs",
+    "postcss-whitespace.cjs"
+  ],
+  "scripts": {
+    "build": "pnpm build:js && pnpm build:css",
+    "build:js": "pnpm build:js:cjs && pnpm build:js:esm && pnpm build:js:cjs:types && pnpm build:js:esm:types",
+    "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"
+  },
+  "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "classnames": "^2.3.2",
+    "radix-ui": "^1.1.3",
+    "react-remove-scroll-bar": "^2.3.8"
+  },
+  "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",
+    "autoprefixer": "10.4.19",
+    "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",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-custom-media": "10.0.2",
+    "postcss-discard-empty": "6.0.1",
+    "postcss-import": "16.0.0",
+    "postcss-nesting": "12.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "stylelint": "16.6.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1"
+  },
+  "homepage": "https://github.com/kushagradhawan/HelloKookie",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kushagradhawan/HelloKookie.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kushagradhawan/HelloKookie/issues"
+  }
+}

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/src/components/_internal/base-button.css

@@ -0,0 +1,358 @@
+.rt-BaseButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  user-select: none;
+  vertical-align: top;
+
+  font-family: var(--default-font-family);
+  font-style: normal;
+  text-align: center;
+
+  &:where([data-disabled]) {
+    --spinner-opacity: 1;
+  }
+
+  &:where(.rt-loading) {
+    position: relative;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseButton {
+  &:where(:not(.rt-variant-ghost)) {
+    height: var(--base-button-height);
+  }
+  &:where(.rt-variant-ghost) {
+    box-sizing: content-box;
+
+    /* Make sure that the height is not stretched in a Flex/Grid layout */
+    height: fit-content;
+  }
+}
+
+@breakpoints {
+  .rt-BaseButton {
+    &:where(.rt-r-size-1) {
+      --base-button-classic-active-padding-top: 1px;
+      --base-button-height: var(--space-5);
+      border-radius: max(var(--radius-1), var(--radius-full));
+    }
+    &:where(.rt-r-size-2) {
+      --base-button-classic-active-padding-top: 2px;
+      --base-button-height: var(--space-6);
+      border-radius: max(var(--radius-2), var(--radius-full));
+    }
+    &:where(.rt-r-size-3) {
+      --base-button-classic-active-padding-top: 2px;
+      --base-button-height: var(--space-7);
+      border-radius: max(var(--radius-3), var(--radius-full));
+    }
+    &:where(.rt-r-size-4) {
+      --base-button-classic-active-padding-top: 2px;
+      --base-button-height: var(--space-8);
+      border-radius: max(var(--radius-4), var(--radius-full));
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* classic */
+
+/* prettier-ignore */
+:where(.radix-themes) {
+  --base-button-classic-shadow: var(--shadow-3);
+  --base-button-classic-hover-shadow: var(--shadow-3);
+  --base-button-classic-active-shadow: var(--shadow-2);
+  --base-button-classic-disabled-shadow: none;
+}
+/* prettier-ignore */
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --base-button-classic-shadow: var(--shadow-3);
+  --base-button-classic-hover-shadow: var(--shadow-3);
+  --base-button-classic-active-shadow: var(--shadow-2);
+  --base-button-classic-disabled-shadow: none;
+}
+
+.rt-BaseButton:where(.rt-variant-classic) {
+  background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
+  color: var(--accent-contrast);
+  box-shadow: var(--base-button-classic-shadow);
+
+  &:where(.rt-high-contrast) {
+    background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
+    color: var(--gray-1);
+
+    /* Use solid color for non-gray accent colors */
+    &:where(:not([data-accent-color='gray'])) {
+      background: var(--accent-12);
+    }
+  }
+  /* Better -webkit-tap-highlight-color */
+  @media (pointer: coarse) {
+    &:where(:active:not([data-state='open'])) {
+      outline: 0.5em solid var(--accent-a4);
+      outline-offset: 0;
+    }
+  }
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+  @media (hover: hover) {
+    &:where(:hover) {
+      background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+      box-shadow: var(--base-button-classic-hover-shadow);
+      &:where(.rt-high-contrast) {
+        background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
+        filter: contrast(0.88) saturate(1.1) brightness(1.1);
+
+        /* Use solid color for non-gray accent colors */
+        &:where(:not([data-accent-color='gray'])) {
+          background: var(--accent-12);
+        }
+      }
+    }
+  }
+  &:where([data-state='open']) {
+    background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+    box-shadow: var(--base-button-classic-hover-shadow);
+    &:where(.rt-high-contrast) {
+      background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
+      filter: contrast(0.88) saturate(1.1) brightness(1.1);
+
+      /* Use solid color for non-gray accent colors */
+      &:where(:not([data-accent-color='gray'])) {
+        background: var(--accent-12);
+      }
+    }
+  }
+  &:where(:active:not([data-state='open'], [data-disabled])) {
+    background: linear-gradient(to bottom, var(--accent-10), var(--accent-9));
+    box-shadow: var(--base-button-classic-active-shadow);
+
+    &:where(.rt-high-contrast) {
+      background: linear-gradient(to bottom, var(--accent-12), var(--accent-11));
+      filter: contrast(0.82) saturate(1.2) brightness(1.16);
+
+      /* Use solid color for non-gray accent colors */
+      &:where(:not([data-accent-color='gray'])) {
+        background: var(--accent-12);
+      }
+    }
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    background: var(--gray-a3);
+    box-shadow: var(--base-button-classic-disabled-shadow);
+    outline: none;
+    filter: none;
+  }
+}
+
+/* solid */
+
+:where(.radix-themes) {
+  --base-button-solid-active-filter: brightness(0.92) saturate(1.1);
+  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+  --base-button-solid-high-contrast-active-filter: contrast(0.82) saturate(1.2) brightness(1.16);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --base-button-solid-active-filter: brightness(1.08);
+  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+  --base-button-solid-high-contrast-active-filter: brightness(0.95) saturate(1.2);
+}
+
+.rt-BaseButton:where(.rt-variant-solid) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-10);
+    }
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-10);
+  }
+  &:where(:active:not([data-state='open'])) {
+    background-color: var(--accent-10);
+    filter: var(--base-button-solid-active-filter);
+  }
+  /* Better -webkit-tap-highlight-color */
+  @media (pointer: coarse) {
+    &:where(:active:not([data-state='open'])) {
+      outline: 0.5em solid var(--accent-a4);
+      outline-offset: 0;
+    }
+  }
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+  &:where(.rt-high-contrast) {
+    background-color: var(--accent-12);
+    color: var(--gray-1);
+
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--accent-12);
+        filter: var(--base-button-solid-high-contrast-hover-filter);
+      }
+    }
+    &:where([data-state='open']) {
+      background-color: var(--accent-12);
+      filter: var(--base-button-solid-high-contrast-hover-filter);
+    }
+    &:where(:active:not([data-state='open'])) {
+      background-color: var(--accent-12);
+      filter: var(--base-button-solid-high-contrast-active-filter);
+    }
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+    outline: none;
+    filter: none;
+  }
+}
+
+/* soft / ghost */
+
+.rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost) {
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+  }
+}
+
+.rt-BaseButton:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--accent-8);
+    outline-offset: -1px;
+  }
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-a4);
+    }
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-a4);
+  }
+  &:where(:active:not([data-state='open'])) {
+    background-color: var(--accent-a5);
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+  }
+}
+
+.rt-BaseButton:where(.rt-variant-ghost) {
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-a3);
+    }
+  }
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-a3);
+  }
+  &:where(:active:not([data-state='open'])) {
+    background-color: var(--accent-a4);
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    background-color: transparent;
+  }
+}
+
+/* outline */
+
+.rt-BaseButton:where(.rt-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-a2);
+    }
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-a2);
+  }
+  &:where(:active:not([data-state='open'])) {
+    background-color: var(--accent-a3);
+  }
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+  &:where(.rt-high-contrast) {
+    box-shadow:
+      inset 0 0 0 1px var(--accent-a7),
+      inset 0 0 0 1px var(--gray-a11);
+    color: var(--accent-12);
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    background-color: transparent;
+  }
+}
+
+/* surface */
+
+.rt-BaseButton:where(.rt-variant-surface) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  color: var(--accent-a11);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      box-shadow: inset 0 0 0 1px var(--accent-a8);
+    }
+  }
+  &:where([data-state='open']) {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+  }
+  &:where(:active:not([data-state='open'])) {
+    background-color: var(--accent-a3);
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+  }
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+  &:where([data-disabled]) {
+    color: var(--gray-a8);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+    background-color: var(--gray-a2);
+  }
+}

package/src/components/_internal/base-button.props.ts

@@ -0,0 +1,25 @@
+import { asChildPropDef } from '../../props/as-child.prop.js';
+import { accentColorPropDef } from '../../props/color.prop.js';
+import { highContrastPropDef } from '../../props/high-contrast.prop.js';
+import { radiusPropDef } from '../../props/radius.prop.js';
+
+import type { PropDef } from '../../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
+
+const baseButtonPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+  loading: { type: 'boolean', className: 'rt-loading', default: false },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  loading: PropDef<boolean>;
+};
+
+export { baseButtonPropDefs };