@radui/ui 0.0.3 → 0.0.5

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@radui/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "",
   "main": "dist",
   "type": "module",
+  "exports": {
+    "./Avatar": "./dist/components/Avatar.js"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
+    "coverage": "jest --coverage",
     "clean": "rimraf dist",
+    "chromatic": "chromatic --exit-zero-on-changes",
     "sb": "storybook dev -p 6006",
     "patch": "npm version patch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-css": "parcel build styles/themes/default.scss --out-dir dist/themes/main.css",
-    "build": "npm run clean && npm run build-css && rollup -c",
+    "build-css": "parcel build styles/themes/default.scss --out-dir dist/themes/",
+    "build": "npm run test && npm run clean && npm run build-css && rollup -c",
     "generate-tokens": "node ./scripts/tokenGen",
-    "publish": "npm publish --access public",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix"
+    "publish": "npm run build && npm publish --access public",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
+    "update-rad": "npm update @radui/ui"
   },
   "repository": {
     "type": "git",
@@ -27,11 +33,15 @@
   "author": "Pranay Kothapalli",
   "license": "ISC",
   "devDependencies": {
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.3",
+    "@radui/ui": "^0.0.4",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
@@ -41,20 +51,26 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "autoprefixer": "^10.4.15",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.52.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^39.1.1",
+    "eslint-config-standard-with-typescript": "^43.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
+    "install": "^0.13.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "node-sass": "^9.0.0",
+    "npm": "^10.2.5",
     "parcel-bundler": "^1.12.5",
     "postcss": "^8.4.29",
     "prop-types": "^15.8.1",
@@ -67,11 +83,10 @@
     "sass-loader": "^13.3.2",
     "storybook": "^7.4.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.2",
-    "@radui/ui": "^0.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/Accordion.js

@@ -1,26 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-
-const Accordion = _ref => {
-  let {
-    items
-  } = _ref;
-  const [activeIndex, setActiveIndex] = useState(null);
-  const handleClick = index => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-  return /*#__PURE__*/React.createElement("div", null, items.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    key: index
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => handleClick(index),
-    "aria-expanded": activeIndex === index,
-    "aria-controls": `content-${index}`
-  }, item.title), /*#__PURE__*/React.createElement("div", {
-    id: `content-${index}`,
-    role: "region",
-    "aria-labelledby": `section-${index}`,
-    hidden: activeIndex !== index
-  }, /*#__PURE__*/React.createElement("p", null, item.content)))));
-};
-
-export { Accordion as default };

package/dist/Avatar.js

@@ -1,67 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Avatar';
-const TextRenderer = _ref => {
-  let {
-    rootClass,
-    fallback
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${rootClass} ${rootClass}-fallback`
-  }, fallback);
-};
-const Avatar = _ref2 => {
-  let {
-    children,
-    customRootClass = '',
-    fallback = '',
-    className = '',
-    src,
-    alt,
-    ...rest
-  } = _ref2;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  if (!src) {
-    return /*#__PURE__*/React.createElement(TextRenderer, {
-      fallback: fallback,
-      rootClass: rootClass
-    });
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", _extends({
-    src: src,
-    alt: alt,
-    className: `${rootClass} ${className}`
-  }, rest)));
-};
-Avatar.displayName = COMPONENT_NAME;
-
-export { Avatar as default };

package/dist/Badge.js

@@ -1,51 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Badge';
-const Badge = _ref => {
-  let {
-    children,
-    customRootClass = '',
-    className = '',
-    color = undefined,
-    ...props
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  if (color) {
-    props['data-accent-color'] = color;
-  }
-  return /*#__PURE__*/React.createElement("span", _extends({
-    className: `${rootClass} ${className}`
-  }, props), children);
-};
-Badge.displayName = COMPONENT_NAME;
-
-export { Badge as default };

package/dist/BlockQuote.js

@@ -1,47 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'BlockQuote';
-const BlockQuote = _ref => {
-  let {
-    children,
-    customRootClass = '',
-    className = '',
-    ...props
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  return /*#__PURE__*/React.createElement("blockquote", _extends({
-    className: `${rootClass} ${className}`
-  }, props), children);
-};
-BlockQuote.displayName = COMPONENT_NAME;
-
-export { BlockQuote as default };

package/dist/Button.js

@@ -1,40 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-// make the color prop default accent color
-const Button = _ref => {
-  let {
-    children,
-    type = 'button',
-    color = undefined,
-    className = '',
-    variant = 'solid',
-    ...props
-  } = _ref;
-  // apply data attribute for accent color
-  // apply attribute only if color is present
-  if (color) {
-    props['data-accent-color'] = color;
-  }
-  return /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    className: `rad-ui-button button-${variant} ${className}`
-  }, props), children);
-};
-
-export { Button as default };

package/dist/Em.js

@@ -1,47 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Em';
-const Em = _ref => {
-  let {
-    children,
-    customRootClass = '',
-    className = '',
-    ...props
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  return /*#__PURE__*/React.createElement("em", _extends({
-    className: `${rootClass} ${className}`
-  }, props), children);
-};
-Em.displayName = COMPONENT_NAME;
-
-export { Em as default };

package/dist/Kbd.js

@@ -1,46 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Kbd';
-const Kbd = _ref => {
-  let {
-    children,
-    customRootClass = '',
-    className = '',
-    ...rest
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  return /*#__PURE__*/React.createElement("kbd", _extends({
-    className: `${rootClass} ${className}`
-  }, rest), children);
-};
-
-export { Kbd as default };

package/dist/Link.js

@@ -1,51 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Link';
-const Link = _ref => {
-  let {
-    children,
-    href = '#',
-    alt = '',
-    customRootClass = '',
-    className = '',
-    ...props
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  return /*#__PURE__*/React.createElement("a", _extends({
-    href: href,
-    alt: alt,
-    className: `${rootClass} ${className}`
-  }, props), children);
-};
-Link.displayName = COMPONENT_NAME;
-
-export { Link as default };

package/dist/Quote.js

@@ -1,47 +0,0 @@
-'use client';
-import React from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Quote';
-const Quote = _ref => {
-  let {
-    children,
-    customRootClass = '',
-    className = '',
-    ...props
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  return /*#__PURE__*/React.createElement("q", _extends({
-    className: `${rootClass} ${className}`
-  }, props), children);
-};
-Quote.displayName = COMPONENT_NAME;
-
-export { Quote as default };

package/dist/Separator.js

@@ -1,32 +0,0 @@
-'use client';
-import React from 'react';
-
-const RAD_UI_CLASS_PREFIX = 'rad-ui';
-const customClassSwitcher = function (customRootClass) {
-  let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  // applies a custom root class the user provides, else applies the default rad-ui classes to the component
-  // rad ui's classes are based on this logic
-
-  // add dashes between capitalized words
-  const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  if (customRootClass) return customRootClass;
-  if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
-  return '';
-};
-
-const COMPONENT_NAME = 'Separator';
-const Separator = _ref => {
-  let {
-    orientation = 'horizontal',
-    className = '',
-    customRootClass = ''
-  } = _ref;
-  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-  const orientationClass = orientation === 'vertical' ? `${rootClass}-vertical` : `${rootClass}-horizontal`;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${rootClass} ${orientationClass} ${className}`
-  });
-};
-Separator.displayName = COMPONENT_NAME;
-
-export { Separator as default };