@beweco/aurora-ui 0.0.6 → 0.0.8
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/assets/css/styles.css +3 -0
- package/dist/assets/output-Ck0ffzyL.css +73 -0
- package/dist/index.cjs.js +301 -16
- package/dist/index.esm.js +295 -11
- package/dist/types/components/Menu/Menu.d.ts +1 -1
- package/dist/types/components/Menu/Menu.d.ts.map +1 -1
- package/dist/types/components/Menu/Menu.types.d.ts +1 -1
- package/dist/types/components/Menu/Menu.types.d.ts.map +1 -1
- package/dist/types/components/Menu/index.d.ts +2 -1
- package/dist/types/components/Menu/index.d.ts.map +1 -1
- package/dist/types/components/Menu/sidebar-items.d.ts.map +1 -1
- package/dist/types/components/menu-nav-list/MenuNavList.d.ts +19 -0
- package/dist/types/components/menu-nav-list/MenuNavList.d.ts.map +1 -1
- package/dist/types/components/menu-nav-list/MenuNavList.styles.d.ts +2 -14
- package/dist/types/components/menu-nav-list/MenuNavList.styles.d.ts.map +1 -1
- package/dist/types/components/menu-nav-list/MenuNavList.types.d.ts +2 -2
- package/dist/types/components/menu-nav-list/index.d.ts +2 -0
- package/dist/types/components/menu-nav-list/index.d.ts.map +1 -0
- package/dist/types/components/phone/Phone.d.ts +14 -0
- package/dist/types/components/phone/Phone.d.ts.map +1 -0
- package/dist/types/components/phone/index.d.ts +2 -0
- package/dist/types/components/phone/index.d.ts.map +1 -0
- package/dist/types/index.d.ts +3 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/providers/theme/theme-provider.d.ts.map +1 -1
- package/package.json +10 -12
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Button } from '@heroui/react';
|
|
3
|
-
import { useEffect, createContext, useContext } from 'react';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { Button, cn, ListboxItem, Popover, PopoverTrigger, Tooltip, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Spacer, Avatar, Card, CardBody, CardFooter, Input } from '@heroui/react';
|
|
3
|
+
import React, { useEffect, useState, createElement, useCallback, useRef, createContext, useContext } from 'react';
|
|
4
4
|
import { Icon } from '@iconify/react';
|
|
5
|
+
import { useTheme } from '@heroui/use-theme';
|
|
5
6
|
|
|
6
7
|
/******************************************************************************
|
|
7
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -73,13 +74,296 @@ var IconComponent = function (_a) {
|
|
|
73
74
|
return (jsx("span", __assign({}, nativeProps, { children: jsx(Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
|
|
74
75
|
};
|
|
75
76
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
function normalizeClass(value) {
|
|
78
|
+
if (typeof value === "string") {
|
|
79
|
+
return value || undefined;
|
|
80
|
+
}
|
|
81
|
+
if (Array.isArray(value)) {
|
|
82
|
+
return value.filter(Boolean).join(" ") || undefined;
|
|
83
|
+
}
|
|
84
|
+
return undefined;
|
|
85
|
+
}
|
|
86
|
+
var getSectionClasses = function (isCollapsed, sectionClassesProp) {
|
|
87
|
+
if (sectionClassesProp === void 0) { sectionClassesProp = {}; }
|
|
88
|
+
return (__assign(__assign({}, Object.fromEntries(Object.entries(sectionClassesProp).map(function (_a) {
|
|
89
|
+
var k = _a[0], v = _a[1];
|
|
90
|
+
return [k, normalizeClass(v)];
|
|
91
|
+
}))), { base: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.base, "w-full", {
|
|
92
|
+
"p-0 max-w-[44px]": isCollapsed,
|
|
93
|
+
})), group: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.group, {
|
|
94
|
+
"flex flex-col gap-1": isCollapsed,
|
|
95
|
+
})), heading: normalizeClass(cn(sectionClassesProp === null || sectionClassesProp === void 0 ? void 0 : sectionClassesProp.heading, {
|
|
96
|
+
hidden: isCollapsed,
|
|
97
|
+
})) }));
|
|
98
|
+
};
|
|
99
|
+
var getItemClasses = function (isCollapsed, itemClassesProp) {
|
|
100
|
+
if (itemClassesProp === void 0) { itemClassesProp = {}; }
|
|
101
|
+
return (__assign(__assign({}, Object.fromEntries(Object.entries(itemClassesProp).map(function (_a) {
|
|
102
|
+
var k = _a[0], v = _a[1];
|
|
103
|
+
return [k, normalizeClass(v)];
|
|
104
|
+
}))), { base: normalizeClass(cn(itemClassesProp === null || itemClassesProp === void 0 ? void 0 : itemClassesProp.base, {
|
|
105
|
+
"w-11 h-11 gap-0 p-0": isCollapsed,
|
|
106
|
+
})) }));
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
var EnumMenuNavListItem;
|
|
110
|
+
(function (EnumMenuNavListItem) {
|
|
111
|
+
EnumMenuNavListItem["Nest"] = "nest";
|
|
112
|
+
})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* @component MenuNavList
|
|
116
|
+
* @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
|
|
117
|
+
* It supports nested items, sections, and tooltips for items in the collapsed state.
|
|
118
|
+
*
|
|
119
|
+
* @param {MenuNavListProps} props - Props for configuring the component.
|
|
120
|
+
* @param {MenuNavListItem[]} props.items - Array of items to display in the list.
|
|
121
|
+
* @param {boolean} [props.isCollapsed] - If `true`, the menu is displayed in its collapsed state (icons only).
|
|
122
|
+
* @param {React.Key} [props.defaultSelectedKey] - The key of the default selected item.
|
|
123
|
+
* @param {(key: React.Key) => void} [props.onSelect] - Callback executed when an item is selected.
|
|
124
|
+
* @param {boolean} [props.hideEndContent] - If `true`, hides the end content of the items.
|
|
125
|
+
* @param {object} [props.sectionClasses] - CSS classes to customize the sections.
|
|
126
|
+
* @param {object} [props.itemClasses] - CSS classes to customize the items.
|
|
127
|
+
* @param {string} [props.iconClassName] - CSS class for the icons.
|
|
128
|
+
* @param {object} [props.classNames] - CSS classes to customize the Listbox component.
|
|
129
|
+
* @param {string} [props.className] - CSS class for the main container.
|
|
130
|
+
*
|
|
131
|
+
* @forwardRef
|
|
132
|
+
*/
|
|
133
|
+
var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
134
|
+
var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey; _a.onSelect; var hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
|
|
135
|
+
var _d = useState(defaultSelectedKey), selected = _d[0], setSelected = _d[1];
|
|
136
|
+
// Component styles
|
|
137
|
+
var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
|
|
138
|
+
var itemClasses = getItemClasses(isCollapsed, itemClassesProp);
|
|
139
|
+
// Handles the click event on an item, updating the selection state.
|
|
140
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
141
|
+
var handleItemPress = React.useCallback(function (item, parentKey) {
|
|
142
|
+
var keySelected = typeof parentKey === "string" ? parentKey : item.key;
|
|
143
|
+
setSelected(keySelected);
|
|
144
|
+
// Force blur to remove hover state after click.
|
|
145
|
+
if (document.activeElement instanceof HTMLElement) {
|
|
146
|
+
document.activeElement.blur();
|
|
147
|
+
}
|
|
148
|
+
}, [setSelected]);
|
|
149
|
+
// Renders the item displayed inside the Popover when the menu is collapsed.
|
|
150
|
+
var renderCompactItem = React.useCallback(function (item, parentKey) {
|
|
151
|
+
var _a, _b;
|
|
152
|
+
return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
|
|
153
|
+
}, [handleItemPress, iconClassName]);
|
|
154
|
+
// Renders a nested item, i.e., an item that has sub-items.
|
|
155
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
156
|
+
var renderNestItem = React.useCallback(function (item) {
|
|
157
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
158
|
+
var isNestType = item.items &&
|
|
159
|
+
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
160
|
+
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
|
|
161
|
+
if (isNestType) {
|
|
162
|
+
item.href = undefined;
|
|
163
|
+
}
|
|
164
|
+
return (createElement(ListboxItem, __assign({}, item, { key: item.key, classNames: {
|
|
165
|
+
base: cn({
|
|
166
|
+
"h-auto p-0": !isCollapsed && isNestType,
|
|
167
|
+
}, {
|
|
168
|
+
"inline-block w-11": isCollapsed && isNestType,
|
|
169
|
+
}, {
|
|
170
|
+
"data-[selected=true]:bg-primary-100 h-11 justify-center items-center flex": isCollapsed && isNestType,
|
|
171
|
+
}, "rounded-large"),
|
|
172
|
+
}, endContent: isCollapsed || isNestType || hideEndContent
|
|
173
|
+
? null
|
|
174
|
+
: ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), title: isCollapsed || isNestType ? null : item.title }),
|
|
175
|
+
isCollapsed && isNestType ? (jsxs(Popover, { placement: "right", offset: 10, children: [jsx(PopoverTrigger, { children: jsx("div", { className: "flex w-full items-center justify-center", children: jsx(Tooltip, { content: item.title, placement: "right", classNames: {
|
|
176
|
+
base: "text-default-500",
|
|
177
|
+
}, children: jsx("div", { className: "flex w-full items-center justify-center", children: item.icon ? (jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) }) }) }), jsx(PopoverContent, { className: "p-0", children: jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsx("div", { className: "p-2 text-small font-semibold text-default-500", children: item.title }), jsx(Listbox, { className: "mt-0.5 text-default-500", "aria-label": "Nested menu items", items: item.items, variant: "flat", children: item.items && ((_e = item.items) === null || _e === void 0 ? void 0 : _e.length) > 0
|
|
178
|
+
? item.items.map(function (child) {
|
|
179
|
+
return renderCompactItem(child, item.key);
|
|
180
|
+
})
|
|
181
|
+
: renderCompactItem(item) })] }) })] })) : null,
|
|
182
|
+
!isCollapsed && isNestType ? (jsx(Accordion, { className: "p-0", children: jsx(AccordionItem, { "aria-label": item.title, classNames: {
|
|
183
|
+
heading: "pr-3 group-data-[selected=true]:bg-primary-100 rounded-large",
|
|
184
|
+
trigger: "p-0",
|
|
185
|
+
content: "py-0 pl-4",
|
|
186
|
+
}, title: item.icon ? (jsxs("div", { className: "flex h-11 items-center gap-2 px-3 py-1.5", children: [jsx(IconComponent, { className: cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsx("span", { className: "text-small font-medium text-default-500 group-data-[selected=true]:text-default-600", children: item.title })] })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), children: item.items && ((_g = item.items) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (jsx(Listbox, { className: "mt-0.5 text-default-500", classNames: {
|
|
187
|
+
list: cn("border-l border-default-200 pl-4"),
|
|
188
|
+
}, items: item.items, variant: "flat", children: item.items.map(function (child) { return renderItem(child, item.key); }) })) : (renderItem(item)) }, item.key) })) : null));
|
|
189
|
+
}, [isCollapsed, hideEndContent, iconClassName, items, selected]);
|
|
190
|
+
// Renders a simple item (without children) in the navigation list.
|
|
191
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
192
|
+
var renderItem = React.useCallback(function (item, parentKey) {
|
|
193
|
+
var _a, _b, _c, _d;
|
|
194
|
+
var isNestType = item.items &&
|
|
195
|
+
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
196
|
+
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
|
|
197
|
+
if (isNestType) {
|
|
198
|
+
return renderNestItem(item);
|
|
199
|
+
}
|
|
200
|
+
var isItemSelected = selected === item.key;
|
|
201
|
+
return (createElement(ListboxItem, __assign({}, item, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item, parentKey); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsx(Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
|
|
202
|
+
base: "text-default-500",
|
|
203
|
+
}, children: jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsx(IconComponent, { className: cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
|
|
204
|
+
},
|
|
205
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
206
|
+
[isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
|
|
207
|
+
return (jsx(Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selected], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
|
|
208
|
+
var _a, _b;
|
|
209
|
+
return item.items &&
|
|
210
|
+
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
211
|
+
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsx(ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
|
|
212
|
+
} }), isCollapsed ? "compact" : "default"));
|
|
213
|
+
});
|
|
214
|
+
MenuNavList.displayName = "MenuNavList";
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Sidebar menu component for navigation and user actions.
|
|
218
|
+
* @param commerceInfo - Object with logo and name of the company.
|
|
219
|
+
* @param userInfo - Object with user avatar, name, and email.
|
|
220
|
+
* @param helpButton - Help button configuration.
|
|
221
|
+
* @param upgradeCard - Optional upgrade card configuration.
|
|
222
|
+
* @param isOpenSidebar - Controls sidebar visibility.
|
|
223
|
+
* @param onOpenSidebarChange - Callback to open/close sidebar.
|
|
224
|
+
*/
|
|
225
|
+
var MenuComponent = React.memo(function Menu(_a) {
|
|
226
|
+
var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, upgradeCard = _a.upgradeCard, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems;
|
|
227
|
+
// State to control menu collapse on desktop devices
|
|
228
|
+
var _b = React.useState(false), isCollapsed = _b[0], setIsCollapsed = _b[1];
|
|
229
|
+
// Memoized handlers for performance
|
|
230
|
+
var handleSidebarClose = useCallback(function () {
|
|
231
|
+
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
|
|
232
|
+
}, [onOpenSidebarChange]);
|
|
233
|
+
var handleCollapseToggle = useCallback(function () {
|
|
234
|
+
setIsCollapsed(function (prev) { return !prev; });
|
|
235
|
+
}, []);
|
|
236
|
+
var handleUpgradeClick = useCallback(function () {
|
|
237
|
+
if (upgradeCard) {
|
|
238
|
+
window.open(upgradeCard.buttonLink, "_blank");
|
|
239
|
+
}
|
|
240
|
+
}, [upgradeCard]);
|
|
241
|
+
var handleHelpClick = useCallback(function () {
|
|
242
|
+
window.open(helpButton.redirect, "_blank");
|
|
243
|
+
}, [helpButton]);
|
|
244
|
+
if (!isOpenSidebar) {
|
|
245
|
+
return null;
|
|
246
|
+
}
|
|
247
|
+
return (jsxs(Fragment, { children: [jsx("button", { type: "button", "aria-label": "Close sidebar", className: "fixed inset-0 bg-black bg-opacity-40 z-40 xs:block sm:hidden", onClick: handleSidebarClose, style: { border: "none", padding: 0, margin: 0 } }), jsx("div", { className: "container__menu ".concat(isCollapsed
|
|
248
|
+
? "container__menu--collapsed"
|
|
249
|
+
: "container__menu--expanded"), children: jsxs("div", { className: "content__menu", children: [jsxs("div", { className: "content__menu--header", style: { flexDirection: isCollapsed ? "column-reverse" : "row" }, children: [jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-foreground", children: jsx("img", { src: commerceInfo.logo, alt: "Logo of ".concat(commerceInfo.name) }) }), jsx("span", { className: "collapsible-item text-small font-bold uppercase", children: commerceInfo.name })] }), jsxs("div", { className: "flex items-center", children: [jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsx(IconComponent, { icon: isCollapsed
|
|
250
|
+
? "solar:alt-arrow-right-outline"
|
|
251
|
+
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsx(Spacer, { y: 6 }), jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsx(Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar === "" ? "warning" : "default", name: userInfo.name }), jsxs("div", { className: "collapsible-item flex flex-col", children: [jsx("p", { className: "text-small font-medium text-default-900", children: userInfo.name }), jsx("p", { className: "text-tiny text-default-400", children: userInfo.role })] })] }), jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed }) }) }), upgradeCard && (jsxs("div", { className: "collapsible-item relative", children: [jsxs(Card, { className: "border-none overflow-visible shadow-none", shadow: "sm", children: [jsxs(CardBody, { className: "items-center py-5 text-center gap-1", children: [jsx("h3", { className: "text-medium font-medium text-default-900", children: upgradeCard.title }), jsx("p", { className: "text-small text-default-500 pb-3 whitespace-normal", children: upgradeCard.description })] }), jsx(CardFooter, { className: "absolute justify-center", style: { bottom: "-30px" }, children: jsx(Button, { className: "px-10 shadow-md", color: "primary", radius: "full", variant: "shadow", onPress: handleUpgradeClick, children: upgradeCard.buttonText }) })] }), jsx(Spacer, { y: 9 })] })), jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsx(Button, { fullWidth: true, className: " text-default-600 data-[hover=true]:text-foreground", startContent: jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsx("span", { className: "collapsible-item", children: helpButton.title })) }) })] }) })] }));
|
|
252
|
+
});
|
|
253
|
+
|
|
254
|
+
// Lista simple de países con bandera emoji y código
|
|
255
|
+
var countries = [
|
|
256
|
+
{ code: "+57", name: "Colombia", flag: "🇨🇴" },
|
|
257
|
+
{ code: "+54", name: "Argentina", flag: "🇦🇷" },
|
|
258
|
+
{ code: "+55", name: "Brazil", flag: "🇧🇷" },
|
|
259
|
+
{ code: "+52", name: "Mexico", flag: "🇲🇽" },
|
|
260
|
+
{ code: "+503", name: "El Salvador", flag: "🇸🇻" },
|
|
261
|
+
{ code: "+51", name: "Peru", flag: "🇵🇪" },
|
|
262
|
+
{ code: "+56", name: "Chile", flag: "🇨🇱" },
|
|
263
|
+
{ code: "+1", name: "United States", flag: "🇺🇸" },
|
|
264
|
+
{ code: "+7", name: "Russia", flag: "🇷🇺" },
|
|
265
|
+
{ code: "+20", name: "Egypt", flag: "🇪🇬" },
|
|
266
|
+
{ code: "+27", name: "South Africa", flag: "🇿🇦" },
|
|
267
|
+
{ code: "+33", name: "France", flag: "🇫🇷" },
|
|
268
|
+
{ code: "+34", name: "Spain", flag: "🇪🇸" },
|
|
269
|
+
{ code: "+39", name: "Italy", flag: "🇮🇹" },
|
|
270
|
+
{ code: "+44", name: "United Kingdom", flag: "🇬🇧" },
|
|
271
|
+
{ code: "+49", name: "Germany", flag: "🇩🇪" },
|
|
272
|
+
{ code: "+51", name: "Peru", flag: "🇵🇪" },
|
|
273
|
+
{ code: "+52", name: "Mexico", flag: "🇲🇽" },
|
|
274
|
+
{ code: "+54", name: "Argentina", flag: "🇦🇷" },
|
|
275
|
+
{ code: "+55", name: "Brazil", flag: "🇧🇷" },
|
|
276
|
+
{ code: "+56", name: "Chile", flag: "🇨🇱" },
|
|
277
|
+
{ code: "+57", name: "Colombia", flag: "🇨🇴" },
|
|
278
|
+
{ code: "+60", name: "Malaysia", flag: "🇲🇾" },
|
|
279
|
+
{ code: "+61", name: "Australia", flag: "🇦🇺" },
|
|
280
|
+
{ code: "+62", name: "Indonesia", flag: "🇮🇩" },
|
|
281
|
+
{ code: "+64", name: "New Zealand", flag: "🇳🇿" },
|
|
282
|
+
{ code: "+65", name: "Singapore", flag: "🇸🇬" },
|
|
283
|
+
{ code: "+66", name: "Thailand", flag: "🇹🇭" },
|
|
284
|
+
{ code: "+81", name: "Japan", flag: "🇯🇵" },
|
|
285
|
+
{ code: "+82", name: "South Korea", flag: "🇰🇷" },
|
|
286
|
+
{ code: "+84", name: "Vietnam", flag: "🇻🇳" },
|
|
287
|
+
{ code: "+86", name: "China", flag: "🇨🇳" },
|
|
288
|
+
{ code: "+91", name: "India", flag: "🇮🇳" },
|
|
289
|
+
{ code: "+351", name: "Portugal", flag: "🇵🇹" },
|
|
290
|
+
{ code: "+503", name: "El Salvador", flag: "🇸🇻" },
|
|
291
|
+
{ code: "+966", name: "Saudi Arabia", flag: "🇸🇦" },
|
|
292
|
+
{ code: "+971", name: "UAE", flag: "🇦🇪" },
|
|
293
|
+
];
|
|
294
|
+
var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
|
|
295
|
+
var Phone = function (_a) {
|
|
296
|
+
var _b = _a.label, label = _b === void 0 ? "Teléfono" : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.errorText, errorText = _e === void 0 ? "" : _e, _f = _a.value, value = _f === void 0 ? "" : _f, onChange = _a.onChange, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.name, name = _h === void 0 ? "phone" : _h;
|
|
297
|
+
var _j = useState(false), isDropdownOpen = _j[0], setIsDropdownOpen = _j[1];
|
|
298
|
+
var _k = useState(uniqueCountries[0]), selectedCountry = _k[0], setSelectedCountry = _k[1];
|
|
299
|
+
var _l = useState(""), inputValue = _l[0], setInputValue = _l[1];
|
|
300
|
+
var dropdownRef = useRef(null);
|
|
301
|
+
var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
|
|
302
|
+
// Sincroniza valor externo
|
|
303
|
+
useEffect(function () {
|
|
304
|
+
if (value) {
|
|
305
|
+
// Si value incluye el código, lo separamos
|
|
306
|
+
var found = uniqueCountries.find(function (c) { return value.startsWith(c.code); });
|
|
307
|
+
if (found) {
|
|
308
|
+
setSelectedCountry(found);
|
|
309
|
+
setInputValue(value.replace(found.code, "").trim());
|
|
310
|
+
}
|
|
311
|
+
else {
|
|
312
|
+
setInputValue(value);
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
}, [value]);
|
|
316
|
+
// Open dropdown: reset filteredCountries
|
|
317
|
+
useEffect(function () {
|
|
318
|
+
if (isDropdownOpen) {
|
|
319
|
+
setFilteredCountries(uniqueCountries);
|
|
320
|
+
}
|
|
321
|
+
}, [isDropdownOpen]);
|
|
322
|
+
// Cierra dropdown al hacer click fuera
|
|
323
|
+
useEffect(function () {
|
|
324
|
+
var handleClickOutside = function (event) {
|
|
325
|
+
if (dropdownRef.current &&
|
|
326
|
+
!dropdownRef.current.contains(event.target)) {
|
|
327
|
+
setIsDropdownOpen(false);
|
|
328
|
+
}
|
|
329
|
+
};
|
|
330
|
+
if (isDropdownOpen) {
|
|
331
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
332
|
+
}
|
|
333
|
+
return function () {
|
|
334
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
335
|
+
};
|
|
336
|
+
}, [isDropdownOpen]);
|
|
337
|
+
var handleCountrySelect = function (country) {
|
|
338
|
+
setSelectedCountry(country);
|
|
339
|
+
setIsDropdownOpen(false);
|
|
340
|
+
if (onChange) {
|
|
341
|
+
onChange(country.code + inputValue);
|
|
342
|
+
}
|
|
343
|
+
};
|
|
344
|
+
var handleInputChange = function (e) {
|
|
345
|
+
// Solo números
|
|
346
|
+
var val = e.target.value.replace(/\D/g, "");
|
|
347
|
+
setInputValue(val);
|
|
348
|
+
if (onChange) {
|
|
349
|
+
onChange(selectedCountry.code + val);
|
|
350
|
+
}
|
|
351
|
+
};
|
|
352
|
+
return (jsxs("div", { className: "flex flex-col gap-1 w-full relative", children: [label && (jsxs("label", { htmlFor: "phone-input-".concat(name), className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-1", children: [label, " ", required && jsx("span", { className: "text-pink-600", children: "*" })] })), jsxs("div", { className: "flex items-center w-full min-h-[56px] bg-white dark:bg-gray-900 transition-colors shadow-sm border border-[#E4E4E7] dark:border-gray-700 rounded-2xl focus-within:border-blue-500 dark:focus-within:border-blue-400 ".concat(error
|
|
353
|
+
? "border-pink-500 dark:border-pink-600"
|
|
354
|
+
: "border-[#E4E4E7] dark:border-gray-700").concat(disabled ? " bg-gray-100 dark:bg-gray-800 opacity-60" : ""), children: [jsxs("div", { className: "relative ml-2", ref: dropdownRef, children: [jsxs("button", { type: "button",
|
|
355
|
+
///bg-gray-100
|
|
356
|
+
className: "flex items-center gap-1 px-4 h-10 rounded-xl dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors", onClick: function () { return setIsDropdownOpen(function (v) { return !v; }); }, disabled: disabled, tabIndex: 0, "aria-label": "Seleccionar pa\u00EDs", children: [jsx("span", { className: "text-lg", children: selectedCountry.flag }), jsx("span", { className: "text-xs text-gray-700 dark:text-gray-200", children: selectedCountry.code }), jsxs("svg", { className: "w-4 h-4 text-gray-400 dark:text-gray-300 ml-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Desplegar lista de pa\u00EDses", children: [jsx("title", { children: "Desplegar lista de pa\u00EDses" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })] })] }), isDropdownOpen && (jsxs("div", { className: "absolute z-30 mt-2 w-60 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: [jsx("div", { className: "p-2", children: jsx("input", { type: "text", className: "w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400", placeholder: "Buscar pa\u00EDs...", onChange: function (e) {
|
|
357
|
+
var searchTerm = e.target.value.toLowerCase();
|
|
358
|
+
var filtered = uniqueCountries.filter(function (country) {
|
|
359
|
+
return country.name.toLowerCase().includes(searchTerm) ||
|
|
360
|
+
country.code.toLowerCase().includes(searchTerm);
|
|
361
|
+
});
|
|
362
|
+
setFilteredCountries(filtered);
|
|
363
|
+
} }) }), jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredCountries.length > 0 ? (filteredCountries.map(function (country) { return (jsxs("button", { type: "button", className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 ".concat(country.code === selectedCountry.code
|
|
364
|
+
? "bg-blue-50 dark:bg-blue-900"
|
|
365
|
+
: ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3 text-lg", children: country.flag }), jsx("span", { className: "flex-1 text-left dark:text-gray-100", children: country.name }), jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: country.code })] }, country.code)); })) : (jsx("div", { className: "px-4 py-2 text-sm text-gray-500 dark:text-gray-400", children: "No se encontraron pa\u00EDses" })) })] }))] }), jsx(Input, { type: "tel", className: "flex-1 border-none bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 h-10 px-2", placeholder: "N\u00FAmero de tel\u00E9fono", value: inputValue, onChange: handleInputChange, disabled: disabled, name: name, autoComplete: "tel", id: "phone-input-".concat(name) })] }), error && errorText && (jsx("span", { className: "text-xs text-pink-600 dark:text-pink-400 mt-1", children: errorText }))] }));
|
|
81
366
|
};
|
|
82
|
-
MenuPrueba.displayName = "MenuPrueba";
|
|
83
367
|
|
|
84
368
|
var themeColors = {
|
|
85
369
|
"purple-light": {
|
|
@@ -275,8 +559,8 @@ var useThemeContext = function () {
|
|
|
275
559
|
|
|
276
560
|
var ThemeProvider = function (_a) {
|
|
277
561
|
var children = _a.children;
|
|
278
|
-
var _b =
|
|
562
|
+
var _b = useTheme(), theme = _b.theme, setTheme = _b.setTheme;
|
|
279
563
|
return (jsx(ThemeContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: jsx("main", { className: "".concat(theme, " bg-background text-foreground "), children: children }) }));
|
|
280
564
|
};
|
|
281
565
|
|
|
282
|
-
export { ButtonPrueba, IconComponent,
|
|
566
|
+
export { ButtonPrueba, IconComponent, MenuComponent, Phone, ThemeContext, ThemeProvider, sizeMap, themeColors, useThemeContext };
|
|
@@ -10,5 +10,5 @@ import type { MenuComponentProps } from "./Menu.types";
|
|
|
10
10
|
* @param isOpenSidebar - Controls sidebar visibility.
|
|
11
11
|
* @param onOpenSidebarChange - Callback to open/close sidebar.
|
|
12
12
|
*/
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const MenuComponent: React.FC<MenuComponentProps>;
|
|
14
14
|
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsLtD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/
|
|
1
|
+
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAClC,YAAY,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,QAAQ,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACb,CAAC;IACF,UAAU,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,WAAW,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,SAAS,EAAE;QACV,KAAK,EAAE,eAAe,EAAE,CAAC;QACzB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-items.d.ts","sourceRoot":"","sources":["../../../../src/components/
|
|
1
|
+
{"version":3,"file":"sidebar-items.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/sidebar-items.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,YAAY,EAAE,eAAe,EAwHzC,CAAC"}
|
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { MenuNavListProps } from "./MenuNavList.types";
|
|
3
|
+
/**
|
|
4
|
+
* @component MenuNavList
|
|
5
|
+
* @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
|
|
6
|
+
* It supports nested items, sections, and tooltips for items in the collapsed state.
|
|
7
|
+
*
|
|
8
|
+
* @param {MenuNavListProps} props - Props for configuring the component.
|
|
9
|
+
* @param {MenuNavListItem[]} props.items - Array of items to display in the list.
|
|
10
|
+
* @param {boolean} [props.isCollapsed] - If `true`, the menu is displayed in its collapsed state (icons only).
|
|
11
|
+
* @param {React.Key} [props.defaultSelectedKey] - The key of the default selected item.
|
|
12
|
+
* @param {(key: React.Key) => void} [props.onSelect] - Callback executed when an item is selected.
|
|
13
|
+
* @param {boolean} [props.hideEndContent] - If `true`, hides the end content of the items.
|
|
14
|
+
* @param {object} [props.sectionClasses] - CSS classes to customize the sections.
|
|
15
|
+
* @param {object} [props.itemClasses] - CSS classes to customize the items.
|
|
16
|
+
* @param {string} [props.iconClassName] - CSS class for the icons.
|
|
17
|
+
* @param {object} [props.classNames] - CSS classes to customize the Listbox component.
|
|
18
|
+
* @param {string} [props.className] - CSS class for the main container.
|
|
19
|
+
*
|
|
20
|
+
* @forwardRef
|
|
21
|
+
*/
|
|
3
22
|
declare const MenuNavList: React.ForwardRefExoticComponent<Omit<MenuNavListProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
4
23
|
export default MenuNavList;
|
|
5
24
|
//# sourceMappingURL=MenuNavList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuNavList.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-nav-list/MenuNavList.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,WAAW,mGAuWhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
import type { MenuNavListProps } from "./MenuNavList.types";
|
|
2
2
|
type SectionClasses = MenuNavListProps["sectionClasses"];
|
|
3
3
|
type ItemClasses = MenuNavListProps["itemClasses"];
|
|
4
|
-
export declare const getSectionClasses: (isCollapsed: boolean | undefined, sectionClassesProp?: SectionClasses) =>
|
|
5
|
-
|
|
6
|
-
group: string;
|
|
7
|
-
heading: string;
|
|
8
|
-
divider?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
9
|
-
};
|
|
10
|
-
export declare const getItemClasses: (isCollapsed: boolean | undefined, itemClassesProp?: ItemClasses) => {
|
|
11
|
-
base: string;
|
|
12
|
-
title?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
13
|
-
description?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
14
|
-
selectedIcon?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
15
|
-
wrapper?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
16
|
-
shortcut?: string | false | 0 | import("tailwind-merge").ClassNameValue[] | null | undefined;
|
|
17
|
-
};
|
|
4
|
+
export declare const getSectionClasses: (isCollapsed: boolean | undefined, sectionClassesProp?: SectionClasses) => Record<string, string | undefined>;
|
|
5
|
+
export declare const getItemClasses: (isCollapsed: boolean | undefined, itemClassesProp?: ItemClasses) => Record<string, string | undefined>;
|
|
18
6
|
export {};
|
|
19
7
|
//# sourceMappingURL=MenuNavList.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuNavList.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-nav-list/MenuNavList.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,KAAK,cAAc,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AACzD,KAAK,WAAW,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuNavList.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-nav-list/MenuNavList.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,KAAK,cAAc,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AACzD,KAAK,WAAW,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAYnD,eAAO,MAAM,iBAAiB,GAC7B,aAAa,OAAO,GAAG,SAAS,EAChC,qBAAoB,cAAmB,KACrC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAmBlC,CAAC;AAEH,eAAO,MAAM,cAAc,GAC1B,aAAa,OAAO,GAAG,SAAS,EAChC,kBAAiB,WAAgB,KAC/B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CASlC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ListboxProps, ListboxSectionProps } from "@heroui/react";
|
|
2
2
|
import type React from "react";
|
|
3
|
-
export declare enum
|
|
3
|
+
export declare enum EnumMenuNavListItem {
|
|
4
4
|
Nest = "nest"
|
|
5
5
|
}
|
|
6
6
|
export type MenuNavListItem = {
|
|
@@ -8,7 +8,7 @@ export type MenuNavListItem = {
|
|
|
8
8
|
title: string;
|
|
9
9
|
icon?: string;
|
|
10
10
|
href?: string;
|
|
11
|
-
type?:
|
|
11
|
+
type?: EnumMenuNavListItem.Nest;
|
|
12
12
|
startContent?: React.ReactNode;
|
|
13
13
|
endContent?: React.ReactNode;
|
|
14
14
|
items?: MenuNavListItem[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/menu-nav-list/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACnB,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type React from "react";
|
|
2
|
+
export interface PhoneInputProps {
|
|
3
|
+
label?: string;
|
|
4
|
+
required?: boolean;
|
|
5
|
+
error?: boolean;
|
|
6
|
+
errorText?: string;
|
|
7
|
+
value?: string;
|
|
8
|
+
onChange?: (value: string) => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
name?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const Phone: React.FC<PhoneInputProps>;
|
|
13
|
+
export default Phone;
|
|
14
|
+
//# sourceMappingURL=Phone.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/Phone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgD/B,MAAM,WAAW,eAAe;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+L3C,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phone/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import "./styles/globals.css";
|
|
1
2
|
export * from "./components/button";
|
|
2
3
|
export * from "./components/icon";
|
|
3
|
-
export * from "./components/
|
|
4
|
+
export * from "./components/menu";
|
|
5
|
+
export * from "./components/phone";
|
|
4
6
|
export { themeColors } from "./styles/colors.default";
|
|
5
7
|
export * from "./providers/theme";
|
|
6
8
|
export * from "./contexts/theme";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAE9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/theme-provider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/theme-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAUlD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beweco/aurora-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "Bewe Aurora UI Component Library",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
7
7
|
"types": "./dist/types/index.d.ts",
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
],
|
|
8
|
+
"style": "./dist/assets/css/styles.css",
|
|
9
|
+
"files": ["dist"],
|
|
11
10
|
"sideEffects": false,
|
|
12
11
|
"author": "Bewe",
|
|
13
12
|
"license": "MIT",
|
|
@@ -19,15 +18,15 @@
|
|
|
19
18
|
"types": "./dist/types/index.d.ts",
|
|
20
19
|
"import": "./dist/index.esm.js",
|
|
21
20
|
"require": "./dist/index.cjs.js"
|
|
22
|
-
}
|
|
21
|
+
},
|
|
22
|
+
"./styles": "./dist/assets/css/styles.css"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "rollup -c",
|
|
26
26
|
"build:storybook": "storybook build",
|
|
27
27
|
"check": "biome check --write",
|
|
28
|
-
"dev": "
|
|
28
|
+
"dev": "rollup -c --watch",
|
|
29
29
|
"format": "biome format --write",
|
|
30
|
-
"preview": "rsbuild preview",
|
|
31
30
|
"storybook": "storybook dev --port 6006",
|
|
32
31
|
"chromatic": "npx chromatic --project-token=chpt_a33f7fd2ebb3349",
|
|
33
32
|
"prepare": "husky"
|
|
@@ -36,6 +35,7 @@
|
|
|
36
35
|
"@heroui/react": "^2.7.10",
|
|
37
36
|
"@heroui/system": "^2.4.15",
|
|
38
37
|
"@heroui/theme": "^2.4.15",
|
|
38
|
+
"@heroui/use-theme": "^2.1.9",
|
|
39
39
|
"@iconify/react": "^6.0.0",
|
|
40
40
|
"framer-motion": "^12.14.0",
|
|
41
41
|
"react": ">=18.0.0",
|
|
@@ -47,10 +47,6 @@
|
|
|
47
47
|
"@rollup/plugin-commonjs": "^28.0.6",
|
|
48
48
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
49
49
|
"@rollup/plugin-typescript": "^12.1.4",
|
|
50
|
-
"@rsbuild/core": "^1.3.22",
|
|
51
|
-
"@rsbuild/plugin-react": "^1.3.2",
|
|
52
|
-
"@rsbuild/plugin-sass": "^1.3.1",
|
|
53
|
-
"@rslib/core": "^0.4.1",
|
|
54
50
|
"@storybook/addon-essentials": "^8.0.0",
|
|
55
51
|
"@storybook/addon-interactions": "^8.0.0",
|
|
56
52
|
"@storybook/addon-links": "^8.0.0",
|
|
@@ -71,9 +67,11 @@
|
|
|
71
67
|
"react-dom": ">=18.0.0",
|
|
72
68
|
"rollup": "^4.44.1",
|
|
73
69
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
74
|
-
"rollup-plugin-
|
|
70
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
71
|
+
"rollup-plugin-visualizer": "^5.12.0",
|
|
75
72
|
"sass": "^1.89.2",
|
|
76
73
|
"storybook": "^8.0.0",
|
|
74
|
+
"tailwindcss": "^3.4.17",
|
|
77
75
|
"typescript": "^5.8.3"
|
|
78
76
|
},
|
|
79
77
|
"type": "module"
|