@syuttechnologies/layout 1.0.2 → 1.0.21

package/dist/components/ui/SyutSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { SyutSelectUnified, default } from './SyutSelectUnified';
+export type { SyutSelectUnifiedProps, SelectOption } from './SyutSelectUnified';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/SyutSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/SyutSelect/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACjE,YAAY,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/ui/SyutSelect/index.js

@@ -0,0 +1,2 @@
+// Unified Select Component (combines single/multi select with variants)
+export { SyutSelectUnified, default } from './SyutSelectUnified';

package/dist/icon-collection/icon-systems.d.ts

@@ -0,0 +1,89 @@
+/**
+ * ============================================================================
+ * ENTERPRISE PROFESSIONAL ICON SYSTEM v3.1 (FIXED)
+ * ============================================================================
+ *
+ * Professional outline icons for enterprise applications
+ * Simple, clean, monochrome design similar to industry standards
+ *
+ * Features:
+ * - Outline style (no fills)
+ * - Consistent stroke width
+ * - Monochrome (inherits color)
+ * - Professional appearance
+ * - Optimized for 16-20px sizes
+ *
+ * Usage:
+ * import { IconSystem } from '@syuttechnologies/layout';
+ * <IconSystem.add size={18} />
+ * <IconSystem.edit size={16} color="var(--primary)" />
+ *
+ * ============================================================================
+ */
+import React from 'react';
+export interface IconProps {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+}
+declare const IconSystem: {
+    home: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    menu: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    dashboard: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    list: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    grid: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    add: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    edit: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    trash: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    save: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    cancel: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    x: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    search: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    filter: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    refresh: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    exportIcon: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    importIcon: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    download: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    upload: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    print: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    file: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    folder: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    copy: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    chevronLeft: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    chevronRight: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    chevronUp: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    chevronDown: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    arrowLeft: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    arrowRight: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    check: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    checkCircle: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    xCircle: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    alert: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    warning: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    info: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    eye: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    eyeOff: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    user: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    users: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    settings: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    moreVertical: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    moreHorizontal: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    mail: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    message: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    bell: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    lock: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    unlock: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    calendar: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    clock: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    chart: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    trendingUp: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    trendingDown: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    dollarSign: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    tag: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    link: ({ size, color, strokeWidth, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default IconSystem;
+//# sourceMappingURL=icon-systems.d.ts.map

package/dist/icon-collection/icon-systems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-systems.d.ts","sourceRoot":"","sources":["../../src/icon-collection/icon-systems.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,UAAU;mDAI2D,SAAS;mDAOT,SAAS;wDAQJ,SAAS;mDASd,SAAS;mDAWT,SAAS;kDAWV,SAAS;mDAOR,SAAS;oDAOR,SAAS;mDASV,SAAS;qDAQP,SAAS;gDAQd,SAAS;qDASJ,SAAS;qDAOT,SAAS;sDAMR,SAAS;yDAUN,SAAS;yDAQT,SAAS;uDAQX,SAAS;qDAQX,SAAS;oDAQV,SAAS;mDAUV,SAAS;qDAOP,SAAS;mDAMX,SAAS;0DASF,SAAS;2DAMR,SAAS;wDAMZ,SAAS;0DAMP,SAAS;wDAMX,SAAS;yDAOR,SAAS;oDASd,SAAS;0DAMH,SAAS;sDAOb,SAAS;oDAQX,SAAS;sDAQP,SAAS;mDAQZ,SAAS;kDAUV,SAAS;qDAON,SAAS;mDASX,SAAS;oDAOR,SAAS;uDASN,SAAS;2DAQL,SAAS;6DAQP,SAAS;mDAUnB,SAAS;sDAON,SAAS;mDAMZ,SAAS;mDAST,SAAS;qDAOP,SAAS;uDAOP,SAAS;oDASZ,SAAS;oDAST,SAAS;yDAQJ,SAAS;2DAOP,SAAS;yDAOX,SAAS;kDAOhB,SAAS;mDAOR,SAAS;CAOnF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/icon-collection/icon-systems.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IconSystem = {
+    // ========== NAVIGATION ICONS ==========
+    home: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }), _jsx("polyline", { points: "9 22 9 12 15 12 15 22" })] })),
+    menu: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] })),
+    dashboard: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7" })] })),
+    list: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18" }), _jsx("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }), _jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }), _jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })] })),
+    grid: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "7" }), _jsx("rect", { x: "14", y: "14", width: "7", height: "7" }), _jsx("rect", { x: "3", y: "14", width: "7", height: "7" })] })),
+    // ========== PRIMARY ACTIONS ==========
+    add: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
+    edit: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), _jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })] })),
+    trash: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] })),
+    save: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), _jsx("polyline", { points: "17 21 17 13 7 13 7 21" }), _jsx("polyline", { points: "7 3 7 8 15 8" })] })),
+    cancel: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
+    x: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] })),
+    // ========== SEARCH & FILTER ==========
+    search: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.35-4.35" })] })),
+    filter: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }) })),
+    refresh: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("polyline", { points: "23 4 23 10 17 10" }), _jsx("polyline", { points: "1 20 1 14 7 14" }), _jsx("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })] })),
+    // ========== DATA OPERATIONS ==========
+    exportIcon: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] })),
+    importIcon: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17 8 12 3 7 8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] })),
+    download: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] })),
+    upload: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17 8 12 3 7 8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] })),
+    print: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("polyline", { points: "6 9 6 2 18 2 18 9" }), _jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] })),
+    // ========== FILE OPERATIONS ==========
+    file: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }), _jsx("polyline", { points: "13 2 13 9 20 9" })] })),
+    folder: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) })),
+    copy: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })),
+    // ========== NAVIGATION ARROWS ==========
+    chevronLeft: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polyline", { points: "15 18 9 12 15 6" }) })),
+    chevronRight: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) })),
+    chevronUp: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polyline", { points: "18 15 12 9 6 15" }) })),
+    chevronDown: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })),
+    arrowLeft: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }), _jsx("polyline", { points: "12 19 5 12 12 5" })] })),
+    arrowRight: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12 5 19 12 12 19" })] })),
+    // ========== STATUS ICONS ==========
+    check: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })),
+    checkCircle: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] })),
+    xCircle: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] })),
+    alert: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
+    warning: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] })),
+    info: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] })),
+    // ========== VIEW & VISIBILITY ==========
+    eye: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] })),
+    eyeOff: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] })),
+    // ========== USER & PEOPLE ==========
+    user: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] })),
+    users: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" }), _jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })),
+    settings: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M12 1v6m0 6v6m-7-7h6m6 0h6m-6-7L9.879 5.121M5.121 9.879 8 12.828M12 21l7.071-7.071M15.172 8l4.95-4.95" }), _jsx("path", { d: "M19.071 19.071 15.172 16m-7.071 0-4.95 4.95M8.828 8 3.88 3.05" })] })),
+    moreVertical: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, stroke: "none", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "2" }), _jsx("circle", { cx: "12", cy: "5", r: "2" }), _jsx("circle", { cx: "12", cy: "19", r: "2" })] })),
+    moreHorizontal: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, stroke: "none", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "2" }), _jsx("circle", { cx: "19", cy: "12", r: "2" }), _jsx("circle", { cx: "5", cy: "12", r: "2" })] })),
+    // ========== COMMUNICATION ==========
+    mail: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), _jsx("polyline", { points: "22,6 12,13 2,6" })] })),
+    message: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })),
+    bell: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }), _jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })] })),
+    // ========== SECURITY ==========
+    lock: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] })),
+    unlock: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] })),
+    calendar: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] })),
+    clock: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] })),
+    // ========== BUSINESS & ANALYTICS ==========
+    chart: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }), _jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })] })),
+    trendingUp: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("polyline", { points: "23 6 13.5 15.5 8.5 10.5 1 18" }), _jsx("polyline", { points: "17 6 23 6 23 12" })] })),
+    trendingDown: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("polyline", { points: "23 18 13.5 8.5 8.5 13.5 1 6" }), _jsx("polyline", { points: "17 18 23 18 23 12" })] })),
+    dollarSign: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("line", { x1: "12", y1: "1", x2: "12", y2: "23" }), _jsx("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] })),
+    tag: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" }), _jsx("line", { x1: "7", y1: "7", x2: "7.01", y2: "7" })] })),
+    link: ({ size = 18, color = 'currentColor', strokeWidth = 2, ...props }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), _jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })] })),
+};
+export default IconSystem;

