ikoncomponents 1.1.7 → 1.1.9

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

@@ -0,0 +1,381 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import {
+//   FormControl,
+//   FormDescription,
+//   FormField,
+//   FormItem,
+//   FormLabel,
+//   FormMessage,
+// } from "@/shadcn/ui/form";
+// import React, { useState, useEffect, useRef, useCallback } from "react";
+// // import { FormComboboxInputProps } from "@/ikon/components/form-fields/types";
+// import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
+// import { Button } from "@/shadcn/ui/button";
+// import { cn } from "@/shadcn/lib/utils";
+// import { Check, ChevronsUpDown } from "lucide-react";
+// import {
+//   Command,
+//   CommandEmpty,
+//   CommandGroup,
+//   CommandInput,
+//   CommandItem,
+//   CommandList,
+// } from "@/shadcn/ui/command";
+// import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/shadcn/ui/tooltip";
+// import { X } from "lucide-react";
+// import { FormComboboxInputProps as BaseFormComboboxInputProps } from "@/ikon/components/form-fields/types";
+// interface FormComboboxInputProps extends BaseFormComboboxInputProps {
+//   defaultOptions?: number; // Add defaultOptions to the type
+// }
+// export default function dFormMultiComboboxInput({
+//   formControl,
+//   name,
+//   label,
+//   placeholder,
+//   formDescription,
+//   items = [], // fallback to empty array
+//   disabled,
+//   onSelect,
+//   defaultValue = [],
+//   defaultOptions = 2,
+// }: FormComboboxInputProps) {
+//   const [search, setSearch] = useState("");
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   // Filter items based on search
+//   const filteredItems = items.filter((item) =>
+//       item.label?.toLowerCase().includes(search.toLowerCase())
+//   )
+//       .sort((a, b) => (a?.label ?? "").localeCompare(b?.label ?? ""));
+//   return (
+//       <FormField
+//           control={formControl}
+//           name={name}
+//           render={({ field }) => {
+//               // Initialize defaultValue if field.value is undefined
+//               useEffect(() => {
+//                   if (
+//                       (field.value === undefined || field.value === null) &&
+//                       defaultValue.length > 0
+//                   ) {
+//                       field.onChange(defaultValue);
+//                   }
+//               }, [defaultValue, field]);
+//               // field.value is the selected array, default to [] if undefined
+//               const selectedItems = field.value || [];
+//               const [visibleCount, setVisibleCount] = useState(selectedItems.length);
+//               const calculateVisibleItems = useCallback(() => {
+//                   const container = containerRef.current;
+//                   if (!container) return visibleCount;
+//                   const children = Array.from(container.children) as HTMLElement[];
+//                   let availableWidth = container.offsetWidth;
+//                   let usedWidth = 0;
+//                   let fitCount = 0;
+//                   for (const child of children) {
+//                       const childWidth = child.offsetWidth + 4; // gap/margin
+//                       if (usedWidth + childWidth <= availableWidth) {
+//                           usedWidth += childWidth;
+//                           fitCount++;
+//                       } else {
+//                           break;
+//                       }
+//                   }
+//                   return fitCount;
+//               }, []); // No dependencies
+//               useEffect(() => {
+//                   const container = containerRef.current;
+//                   if (!container) return;
+//                   let animationFrameId: number | null = null;
+//                   const resizeObserver = new ResizeObserver(() => {
+//                       if (animationFrameId) cancelAnimationFrame(animationFrameId);
+//                       animationFrameId = requestAnimationFrame(() => {
+//                           const newVisibleCount = calculateVisibleItems();
+//                           setVisibleCount((prevVisibleCount: number) => {
+//                               if (prevVisibleCount !== newVisibleCount) {
+//                                   return newVisibleCount;
+//                               }
+//                               return prevVisibleCount;
+//                           });
+//                       });
+//                   });
+//                   resizeObserver.observe(container);
+//                   // Initial calculation
+//                   setVisibleCount(calculateVisibleItems());
+//                   // Cleanup
+//                   return () => {
+//                       if (animationFrameId) cancelAnimationFrame(animationFrameId);
+//                       resizeObserver.disconnect();
+//                   };
+//               }, [calculateVisibleItems]); // Only depend on calculateVisibleItems
+//               // Toggle select/unselect item
+//               const toggleItem = (value: string) => {
+//                   let updatedItems;
+//                   if (selectedItems.includes(value)) {
+//                       updatedItems = selectedItems.filter((v: string) => v !== value);
+//                   } else {
+//                       updatedItems = [...selectedItems, value];
+//                   }
+//                   field.onChange(updatedItems);
+//                   onSelect && onSelect(updatedItems);
+//               };
+//               const onWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+//                   const el = e.currentTarget;
+//                   el.scrollTop += e.deltaY; // manually scroll
+//                   e.preventDefault(); // prevent parent scroll
+//               };
+//               return (
+//                   <FormItem>
+//                       {label && <FormLabel>{label}</FormLabel>}
+//                       <Popover>
+//                           <PopoverTrigger asChild className="w-full">
+//                               <FormControl>
+//                                   <Button
+//                                       variant="outline"
+//                                       role="combobox"
+//                                       className={cn(
+//                                           "justify-between",
+//                                           !selectedItems.length && "text-foreground/50"
+//                                       )}
+//                                       disabled={
+//                                           disabled === true || (disabled && disabled(...arguments))
+//                                       }
+//                                   >
+//                                       {selectedItems.length > 0 ? (
+//                                           <TooltipProvider>
+//                                               <div ref={containerRef} className="flex flex-wrap gap-2 items-center overflow-hidden">
+//                                                   {selectedItems.slice(0, defaultOptions).map((value: string) => {
+//                                                       const label = items.find((item) => item.value === value)?.label || value;
+//                                                       return (
+//                                                           <span
+//                                                               key={value}
+//                                                               className="flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded-md truncate max-w-full"
+//                                                               title={label}
+//                                                           >
+//                                                               <span className="truncate max-w-[120px]">{label}</span>
+//                                                               <span
+//                                                                   role="button"
+//                                                                   tabIndex={0}
+//                                                                   onClick={(e) => {
+//                                                                       e.stopPropagation(); // prevent popover toggle
+//                                                                       const updated = selectedItems.filter((v: string) => v !== value);
+//                                                                       field.onChange(updated);
+//                                                                       onSelect && onSelect(updated);
+//                                                                   }}
+//                                                                   onKeyDown={(e) => {
+//                                                                       if (e.key === 'Enter' || e.key === ' ') {
+//                                                                           e.preventDefault();
+//                                                                           e.stopPropagation();
+//                                                                           const updated = selectedItems.filter((v: string) => v !== value);
+//                                                                           field.onChange(updated);
+//                                                                           onSelect && onSelect(updated);
+//                                                                       }
+//                                                                   }}
+//                                                                   className="ml-1 text-muted-foreground hover:text-destructive cursor-pointer outline-none"
+//                                                               >
+//                                                                   <X className="w-3 h-3 ml-1" />
+//                                                               </span>
+//                                                           </span>
+//                                                       );
+//                                                   })}
+//                                                   {selectedItems.length > defaultOptions && (
+//                                                       <Tooltip>
+//                                                           <TooltipTrigger asChild>
+//                                                               <span className="px-2 py-1 bg-secondary text-secondary-foreground rounded-md cursor-pointer">
+//                                                                   +{selectedItems.length - defaultOptions} more
+//                                                               </span>
+//                                                           </TooltipTrigger>
+//                                                           <TooltipContent className="max-w-xs break-words">
+//                                                               <div
+//                                                                   onWheel={onWheel}
+//                                                                   className="flex flex-col gap-1 max-h-[200px] overflow-auto"
+//                                                               >
+//                                                                   {selectedItems.slice(defaultOptions).map((value: string) => (
+//                                                                       <span key={value} className="text-sm">
+//                                                                           {items.find((item) => item.value === value)?.label || value}
+//                                                                       </span>
+//                                                                   ))}
+//                                                               </div>
+//                                                           </TooltipContent>
+//                                                       </Tooltip>
+//                                                   )}
+//                                               </div>
+//                                           </TooltipProvider>
+//                                       ) : (
+//                                           placeholder
+//                                       )}
+//                                       <ChevronsUpDown className="opacity-50" />
+//                                   </Button>
+//                               </FormControl>
+//                           </PopoverTrigger>
+//                           <PopoverContent id="multiSelectPopover" className="p-0 w-full max-w-[300px]" align="start">
+//                               <Command id="commandPopover">
+//                                   <CommandInput
+//                                       placeholder="Search..."
+//                                       value={search}
+//                                       onValueChange={setSearch}
+//                                       autoFocus
+//                                   />
+//                                   <CommandList
+//                                       className="max-h-60 overflow-auto"
+//                                       onWheel={onWheel}
+//                                   >
+//                                       <CommandEmpty>No items found.</CommandEmpty>
+//                                       <CommandGroup>
+//                                           {filteredItems.map((item) => {
+//                                               const isSelected = selectedItems.includes(item.value);
+//                                               return (
+//                                                   <CommandItem
+//                                                       value={item.label ?? ""}
+//                                                       key={item.value}
+//                                                       onSelect={() => toggleItem(item.value)}
+//                                                   >
+//                                                       {item.label}
+//                                                       <Check
+//                                                           className={cn(
+//                                                               "ml-auto",
+//                                                               isSelected ? "opacity-100" : "opacity-0"
+//                                                           )}
+//                                                       />
+//                                                   </CommandItem>
+//                                               );
+//                                           })}
+//                                       </CommandGroup>
+//                                   </CommandList>
+//                               </Command>
+//                           </PopoverContent>
+//                       </Popover>
+//                       {formDescription && (
+//                           <FormDescription>{formDescription}</FormDescription>
+//                       )}
+//                       <FormMessage />
+//                   </FormItem>
+//               );
+//           }}
+//       />
+//   );
+// }
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "../../../shadcn/form";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
+import { Button } from "../../../shadcn/button";
+import { cn } from "../../../utils/cn";
+import { ChevronsUpDown, X } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../shadcn/command";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../shadcn/tooltip";
+import { Checkbox } from "../../../shadcn/checkbox";
+export function dFormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items = [], disabled, onSelect, defaultValue = [], defaultOptions = 2, }) {
+    const [search, setSearch] = useState("");
+    const containerRef = useRef(null);
+    // Removed triggerRef and popoverWidth state, as we'll rely on CSS variables for sizing
+    // Filter items based on search
+    const filteredItems = items
+        .filter((item) => { var _a; return (_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search.toLowerCase()); })
+        .sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.label) !== null && _a !== void 0 ? _a : "").localeCompare((_b = b === null || b === void 0 ? void 0 : b.label) !== null && _b !== void 0 ? _b : ""); });
+    return (_jsx(FormField, { control: formControl, name: name, render: ({ field }) => {
+            useEffect(() => {
+                if ((field.value === undefined || field.value === null) &&
+                    defaultValue.length > 0) {
+                    field.onChange(defaultValue);
+                }
+            }, [defaultValue, field]);
+            const selectedItems = field.value || [];
+            const [visibleCount, setVisibleCount] = useState(selectedItems.length);
+            const calculateVisibleItems = useCallback(() => {
+                const container = containerRef.current;
+                if (!container)
+                    return visibleCount;
+                const children = Array.from(container.children);
+                let availableWidth = container.offsetWidth;
+                let usedWidth = 0;
+                let fitCount = 0;
+                for (const child of children) {
+                    const childWidth = child.offsetWidth + 4; // gap/margin
+                    if (usedWidth + childWidth <= availableWidth) {
+                        usedWidth += childWidth;
+                        fitCount++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                return fitCount;
+            }, [visibleCount]);
+            useEffect(() => {
+                const container = containerRef.current;
+                if (!container)
+                    return;
+                let animationFrameId = null;
+                const resizeObserver = new ResizeObserver(() => {
+                    if (animationFrameId)
+                        cancelAnimationFrame(animationFrameId);
+                    animationFrameId = requestAnimationFrame(() => {
+                        const newVisibleCount = calculateVisibleItems();
+                        setVisibleCount((prevVisibleCount) => {
+                            if (prevVisibleCount !== newVisibleCount) {
+                                return newVisibleCount;
+                            }
+                            return prevVisibleCount;
+                        });
+                    });
+                });
+                resizeObserver.observe(container);
+                setVisibleCount(calculateVisibleItems());
+                return () => {
+                    if (animationFrameId)
+                        cancelAnimationFrame(animationFrameId);
+                    resizeObserver.disconnect();
+                };
+            }, [calculateVisibleItems]);
+            const toggleItem = (value) => {
+                let updatedItems;
+                if (selectedItems.includes(value)) {
+                    updatedItems = selectedItems.filter((v) => v !== value);
+                }
+                else {
+                    updatedItems = [...selectedItems, value];
+                }
+                field.onChange(updatedItems);
+                onSelect && onSelect(updatedItems);
+            };
+            const onWheel = (e) => {
+                const el = e.currentTarget;
+                el.scrollTop += e.deltaY;
+                e.preventDefault();
+            };
+            return (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, className: "w-full", children: _jsx(FormControl, { children: _jsxs(Button
+                                    // Removed ref={triggerRef} here as it's no longer needed for explicit width measurement
+                                    , { 
+                                        // Removed ref={triggerRef} here as it's no longer needed for explicit width measurement
+                                        variant: "outline", role: "combobox", className: cn("justify-between", !selectedItems.length && "text-foreground/50"), disabled: disabled === true || (disabled && disabled(...arguments)), children: [selectedItems.length > 0 ? (_jsx(TooltipProvider, { children: _jsxs("div", { ref: containerRef, className: "flex flex-wrap gap-2 items-center overflow-hidden", children: [selectedItems.slice(0, defaultOptions).map((value) => {
+                                                            var _a;
+                                                            const label = ((_a = items.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label) ||
+                                                                value;
+                                                            return (_jsxs("span", { className: "flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded-md truncate max-w-full", title: label, children: [_jsx("span", { className: "truncate max-w-[120px]", children: label }), _jsx("span", { role: "button", tabIndex: 0, onClick: (e) => {
+                                                                            e.stopPropagation();
+                                                                            const updated = selectedItems.filter((v) => v !== value);
+                                                                            field.onChange(updated);
+                                                                            onSelect && onSelect(updated);
+                                                                        }, onKeyDown: (e) => {
+                                                                            if (e.key === "Enter" || e.key === " ") {
+                                                                                e.preventDefault();
+                                                                                e.stopPropagation();
+                                                                                const updated = selectedItems.filter((v) => v !== value);
+                                                                                field.onChange(updated);
+                                                                                onSelect && onSelect(updated);
+                                                                            }
+                                                                        }, className: "ml-1 text-muted-foreground hover:text-destructive cursor-pointer outline-none", children: _jsx(X, { className: "w-3 h-3 ml-1" }) })] }, value));
+                                                        }), selectedItems.length > defaultOptions && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "px-2 py-1 bg-secondary text-secondary-foreground rounded-md cursor-pointer", children: ["+", selectedItems.length - defaultOptions, " more"] }) }), _jsx(TooltipContent, { className: "max-w-xs break-words", children: _jsx("div", { onWheel: onWheel, className: "flex flex-col gap-1 max-h-[200px] overflow-auto", children: selectedItems.slice(defaultOptions).map((value) => {
+                                                                            var _a;
+                                                                            return (_jsx("span", { className: "text-sm", children: ((_a = items.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label) || value }, value));
+                                                                        }) }) })] }))] }) })) : (placeholder), _jsx(ChevronsUpDown, { className: "opacity-50" })] }) }) }), _jsx(PopoverContent, { id: "multiSelectPopover", 
+                                // New and improved width logic for PopoverContent
+                                className: "p-0 min-w-[--radix-popover-trigger-width]" // Ensures at least trigger width
+                                , style: {
+                                    width: 'max-content', // Allow to grow with content
+                                    maxWidth: 'min(500px, 90vw)' // Cap at 500px or 90% of viewport width, whichever is smaller
+                                }, align: "start", children: _jsxs(Command, { id: "commandPopover", children: [_jsx(CommandInput, { placeholder: "Search...", value: search, onValueChange: setSearch, autoFocus: true }), _jsxs(CommandList, { className: "max-h-60 overflow-auto", onWheel: onWheel, children: [_jsx(CommandEmpty, { children: "No items found." }), _jsx(CommandGroup, { children: filteredItems.map((item) => {
+                                                        var _a;
+                                                        const isSelected = selectedItems.includes(item.value);
+                                                        return (_jsxs(CommandItem, { value: (_a = item.label) !== null && _a !== void 0 ? _a : "", onSelect: () => toggleItem(item.value), className: "flex items-center space-x-2 justify-start", children: [_jsx(Checkbox, { checked: isSelected, onCheckedChange: () => toggleItem(item.value), onClick: (e) => e.stopPropagation() }), _jsx("span", { children: item.label })] }, item.value));
+                                                    }) })] })] }) })] }), formDescription && (_jsx(FormDescription, { children: formDescription })), _jsx(FormMessage, {})] }));
+        } }));
+}

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

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

