ikoncomponents 1.7.6 → 1.8.0

package/dist/ikoncomponents/action-menu/index.d.ts

@@ -1,5 +1,6 @@
+import * as React from "react";
 import type { ActionMenuProps, ExtraActionParams } from "./type";
 export declare function ActionMenu({ actionMenus, extraActionParams, }: {
     actionMenus: ActionMenuProps[];
     extraActionParams?: ExtraActionParams;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/activity-sheet/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export type ActivityLogProps = {
     id: string;
     activity: string;
@@ -8,4 +9,4 @@ export type ActivityLogProps = {
 };
 export declare function ActivitySheet({ activityLogs }: {
     activityLogs?: ActivityLogProps[];
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/app-breadcrumb/BreadcrumbProvider.d.ts

@@ -13,6 +13,6 @@ interface BreadcrumbContextType {
 }
 export declare function BreadcrumbProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useBreadcrumb(): BreadcrumbContextType;
 export {};

package/dist/ikoncomponents/app-breadcrumb/index.d.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbItemProps } from "./BreadcrumbProvider";
-export declare function AppBreadcrumb(): import("react/jsx-runtime").JSX.Element | null;
+export declare function AppBreadcrumb(): import("react").JSX.Element | null;
 export declare function RenderAppBreadcrumb({ breadcrumb, }: {
     breadcrumb: BreadcrumbItemProps;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/ikoncomponents/big-calendar/big-calender-event/index.d.ts

@@ -2,4 +2,4 @@ import { BigCalendarEventProps, ExtraParamsEvent } from "../type";
 export default function BigCalenderEvent({ event, extraParamsEvent }: {
     event: BigCalendarEventProps;
     extraParamsEvent?: ExtraParamsEvent;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/ikoncomponents/big-calendar/big-calender-toolbar/index.d.ts

@@ -1,2 +1,2 @@
 import { BigCalenderToolbarProps } from "../type";
-export default function BigCalenderToolbar({ onNavigate, onView, label, extraTools, view }: BigCalenderToolbarProps): import("react/jsx-runtime").JSX.Element;
+export default function BigCalenderToolbar({ onNavigate, onView, label, extraTools, view }: BigCalenderToolbarProps): import("react").JSX.Element;

package/dist/ikoncomponents/big-calendar/index.d.ts

@@ -1,3 +1,3 @@
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import { BigCalendarProps } from "./type";
-export declare function BigCalendar({ events, extraParamsEvent, extraTools }: BigCalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function BigCalendar({ events, extraParamsEvent, extraTools }: BigCalendarProps): import("react").JSX.Element;

package/dist/ikoncomponents/buttons/index.d.ts

@@ -10,9 +10,9 @@ export interface ButtonWithTooltipProps extends React.ButtonHTMLAttributes<HTMLB
     asChild?: boolean;
     tooltipContent: string | React.ReactNode;
 }
-export declare function TextButton({ children, variant, asChild, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function TextButtonWithTooltip({ children, variant, asChild, size, tooltipContent, ...props }: ButtonWithTooltipProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconTextButton({ children, variant, asChild, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconTextButtonWithTooltip({ children, variant, size, asChild, tooltipContent, ...props }: ButtonWithTooltipProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconButton({ children, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function IconButtonWithTooltip({ children, tooltipContent, asChild, variant, size, ...props }: ButtonWithTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextButton({ children, variant, asChild, size, ...props }: ButtonProps): React.JSX.Element;
+export declare function TextButtonWithTooltip({ children, variant, asChild, size, tooltipContent, ...props }: ButtonWithTooltipProps): React.JSX.Element;
+export declare function IconTextButton({ children, variant, asChild, size, ...props }: ButtonProps): React.JSX.Element;
+export declare function IconTextButtonWithTooltip({ children, variant, size, asChild, tooltipContent, ...props }: ButtonWithTooltipProps): React.JSX.Element;
+export declare function IconButton({ children, variant, size, asChild, ...props }: ButtonProps): React.JSX.Element;
+export declare function IconButtonWithTooltip({ children, tooltipContent, asChild, variant, size, ...props }: ButtonWithTooltipProps): React.JSX.Element;

package/dist/ikoncomponents/combobox-input/index.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { ComboBoxInputProps } from "./type";
-export declare function ComboboxInput({ placeholder, items, disabled, onSelect, defaultValue }: ComboBoxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxInput({ placeholder, items, disabled, onSelect, defaultValue }: ComboBoxInputProps): React.JSX.Element;

package/dist/ikoncomponents/custom-combo-dropdown/index.d.ts

@@ -17,5 +17,5 @@ type CustomComboboxInputProps = {
     formDescription?: string;
     disabled?: boolean;
 };
-export declare function CustomComboboxInput({ formControl, name, label, options, placeholder, emptyMessage, onValueChange, className, addNewPlaceholder, formDescription, disabled, }: CustomComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomComboboxInput({ formControl, name, label, options, placeholder, emptyMessage, onValueChange, className, addNewPlaceholder, formDescription, disabled, }: CustomComboboxInputProps): React.JSX.Element;
 export {};

package/dist/ikoncomponents/data-table/datatable-column-filter/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { DataTableViewOptionsProps } from "../type";
-export declare function DataTableColumnFilter<TData>({ table, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableColumnFilter<TData>({ table, }: DataTableViewOptionsProps<TData>): React.JSX.Element;

package/dist/ikoncomponents/data-table/datatable-faceted-filter/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { DataTableFacetedFilterProps } from "../type";
-export declare function DataTableFacetedFilter<TData, TValue>({ column, }: DataTableFacetedFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableFacetedFilter<TData, TValue>({ column, }: DataTableFacetedFilterProps<TData, TValue>): React.JSX.Element;

package/dist/ikoncomponents/data-table/datatable-filter-menu/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { DataTableFilterProps } from "../type";
-export declare function DataTableFilterMenu<TData>({ table }: DataTableFilterProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableFilterMenu<TData>({ table }: DataTableFilterProps<TData>): React.JSX.Element;

package/dist/ikoncomponents/data-table/datatable-pagination/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { DataTablePaginationProps } from "../type";
-export declare function DataTablePagination<TData>({ table, extraParams, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination<TData>({ table, extraParams, }: DataTablePaginationProps<TData>): React.JSX.Element;

package/dist/ikoncomponents/data-table/datatable-toolbar/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { DTToolBarProps } from "../type";
-export declare function DataTableToolbar<TData>({ table, extraParams, }: DTToolBarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableToolbar<TData>({ table, extraParams, }: DTToolBarProps<TData>): React.JSX.Element;

package/dist/ikoncomponents/data-table/index.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { DataTableProps } from "./type";
-export declare const DataTable: <TData, TValue>({ columns, data, extraParams, onTableReady }: DataTableProps<TData, TValue>, ref: any) => false | import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData, TValue>({ columns, data, extraParams, onTableReady }: DataTableProps<TData, TValue>, ref: any) => false | React.JSX.Element;

package/dist/ikoncomponents/file-input/index.d.ts

@@ -1 +1,2 @@
-export declare function FileInput({ tooltipContent, fileNamePlaceholder, fileName, onFileNameChange, ...props }: any): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare function FileInput({ tooltipContent, fileNamePlaceholder, fileName, onFileNameChange, ...props }: any): React.JSX.Element;

package/dist/ikoncomponents/fileUpload/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export declare const convertFileToObject: (file: File) => Promise<any>;
 interface FileUploaderProps {
     label?: string;
@@ -9,6 +10,6 @@ interface FileUploaderProps {
     showPreview?: boolean;
     onFileSelect: (files: any[]) => Promise<any> | void;
 }
-export default function FileUploader({ label, isDrag, fileInput, isMultiple, tooltipContent, fileNamePlaceholder, showPreview, onFileSelect, }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+export default function FileUploader({ label, isDrag, fileInput, isMultiple, tooltipContent, fileNamePlaceholder, showPreview, onFileSelect, }: FileUploaderProps): React.JSX.Element;
 export declare function getFileUrlFromObject(obj: any): string;
 export {};

package/dist/ikoncomponents/form-fields/combobox-input/index.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { FormComboboxInputProps } from "../types";
-export declare function FormComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, }: FormComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, }: FormComboboxInputProps): React.JSX.Element;

package/dist/ikoncomponents/form-fields/combobox-input-value/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { Control } from "react-hook-form";
 export interface FormComboboxInputProps {
     formControl: Control<any>;
@@ -15,4 +16,4 @@ export interface FormComboboxInputProps {
     value?: string;
     onChange?: (value: any) => void;
 }
-export declare function FormComboboxInputWithValue(props: FormComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormComboboxInputWithValue(props: FormComboboxInputProps): React.JSX.Element;

package/dist/ikoncomponents/form-fields/date-input/index.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { FormDateInputProps } from "../types";
-export declare function FormDateInput({ formControl, name, label, placeholder, dateFormat, calendarDateDisabled, formDescription, disabled, }: FormDateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormDateInput({ formControl, name, label, placeholder, dateFormat, calendarDateDisabled, formDescription, disabled, }: FormDateInputProps): React.JSX.Element;

package/dist/ikoncomponents/form-fields/file-input/index.d.ts

@@ -1 +1,2 @@
-export declare function FormFileInput(): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare function FormFileInput(): React.JSX.Element;

package/dist/ikoncomponents/form-fields/input/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { FormInputProps } from '../types';
-export declare function FormInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps): React.JSX.Element;

package/dist/ikoncomponents/form-fields/multi-combobox-input/index.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import { FormComboboxInputProps as BaseFormComboboxInputProps } from "../../form-fields/types";
 interface FormComboboxInputProps extends BaseFormComboboxInputProps {
     defaultOptions?: number;
 }
-export declare function FormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, defaultValue, defaultOptions, }: FormComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, defaultValue, defaultOptions, }: FormComboboxInputProps): React.JSX.Element;
 export {};

package/dist/ikoncomponents/form-fields/otp-input/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { FormInputProps } from '../types';
-export declare function FormOtpInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormOtpInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps): React.JSX.Element;

package/dist/ikoncomponents/form-fields/phone-input/index.d.ts

@@ -1 +1,2 @@
-export declare function FormPhoneInput(): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare function FormPhoneInput(): React.JSX.Element;

package/dist/ikoncomponents/form-fields/textarea/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { FormTextareaProps } from '../types';
-export declare function FormTextarea({ formControl, name, label, formItemClass, formDescription, ...textAreaProps }: FormTextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormTextarea({ formControl, name, label, formItemClass, formDescription, ...textAreaProps }: FormTextareaProps): React.JSX.Element;

package/dist/ikoncomponents/glowing-effect/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 interface GlowingEffectProps {
     blur?: number;
     inactiveZone?: number;
@@ -10,5 +11,5 @@ interface GlowingEffectProps {
     movementDuration?: number;
     borderWidth?: number;
 }
-export declare const GlowingEffect: ({ blur, inactiveZone, proximity, spread, variant, glow, className, movementDuration, borderWidth, disabled, }: GlowingEffectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GlowingEffect: ({ blur, inactiveZone, proximity, spread, variant, glow, className, movementDuration, borderWidth, disabled, }: GlowingEffectProps) => React.JSX.Element;
 export {};

package/dist/ikoncomponents/icon/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export interface IconProps {
     name: string;
     size?: number | string;
@@ -5,4 +6,4 @@ export interface IconProps {
     className?: string;
     strokeWidth?: number;
 }
-export declare function Icon({ name, ...props }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Icon({ name, ...props }: IconProps): React.JSX.Element | null;

package/dist/ikoncomponents/image-cropper-upload/cropper-form/index.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     onNewFileUpload?: (...args: any) => void;
 }
-declare function CropperFormComponent({ onNewFileUpload }: Props): import("react/jsx-runtime").JSX.Element;
+declare function CropperFormComponent({ onNewFileUpload }: Props): import("react").JSX.Element;
 export declare const CropperForm: import("react").MemoExoticComponent<typeof CropperFormComponent>;
 export {};

package/dist/ikoncomponents/image-cropper-upload/cropper-form-with-modal/index.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { AspectRatioWiseImagesProps, OriginalImageProps } from '..';
 export declare function CropperFormWithModal({ open, onOpenChange, onCropperChange }: Readonly<{
     open: boolean;
     onOpenChange: (open: boolean) => void;
     onCropperChange: (originalImage: OriginalImageProps, aspectRatioWiseImages: AspectRatioWiseImagesProps) => void;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;

package/dist/ikoncomponents/image-cropper-upload/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { CropperUploadImagesInfoProps } from './utils';
 export interface ImageCropperContextProps {
     originalImage: OriginalImageProps;
@@ -23,5 +23,5 @@ export interface ImageCropperProps {
     modalOpen?: boolean;
     onModalOpenChange?: (open: boolean) => void;
 }
-export declare function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }: ImageCropperProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageCropperProvider({ children, uploadedImages, onCropperChange, modalOpen, onModalOpenChange }: ImageCropperProps): React.JSX.Element;
 export declare const useImageCropper: () => ImageCropperContextProps;

package/dist/ikoncomponents/loading-spinner/index.d.ts

@@ -6,4 +6,4 @@ export interface ISVGProps extends React.SVGProps<SVGSVGElement> {
 export interface LoadingSpinnerProps extends ISVGProps {
     visible?: boolean;
 }
-export declare const LoadingSpinner: ({ size, className, visible, ...props }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const LoadingSpinner: ({ size, className, visible, ...props }: LoadingSpinnerProps) => React.JSX.Element | null;

package/dist/ikoncomponents/main-layout/RefreshContext.d.ts

@@ -5,6 +5,6 @@ interface RefreshContextType {
 }
 export declare function RefreshProvider({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function useRefresh(): RefreshContextType;
 export {};

package/dist/ikoncomponents/main-layout/SidebarNavContext.d.ts

@@ -29,5 +29,5 @@ export interface SidebarNavContextType {
 }
 export declare function SidebarNavProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export declare function useSidebarNav(): SidebarNavContextType;

package/dist/ikoncomponents/main-layout/app-sidebar.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
 import { Sidebar } from "../../shadcn/sidebar";
-export declare function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>): import("react/jsx-runtime").JSX.Element | null;
+export declare function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>): React.JSX.Element | null;

package/dist/ikoncomponents/main-layout/app-sidebar.js

@@ -14,11 +14,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail, } from "../../shadcn/sidebar";
 import { NavMain } from "./nav-main";
 import { useSidebarNav } from "./SidebarNavContext";
+import { useSidebarExpanded } from "./sidebar-expanded-context";
+import { cn } from "../../utils/cn";
 export function AppSidebar(_a) {
     var props = __rest(_a, []);
     const { navItems, header, footer } = useSidebarNav();
+    const expanded = useSidebarExpanded();
     if (!navItems || navItems.length === 0) {
         return null;
     }
-    return (_jsxs(Sidebar, Object.assign({ className: "ml-12", collapsible: "offcanvas" }, props, { children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarContent, { children: _jsx(NavMain, {}) }), footer && _jsx(SidebarFooter, { children: footer }), _jsx(SidebarRail, {})] })));
+    return (_jsxs(Sidebar, Object.assign({ className: cn("transition-[margin] duration-200 ease-in-out", expanded ? "ml-56" : "ml-12"), collapsible: "offcanvas" }, props, { children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarContent, { children: _jsx(NavMain, {}) }), footer && _jsx(SidebarFooter, { children: footer }), _jsx(SidebarRail, {})] })));
 }

package/dist/ikoncomponents/main-layout/footer.d.ts

@@ -1 +1,2 @@
-export declare function Footer(): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export declare function Footer(): React.JSX.Element;

package/dist/ikoncomponents/main-layout/footer.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Copyright } from "lucide-react";
+import { useSidebarExpanded } from "./sidebar-expanded-context";
+import { cn } from "../../utils/cn";
 export function Footer() {
-    return (_jsx("footer", { className: "ml-12 flex border-t px-4 py-2 justify-center lg:justify-start", children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(Copyright, { className: "size-4" }), _jsx("span", { children: "Powered By" }), _jsx("a", { href: "https://keross.com", target: "_blank", children: "Keross" }), _jsx("span", { className: "", children: "|" }), _jsx("span", { id: "txtCopyrightYear", className: "", children: new Date().getFullYear() })] }) }));
+    const expanded = useSidebarExpanded();
+    return (_jsx("footer", { className: cn("flex border-t px-4 py-2 justify-center lg:justify-start transition-[margin] duration-200 ease-in-out", expanded ? "ml-56" : "ml-12"), children: _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(Copyright, { className: "size-4" }), _jsx("span", { children: "Powered By" }), _jsx("a", { href: "https://keross.com", target: "_blank", children: "Keross" }), _jsx("span", { className: "", children: "|" }), _jsx("span", { id: "txtCopyrightYear", className: "", children: new Date().getFullYear() })] }) }));
 }

package/dist/ikoncomponents/main-layout/header.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export declare function Header({ platformUrl }: {
     platformUrl: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/main-layout/header.js

@@ -7,10 +7,13 @@ import { SidebarTrigger } from "../../shadcn/sidebar";
 import { Bell, Play } from "lucide-react";
 import { IconButtonWithTooltip, IconTextButton } from "../buttons";
 import { useSidebarNav } from "./SidebarNavContext";
+import { useSidebarExpanded } from "./sidebar-expanded-context";
+import { cn } from "../../utils/cn";
 import Link from "next/link";
 export function Header({ platformUrl }) {
     const { navItems } = useSidebarNav();
-    return (_jsx("header", { className: "ml-12 flex h-12 border-b shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", children: _jsxs("div", { className: "flex items-center justify-between gap-2 px-4 w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [(!navItems || navItems.length === 0) ? _jsx("div", {}) : _jsx(SidebarTrigger, { className: "-ml-1" }), (!navItems || navItems.length === 0) ?
+    const expanded = useSidebarExpanded();
+    return (_jsx("header", { className: cn("flex h-12 border-b shrink-0 items-center gap-2 transition-[margin,width,height] duration-200 ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12", expanded ? "ml-56" : "ml-12"), children: _jsxs("div", { className: "flex items-center justify-between gap-2 px-4 w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [(!navItems || navItems.length === 0) ? _jsx("div", {}) : _jsx(SidebarTrigger, { className: "-ml-1" }), (!navItems || navItems.length === 0) ?
                             _jsx("div", {}) :
                             _jsx(Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }), _jsx(AppBreadcrumb, {})] }), _jsxs("div", { className: "ml-auto flex gap-4", children: [_jsx(IconButtonWithTooltip, { className: "px-2!", tooltipContent: "Notifications", children: _jsx(Bell, {}) }), _jsx(ThemeToggleBtn, {}), _jsx(Link, { href: `${platformUrl}/app-store`, children: _jsxs(IconTextButton, { variant: "default", children: [_jsx(Play, {}), "App Store"] }) })] })] }) }));
 }

package/dist/ikoncomponents/main-layout/index.d.ts

@@ -3,4 +3,4 @@ export declare function MainLayout({ children, baseUrl, platformUrl }: {
     children: ReactNode;
     baseUrl: string;
     platformUrl: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/ikoncomponents/main-layout/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MainSidebar } from './main-sidebar';
 import { SidebarInset, SidebarProvider } from '../../shadcn/sidebar';
 import { DialogProvider } from '../alert-dialog/dialog-context';
@@ -7,6 +7,13 @@ import { AppSidebar } from './app-sidebar';
 import { Header } from './header';
 import { Footer } from './footer';
 import { SidebarNavProvider } from './SidebarNavContext';
+import { SidebarExpandedProvider, useSidebarExpanded } from './sidebar-expanded-context';
+import { cn } from '../../utils/cn';
 export function MainLayout({ children, baseUrl, platformUrl }) {
-    return (_jsxs(_Fragment, { children: [_jsx(MainSidebar, { baseUrl: baseUrl, platformUrl: platformUrl }), _jsx(SidebarProvider, { children: _jsx(DialogProvider, { children: _jsxs(SidebarNavProvider, { children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col h-screen", children: [_jsx(Header, { platformUrl: platformUrl }), _jsx("div", { className: "flex flex-col gap-4 p-4 pt-0 ml-12 grow overflow-auto scrollbar-hidden", children: children }), _jsx(Footer, {})] })] }) }) })] }));
+    return (_jsx(SidebarExpandedProvider, { children: _jsxs(SidebarProvider, { children: [_jsx(MainSidebar, { baseUrl: baseUrl, platformUrl: platformUrl }), _jsx(DialogProvider, { children: _jsxs(SidebarNavProvider, { children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col h-screen", children: [_jsx(Header, { platformUrl: platformUrl }), _jsx(MainContent, { children: children }), _jsx(Footer, {})] })] }) })] }) }));
+}
+/** Page content, shifted right to clear the main sidebar rail (wider when expanded). */
+function MainContent({ children }) {
+    const expanded = useSidebarExpanded();
+    return (_jsx("div", { className: cn("flex flex-col gap-4 p-4 pt-0 grow overflow-auto scrollbar-hidden transition-[margin] duration-200 ease-in-out", expanded ? "ml-56" : "ml-12"), children: children }));
 }

package/dist/ikoncomponents/main-layout/main-sidebar.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export interface AccountMembership {
     accountId: string;
     accountName: string;
@@ -58,4 +59,4 @@ export interface DecodedAccessToken {
 export declare const MainSidebar: ({ baseUrl, platformUrl, }: {
     baseUrl: string;
     platformUrl: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/dist/ikoncomponents/main-layout/main-sidebar.js

@@ -1,8 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Check, CircleUserRound, FolderCode, Home, LogOut, Settings, } from "lucide-react";
+import { Check, CircleUserRound, FolderCode, Home, LoaderPinwheel, LogOut, PanelLeftClose, PanelLeftOpen, Settings, } from "lucide-react";
 import { Button } from "../../shadcn/button";
+import { cn } from "../../utils/cn";
+import { useSidebar } from "../../shadcn/sidebar";
+import { useSidebarExpandedState } from "./sidebar-expanded-context";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../../shadcn/tooltip";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
 import { getValidAccessToken } from "../../utils/token-management";
@@ -13,13 +16,21 @@ import Link from "next/link";
 import { jwtDecode } from "jwt-decode";
 import { Icon } from "../icon";
 import { useRefresh } from "./RefreshContext";
-import { ProviderWrapper } from "../provider-wrapper";
 export const MainSidebar = ({ baseUrl, platformUrl, }) => {
     const [user, setUser] = React.useState();
     const [accounts, setAccounts] = React.useState([]);
     const [selectedAccount, setSelectedAccount] = React.useState();
     const [softwares, setSoftwares] = React.useState([]);
     const { refreshCounter } = useRefresh();
+    const { expanded, setExpanded } = useSidebarExpandedState();
+    const { open, setOpen } = useSidebar();
+    const [roles, setRoles] = React.useState([]);
+    // Sub menu (app sidebar) drives the rail inversely: whenever the sub menu is
+    // toggled — including from the header trigger — collapse/expand the rail to
+    // the opposite state. Single trigger (`open`), so there is no feedback loop.
+    React.useEffect(() => {
+        setExpanded(!open);
+    }, [open]);
     const getInitials = (name) => {
         return name
             .split(" ")
@@ -43,6 +54,7 @@ export const MainSidebar = ({ baseUrl, platformUrl, }) => {
                     isSetToken: true,
                 });
                 const decoded = jwtDecode(accessToken !== null && accessToken !== void 0 ? accessToken : "");
+                setRoles(decoded.platformAccess.roles);
                 // Fetch all data in parallel
                 const [userResponse, accountsResponse, softwaresResponse] = await Promise.all([
                     axios.get(`${baseUrl}/platform/user/${decoded.sub}`, {
@@ -97,24 +109,29 @@ export const MainSidebar = ({ baseUrl, platformUrl, }) => {
             throw error;
         }
     };
-    return (_jsx(ProviderWrapper, { baseUrl: "", platformUrl: "", children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("aside", { className: "fixed left-0 top-0 z-20 h-screen w-12 border-r border-border bg-sidebar text-sidebar-foreground flex flex-col items-center py-4 ", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "default", className: "mb-4 h-8 w-8 rounded-lg p-0", disabled: !selectedAccount, children: _jsx("span", { className: "text-base font-medium text-accent-foreground", children: selectedAccount
+    return (_jsx(TooltipProvider, { delayDuration: 0, children: _jsxs("aside", { className: cn("fixed left-0 top-0 z-20 h-screen border-r border-border bg-sidebar text-sidebar-foreground flex flex-col py-4 transition-[width] duration-200 ease-in-out", expanded ? "w-56 items-stretch px-2" : "w-12 items-center"), children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "default", className: cn("mb-4 h-8 rounded-lg", expanded ? "w-full justify-start gap-3 px-2" : "w-8 p-0"), disabled: !selectedAccount, children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center text-base font-medium text-accent-foreground", children: selectedAccount
                                             ? getInitials(selectedAccount.accountName)
-                                            : "..." }) }) }), _jsxs(DropdownMenuContent, { className: "w-55", side: "right", sideOffset: 8, align: "start", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-foreground", children: "Accounts" }), accounts.map((account) => (_jsxs(DropdownMenuItem, { className: "flex items-center justify-between cursor-pointer", onClick: async () => {
-                                            try {
-                                                setSelectedAccount(account);
-                                                console.log(account.accountId);
-                                                await switchAccount(account.accountId, baseUrl);
-                                                window.location.reload();
-                                            }
-                                            catch (error) {
-                                                console.error("Switch account failed", error);
-                                            }
-                                        }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded bg-primary/10 flex items-center justify-center", children: _jsx("span", { className: "text-xs font-medium text-primary", children: getInitials(account.accountName) }) }), _jsx("span", { className: "text-sm", children: account.accountName })] }), (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountId) === account.accountId && (_jsx(Check, { className: "h-4 w-4 text-primary" }))] }, account.accountId)))] })] }), _jsx("nav", { className: "flex flex-col gap-1", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: `${platformUrl}/home`, children: [_jsx(Home, { className: "h-8 w-8" }), _jsx("span", { className: "sr-only", children: "Home" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Home" })] }, "home") }), _jsx("nav", { className: "flex flex-col gap-1 flex-1", children: softwares.map((software) => {
-                            var _a, _b;
-                            const hasIcon = Boolean(software.icon && software.icon.trim() !== "");
-                            return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: (_a = software.url) !== null && _a !== void 0 ? _a : "#", children: [hasIcon ? (_jsx(Icon, { name: toPascalCase((_b = software.icon) !== null && _b !== void 0 ? _b : ""), className: "h-8 w-8" })) : (_jsx(FolderCode, { className: "h-8 w-8" })), _jsx("span", { className: "sr-only", children: software.displayName })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: software.displayName })] }, software.displayName));
-                        }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", className: "h-10 w-10", asChild: true, children: _jsxs(Link, { href: `${platformUrl}/settings`, children: [_jsx(Settings, { className: "h-8 w-8" }), _jsx("span", { className: "sr-only", children: "Settings" })] }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Settings" })] }, "settings"), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-10 w-10", children: _jsx(CircleUserRound, { className: "h-8 w-8" }) }) }), _jsxs(DropdownMenuContent, { className: "w-55 p-0", side: "right", sideOffset: 8, children: [_jsxs("div", { className: "flex items-start gap-3 p-4 bg-card", children: [_jsx(CircleUserRound, { className: "h-8 w-8" }), _jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-bold text-foreground blue-dark:text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userName }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userEmail }), _jsx("p", { className: "text-sm text-muted-foreground font-semibold", children: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountName })] })] }), _jsx(DropdownMenuSeparator, { className: "my-0" }), _jsxs(DropdownMenuItem, { onClick: async () => {
-                                            await clearAllCookieSession();
-                                            redirect(`${platformUrl}/login.html`);
-                                        }, className: "flex items-center gap-2 px-4 py-3 cursor-pointer focus:bg-destructive dark:focus:bg-destructive blue-dark:focus:bg-destructive", children: [_jsx(LogOut, { className: "h-4 w-4 text-foreground" }), _jsx("span", { children: "Log out" })] })] })] })] }) }) }));
+                                            : "..." }), expanded && (_jsx("span", { className: "truncate text-sm font-medium", children: (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountName) || "Account" }))] }) }), _jsxs(DropdownMenuContent, { className: "w-55", side: "right", sideOffset: 8, align: "start", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-foreground", children: "Accounts" }), accounts.map((account) => (_jsxs(DropdownMenuItem, { className: "flex items-center justify-between cursor-pointer", onClick: async () => {
+                                        try {
+                                            setSelectedAccount(account);
+                                            console.log(account.accountId);
+                                            await switchAccount(account.accountId, baseUrl);
+                                            window.location.reload();
+                                        }
+                                        catch (error) {
+                                            console.error("Switch account failed", error);
+                                        }
+                                    }, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-6 w-6 rounded bg-primary/10 flex items-center justify-center", children: _jsx("span", { className: "text-xs font-medium text-primary", children: getInitials(account.accountName) }) }), _jsx("span", { className: "text-sm", children: account.accountName })] }), (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountId) === account.accountId && (_jsx(Check, { className: "h-4 w-4 text-primary" }))] }, account.accountId)))] })] }), _jsx("nav", { className: "flex flex-col gap-1 w-full", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: cn("h-10", expanded ? "w-full justify-start gap-3 px-3" : "w-10"), asChild: true, children: _jsxs(Link, { href: `${platformUrl}/home`, children: [_jsx(Home, { className: "h-8 w-8 shrink-0" }), expanded ? (_jsx("span", { className: "truncate text-sm", children: "Home" })) : (_jsx("span", { className: "sr-only", children: "Home" }))] }) }) }), !expanded && (_jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Home" }))] }, "home") }), _jsx("nav", { className: "flex flex-col gap-1 flex-1 w-full", children: softwares.map((software) => {
+                        var _a, _b;
+                        const hasIcon = Boolean(software.icon && software.icon.trim() !== "");
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", size: "icon", className: cn("h-10", expanded ? "w-full justify-start gap-3 px-3" : "w-10"), asChild: true, children: _jsxs(Link, { href: (_a = software.url) !== null && _a !== void 0 ? _a : "#", children: [hasIcon ? (_jsx(Icon, { name: toPascalCase((_b = software.icon) !== null && _b !== void 0 ? _b : ""), className: "h-8 w-8 shrink-0" })) : (_jsx(FolderCode, { className: "h-8 w-8 shrink-0" })), expanded ? (_jsx("span", { className: "truncate text-sm", children: software.displayName })) : (_jsx("span", { className: "sr-only", children: software.displayName }))] }) }) }), !expanded && (_jsx(TooltipContent, { side: "right", sideOffset: 5, children: software.displayName }))] }, software.displayName));
+                    }) }), ((roles === null || roles === void 0 ? void 0 : roles.includes("ADMIN")) || (roles === null || roles === void 0 ? void 0 : roles.includes("DEVELOPER")) || (roles === null || roles === void 0 ? void 0 : roles.includes("SUPERADMIN"))) && (_jsx(_Fragment, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", className: cn("h-10", expanded ? "w-full justify-start gap-3 px-3" : "w-10"), asChild: true, children: _jsxs("a", { href: "https://holocron.keross.com/ikon-portal/login.html", target: "_blank", rel: "noopener noreferrer", children: [_jsx(LoaderPinwheel, { className: "h-8 w-8 shrink-0" }), expanded ? (_jsx("span", { className: "truncate text-sm", children: "Release Ops." })) : (_jsx("span", { className: "sr-only", children: "Release Ops." }))] }) }) }), !expanded && (_jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Release Ops." }))] }, "release-ops") })), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, className: "h-8 w-8", children: _jsx(Button, { variant: "ghost", className: cn("h-10", expanded ? "w-full justify-start gap-3 px-3" : "w-10"), asChild: true, children: _jsxs(Link, { href: `${platformUrl}/settings`, children: [_jsx(Settings, { className: "h-8 w-8 shrink-0" }), expanded ? (_jsx("span", { className: "truncate text-sm", children: "Settings" })) : (_jsx("span", { className: "sr-only", children: "Settings" }))] }) }) }), !expanded && (_jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Settings" }))] }, "settings"), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: cn("h-10", expanded ? "w-full justify-start gap-3 px-3" : "w-10"), children: [_jsx(CircleUserRound, { className: "h-8 w-8 shrink-0" }), expanded && (_jsx("span", { className: "truncate text-sm font-medium", children: (user === null || user === void 0 ? void 0 : user.userName) || "Profile" }))] }) }), _jsxs(DropdownMenuContent, { className: "w-55 p-0", side: "right", sideOffset: 8, children: [_jsxs("div", { className: "flex items-start gap-3 p-4 bg-card", children: [_jsx(CircleUserRound, { className: "h-8 w-8" }), _jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-bold text-foreground blue-dark:text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userName }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: user === null || user === void 0 ? void 0 : user.userEmail }), _jsx("p", { className: "text-sm text-muted-foreground font-semibold", children: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.accountName })] })] }), _jsx(DropdownMenuSeparator, { className: "my-0" }), _jsxs(DropdownMenuItem, { onClick: async () => {
+                                        await clearAllCookieSession();
+                                        redirect(`${platformUrl}/login.html`);
+                                    }, className: "flex items-center gap-2 px-4 py-3 cursor-pointer focus:bg-destructive dark:focus:bg-destructive blue-dark:focus:bg-destructive", children: [_jsx(LogOut, { className: "h-4 w-4 text-foreground" }), _jsx("span", { children: "Log out" })] })] })] }), _jsx("div", { className: cn("mb-2 flex", expanded ? "justify-end" : "justify-center"), children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: expanded ? "default" : "icon", className: cn("h-8", expanded ? "w-full justify-start gap-3 px-3" : "w-8"), onClick: () => {
+                                        const next = !expanded;
+                                        setExpanded(next);
+                                        // Opening the rail closes the sub menu, and vice versa.
+                                        setOpen(!next);
+                                    }, children: [expanded ? (_jsx(PanelLeftClose, { className: "h-5 w-5 shrink-0" })) : (_jsx(PanelLeftOpen, { className: "h-5 w-5 shrink-0" })), expanded ? (_jsx("span", { className: "truncate text-sm", children: "Collapse" })) : (_jsx("span", { className: "sr-only", children: "Expand sidebar" }))] }) }), !expanded && (_jsx(TooltipContent, { side: "right", sideOffset: 5, children: "Expand sidebar" }))] }, "toggle-sidebar") })] }) }));
 };

