@radui/ui 0.0.2 → 0.0.4

package/dist/components/Em.js

@@ -0,0 +1,47 @@
+'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/components/Heading.js

@@ -0,0 +1,76 @@
+'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 RENDER_AS_ENUMS = [{
+  label: 'H1',
+  tag: 'h1'
+}, {
+  label: 'H2',
+  tag: 'h2'
+}, {
+  label: 'H3',
+  tag: 'h3'
+}, {
+  label: 'H4',
+  tag: 'h4'
+}, {
+  label: 'H5',
+  tag: 'h5'
+}, {
+  label: 'H6',
+  tag: 'h6'
+}];
+const Heading = function (_ref) {
+  let {
+    children,
+    as = undefined,
+    customRootClass = '',
+    className = ''
+  } = _ref;
+  const rootClass = customClassSwitcher(customRootClass, as || 'h1');
+  for (var _len = arguments.length, props = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    props[_key - 1] = arguments[_key];
+  }
+  if (as !== undefined && RENDER_AS_ENUMS.find(item => item.tag === as)) {
+    const {
+      tag: Tag
+    } = RENDER_AS_ENUMS.find(item => item.tag === as);
+    return /*#__PURE__*/React.createElement(Tag, _extends({
+      className: `${rootClass} ${className}`
+    }, props), children);
+  }
+  return /*#__PURE__*/React.createElement("h1", _extends({
+    className: `${rootClass} ${className}`
+  }, props), children);
+};
+Heading.displayName = 'Heading';
+
+export { Heading as default };

package/dist/components/Kbd.js

@@ -0,0 +1,46 @@
+'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/components/Link.js

@@ -0,0 +1,51 @@
+'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/components/Quote.js

@@ -0,0 +1,47 @@
+'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/components/Separator.js

@@ -0,0 +1,32 @@
+'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 };

package/dist/components/Strong.js

@@ -0,0 +1,9 @@
+'use client';
+const Strong = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("strong", null, children);
+};
+
+export { Strong as default };

package/dist/components/Tabs.js

@@ -0,0 +1,146 @@
+'use client';
+import React, { useState } 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 '';
+};
+
+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 COMPONENT_NAME$3 = 'TabTrigger';
+const TabTrigger = _ref => {
+  let {
+    tab,
+    setActiveTab,
+    activeTab,
+    className = '',
+    customRootClass,
+    ...props
+  } = _ref;
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME$3);
+  const isActive = activeTab === tab.value;
+  const handleClick = tab => {
+    setActiveTab(tab.value);
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    role: "tab",
+    className: `${rootClass} ${isActive ? 'active' : ''} ${className}`
+  }, props, {
+    onClick: () => handleClick(tab)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: `${rootClass}-inner`
+  }, tab.label));
+};
+TabTrigger.displayName = 'TabTrigger';
+
+const COMPONENT_NAME$2 = 'TabList';
+const TabList = _ref => {
+  let {
+    tabs = [],
+    className = '',
+    setActiveTab,
+    activeTab,
+    customRootClass = ''
+  } = _ref;
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME$2);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "tablist",
+    "aria-orientation": "horizontal",
+    "aria-label": "todo",
+    className: `${rootClass} ${className}`
+  }, tabs.map((tab, index) => {
+    return /*#__PURE__*/React.createElement(TabTrigger, {
+      activeTab: activeTab,
+      setActiveTab: setActiveTab,
+      key: index,
+      tab: tab,
+      index: index
+    });
+  }));
+};
+TabList.displayName = COMPONENT_NAME$2;
+
+const COMPONENT_NAME$1 = 'TabContent';
+const TabContent = _ref => {
+  let {
+    tabs = [],
+    activeTab,
+    className = '',
+    customRootClass = ''
+  } = _ref;
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME$1);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${rootClass} ${className}`
+  }, tabs.map((tab, index) => {
+    if (tab.value === activeTab) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, tab.content);
+    }
+    return null;
+  }));
+};
+TabContent.displayName = COMPONENT_NAME$1;
+
+const COMPONENT_NAME = 'TabRoot';
+const TabRoot = _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("div", _extends({
+    className: `${rootClass} ${className}`
+  }, props), children);
+};
+TabRoot.displayName = COMPONENT_NAME;
+
+const Tabs = _ref => {
+  let {
+    tabs = [],
+    ...props
+  } = _ref;
+  // This should be a value <`tabs.value`> that is passed in from the parent component
+  const [activeTab, setActiveTab] = useState(tabs[0].value || '');
+  return /*#__PURE__*/React.createElement(TabRoot, props, /*#__PURE__*/React.createElement(TabList, {
+    activeTab: activeTab,
+    setActiveTab: setActiveTab,
+    tabs: tabs
+  }), /*#__PURE__*/React.createElement(TabContent, {
+    activeTab: activeTab,
+    tabs: tabs
+  }));
+};
+Tabs.List = TabList;
+Tabs.Content = TabContent;
+Tabs.Root = TabRoot;
+
+export { Tabs as default };

package/dist/components/Text.js

@@ -0,0 +1,51 @@
+'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 '';
+};
+
+// Can be rendered as p, label, div, span, etc.
+// TODO: Add as prop support
+// TODO: Add a core reusable function to check and render an as prop
+
+const COMPONENT_NAME = 'Text';
+const Text = _ref => {
+  let {
+    children,
+    customRootClass = '',
+    className = '',
+    ...props
+  } = _ref;
+  const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+  return /*#__PURE__*/React.createElement("p", _extends({
+    className: `${rootClass} ${className}`
+  }, props), children);
+};
+Text.displayName = COMPONENT_NAME;
+
+export { Text as default };

package/dist/components/TextArea.js

@@ -0,0 +1,8 @@
+'use client';
+import React from 'react';
+
+const TextArea = _ref => {
+  return /*#__PURE__*/React.createElement("textarea", null);
+};
+
+export { TextArea as default };