@radui/ui 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,26 @@
1
+ 'use client';
2
+ import React, { useState } from 'react';
3
+
4
+ const Accordion = _ref => {
5
+ let {
6
+ items
7
+ } = _ref;
8
+ const [activeIndex, setActiveIndex] = useState(null);
9
+ const handleClick = index => {
10
+ setActiveIndex(activeIndex === index ? null : index);
11
+ };
12
+ return /*#__PURE__*/React.createElement("div", null, items.map((item, index) => /*#__PURE__*/React.createElement("div", {
13
+ key: index
14
+ }, /*#__PURE__*/React.createElement("button", {
15
+ onClick: () => handleClick(index),
16
+ "aria-expanded": activeIndex === index,
17
+ "aria-controls": `content-${index}`
18
+ }, item.title), /*#__PURE__*/React.createElement("div", {
19
+ id: `content-${index}`,
20
+ role: "region",
21
+ "aria-labelledby": `section-${index}`,
22
+ hidden: activeIndex !== index
23
+ }, /*#__PURE__*/React.createElement("p", null, item.content)))));
24
+ };
25
+
26
+ export { Accordion as default };
package/dist/Avatar.js ADDED
@@ -0,0 +1,67 @@
1
+ 'use client';
2
+ import React from 'react';
3
+
4
+ function _extends() {
5
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
6
+ for (var i = 1; i < arguments.length; i++) {
7
+ var source = arguments[i];
8
+ for (var key in source) {
9
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
10
+ target[key] = source[key];
11
+ }
12
+ }
13
+ }
14
+ return target;
15
+ };
16
+ return _extends.apply(this, arguments);
17
+ }
18
+
19
+ const RAD_UI_CLASS_PREFIX = 'rad-ui';
20
+ const customClassSwitcher = function (customRootClass) {
21
+ let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
22
+ // applies a custom root class the user provides, else applies the default rad-ui classes to the component
23
+ // rad ui's classes are based on this logic
24
+
25
+ // add dashes between capitalized words
26
+ const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
27
+ if (customRootClass) return customRootClass;
28
+ if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
29
+ return '';
30
+ };
31
+
32
+ const COMPONENT_NAME = 'Avatar';
33
+ const TextRenderer = _ref => {
34
+ let {
35
+ rootClass,
36
+ fallback
37
+ } = _ref;
38
+ return /*#__PURE__*/React.createElement("div", {
39
+ className: `${rootClass} ${rootClass}-fallback`
40
+ }, fallback);
41
+ };
42
+ const Avatar = _ref2 => {
43
+ let {
44
+ children,
45
+ customRootClass = '',
46
+ fallback = '',
47
+ className = '',
48
+ src,
49
+ alt,
50
+ ...rest
51
+ } = _ref2;
52
+ const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
53
+ if (!src) {
54
+ return /*#__PURE__*/React.createElement(TextRenderer, {
55
+ fallback: fallback,
56
+ rootClass: rootClass
57
+ });
58
+ }
59
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", _extends({
60
+ src: src,
61
+ alt: alt,
62
+ className: `${rootClass} ${className}`
63
+ }, rest)));
64
+ };
65
+ Avatar.displayName = COMPONENT_NAME;
66
+
67
+ export { Avatar as default };
package/dist/Badge.js ADDED
@@ -0,0 +1,51 @@
1
+ 'use client';
2
+ import React from 'react';
3
+
4
+ function _extends() {
5
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
6
+ for (var i = 1; i < arguments.length; i++) {
7
+ var source = arguments[i];
8
+ for (var key in source) {
9
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
10
+ target[key] = source[key];
11
+ }
12
+ }
13
+ }
14
+ return target;
15
+ };
16
+ return _extends.apply(this, arguments);
17
+ }
18
+
19
+ const RAD_UI_CLASS_PREFIX = 'rad-ui';
20
+ const customClassSwitcher = function (customRootClass) {
21
+ let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
22
+ // applies a custom root class the user provides, else applies the default rad-ui classes to the component
23
+ // rad ui's classes are based on this logic
24
+
25
+ // add dashes between capitalized words
26
+ const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
27
+ if (customRootClass) return customRootClass;
28
+ if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
29
+ return '';
30
+ };
31
+
32
+ const COMPONENT_NAME = 'Badge';
33
+ const Badge = _ref => {
34
+ let {
35
+ children,
36
+ customRootClass = '',
37
+ className = '',
38
+ color = undefined,
39
+ ...props
40
+ } = _ref;
41
+ const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
42
+ if (color) {
43
+ props['data-accent-color'] = color;
44
+ }
45
+ return /*#__PURE__*/React.createElement("span", _extends({
46
+ className: `${rootClass} ${className}`
47
+ }, props), children);
48
+ };
49
+ Badge.displayName = COMPONENT_NAME;
50
+
51
+ export { Badge as default };
@@ -0,0 +1,47 @@
1
+ 'use client';
2
+ import React from 'react';
3
+
4
+ function _extends() {
5
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
6
+ for (var i = 1; i < arguments.length; i++) {
7
+ var source = arguments[i];
8
+ for (var key in source) {
9
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
10
+ target[key] = source[key];
11
+ }
12
+ }
13
+ }
14
+ return target;
15
+ };
16
+ return _extends.apply(this, arguments);
17
+ }
18
+
19
+ const RAD_UI_CLASS_PREFIX = 'rad-ui';
20
+ const customClassSwitcher = function (customRootClass) {
21
+ let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
22
+ // applies a custom root class the user provides, else applies the default rad-ui classes to the component
23
+ // rad ui's classes are based on this logic
24
+
25
+ // add dashes between capitalized words
26
+ const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
27
+ if (customRootClass) return customRootClass;
28
+ if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
29
+ return '';
30
+ };
31
+
32
+ const COMPONENT_NAME = 'BlockQuote';
33
+ const BlockQuote = _ref => {
34
+ let {
35
+ children,
36
+ customRootClass = '',
37
+ className = '',
38
+ ...props
39
+ } = _ref;
40
+ const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
41
+ return /*#__PURE__*/React.createElement("blockquote", _extends({
42
+ className: `${rootClass} ${className}`
43
+ }, props), children);
44
+ };
45
+ BlockQuote.displayName = COMPONENT_NAME;
46
+
47
+ export { BlockQuote as default };
package/dist/Button.js ADDED
@@ -0,0 +1,40 @@
1
+ 'use client';
2
+ import React from 'react';
3
+
4
+ function _extends() {
5
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
6
+ for (var i = 1; i < arguments.length; i++) {
7
+ var source = arguments[i];
8
+ for (var key in source) {
9
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
10
+ target[key] = source[key];
11
+ }
12
+ }
13
+ }
14
+ return target;
15
+ };
16
+ return _extends.apply(this, arguments);
17
+ }
18
+
19
+ // make the color prop default accent color
20
+ const Button = _ref => {
21
+ let {
22
+ children,
23
+ type = 'button',
24
+ color = undefined,
25
+ className = '',
26
+ variant = 'solid',
27
+ ...props
28
+ } = _ref;
29
+ // apply data attribute for accent color
30
+ // apply attribute only if color is present
31
+ if (color) {
32
+ props['data-accent-color'] = color;
33
+ }
34
+ return /*#__PURE__*/React.createElement("button", _extends({
35
+ type: "button",
36
+ className: `rad-ui-button button-${variant} ${className}`
37
+ }, props), children);
38
+ };
39
+
40
+ export { Button as default };
@@ -0,0 +1,66 @@
1
+ 'use client';
2
+ function _extends() {
3
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
4
+ for (var i = 1; i < arguments.length; i++) {
5
+ var source = arguments[i];
6
+ for (var key in source) {
7
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
8
+ target[key] = source[key];
9
+ }
10
+ }
11
+ }
12
+ return target;
13
+ };
14
+ return _extends.apply(this, arguments);
15
+ }
16
+
17
+ const RAD_UI_CLASS_PREFIX = 'rad-ui';
18
+ const customClassSwitcher = function (customRootClass) {
19
+ let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
20
+ // applies a custom root class the user provides, else applies the default rad-ui classes to the component
21
+ // rad ui's classes are based on this logic
22
+
23
+ // add dashes between capitalized words
24
+ const componentClassName = componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
25
+ if (customRootClass) return customRootClass;
26
+ if (componentName) return `${RAD_UI_CLASS_PREFIX}-${componentClassName}`;
27
+ return '';
28
+ };
29
+
30
+ const COMPONENT_NAME = 'Callout';
31
+ const InfoIcon = () => {
32
+ return /*#__PURE__*/React.createElement("svg", {
33
+ width: "18",
34
+ height: "18",
35
+ viewBox: "0 0 15 15",
36
+ fill: "none",
37
+ xmlns: "http://www.w3.org/2000/svg"
38
+ }, /*#__PURE__*/React.createElement("path", {
39
+ d: "M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z",
40
+ fill: "currentColor",
41
+ "fill-rule": "evenodd",
42
+ "clip-rule": "evenodd"
43
+ }));
44
+ };
45
+ const Callout = _ref => {
46
+ let {
47
+ children,
48
+ className = '',
49
+ color = undefined,
50
+ customRootClass = '',
51
+ ...restOfTheProps
52
+ } = _ref;
53
+ const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
54
+ if (color) {
55
+ restOfTheProps['data-accent-color'] = color;
56
+ }
57
+
58
+ // TODO: if children is a string then wrap it in a Text component, else return the children as is - need to add this to core logic helpers
59
+
60
+ return /*#__PURE__*/React.createElement("div", _extends({
61
+ className: `${rootClass} ${className}`
62
+ }, restOfTheProps), /*#__PURE__*/React.createElement(InfoIcon, null), " ", children);
63
+ };
64
+ Callout.displayName = COMPONENT_NAME;
65
+
66
+ export { Callout as default };
package/dist/Code.js ADDED
@@ -0,0 +1,13 @@
1
+ 'use client';
2
+ import React from 'react';
3
+
4
+ const Code = _ref => {
5
+ let {
6
+ children
7
+ } = _ref;
8
+ return /*#__PURE__*/React.createElement("code", {
9
+ className: "rui-code-root"
10
+ }, children);
11
+ };
12
+
13
+ export { Code as default };