package/dist/ikoncomponents/form-fields/otp-input/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form';
+import { InputOTP, InputOTPGroup, InputOTPSlot, } from "../../../shadcn/input-otp";
+export function FormOtpInput(_a) {
+    var { formControl, label, formDescription, extraFormComponent, name } = _a, inputProps = __rest(_a, ["formControl", "label", "formDescription", "extraFormComponent", "name"]);
+    return (_jsx(_Fragment, { children: _jsx(FormField, { control: formControl, name: name, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(InputOTP, Object.assign({ maxLength: 4 }, field, { children: _jsxs(InputOTPGroup, { children: [_jsx(InputOTPSlot, { index: 0 }), _jsx(InputOTPSlot, { index: 1 }), _jsx(InputOTPSlot, { index: 2 }), _jsx(InputOTPSlot, { index: 3 })] }) })) }), extraFormComponent && extraFormComponent(field.value), formDescription && _jsx(FormDescription, { children: formDescription }), _jsx(FormMessage, {})] })) }) }));
+}

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

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

package/dist/ikoncomponents/form-fields/phone-input/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FormPhoneInput() {
+    return (_jsx("div", { children: "FormPhoneInput" }));
+}

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

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

package/dist/ikoncomponents/form-fields/textarea/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form';
+import { Textarea } from '../../../shadcn/textarea';
+export function FormTextarea(_a) {
+    var { formControl, name, label, formItemClass, formDescription } = _a, textAreaProps = __rest(_a, ["formControl", "name", "label", "formItemClass", "formDescription"]);
+    return (_jsx(_Fragment, { children: _jsx(FormField, { control: formControl, name: name, render: ({ field }) => (_jsxs(FormItem, { className: formItemClass, children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(Textarea, Object.assign({}, field, textAreaProps)) }), formDescription && _jsx(FormDescription, { children: formDescription }), _jsx(FormMessage, {})] })) }) }));
+}

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

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+import { Matcher } from "react-day-picker";
+export interface FormFieldProps {
+    formControl: any;
+    label?: string;
+    formItemClass?: string;
+    formDescription?: string;
+    extraFormComponent?: (value: string) => ReactNode;
+}
+export interface FormInputProps extends FormFieldProps, InputHTMLAttributes<HTMLInputElement> {
+    name: string;
+}
+export interface FormTextareaProps extends FormFieldProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    name: string;
+}
+export interface FormDateInputProps extends FormFieldProps {
+    name: string;
+    placeholder?: string;
+    dateFormat?: string;
+    calendarDateDisabled?: Matcher;
+    disabled?: boolean;
+}
+export interface FormComboboxInputProps extends FormFieldProps {
+    name: string;
+    placeholder?: string;
+    items: FormComboboxItemProps[];
+    onSelect?: (value: string | string[]) => void;
+    defaultValue?: [];
+    disabled?: ((...args: any) => boolean) | boolean;
+}
+export interface FormComboboxItemProps {
+    value: string;
+    label?: string | undefined;
+    extra?: any;
+    disabled?: ((...args: any) => boolean) | boolean;
+}