package/dist/icon-collection/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './icon-systems';
+export { default as IconSystem } from './icon-systems';
+export type { IconProps } from './icon-systems';
+//# sourceMappingURL=index.d.ts.map

package/dist/icon-collection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/icon-collection/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/icon-collection/index.js

@@ -0,0 +1,8 @@
+// ============================================================================
+// ICON SYSTEM BARREL EXPORTS
+// ============================================================================
+// Centralized export point for the icon system
+// Default export (recommended usage)
+export { default } from './icon-systems';
+// Named export (alternative usage)
+export { default as IconSystem } from './icon-systems';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @prima/layout - Enterprise React Layout Library
+ * @syuttechnologies/layout - Enterprise React Layout Library
  *
  * A comprehensive layout system for React applications featuring:
  * - Enterprise-grade sidebar navigation with multi-level menus
@@ -8,9 +8,20 @@
  * - Notification system
  * - Responsive design
  * - Change password modal
+ * - Data Grid Component (SyutGrid)
+ * - Select Component (SyutSelect)
+ * - Icon System
+ * - Action Menu
  */
 export { EnterpriseLayout, type EnterpriseLayoutProps, type ComponentRegistry, type LogoConfig, type Colors, type BrandingConfig, type LayoutConfig, type FooterConfig, type UserConfig, type NavigationItem, type NavigationSection, type CompactModeItem, type ToolbarAction, type ModuleConfig, type ModulesConfig, type HooksConfig, type EnterpriseLayoutConfig, type TabData, type IconSystemType, type StoredModuleConfig, } from './components/EnterpriseLayout';
 export { default } from './components/EnterpriseLayout';
 export { ChangePasswordModal, type ChangePasswordModalProps, type ChangePasswordData, type PasswordValidationRules, } from './components/ChangePasswordModal';
 export { notificationService, type NotificationType, type NotificationPayload, type Notification, } from './services/notificationService';