package/dist/ikoncomponents/main-layout/nav-main.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { SidebarNavItem } from "./SidebarNavContext";
-export declare function NavMain(): import("react/jsx-runtime").JSX.Element;
+export declare function NavMain(): import("react").JSX.Element;
 export declare function RenderSidebarNav({ items, sidebarHeader, sidebarFooter }: {
     items: SidebarNavItem[];
     sidebarHeader?: ReactNode;

package/dist/ikoncomponents/main-layout/sidebar-expanded-context.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+interface SidebarExpandedContextValue {
+    /** Whether the main sidebar rail is expanded into its labeled-panel state. */
+    expanded: boolean;
+    setExpanded: (value: boolean) => void;
+    toggle: () => void;
+}
+/**
+ * Provides the main sidebar's expanded/collapsed state to the whole layout so
+ * that siblings of the rail (app sidebar, header, content, footer) can shift to
+ * make room for the expanded panel instead of being covered by it.
+ */
+export declare function SidebarExpandedProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Full state + setters for the rail (used by the rail itself). */
+export declare const useSidebarExpandedState: () => SidebarExpandedContextValue;
+/** Convenience hook returning just the boolean (used by rail items / layout). */
+export declare const useSidebarExpanded: () => boolean;
+export {};

package/dist/ikoncomponents/main-layout/sidebar-expanded-context.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+const SidebarExpandedContext = createContext({
+    expanded: false,
+    setExpanded: () => { },
+    toggle: () => { },
+});
+/**
+ * Provides the main sidebar's expanded/collapsed state to the whole layout so
+ * that siblings of the rail (app sidebar, header, content, footer) can shift to
+ * make room for the expanded panel instead of being covered by it.
+ */
+export function SidebarExpandedProvider({ children }) {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsx(SidebarExpandedContext.Provider, { value: {
+            expanded,
+            setExpanded,
+            toggle: () => setExpanded((prev) => !prev),
+        }, children: children }));
+}
+/** Full state + setters for the rail (used by the rail itself). */
+export const useSidebarExpandedState = () => useContext(SidebarExpandedContext);
+/** Convenience hook returning just the boolean (used by rail items / layout). */
+export const useSidebarExpanded = () => useContext(SidebarExpandedContext).expanded;