package/dist/ikoncomponents/form-fields/types/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface SidebarNavSubItem {
+    title: string;
+    url: string;
+    isActive?: boolean;
+}
+export interface SidebarNavItem {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    default?: boolean;
+    items?: SidebarNavSubItem[];
+}
+export interface SidebarNavContextType {
+    navItems: SidebarNavItem[];
+    setNavItems: (items: SidebarNavItem[]) => void;
+    addNavItem: (item: SidebarNavItem) => void;
+    removeNavItem: (title: string) => void;
+    updateNavItem: (title: string, updates: Partial<SidebarNavItem>) => void;
+    clearNavItems: () => void;
+}
+export declare function SidebarNavProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSidebarNav(): SidebarNavContextType;

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+const SidebarNavContext = createContext(undefined);
+export function SidebarNavProvider({ children }) {
+    const [navItems, setNavItems] = useState([]);
+    const addNavItem = (item) => {
+        setNavItems((prevItems) => {
+            const exists = prevItems.some((navItem) => navItem.title === item.title);
+            if (exists) {
+                return prevItems.map((navItem) => navItem.title === item.title ? Object.assign(Object.assign({}, navItem), item) : navItem);
+            }
+            return [...prevItems, item];
+        });
+    };
+    const removeNavItem = (title) => {
+        setNavItems((prevItems) => prevItems.filter((item) => item.title !== title));
+    };
+    const updateNavItem = (title, updates) => {
+        setNavItems((prevItems) => prevItems.map((item) => item.title === title ? Object.assign(Object.assign({}, item), updates) : item));
+    };
+    const clearNavItems = () => {
+        setNavItems([]);
+    };
+    return (_jsx(SidebarNavContext.Provider, { value: {
+            navItems,
+            setNavItems,
+            addNavItem,
+            removeNavItem,
+            updateNavItem,
+            clearNavItems,
+        }, children: children }));
+}
+export function useSidebarNav() {
+    const context = useContext(SidebarNavContext);
+    if (!context) {
+        throw new Error('useSidebarNav must be used within a SidebarNavProvider');
+    }
+    return context;
+}

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