+export { default as IconSystem } from './icon-collection/icon-systems';
+export type { IconProps } from './icon-collection/icon-systems';
+export { ActionMenu, type ActionMenuProps, type ActionMenuItem, type ProcessedActionMenuItem, } from './components/ui/ActionMenu';
+export { SyutGrid, type SyutGridProps, type SyutGridColumn, } from './components/ui/SyutGrid';
+export { SyutSelectUnified, SyutSelectUnified as SyutSelect, // Alias for convenience
+type SyutSelectUnifiedProps, type SelectOption, } from './components/ui/SyutSelect';
+export { ModuleHeader, type ModuleHeaderProps, type ActionButton, type ViewModeOption, type SearchConfig, type ViewModeConfig, type FilterConfig, } from './components/ui/ModuleHeader';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,OAAO,EACZ,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAGxD,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GAClB,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,MAAM,EACX,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,OAAO,EACZ,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAGxD,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,GAC7B,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,mBAAmB,EACnB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,YAAY,GAClB,MAAM,gCAAgC,CAAC;AAOxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACvE,YAAY,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,uBAAuB,GAC7B,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,cAAc,GACpB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,iBAAiB,EACjB,iBAAiB,IAAI,UAAU,EAAE,wBAAwB;AACzD,KAAK,sBAAsB,EAC3B,KAAK,YAAY,GAClB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,YAAY,GAClB,MAAM,8BAA8B,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @prima/layout - Enterprise React Layout Library
+ * @syuttechnologies/layout - Enterprise React Layout Library
  *
  * A comprehensive layout system for React applications featuring:
  * - Enterprise-grade sidebar navigation with multi-level menus
