@grupor5/raya 0.2.7 → 0.2.9
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/atoms/tag/index.d.mts +1 -1
- package/dist/atoms/tag/index.d.ts +1 -1
- package/dist/index.d.mts +108 -2
- package/dist/index.d.ts +108 -2
- package/dist/index.js +150 -2
- package/dist/index.mjs +150 -3
- package/dist/molecules/alert/index.d.mts +1 -1
- package/dist/molecules/alert/index.d.ts +1 -1
- package/dist/molecules/chart/index.d.mts +1 -1
- package/dist/molecules/chart/index.d.ts +1 -1
- package/dist/molecules/grid/index.d.mts +5 -5
- package/dist/molecules/grid/index.d.ts +5 -5
- package/dist/molecules/grid/index.js +11 -2
- package/dist/molecules/grid/index.mjs +11 -2
- package/dist/tailwind.css +1 -1
- package/dist/tokens/grids.d.mts +3 -3
- package/dist/tokens/grids.d.ts +3 -3
- package/dist/tokens/grids.js +3 -3
- package/dist/tokens/grids.mjs +3 -3
- package/package.json +1 -1
- package/tailwind.config.js +40 -0
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const tagVariants: (props?: ({
|
|
6
|
-
variant?: "default" | "success" | "
|
|
6
|
+
variant?: "default" | "success" | "warning" | "danger" | null | undefined;
|
|
7
7
|
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
8
8
|
interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
|
|
9
9
|
showBullet?: boolean;
|
|
@@ -3,7 +3,7 @@ import React__default from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const tagVariants: (props?: ({
|
|
6
|
-
variant?: "default" | "success" | "
|
|
6
|
+
variant?: "default" | "success" | "warning" | "danger" | null | undefined;
|
|
7
7
|
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
8
8
|
interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
|
|
9
9
|
showBullet?: boolean;
|
package/dist/index.d.mts
CHANGED
|
@@ -5,7 +5,7 @@ export { StrokeColorToken, StrokeDirection, StrokeToken, componentStrokes, creat
|
|
|
5
5
|
export { badgeTokens } from './tokens/badge.mjs';
|
|
6
6
|
export { tagTokens } from './tokens/tag.mjs';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
|
-
import { ReactNode } from 'react';
|
|
8
|
+
import React__default, { ReactNode } from 'react';
|
|
9
9
|
export { classNames } from './utils/classNames.mjs';
|
|
10
10
|
export { cn } from './utils/cn.mjs';
|
|
11
11
|
export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.mjs';
|
|
@@ -67,6 +67,112 @@ interface ModalProps {
|
|
|
67
67
|
}
|
|
68
68
|
declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
|
|
69
69
|
|
|
70
|
+
/**
|
|
71
|
+
* Navigation item interface
|
|
72
|
+
*/
|
|
73
|
+
interface NavigationItem {
|
|
74
|
+
id: string;
|
|
75
|
+
label: string;
|
|
76
|
+
icon?: React__default.ReactNode;
|
|
77
|
+
path: string;
|
|
78
|
+
badge?: string | number;
|
|
79
|
+
children?: NavigationItem[];
|
|
80
|
+
isCollapsible?: boolean;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Brand information interface
|
|
84
|
+
*/
|
|
85
|
+
interface BrandInfo {
|
|
86
|
+
logo?: React__default.ReactNode;
|
|
87
|
+
name: string;
|
|
88
|
+
tagline?: string;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Sidebar component props
|
|
92
|
+
*/
|
|
93
|
+
interface SidebarProps {
|
|
94
|
+
/** Brand information displayed at the top */
|
|
95
|
+
brand: BrandInfo;
|
|
96
|
+
/** Navigation items */
|
|
97
|
+
navigation: NavigationItem[];
|
|
98
|
+
/** Current active path */
|
|
99
|
+
currentPath?: string;
|
|
100
|
+
/** Whether the sidebar is collapsed */
|
|
101
|
+
collapsed?: boolean;
|
|
102
|
+
/** Callback when navigation item is clicked */
|
|
103
|
+
onNavigate?: (item: NavigationItem) => void;
|
|
104
|
+
/** Callback when collapse toggle is clicked */
|
|
105
|
+
onToggleCollapse?: () => void;
|
|
106
|
+
/** Custom className */
|
|
107
|
+
className?: string;
|
|
108
|
+
/** Data test id for testing */
|
|
109
|
+
'data-testid'?: string;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* # Sidebar - Navigation Organismo
|
|
113
|
+
*
|
|
114
|
+
* ## 🚨 GRID SYSTEM COMPLIANCE
|
|
115
|
+
*
|
|
116
|
+
* Este componente está diseñado para ocupar **2 columnas** en el grid system del Raya Design System.
|
|
117
|
+
* Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
|
|
118
|
+
*
|
|
119
|
+
* ### Features
|
|
120
|
+
* - **Grid Integration**: Ocupa exactamente 2 columnas del sistema de grid
|
|
121
|
+
* - **Responsive Behavior**: Se adapta a diferentes breakpoints
|
|
122
|
+
* - **Navigation System**: Soporte para navegación jerárquica y badges
|
|
123
|
+
* - **Brand Display**: Logo y información de marca
|
|
124
|
+
* - **Collapsible**: Opción de colapsar para ahorrar espacio
|
|
125
|
+
* - **Accessibility**: ARIA labels y navegación por teclado
|
|
126
|
+
*
|
|
127
|
+
* ### Grid Usage
|
|
128
|
+
* ```tsx
|
|
129
|
+
* <Grid cols={12} margin>
|
|
130
|
+
* <GridItem span={{ mobile: 12, desktop: 2 }}>
|
|
131
|
+
* <Sidebar {...props} />
|
|
132
|
+
* </GridItem>
|
|
133
|
+
* <GridItem span={{ mobile: 12, desktop: 10 }}>
|
|
134
|
+
* <MainContent />
|
|
135
|
+
* </GridItem>
|
|
136
|
+
* </Grid>
|
|
137
|
+
* ```
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```tsx
|
|
141
|
+
* // Basic sidebar with navigation
|
|
142
|
+
* <Sidebar
|
|
143
|
+
* brand={{ name: "Manta Seguros" }}
|
|
144
|
+
* navigation={[
|
|
145
|
+
* { id: "dashboard", label: "Dashboard", icon: <HomeIcon />, path: "/" },
|
|
146
|
+
* { id: "products", label: "Productos", icon: <ProductIcon />, path: "/products" },
|
|
147
|
+
* ]}
|
|
148
|
+
* currentPath="/dashboard"
|
|
149
|
+
* onNavigate={(item) => navigate(item.path)}
|
|
150
|
+
* />
|
|
151
|
+
* ```
|
|
152
|
+
*
|
|
153
|
+
* @example
|
|
154
|
+
* ```tsx
|
|
155
|
+
* // Sidebar with hierarchical navigation
|
|
156
|
+
* <Sidebar
|
|
157
|
+
* brand={{ name: "Admin Panel", tagline: "Management System" }}
|
|
158
|
+
* navigation={[
|
|
159
|
+
* {
|
|
160
|
+
* id: "products",
|
|
161
|
+
* label: "Productos",
|
|
162
|
+
* icon: <ProductIcon />,
|
|
163
|
+
* path: "/products",
|
|
164
|
+
* isCollapsible: true,
|
|
165
|
+
* children: [
|
|
166
|
+
* { id: "all-products", label: "Todos", path: "/products" },
|
|
167
|
+
* { id: "categories", label: "Categorías", path: "/products/categories" }
|
|
168
|
+
* ]
|
|
169
|
+
* }
|
|
170
|
+
* ]}
|
|
171
|
+
* />
|
|
172
|
+
* ```
|
|
173
|
+
*/
|
|
174
|
+
declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
175
|
+
|
|
70
176
|
interface AuthLayoutProps {
|
|
71
177
|
children: ReactNode;
|
|
72
178
|
}
|
|
@@ -78,4 +184,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
|
78
184
|
color?: string;
|
|
79
185
|
}
|
|
80
186
|
|
|
81
|
-
export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };
|
|
187
|
+
export { AuthLayout, type BrandInfo, type IconProps, Modal, type NavigationItem, Sidebar, type SidebarProps, type Size, ThemeProvider, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export { StrokeColorToken, StrokeDirection, StrokeToken, componentStrokes, creat
|
|
|
5
5
|
export { badgeTokens } from './tokens/badge.js';
|
|
6
6
|
export { tagTokens } from './tokens/tag.js';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
|
-
import { ReactNode } from 'react';
|
|
8
|
+
import React__default, { ReactNode } from 'react';
|
|
9
9
|
export { classNames } from './utils/classNames.js';
|
|
10
10
|
export { cn } from './utils/cn.js';
|
|
11
11
|
export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.js';
|
|
@@ -67,6 +67,112 @@ interface ModalProps {
|
|
|
67
67
|
}
|
|
68
68
|
declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
|
|
69
69
|
|
|
70
|
+
/**
|
|
71
|
+
* Navigation item interface
|
|
72
|
+
*/
|
|
73
|
+
interface NavigationItem {
|
|
74
|
+
id: string;
|
|
75
|
+
label: string;
|
|
76
|
+
icon?: React__default.ReactNode;
|
|
77
|
+
path: string;
|
|
78
|
+
badge?: string | number;
|
|
79
|
+
children?: NavigationItem[];
|
|
80
|
+
isCollapsible?: boolean;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Brand information interface
|
|
84
|
+
*/
|
|
85
|
+
interface BrandInfo {
|
|
86
|
+
logo?: React__default.ReactNode;
|
|
87
|
+
name: string;
|
|
88
|
+
tagline?: string;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Sidebar component props
|
|
92
|
+
*/
|
|
93
|
+
interface SidebarProps {
|
|
94
|
+
/** Brand information displayed at the top */
|
|
95
|
+
brand: BrandInfo;
|
|
96
|
+
/** Navigation items */
|
|
97
|
+
navigation: NavigationItem[];
|
|
98
|
+
/** Current active path */
|
|
99
|
+
currentPath?: string;
|
|
100
|
+
/** Whether the sidebar is collapsed */
|
|
101
|
+
collapsed?: boolean;
|
|
102
|
+
/** Callback when navigation item is clicked */
|
|
103
|
+
onNavigate?: (item: NavigationItem) => void;
|
|
104
|
+
/** Callback when collapse toggle is clicked */
|
|
105
|
+
onToggleCollapse?: () => void;
|
|
106
|
+
/** Custom className */
|
|
107
|
+
className?: string;
|
|
108
|
+
/** Data test id for testing */
|
|
109
|
+
'data-testid'?: string;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* # Sidebar - Navigation Organismo
|
|
113
|
+
*
|
|
114
|
+
* ## 🚨 GRID SYSTEM COMPLIANCE
|
|
115
|
+
*
|
|
116
|
+
* Este componente está diseñado para ocupar **2 columnas** en el grid system del Raya Design System.
|
|
117
|
+
* Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
|
|
118
|
+
*
|
|
119
|
+
* ### Features
|
|
120
|
+
* - **Grid Integration**: Ocupa exactamente 2 columnas del sistema de grid
|
|
121
|
+
* - **Responsive Behavior**: Se adapta a diferentes breakpoints
|
|
122
|
+
* - **Navigation System**: Soporte para navegación jerárquica y badges
|
|
123
|
+
* - **Brand Display**: Logo y información de marca
|
|
124
|
+
* - **Collapsible**: Opción de colapsar para ahorrar espacio
|
|
125
|
+
* - **Accessibility**: ARIA labels y navegación por teclado
|
|
126
|
+
*
|
|
127
|
+
* ### Grid Usage
|
|
128
|
+
* ```tsx
|
|
129
|
+
* <Grid cols={12} margin>
|
|
130
|
+
* <GridItem span={{ mobile: 12, desktop: 2 }}>
|
|
131
|
+
* <Sidebar {...props} />
|
|
132
|
+
* </GridItem>
|
|
133
|
+
* <GridItem span={{ mobile: 12, desktop: 10 }}>
|
|
134
|
+
* <MainContent />
|
|
135
|
+
* </GridItem>
|
|
136
|
+
* </Grid>
|
|
137
|
+
* ```
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```tsx
|
|
141
|
+
* // Basic sidebar with navigation
|
|
142
|
+
* <Sidebar
|
|
143
|
+
* brand={{ name: "Manta Seguros" }}
|
|
144
|
+
* navigation={[
|
|
145
|
+
* { id: "dashboard", label: "Dashboard", icon: <HomeIcon />, path: "/" },
|
|
146
|
+
* { id: "products", label: "Productos", icon: <ProductIcon />, path: "/products" },
|
|
147
|
+
* ]}
|
|
148
|
+
* currentPath="/dashboard"
|
|
149
|
+
* onNavigate={(item) => navigate(item.path)}
|
|
150
|
+
* />
|
|
151
|
+
* ```
|
|
152
|
+
*
|
|
153
|
+
* @example
|
|
154
|
+
* ```tsx
|
|
155
|
+
* // Sidebar with hierarchical navigation
|
|
156
|
+
* <Sidebar
|
|
157
|
+
* brand={{ name: "Admin Panel", tagline: "Management System" }}
|
|
158
|
+
* navigation={[
|
|
159
|
+
* {
|
|
160
|
+
* id: "products",
|
|
161
|
+
* label: "Productos",
|
|
162
|
+
* icon: <ProductIcon />,
|
|
163
|
+
* path: "/products",
|
|
164
|
+
* isCollapsible: true,
|
|
165
|
+
* children: [
|
|
166
|
+
* { id: "all-products", label: "Todos", path: "/products" },
|
|
167
|
+
* { id: "categories", label: "Categorías", path: "/products/categories" }
|
|
168
|
+
* ]
|
|
169
|
+
* }
|
|
170
|
+
* ]}
|
|
171
|
+
* />
|
|
172
|
+
* ```
|
|
173
|
+
*/
|
|
174
|
+
declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
175
|
+
|
|
70
176
|
interface AuthLayoutProps {
|
|
71
177
|
children: ReactNode;
|
|
72
178
|
}
|
|
@@ -78,4 +184,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
|
78
184
|
color?: string;
|
|
79
185
|
}
|
|
80
186
|
|
|
81
|
-
export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };
|
|
187
|
+
export { AuthLayout, type BrandInfo, type IconProps, Modal, type NavigationItem, Sidebar, type SidebarProps, type Size, ThemeProvider, useTheme };
|
package/dist/index.js
CHANGED
|
@@ -2754,12 +2754,21 @@ var Grid = React17__namespace.default.forwardRef(
|
|
|
2754
2754
|
const gridClasses = cn(
|
|
2755
2755
|
// Base grid styles
|
|
2756
2756
|
container && "grid",
|
|
2757
|
+
// Maximum width containers following design system
|
|
2758
|
+
"max-w-grid-mobile",
|
|
2759
|
+
// Mobile: 412px max-width
|
|
2760
|
+
"md:max-w-grid-tablet",
|
|
2761
|
+
// Tablet: 834px max-width
|
|
2762
|
+
"lg:max-w-grid-desktop",
|
|
2763
|
+
// Desktop: 1440px max-width
|
|
2764
|
+
// Center containers when margin is enabled
|
|
2765
|
+
margin && "mx-auto",
|
|
2757
2766
|
// Column configuration
|
|
2758
2767
|
getColsClasses(cols),
|
|
2759
2768
|
// Gap configuration
|
|
2760
2769
|
getGapClasses(gap),
|
|
2761
|
-
//
|
|
2762
|
-
margin && "
|
|
2770
|
+
// Padding configuration (follows design system)
|
|
2771
|
+
margin && "px-4 md:px-5 lg:px-6",
|
|
2763
2772
|
// Custom classes
|
|
2764
2773
|
className
|
|
2765
2774
|
);
|
|
@@ -2823,6 +2832,144 @@ function Modal({ open, onClose, children }) {
|
|
|
2823
2832
|
if (!open) return null;
|
|
2824
2833
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)" }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "100px auto", background: "#fff", padding: 24, borderRadius: 8, minWidth: 320 }, onClick: (e) => e.stopPropagation(), children }) });
|
|
2825
2834
|
}
|
|
2835
|
+
var NavigationItemComponent = ({ item, isActive, onNavigate, collapsed = false, level = 0 }) => {
|
|
2836
|
+
var _a;
|
|
2837
|
+
const [isExpanded, setIsExpanded] = React17__namespace.default.useState(false);
|
|
2838
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2839
|
+
const handleClick = () => {
|
|
2840
|
+
if (hasChildren && item.isCollapsible) {
|
|
2841
|
+
setIsExpanded(!isExpanded);
|
|
2842
|
+
} else {
|
|
2843
|
+
onNavigate == null ? void 0 : onNavigate(item);
|
|
2844
|
+
}
|
|
2845
|
+
};
|
|
2846
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
|
|
2847
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2848
|
+
Button,
|
|
2849
|
+
{
|
|
2850
|
+
variant: isActive ? "secondary" : "ghost",
|
|
2851
|
+
size: "sm",
|
|
2852
|
+
onClick: handleClick,
|
|
2853
|
+
className: cn(
|
|
2854
|
+
"w-full justify-start text-left font-normal h-10",
|
|
2855
|
+
level > 0 && "ml-4",
|
|
2856
|
+
isActive && "bg-primary-100 text-primary-900 font-medium"
|
|
2857
|
+
),
|
|
2858
|
+
"data-testid": `nav-item-${item.id}`,
|
|
2859
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
|
|
2860
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
2861
|
+
item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-gray-500", isActive && "text-primary-600"), children: item.icon }),
|
|
2862
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: item.label })
|
|
2863
|
+
] }),
|
|
2864
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2865
|
+
item.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-red-500 text-white text-xs px-2 py-1 rounded-full min-w-[20px] text-center", children: item.badge }),
|
|
2866
|
+
hasChildren && item.isCollapsible && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
2867
|
+
"text-gray-400 transition-transform",
|
|
2868
|
+
isExpanded && "rotate-90"
|
|
2869
|
+
), children: "\u25B6" })
|
|
2870
|
+
] })
|
|
2871
|
+
] })
|
|
2872
|
+
}
|
|
2873
|
+
),
|
|
2874
|
+
hasChildren && isExpanded && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: (_a = item.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2875
|
+
NavigationItemComponent,
|
|
2876
|
+
{
|
|
2877
|
+
item: child,
|
|
2878
|
+
isActive: child.path === item.path,
|
|
2879
|
+
onNavigate,
|
|
2880
|
+
collapsed,
|
|
2881
|
+
level: level + 1
|
|
2882
|
+
},
|
|
2883
|
+
child.id
|
|
2884
|
+
)) })
|
|
2885
|
+
] });
|
|
2886
|
+
};
|
|
2887
|
+
var Sidebar = React17__namespace.default.forwardRef(
|
|
2888
|
+
(_a, ref) => {
|
|
2889
|
+
var _b = _a, {
|
|
2890
|
+
brand,
|
|
2891
|
+
navigation,
|
|
2892
|
+
currentPath,
|
|
2893
|
+
collapsed = false,
|
|
2894
|
+
onNavigate,
|
|
2895
|
+
onToggleCollapse,
|
|
2896
|
+
className,
|
|
2897
|
+
"data-testid": dataTestId
|
|
2898
|
+
} = _b, props = __objRest(_b, [
|
|
2899
|
+
"brand",
|
|
2900
|
+
"navigation",
|
|
2901
|
+
"currentPath",
|
|
2902
|
+
"collapsed",
|
|
2903
|
+
"onNavigate",
|
|
2904
|
+
"onToggleCollapse",
|
|
2905
|
+
"className",
|
|
2906
|
+
"data-testid"
|
|
2907
|
+
]);
|
|
2908
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2909
|
+
"div",
|
|
2910
|
+
__spreadProps(__spreadValues({
|
|
2911
|
+
ref,
|
|
2912
|
+
className: cn(
|
|
2913
|
+
"h-full bg-white border-r border-gray-200 flex flex-col",
|
|
2914
|
+
"transition-all duration-300",
|
|
2915
|
+
collapsed ? "w-16" : "w-full",
|
|
2916
|
+
className
|
|
2917
|
+
),
|
|
2918
|
+
"data-testid": dataTestId
|
|
2919
|
+
}, props), {
|
|
2920
|
+
children: [
|
|
2921
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
|
|
2922
|
+
"p-4 border-b border-gray-100",
|
|
2923
|
+
collapsed && "px-2"
|
|
2924
|
+
), children: [
|
|
2925
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
|
|
2926
|
+
brand.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: brand.logo }),
|
|
2927
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
2928
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate", children: brand.name }),
|
|
2929
|
+
brand.tagline && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate", children: brand.tagline })
|
|
2930
|
+
] })
|
|
2931
|
+
] }),
|
|
2932
|
+
onToggleCollapse && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2933
|
+
Button,
|
|
2934
|
+
{
|
|
2935
|
+
variant: "ghost",
|
|
2936
|
+
size: "sm",
|
|
2937
|
+
onClick: onToggleCollapse,
|
|
2938
|
+
className: cn(
|
|
2939
|
+
"mt-3 w-full h-8",
|
|
2940
|
+
collapsed && "w-8 mx-auto"
|
|
2941
|
+
),
|
|
2942
|
+
"data-testid": "sidebar-toggle",
|
|
2943
|
+
children: [
|
|
2944
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
2945
|
+
"transition-transform",
|
|
2946
|
+
collapsed && "rotate-180"
|
|
2947
|
+
), children: "\u25C0" }),
|
|
2948
|
+
!collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-xs", children: "Colapsar" })
|
|
2949
|
+
]
|
|
2950
|
+
}
|
|
2951
|
+
)
|
|
2952
|
+
] }),
|
|
2953
|
+
/* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-4 space-y-2 overflow-y-auto", children: navigation.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2954
|
+
NavigationItemComponent,
|
|
2955
|
+
{
|
|
2956
|
+
item,
|
|
2957
|
+
isActive: currentPath === item.path,
|
|
2958
|
+
onNavigate,
|
|
2959
|
+
collapsed
|
|
2960
|
+
},
|
|
2961
|
+
item.id
|
|
2962
|
+
)) }),
|
|
2963
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
2964
|
+
"p-4 border-t border-gray-100",
|
|
2965
|
+
collapsed && "px-2"
|
|
2966
|
+
), children: !collapsed && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body-xs", className: "text-gray-400 text-center", children: "\xA9 2024 Design System" }) })
|
|
2967
|
+
]
|
|
2968
|
+
})
|
|
2969
|
+
);
|
|
2970
|
+
}
|
|
2971
|
+
);
|
|
2972
|
+
Sidebar.displayName = "Sidebar";
|
|
2826
2973
|
function AuthLayout({ children }) {
|
|
2827
2974
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("main", { children }) });
|
|
2828
2975
|
}
|
|
@@ -2874,6 +3021,7 @@ exports.Paragraph = Paragraph;
|
|
|
2874
3021
|
exports.ProgressBar = ProgressBar;
|
|
2875
3022
|
exports.RadioGroup = RadioGroup;
|
|
2876
3023
|
exports.RadioGroupItem = RadioGroupItem;
|
|
3024
|
+
exports.Sidebar = Sidebar;
|
|
2877
3025
|
exports.Step = Step;
|
|
2878
3026
|
exports.StepContent = StepContent;
|
|
2879
3027
|
exports.StepDescription = StepDescription;
|
package/dist/index.mjs
CHANGED
|
@@ -2726,12 +2726,21 @@ var Grid = React17__default.forwardRef(
|
|
|
2726
2726
|
const gridClasses = cn(
|
|
2727
2727
|
// Base grid styles
|
|
2728
2728
|
container && "grid",
|
|
2729
|
+
// Maximum width containers following design system
|
|
2730
|
+
"max-w-grid-mobile",
|
|
2731
|
+
// Mobile: 412px max-width
|
|
2732
|
+
"md:max-w-grid-tablet",
|
|
2733
|
+
// Tablet: 834px max-width
|
|
2734
|
+
"lg:max-w-grid-desktop",
|
|
2735
|
+
// Desktop: 1440px max-width
|
|
2736
|
+
// Center containers when margin is enabled
|
|
2737
|
+
margin && "mx-auto",
|
|
2729
2738
|
// Column configuration
|
|
2730
2739
|
getColsClasses(cols),
|
|
2731
2740
|
// Gap configuration
|
|
2732
2741
|
getGapClasses(gap),
|
|
2733
|
-
//
|
|
2734
|
-
margin && "
|
|
2742
|
+
// Padding configuration (follows design system)
|
|
2743
|
+
margin && "px-4 md:px-5 lg:px-6",
|
|
2735
2744
|
// Custom classes
|
|
2736
2745
|
className
|
|
2737
2746
|
);
|
|
@@ -2795,6 +2804,144 @@ function Modal({ open, onClose, children }) {
|
|
|
2795
2804
|
if (!open) return null;
|
|
2796
2805
|
return /* @__PURE__ */ jsx("div", { style: { position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(0,0,0,0.5)" }, onClick: onClose, children: /* @__PURE__ */ jsx("div", { style: { margin: "100px auto", background: "#fff", padding: 24, borderRadius: 8, minWidth: 320 }, onClick: (e) => e.stopPropagation(), children }) });
|
|
2797
2806
|
}
|
|
2807
|
+
var NavigationItemComponent = ({ item, isActive, onNavigate, collapsed = false, level = 0 }) => {
|
|
2808
|
+
var _a;
|
|
2809
|
+
const [isExpanded, setIsExpanded] = React17__default.useState(false);
|
|
2810
|
+
const hasChildren = item.children && item.children.length > 0;
|
|
2811
|
+
const handleClick = () => {
|
|
2812
|
+
if (hasChildren && item.isCollapsible) {
|
|
2813
|
+
setIsExpanded(!isExpanded);
|
|
2814
|
+
} else {
|
|
2815
|
+
onNavigate == null ? void 0 : onNavigate(item);
|
|
2816
|
+
}
|
|
2817
|
+
};
|
|
2818
|
+
return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
2819
|
+
/* @__PURE__ */ jsx(
|
|
2820
|
+
Button,
|
|
2821
|
+
{
|
|
2822
|
+
variant: isActive ? "secondary" : "ghost",
|
|
2823
|
+
size: "sm",
|
|
2824
|
+
onClick: handleClick,
|
|
2825
|
+
className: cn(
|
|
2826
|
+
"w-full justify-start text-left font-normal h-10",
|
|
2827
|
+
level > 0 && "ml-4",
|
|
2828
|
+
isActive && "bg-primary-100 text-primary-900 font-medium"
|
|
2829
|
+
),
|
|
2830
|
+
"data-testid": `nav-item-${item.id}`,
|
|
2831
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
|
|
2832
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
2833
|
+
item.icon && /* @__PURE__ */ jsx("span", { className: cn("text-gray-500", isActive && "text-primary-600"), children: item.icon }),
|
|
2834
|
+
!collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label })
|
|
2835
|
+
] }),
|
|
2836
|
+
!collapsed && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
2837
|
+
item.badge && /* @__PURE__ */ jsx("span", { className: "bg-red-500 text-white text-xs px-2 py-1 rounded-full min-w-[20px] text-center", children: item.badge }),
|
|
2838
|
+
hasChildren && item.isCollapsible && /* @__PURE__ */ jsx("span", { className: cn(
|
|
2839
|
+
"text-gray-400 transition-transform",
|
|
2840
|
+
isExpanded && "rotate-90"
|
|
2841
|
+
), children: "\u25B6" })
|
|
2842
|
+
] })
|
|
2843
|
+
] })
|
|
2844
|
+
}
|
|
2845
|
+
),
|
|
2846
|
+
hasChildren && isExpanded && !collapsed && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (_a = item.children) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsx(
|
|
2847
|
+
NavigationItemComponent,
|
|
2848
|
+
{
|
|
2849
|
+
item: child,
|
|
2850
|
+
isActive: child.path === item.path,
|
|
2851
|
+
onNavigate,
|
|
2852
|
+
collapsed,
|
|
2853
|
+
level: level + 1
|
|
2854
|
+
},
|
|
2855
|
+
child.id
|
|
2856
|
+
)) })
|
|
2857
|
+
] });
|
|
2858
|
+
};
|
|
2859
|
+
var Sidebar = React17__default.forwardRef(
|
|
2860
|
+
(_a, ref) => {
|
|
2861
|
+
var _b = _a, {
|
|
2862
|
+
brand,
|
|
2863
|
+
navigation,
|
|
2864
|
+
currentPath,
|
|
2865
|
+
collapsed = false,
|
|
2866
|
+
onNavigate,
|
|
2867
|
+
onToggleCollapse,
|
|
2868
|
+
className,
|
|
2869
|
+
"data-testid": dataTestId
|
|
2870
|
+
} = _b, props = __objRest(_b, [
|
|
2871
|
+
"brand",
|
|
2872
|
+
"navigation",
|
|
2873
|
+
"currentPath",
|
|
2874
|
+
"collapsed",
|
|
2875
|
+
"onNavigate",
|
|
2876
|
+
"onToggleCollapse",
|
|
2877
|
+
"className",
|
|
2878
|
+
"data-testid"
|
|
2879
|
+
]);
|
|
2880
|
+
return /* @__PURE__ */ jsxs(
|
|
2881
|
+
"div",
|
|
2882
|
+
__spreadProps(__spreadValues({
|
|
2883
|
+
ref,
|
|
2884
|
+
className: cn(
|
|
2885
|
+
"h-full bg-white border-r border-gray-200 flex flex-col",
|
|
2886
|
+
"transition-all duration-300",
|
|
2887
|
+
collapsed ? "w-16" : "w-full",
|
|
2888
|
+
className
|
|
2889
|
+
),
|
|
2890
|
+
"data-testid": dataTestId
|
|
2891
|
+
}, props), {
|
|
2892
|
+
children: [
|
|
2893
|
+
/* @__PURE__ */ jsxs("div", { className: cn(
|
|
2894
|
+
"p-4 border-b border-gray-100",
|
|
2895
|
+
collapsed && "px-2"
|
|
2896
|
+
), children: [
|
|
2897
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
2898
|
+
brand.logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: brand.logo }),
|
|
2899
|
+
!collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
|
|
2900
|
+
/* @__PURE__ */ jsx(Typography, { variant: "subheading-md", className: "text-gray-900 font-bold truncate", children: brand.name }),
|
|
2901
|
+
brand.tagline && /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "text-gray-500 truncate", children: brand.tagline })
|
|
2902
|
+
] })
|
|
2903
|
+
] }),
|
|
2904
|
+
onToggleCollapse && /* @__PURE__ */ jsxs(
|
|
2905
|
+
Button,
|
|
2906
|
+
{
|
|
2907
|
+
variant: "ghost",
|
|
2908
|
+
size: "sm",
|
|
2909
|
+
onClick: onToggleCollapse,
|
|
2910
|
+
className: cn(
|
|
2911
|
+
"mt-3 w-full h-8",
|
|
2912
|
+
collapsed && "w-8 mx-auto"
|
|
2913
|
+
),
|
|
2914
|
+
"data-testid": "sidebar-toggle",
|
|
2915
|
+
children: [
|
|
2916
|
+
/* @__PURE__ */ jsx("span", { className: cn(
|
|
2917
|
+
"transition-transform",
|
|
2918
|
+
collapsed && "rotate-180"
|
|
2919
|
+
), children: "\u25C0" }),
|
|
2920
|
+
!collapsed && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs", children: "Colapsar" })
|
|
2921
|
+
]
|
|
2922
|
+
}
|
|
2923
|
+
)
|
|
2924
|
+
] }),
|
|
2925
|
+
/* @__PURE__ */ jsx("nav", { className: "flex-1 p-4 space-y-2 overflow-y-auto", children: navigation.map((item) => /* @__PURE__ */ jsx(
|
|
2926
|
+
NavigationItemComponent,
|
|
2927
|
+
{
|
|
2928
|
+
item,
|
|
2929
|
+
isActive: currentPath === item.path,
|
|
2930
|
+
onNavigate,
|
|
2931
|
+
collapsed
|
|
2932
|
+
},
|
|
2933
|
+
item.id
|
|
2934
|
+
)) }),
|
|
2935
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
2936
|
+
"p-4 border-t border-gray-100",
|
|
2937
|
+
collapsed && "px-2"
|
|
2938
|
+
), children: !collapsed && /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "text-gray-400 text-center", children: "\xA9 2024 Design System" }) })
|
|
2939
|
+
]
|
|
2940
|
+
})
|
|
2941
|
+
);
|
|
2942
|
+
}
|
|
2943
|
+
);
|
|
2944
|
+
Sidebar.displayName = "Sidebar";
|
|
2798
2945
|
function AuthLayout({ children }) {
|
|
2799
2946
|
return /* @__PURE__ */ jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx("main", { children }) });
|
|
2800
2947
|
}
|
|
@@ -2809,4 +2956,4 @@ function useModal(initialOpen = false) {
|
|
|
2809
2956
|
return { open, openModal, closeModal };
|
|
2810
2957
|
}
|
|
2811
2958
|
|
|
2812
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, Form, FormField, FormLabel, FormMessage, Grid, GridItem, Input, Label, Modal, Paragraph, ProgressBar, RadioGroup, RadioGroupItem, Step, StepContent, StepDescription, StepLabel, Stepper, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeProvider, Title, Typography, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };
|
|
2959
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, Form, FormField, FormLabel, FormMessage, Grid, GridItem, Input, Label, Modal, Paragraph, ProgressBar, RadioGroup, RadioGroupItem, Sidebar, Step, StepContent, StepDescription, StepLabel, Stepper, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, ThemeProvider, Title, Typography, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
6
|
-
variant?: "default" | "success" | "
|
|
6
|
+
variant?: "default" | "success" | "warning" | "danger" | null | undefined;
|
|
7
7
|
} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
|
|
8
8
|
isClosable?: boolean;
|
|
9
9
|
actions?: React.ReactNode;
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
6
|
-
variant?: "default" | "success" | "
|
|
6
|
+
variant?: "default" | "success" | "warning" | "danger" | null | undefined;
|
|
7
7
|
} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
|
|
8
8
|
isClosable?: boolean;
|
|
9
9
|
actions?: React.ReactNode;
|
|
@@ -36,7 +36,7 @@ declare const ChartStyle: ({ id, config }: {
|
|
|
36
36
|
config: ChartConfig;
|
|
37
37
|
}) => react_jsx_runtime.JSX.Element | null;
|
|
38
38
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
39
|
-
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "
|
|
39
|
+
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "active" | "viewBox" | "label" | "payload" | "coordinate" | "accessibilityLayer"> & {
|
|
40
40
|
active?: boolean;
|
|
41
41
|
includeHidden?: boolean | undefined;
|
|
42
42
|
allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
|
|
@@ -36,7 +36,7 @@ declare const ChartStyle: ({ id, config }: {
|
|
|
36
36
|
config: ChartConfig;
|
|
37
37
|
}) => react_jsx_runtime.JSX.Element | null;
|
|
38
38
|
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
39
|
-
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "
|
|
39
|
+
declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "active" | "viewBox" | "label" | "payload" | "coordinate" | "accessibilityLayer"> & {
|
|
40
40
|
active?: boolean;
|
|
41
41
|
includeHidden?: boolean | undefined;
|
|
42
42
|
allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
|