@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.
- package/dist/Accordion.js +26 -0
- package/dist/Avatar.js +67 -0
- package/dist/Badge.js +51 -0
- package/dist/BlockQuote.js +47 -0
- package/dist/Button.js +40 -0
- package/dist/Callout.js +66 -0
- package/dist/Code.js +13 -0
- package/dist/Dropdown.js +1751 -0
- package/dist/Em.js +47 -0
- package/dist/Heading.js +76 -0
- package/dist/Kbd.js +46 -0
- package/dist/Link.js +51 -0
- package/dist/Quote.js +47 -0
- package/dist/Separator.js +32 -0
- package/dist/Strong.js +9 -0
- package/dist/Tabs.js +146 -0
- package/dist/Text.js +51 -0
- package/dist/TextArea.js +8 -0
- package/dist/Tooltip.js +2716 -0
- package/package.json +7 -4
- package/dist/index.es.js +0 -3228
- package/dist/index.js +0 -3228
|
@@ -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 };
|
package/dist/Callout.js
ADDED
|
@@ -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