@@ -8,6 +8,10 @@
  * - Notification system
  * - Responsive design
  * - Change password modal
+ * - Data Grid Component (SyutGrid)
+ * - Select Component (SyutSelect)
+ * - Icon System
+ * - Action Menu
  */
 // Main Layout Component
 export { EnterpriseLayout, } from './components/EnterpriseLayout';
@@ -16,3 +20,17 @@ export { default } from './components/EnterpriseLayout';
 export { ChangePasswordModal, } from './components/ChangePasswordModal';
 // Notification Service
 export { notificationService, } from './services/notificationService';
+// ============================================================================
+// UI COMPONENTS
+// ============================================================================
+// Icon System
+export { default as IconSystem } from './icon-collection/icon-systems';
+// Action Menu Component
+export { ActionMenu, } from './components/ui/ActionMenu';
+// SyutGrid - Data Grid Component
+export { SyutGrid, } from './components/ui/SyutGrid';
+// SyutSelect - Unified Select Component
+export { SyutSelectUnified, SyutSelectUnified as SyutSelect, // Alias for convenience
+ } from './components/ui/SyutSelect';
+// ModuleHeader - Reusable Header Component for Master Screens
+export { ModuleHeader, } from './components/ui/ModuleHeader';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@syuttechnologies/layout",
-  "version": "1.0.2",
-  "description": "Enterprise React Layout Component",
+  "version": "1.0.21",
+  "description": "Enterprise React Layout Component with UI Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -10,7 +10,9 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "react-select": "^5.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -21,7 +23,10 @@
     "react",
     "layout",
     "enterprise",
-    "dashboard"
+    "dashboard",
+    "grid",
+    "select",
+    "ui-components"
   ],
   "license": "MIT"
 }

package/src/components/ChangePasswordModal.tsx