@@ -0,0 +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;

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

@@ -0,0 +1,19 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarRail, } from "../../shadcn/sidebar";
+import { NavMain } from "./nav-main";
+export function AppSidebar(_a) {
+    var props = __rest(_a, []);
+    return (_jsxs(Sidebar, Object.assign({ className: "ml-12", collapsible: "offcanvas" }, props, { children: [_jsx(SidebarContent, { children: _jsx(NavMain, {}) }), _jsx(SidebarFooter, {}), _jsx(SidebarRail, {})] })));
+}

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

@@ -0,0 +1 @@
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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("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

@@ -0,0 +1 @@
+export declare function Header(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppBreadcrumb } from "../app-breadcrumb";
+import { ThemeToggleBtn } from "../theme-toggle-btn";
+import { Separator } from "../../shadcn/separator";
+import { SidebarTrigger } from "../../shadcn/sidebar";
+import { LayoutGrid, Play } from "lucide-react";
+import { IconButton, IconTextButton } from "../buttons";
+export function Header() {
+    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: [_jsx(SidebarTrigger, { className: "-ml-1" }), _jsx(Separator, { orientation: "vertical", className: "mr-2 data-[orientation=vertical]:h-4" }), _jsx(AppBreadcrumb, {})] }), _jsxs("div", { className: "ml-auto flex gap-4", children: [_jsx(ThemeToggleBtn, {}), _jsxs(IconTextButton, { variant: "default", children: [_jsx(Play, {}), "App Store"] }), _jsx(IconButton, { children: _jsx(LayoutGrid, {}) })] })] }) }));
+}

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function MainLayout({ children, baseUrl }: {
+    children: ReactNode;
+    baseUrl: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MainSidebar } from './main-sidebar';
+import { SidebarInset, SidebarProvider } from '../../shadcn/sidebar';
+import { DialogProvider } from '../alert-dialog/dialog-context';
+import { AppSidebar } from './app-sidebar';
+import { Header } from './header';
+import { Footer } from './footer';
+import { SidebarNavProvider } from './SidebarNavContext';
+export function MainLayout({ children, baseUrl }) {
+    return (_jsxs(_Fragment, { children: [_jsx(MainSidebar, { baseUrl: baseUrl }), _jsx(SidebarProvider, { children: _jsx(DialogProvider, { children: _jsxs(SidebarNavProvider, { children: [_jsx(AppSidebar, {}), _jsxs(SidebarInset, { className: "flex flex-col h-screen", children: [_jsx(Header, {}), _jsx("div", { className: "flex flex-col gap-4 p-4 pt-0 ml-12 grow overflow-auto scrollbar-hidden", children: children }), _jsx(Footer, {})] })] }) }) })] }));
+}