uiplex 1.0.2 → 1.2.0
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/README.md +151 -403
- package/dist/Accordion/Accordion.d.ts +40 -0
- package/dist/Accordion/Accordion.d.ts.map +1 -0
- package/dist/Accordion/index.d.ts +3 -0
- package/dist/Accordion/index.d.ts.map +1 -0
- package/dist/Tabs/Tabs.d.ts +44 -0
- package/dist/Tabs/Tabs.d.ts.map +1 -0
- package/dist/Tabs/index.d.ts +3 -0
- package/dist/Tabs/index.d.ts.map +1 -0
- package/dist/index.cjs +250 -0
- package/dist/index.css +708 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +242 -1
- package/package.json +1 -1
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1066,6 +1066,247 @@ const ToastContainerGlobal = () => {
|
|
|
1066
1066
|
return (jsx(Fragment, { children: positionsWithToasts.map((position) => (jsx(ToastContainer, { toasts: toastsByPosition[position], position: position, onClose: handleClose }, position))) }));
|
|
1067
1067
|
};
|
|
1068
1068
|
|
|
1069
|
+
const TabContext = createContext(undefined);
|
|
1070
|
+
const useTabContext = () => {
|
|
1071
|
+
const context = useContext(TabContext);
|
|
1072
|
+
if (!context) {
|
|
1073
|
+
throw new Error("Tab components must be used within a Tabs component");
|
|
1074
|
+
}
|
|
1075
|
+
return context;
|
|
1076
|
+
};
|
|
1077
|
+
const Tabs = ({ children, defaultIndex = 0, index: controlledIndex, onChange, variant = "line", size = "md", colorScheme = "blue", orientation = "horizontal", className = "", style, }) => {
|
|
1078
|
+
const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex);
|
|
1079
|
+
const isControlled = controlledIndex !== undefined;
|
|
1080
|
+
const activeIndex = isControlled ? controlledIndex : uncontrolledIndex;
|
|
1081
|
+
const setActiveIndex = useCallback((newIndex) => {
|
|
1082
|
+
if (!isControlled) {
|
|
1083
|
+
setUncontrolledIndex(newIndex);
|
|
1084
|
+
}
|
|
1085
|
+
onChange?.(newIndex);
|
|
1086
|
+
}, [isControlled, onChange]);
|
|
1087
|
+
const contextValue = {
|
|
1088
|
+
activeIndex,
|
|
1089
|
+
setActiveIndex,
|
|
1090
|
+
variant,
|
|
1091
|
+
size,
|
|
1092
|
+
colorScheme,
|
|
1093
|
+
orientation,
|
|
1094
|
+
};
|
|
1095
|
+
const tabsClasses = [
|
|
1096
|
+
"ui-tabs",
|
|
1097
|
+
`ui-tabs--${orientation}`,
|
|
1098
|
+
`ui-tabs--${variant}`,
|
|
1099
|
+
className,
|
|
1100
|
+
]
|
|
1101
|
+
.filter(Boolean)
|
|
1102
|
+
.join(" ");
|
|
1103
|
+
return (jsx(TabContext.Provider, { value: contextValue, children: jsx("div", { className: tabsClasses, style: style, role: "tablist", children: children }) }));
|
|
1104
|
+
};
|
|
1105
|
+
const TabList = ({ children, className = "", style, }) => {
|
|
1106
|
+
const { orientation } = useTabContext();
|
|
1107
|
+
const tabListClasses = [
|
|
1108
|
+
"ui-tab-list",
|
|
1109
|
+
`ui-tab-list--${orientation}`,
|
|
1110
|
+
className,
|
|
1111
|
+
]
|
|
1112
|
+
.filter(Boolean)
|
|
1113
|
+
.join(" ");
|
|
1114
|
+
return (jsx("div", { className: tabListClasses, style: style, role: "tablist", children: children }));
|
|
1115
|
+
};
|
|
1116
|
+
const Tab = ({ children, index = 0, disabled = false, icon, className = "", style, }) => {
|
|
1117
|
+
const { activeIndex, setActiveIndex, variant, size, colorScheme } = useTabContext();
|
|
1118
|
+
const tabRef = useRef(null);
|
|
1119
|
+
const isActive = activeIndex === index;
|
|
1120
|
+
const handleClick = () => {
|
|
1121
|
+
if (!disabled) {
|
|
1122
|
+
setActiveIndex(index);
|
|
1123
|
+
}
|
|
1124
|
+
};
|
|
1125
|
+
const handleKeyDown = (e) => {
|
|
1126
|
+
if (disabled)
|
|
1127
|
+
return;
|
|
1128
|
+
const tabs = Array.from(document.querySelectorAll(`.ui-tab-list [role="tab"]:not([aria-disabled="true"])`));
|
|
1129
|
+
const currentTabIndex = tabs.findIndex((tab) => tab === tabRef.current);
|
|
1130
|
+
let nextIndex = currentTabIndex;
|
|
1131
|
+
switch (e.key) {
|
|
1132
|
+
case "ArrowRight":
|
|
1133
|
+
case "ArrowDown":
|
|
1134
|
+
e.preventDefault();
|
|
1135
|
+
nextIndex = (currentTabIndex + 1) % tabs.length;
|
|
1136
|
+
break;
|
|
1137
|
+
case "ArrowLeft":
|
|
1138
|
+
case "ArrowUp":
|
|
1139
|
+
e.preventDefault();
|
|
1140
|
+
nextIndex =
|
|
1141
|
+
currentTabIndex - 1 < 0 ? tabs.length - 1 : currentTabIndex - 1;
|
|
1142
|
+
break;
|
|
1143
|
+
case "Home":
|
|
1144
|
+
e.preventDefault();
|
|
1145
|
+
nextIndex = 0;
|
|
1146
|
+
break;
|
|
1147
|
+
case "End":
|
|
1148
|
+
e.preventDefault();
|
|
1149
|
+
nextIndex = tabs.length - 1;
|
|
1150
|
+
break;
|
|
1151
|
+
default:
|
|
1152
|
+
return;
|
|
1153
|
+
}
|
|
1154
|
+
const nextTab = tabs[nextIndex];
|
|
1155
|
+
if (nextTab) {
|
|
1156
|
+
const tabIndex = parseInt(nextTab.getAttribute("data-tab-index") || "0", 10);
|
|
1157
|
+
setActiveIndex(tabIndex);
|
|
1158
|
+
nextTab.focus();
|
|
1159
|
+
}
|
|
1160
|
+
};
|
|
1161
|
+
const tabClasses = [
|
|
1162
|
+
"ui-tab",
|
|
1163
|
+
`ui-tab--${variant}`,
|
|
1164
|
+
`ui-tab--${size}`,
|
|
1165
|
+
`ui-tab--${colorScheme}`,
|
|
1166
|
+
isActive && "ui-tab--active",
|
|
1167
|
+
disabled && "ui-tab--disabled",
|
|
1168
|
+
className,
|
|
1169
|
+
]
|
|
1170
|
+
.filter(Boolean)
|
|
1171
|
+
.join(" ");
|
|
1172
|
+
return (jsxs("button", { ref: tabRef, role: "tab", "aria-selected": isActive, "aria-disabled": disabled, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, "data-tab-index": index, tabIndex: isActive ? 0 : -1, className: tabClasses, onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, style: style, children: [icon && jsx("span", { className: "ui-tab__icon", children: icon }), jsx("span", { className: "ui-tab__label", children: children })] }));
|
|
1173
|
+
};
|
|
1174
|
+
const TabPanels = ({ children, className = "", style, }) => {
|
|
1175
|
+
return (jsx("div", { className: `ui-tab-panels ${className}`, style: style, children: children }));
|
|
1176
|
+
};
|
|
1177
|
+
const TabPanel = ({ children, index = 0, className = "", style, }) => {
|
|
1178
|
+
const { activeIndex } = useTabContext();
|
|
1179
|
+
const isActive = activeIndex === index;
|
|
1180
|
+
const tabPanelClasses = [
|
|
1181
|
+
"ui-tab-panel",
|
|
1182
|
+
isActive && "ui-tab-panel--active",
|
|
1183
|
+
className,
|
|
1184
|
+
]
|
|
1185
|
+
.filter(Boolean)
|
|
1186
|
+
.join(" ");
|
|
1187
|
+
return (jsx("div", { role: "tabpanel", id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, hidden: !isActive, className: tabPanelClasses, style: style, children: children }));
|
|
1188
|
+
};
|
|
1189
|
+
|
|
1190
|
+
const AccordionContext = createContext(undefined);
|
|
1191
|
+
const useAccordionContext = () => {
|
|
1192
|
+
const context = useContext(AccordionContext);
|
|
1193
|
+
if (!context) {
|
|
1194
|
+
throw new Error("Accordion components must be used within an Accordion component");
|
|
1195
|
+
}
|
|
1196
|
+
return context;
|
|
1197
|
+
};
|
|
1198
|
+
const Accordion = ({ children, defaultIndex, index: controlledIndexes, onChange, allowMultiple = false, allowToggle = true, variant = "default", size = "md", colorScheme = "blue", className = "", style, }) => {
|
|
1199
|
+
const normalizeIndexes = useCallback((index) => {
|
|
1200
|
+
if (index === undefined)
|
|
1201
|
+
return [];
|
|
1202
|
+
if (typeof index === "number")
|
|
1203
|
+
return [index];
|
|
1204
|
+
return index;
|
|
1205
|
+
}, []);
|
|
1206
|
+
const [uncontrolledIndexes, setUncontrolledIndexes] = useState(() => normalizeIndexes(defaultIndex));
|
|
1207
|
+
const isControlled = controlledIndexes !== undefined;
|
|
1208
|
+
const openIndexes = isControlled
|
|
1209
|
+
? normalizeIndexes(controlledIndexes)
|
|
1210
|
+
: uncontrolledIndexes;
|
|
1211
|
+
const toggleIndex = useCallback((index) => {
|
|
1212
|
+
const isOpen = openIndexes.includes(index);
|
|
1213
|
+
let newIndexes;
|
|
1214
|
+
if (allowMultiple) {
|
|
1215
|
+
if (isOpen && allowToggle) {
|
|
1216
|
+
newIndexes = openIndexes.filter((i) => i !== index);
|
|
1217
|
+
}
|
|
1218
|
+
else if (!isOpen) {
|
|
1219
|
+
newIndexes = [...openIndexes, index];
|
|
1220
|
+
}
|
|
1221
|
+
else {
|
|
1222
|
+
return; // Already open and toggle not allowed
|
|
1223
|
+
}
|
|
1224
|
+
}
|
|
1225
|
+
else {
|
|
1226
|
+
// Single mode
|
|
1227
|
+
if (isOpen && allowToggle) {
|
|
1228
|
+
newIndexes = [];
|
|
1229
|
+
}
|
|
1230
|
+
else if (!isOpen) {
|
|
1231
|
+
newIndexes = [index];
|
|
1232
|
+
}
|
|
1233
|
+
else {
|
|
1234
|
+
return; // Already open and toggle not allowed
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
if (!isControlled) {
|
|
1238
|
+
setUncontrolledIndexes(newIndexes);
|
|
1239
|
+
}
|
|
1240
|
+
onChange?.(newIndexes);
|
|
1241
|
+
}, [openIndexes, allowMultiple, allowToggle, isControlled, onChange]);
|
|
1242
|
+
const contextValue = {
|
|
1243
|
+
openIndexes,
|
|
1244
|
+
toggleIndex,
|
|
1245
|
+
allowMultiple,
|
|
1246
|
+
allowToggle,
|
|
1247
|
+
variant,
|
|
1248
|
+
size,
|
|
1249
|
+
colorScheme,
|
|
1250
|
+
};
|
|
1251
|
+
const accordionClasses = [
|
|
1252
|
+
"ui-accordion",
|
|
1253
|
+
`ui-accordion--${variant}`,
|
|
1254
|
+
className,
|
|
1255
|
+
]
|
|
1256
|
+
.filter(Boolean)
|
|
1257
|
+
.join(" ");
|
|
1258
|
+
return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { className: accordionClasses, style: style, children: children }) }));
|
|
1259
|
+
};
|
|
1260
|
+
const AccordionItem = ({ children, index = 0, className = "", style, }) => {
|
|
1261
|
+
const { variant } = useAccordionContext();
|
|
1262
|
+
const itemClasses = [
|
|
1263
|
+
"ui-accordion-item",
|
|
1264
|
+
`ui-accordion-item--${variant}`,
|
|
1265
|
+
className,
|
|
1266
|
+
]
|
|
1267
|
+
.filter(Boolean)
|
|
1268
|
+
.join(" ");
|
|
1269
|
+
return (jsx("div", { className: itemClasses, style: style, "data-accordion-index": index, children: children }));
|
|
1270
|
+
};
|
|
1271
|
+
const AccordionButton = ({ children, index = 0, icon, iconPosition = "right", className = "", style, }) => {
|
|
1272
|
+
const { openIndexes, toggleIndex, variant, size, colorScheme, } = useAccordionContext();
|
|
1273
|
+
const buttonRef = useRef(null);
|
|
1274
|
+
const isOpen = openIndexes.includes(index);
|
|
1275
|
+
const handleClick = () => {
|
|
1276
|
+
toggleIndex(index);
|
|
1277
|
+
};
|
|
1278
|
+
const handleKeyDown = (e) => {
|
|
1279
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1280
|
+
e.preventDefault();
|
|
1281
|
+
toggleIndex(index);
|
|
1282
|
+
}
|
|
1283
|
+
};
|
|
1284
|
+
const buttonClasses = [
|
|
1285
|
+
"ui-accordion-button",
|
|
1286
|
+
`ui-accordion-button--${variant}`,
|
|
1287
|
+
`ui-accordion-button--${size}`,
|
|
1288
|
+
`ui-accordion-button--${colorScheme}`,
|
|
1289
|
+
isOpen && "ui-accordion-button--open",
|
|
1290
|
+
className,
|
|
1291
|
+
]
|
|
1292
|
+
.filter(Boolean)
|
|
1293
|
+
.join(" ");
|
|
1294
|
+
const iconElement = icon || (jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ui-accordion-button__icon", children: jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
1295
|
+
return (jsxs("button", { ref: buttonRef, type: "button", className: buttonClasses, onClick: handleClick, onKeyDown: handleKeyDown, "aria-expanded": isOpen, "aria-controls": `accordion-panel-${index}`, id: `accordion-button-${index}`, style: style, children: [iconPosition === "left" && (jsx("span", { className: "ui-accordion-button__icon-wrapper", children: iconElement })), jsx("span", { className: "ui-accordion-button__label", children: children }), iconPosition === "right" && (jsx("span", { className: "ui-accordion-button__icon-wrapper", children: iconElement }))] }));
|
|
1296
|
+
};
|
|
1297
|
+
const AccordionPanel = ({ children, index = 0, className = "", style, }) => {
|
|
1298
|
+
const { openIndexes } = useAccordionContext();
|
|
1299
|
+
const isOpen = openIndexes.includes(index);
|
|
1300
|
+
const panelClasses = [
|
|
1301
|
+
"ui-accordion-panel",
|
|
1302
|
+
isOpen && "ui-accordion-panel--open",
|
|
1303
|
+
className,
|
|
1304
|
+
]
|
|
1305
|
+
.filter(Boolean)
|
|
1306
|
+
.join(" ");
|
|
1307
|
+
return (jsx("div", { id: `accordion-panel-${index}`, role: "region", "aria-labelledby": `accordion-button-${index}`, hidden: !isOpen, className: panelClasses, style: style, children: jsx("div", { className: "ui-accordion-panel__content", children: children }) }));
|
|
1308
|
+
};
|
|
1309
|
+
|
|
1069
1310
|
const useDisclosure = (defaultIsOpen = false) => {
|
|
1070
1311
|
const [isOpen, setIsOpen] = useState(defaultIsOpen);
|
|
1071
1312
|
const onOpen = useCallback(() => {
|
|
@@ -1277,4 +1518,4 @@ const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) =
|
|
|
1277
1518
|
} }));
|
|
1278
1519
|
};
|
|
1279
1520
|
|
|
1280
|
-
export { Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
|
|
1521
|
+
export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Tab, TabList, TabPanel, TabPanels, Tabs, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "uiplex",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "A modern React component library with TypeScript support, featuring Button, Loader, Radio components and a comprehensive theme system",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|