@@ -135,21 +135,27 @@ const styles = {
   backdrop: {
     position: 'fixed' as const,
     inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    zIndex: 9998,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backdropFilter: 'blur(4px)',
+    zIndex: 10040,
+    overflowY: 'auto' as const,
+    overflowX: 'hidden' as const,
+  },
+  scrollWrapper: {
+    minHeight: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '2rem 1rem',
   },
   modal: {
-    position: 'fixed' as const,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
+    position: 'relative' as const,
     backgroundColor: 'white',
     borderRadius: '12px',
-    boxShadow: '0 20px 50px rgba(0, 0, 0, 0.3)',
+    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.4)',
     width: '100%',
     maxWidth: '440px',
-    zIndex: 9999,
-    overflow: 'hidden',
+    zIndex: 10050,
   },
   header: {
     display: 'flex',
@@ -158,6 +164,7 @@ const styles = {
     padding: '1.25rem 1.5rem',
     borderBottom: '1px solid #e2e8f0',
     background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    borderRadius: '12px 12px 0 0',
   },
   headerTitle: {
     display: 'flex',
@@ -182,6 +189,9 @@ const styles = {
   },
   content: {
     padding: '1.5rem',
+    overflowY: 'auto' as const,
+    flex: 1,
+    minHeight: 0,
   },
   formGroup: {
     marginBottom: '1.25rem',
@@ -283,6 +293,7 @@ const styles = {
     padding: '1rem 1.5rem',
     borderTop: '1px solid #e2e8f0',
     backgroundColor: '#f8fafc',
+    flexShrink: 0,
   },
   button: {
     padding: '0.625rem 1.25rem',
@@ -422,9 +433,9 @@ export const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
   const loading = isSubmitting || externalLoading;
 
   return (
-    <>
-      <div style={styles.backdrop} onClick={handleClose} />
-      <div style={styles.modal}>
+    <div style={styles.backdrop} onClick={handleClose}>
+      <div style={styles.scrollWrapper}>
+        <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
         <div style={styles.header}>
           <h2 style={styles.headerTitle}>
             <LockIcon />
@@ -435,7 +446,7 @@ export const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
           </button>
         </div>
 
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
           <div style={styles.content}>
             {getFieldError('general') && (
               <div style={{ padding: '0.75rem', backgroundColor: '#fef2f2', border: '1px solid #fecaca', borderRadius: '8px', marginBottom: '1rem', color: '#dc2626', fontSize: '0.875rem' }}>
@@ -537,8 +548,9 @@ export const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
             </button>
           </div>
         </form>
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 

package/src/components/EnterpriseLayout.tsx

@@ -331,9 +331,6 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
           setDynamicNavigation(parsedNavigation);
           // Update expanded sections for the new navigation
           setExpandedSections(new Set(parsedNavigation.map((n: NavigationSection) => n.section)));
-          setExpandedOverviewSections(
-            new Set(parsedNavigation.filter((sec: NavigationSection) => sec.section !== "Dashboard").map((sec: NavigationSection) => sec.section))
-          );
         }
       } catch (error) {
         console.error('Failed to parse navigation menu from localStorage:', error);
@@ -367,6 +364,23 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
     }
   }, []);
 
+  // Sync dynamicModules when config.modules prop changes (if no localStorage override)
+  useEffect(() => {
+    const storedModules = localStorage.getItem('MODULES_CONFIG');
+    if (!storedModules && config.modules) {
+      setDynamicModules(config.modules);
+    }
+  }, [config.modules]);
+
+  // Sync dynamicNavigation when config.navigation prop changes (if no localStorage override)
+  useEffect(() => {
+    const storedNavigation = localStorage.getItem('NAVIGATION_MENU');
+    if (!storedNavigation && config.navigation) {
+      setDynamicNavigation(config.navigation);
+      setExpandedSections(new Set(config.navigation.map((n: NavigationSection) => n.section)));
+    }
+  }, [config.navigation]);
+
   // User preference for auto-collapse (configurable)
   const [autoCollapseEnabled, setAutoCollapseEnabled] = useState<boolean>(
     config.layout.autoCollapseSidebar
@@ -374,7 +388,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
 
   // Overview tab section management
   const [expandedOverviewSections, setExpandedOverviewSections] = useState<Set<string>>(
-    new Set(config.navigation.filter(sec => sec.section !== "Dashboard").map(sec => sec.section))
+    new Set()
   );
 
   // React 18 Concurrent Features
@@ -1539,7 +1553,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
 
       .tab-content-area {
         flex: 1;
-        overflow: hidden;
+        overflow: auto;
         width: 100%;
         height: 100%;
         min-height: 0;
@@ -1551,7 +1565,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
         display: none;
         width: 100%;
         height: 100%;
-        overflow: hidden;
+        overflow: auto;
         box-sizing: border-box;
       }
 
@@ -1837,6 +1851,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
         cursor: pointer;
         transition: all 0.3s ease;
         flex-shrink: 0;
+        z-index: 10002;
       }
 
       .persona-control:hover {
@@ -1877,7 +1892,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
         border-radius: 1rem;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
         padding: 1rem;
-        z-index: 1001;
+        z-index: 10001;
         margin-top: 0.5rem;
         opacity: 0;
         visibility: hidden;
@@ -3483,7 +3498,7 @@ export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
                 <div className="persona-control-item">
                   <div className="persona-control-label">
                     <IconSystem.settings />
-                    Dark Mode=5
+                    Dark Mode-7
                   </div>
                   <div
                     className={`theme-switch ${darkMode ? "active" : ""}`}