@skalar-saas/design-system 0.1.67

package/dist/layout/constants.d.ts

@@ -0,0 +1,348 @@
+/**
+ * =============================================
+ * SKALAR DESIGN SYSTEM - LAYOUT CONSTANTS
+ * =============================================
+ *
+ * Centralized layout values for consistent spacing, sizing, and breakpoints
+ * across all Skalar applications. Based on industry standards (Stripe, Vercel, Linear).
+ *
+ * @example
+ * // Import in TypeScript/JavaScript
+ * import { BREAKPOINTS, CONTAINER, LAYOUT } from '@skalar-app/design-system';
+ *
+ * // Use in logic
+ * if (windowWidth >= BREAKPOINTS.lg) { ... }
+ *
+ * @example
+ * // Use CSS variables in Tailwind
+ * <div className="max-w-container mx-auto px-container-mobile md:px-container-tablet lg:px-container-desktop">
+ *
+ * @version 1.0.0
+ * @since 2025-11-28
+ */
+/**
+ * Responsive breakpoints in pixels.
+ * These values align with common device widths and Tailwind CSS conventions.
+ *
+ * Usage in CSS/Tailwind:
+ * - sm: Mobile landscape and up
+ * - md: Tablet and up
+ * - lg: Desktop and up
+ * - xl: Large desktop and up
+ * - 2xl: Extra large desktop (container max-width)
+ * - 3xl: Ultrawide monitors
+ */
+export declare const BREAKPOINTS: {
+    /** Mobile landscape - 640px */
+    readonly sm: 640;
+    /** Tablet - 768px */
+    readonly md: 768;
+    /** Desktop small - 1024px */
+    readonly lg: 1024;
+    /** Desktop - 1280px */
+    readonly xl: 1280;
+    /** Desktop large / Default container max-width - 1400px */
+    readonly '2xl': 1400;
+    /** Ultrawide monitors - 1600px */
+    readonly '3xl': 1600;
+};
+/**
+ * Breakpoint keys type for type-safe breakpoint references.
+ */
+export type BreakpointKey = keyof typeof BREAKPOINTS;
+/**
+ * Breakpoint values in pixels.
+ */
+export type BreakpointValue = (typeof BREAKPOINTS)[BreakpointKey];
+/**
+ * Container max-width values in pixels.
+ * Use these to constrain content width for optimal readability and layout.
+ *
+ * Guidelines:
+ * - default (1400px): Main dashboard content, cards grid, general pages
+ * - narrow (896px): Forms, settings pages, single-column content
+ * - medium (1152px): Mixed content, documentation
+ * - wide (1600px): Data tables, complex grids, admin panels
+ * - full: No max-width constraint
+ */
+export declare const CONTAINER: {
+    /** Default container max-width for dashboard content - 1400px */
+    readonly default: 1400;
+    /** Narrow container for forms and settings - 896px (56rem) */
+    readonly narrow: 896;
+    /** Medium container for mixed content - 1152px (72rem) */
+    readonly medium: 1152;
+    /** Wide container for tables and grids - 1600px (100rem) */
+    readonly wide: 1600;
+};
+/**
+ * Container size variants.
+ */
+export type ContainerSize = keyof typeof CONTAINER | 'full';
+/**
+ * Container values in pixels.
+ */
+export type ContainerValue = (typeof CONTAINER)[keyof typeof CONTAINER];
+/**
+ * Responsive container padding values in pixels.
+ * Applied horizontally (left/right) to maintain content breathing room.
+ *
+ * These values scale up with screen size to maintain proportional whitespace.
+ */
+export declare const CONTAINER_PADDING: {
+    /** Mobile devices: 16px (1rem) */
+    readonly mobile: 16;
+    /** Tablet devices: 24px (1.5rem) */
+    readonly tablet: 24;
+    /** Desktop devices: 32px (2rem) */
+    readonly desktop: 32;
+    /** Large desktop devices: 48px (3rem) */
+    readonly desktopLarge: 48;
+};
+/**
+ * Container padding keys type.
+ */
+export type ContainerPaddingKey = keyof typeof CONTAINER_PADDING;
+/**
+ * Sidebar dimension values in pixels.
+ * Use for navigation sidebars and panels.
+ */
+export declare const SIDEBAR: {
+    /** Expanded sidebar width - 280px */
+    readonly width: 280;
+    /** Collapsed/icon-only sidebar width - 64px */
+    readonly collapsedWidth: 64;
+    /** Settings/navigation sidebar width - 240px */
+    readonly navigationWidth: 240;
+};
+/**
+ * Sidebar dimension keys type.
+ */
+export type SidebarKey = keyof typeof SIDEBAR;
+/**
+ * Navbar dimension values in pixels.
+ * Used for sticky headers and calculating content offsets.
+ */
+export declare const NAVBAR: {
+    /** Header section height - 60px */
+    readonly headerHeight: 60;
+    /** Tabs/navigation section height - 48px */
+    readonly tabsHeight: 48;
+    /** Total navbar height (header + tabs) - 108px */
+    readonly totalHeight: 108;
+};
+/**
+ * Navbar dimension keys type.
+ */
+export type NavbarKey = keyof typeof NAVBAR;
+/**
+ * Common spacing values for gaps and margins in layout contexts.
+ * These complement the design system's spacing tokens for layout-specific use.
+ */
+export declare const LAYOUT_SPACING: {
+    /** No spacing - 0px */
+    readonly none: 0;
+    /** Extra small - 8px */
+    readonly xs: 8;
+    /** Small - 16px */
+    readonly sm: 16;
+    /** Medium - 24px */
+    readonly md: 24;
+    /** Large - 32px */
+    readonly lg: 32;
+    /** Extra large - 48px */
+    readonly xl: 48;
+    /** 2x Extra large - 64px */
+    readonly '2xl': 64;
+};
+/**
+ * Layout spacing keys type.
+ */
+export type LayoutSpacingKey = keyof typeof LAYOUT_SPACING;
+/**
+ * CSS custom property names used in the layout system.
+ * Reference these when creating custom styles or debugging.
+ *
+ * @example
+ * // In custom CSS
+ * .my-element {
+ *   max-width: var(--layout-container-max-width);
+ * }
+ */
+export declare const CSS_VARIABLES: {
+    readonly containerMaxWidth: "--layout-container-max-width";
+    readonly containerNarrow: "--layout-container-narrow";
+    readonly containerMedium: "--layout-container-medium";
+    readonly containerWide: "--layout-container-wide";
+    readonly containerPaddingMobile: "--layout-container-padding-mobile";
+    readonly containerPaddingTablet: "--layout-container-padding-tablet";
+    readonly containerPaddingDesktop: "--layout-container-padding-desktop";
+    readonly containerPaddingDesktopLg: "--layout-container-padding-desktop-lg";
+    readonly sidebarWidth: "--layout-sidebar-width";
+    readonly sidebarCollapsed: "--layout-sidebar-collapsed";
+    readonly sidebarNavigation: "--layout-sidebar-navigation";
+    readonly navbarHeaderHeight: "--layout-navbar-header-height";
+    readonly navbarTabsHeight: "--layout-navbar-tabs-height";
+    readonly navbarTotalHeight: "--layout-navbar-total-height";
+};
+/**
+ * CSS variable names type.
+ */
+export type CSSVariableName = (typeof CSS_VARIABLES)[keyof typeof CSS_VARIABLES];
+/**
+ * Complete layout configuration object.
+ * Provides a single import for all layout-related constants.
+ *
+ * @example
+ * import { LAYOUT } from '@skalar-app/design-system';
+ *
+ * const containerWidth = LAYOUT.container.default;
+ * const isMobile = windowWidth < LAYOUT.breakpoints.md;
+ */
+export declare const LAYOUT: {
+    readonly breakpoints: {
+        /** Mobile landscape - 640px */
+        readonly sm: 640;
+        /** Tablet - 768px */
+        readonly md: 768;
+        /** Desktop small - 1024px */
+        readonly lg: 1024;
+        /** Desktop - 1280px */
+        readonly xl: 1280;
+        /** Desktop large / Default container max-width - 1400px */
+        readonly '2xl': 1400;
+        /** Ultrawide monitors - 1600px */
+        readonly '3xl': 1600;
+    };
+    readonly container: {
+        /** Default container max-width for dashboard content - 1400px */
+        readonly default: 1400;
+        /** Narrow container for forms and settings - 896px (56rem) */
+        readonly narrow: 896;
+        /** Medium container for mixed content - 1152px (72rem) */
+        readonly medium: 1152;
+        /** Wide container for tables and grids - 1600px (100rem) */
+        readonly wide: 1600;
+    };
+    readonly containerPadding: {
+        /** Mobile devices: 16px (1rem) */
+        readonly mobile: 16;
+        /** Tablet devices: 24px (1.5rem) */
+        readonly tablet: 24;
+        /** Desktop devices: 32px (2rem) */
+        readonly desktop: 32;
+        /** Large desktop devices: 48px (3rem) */
+        readonly desktopLarge: 48;
+    };
+    readonly sidebar: {
+        /** Expanded sidebar width - 280px */
+        readonly width: 280;
+        /** Collapsed/icon-only sidebar width - 64px */
+        readonly collapsedWidth: 64;
+        /** Settings/navigation sidebar width - 240px */
+        readonly navigationWidth: 240;
+    };
+    readonly navbar: {
+        /** Header section height - 60px */
+        readonly headerHeight: 60;
+        /** Tabs/navigation section height - 48px */
+        readonly tabsHeight: 48;
+        /** Total navbar height (header + tabs) - 108px */
+        readonly totalHeight: 108;
+    };
+    readonly spacing: {
+        /** No spacing - 0px */
+        readonly none: 0;
+        /** Extra small - 8px */
+        readonly xs: 8;
+        /** Small - 16px */
+        readonly sm: 16;
+        /** Medium - 24px */
+        readonly md: 24;
+        /** Large - 32px */
+        readonly lg: 32;
+        /** Extra large - 48px */
+        readonly xl: 48;
+        /** 2x Extra large - 64px */
+        readonly '2xl': 64;
+    };
+    readonly cssVariables: {
+        readonly containerMaxWidth: "--layout-container-max-width";
+        readonly containerNarrow: "--layout-container-narrow";
+        readonly containerMedium: "--layout-container-medium";
+        readonly containerWide: "--layout-container-wide";
+        readonly containerPaddingMobile: "--layout-container-padding-mobile";
+        readonly containerPaddingTablet: "--layout-container-padding-tablet";
+        readonly containerPaddingDesktop: "--layout-container-padding-desktop";
+        readonly containerPaddingDesktopLg: "--layout-container-padding-desktop-lg";
+        readonly sidebarWidth: "--layout-sidebar-width";
+        readonly sidebarCollapsed: "--layout-sidebar-collapsed";
+        readonly sidebarNavigation: "--layout-sidebar-navigation";
+        readonly navbarHeaderHeight: "--layout-navbar-header-height";
+        readonly navbarTabsHeight: "--layout-navbar-tabs-height";
+        readonly navbarTotalHeight: "--layout-navbar-total-height";
+    };
+};
+/**
+ * Complete layout configuration type.
+ */
+export type Layout = typeof LAYOUT;
+/**
+ * Converts a pixel value to rem units.
+ * Uses 16px as the base font size.
+ *
+ * @param px - The pixel value to convert
+ * @returns The rem value as a string (e.g., "1.5rem")
+ *
+ * @example
+ * pxToRem(24) // "1.5rem"
+ * pxToRem(CONTAINER.default) // "87.5rem"
+ */
+export declare function pxToRem(px: number): string;
+/**
+ * Converts a pixel value to a CSS pixel string.
+ *
+ * @param px - The pixel value
+ * @returns The pixel value as a CSS string (e.g., "24px")
+ *
+ * @example
+ * pxToCss(24) // "24px"
+ */
+export declare function pxToCss(px: number): string;
+/**
+ * Creates a media query string for a given breakpoint.
+ *
+ * @param breakpoint - The breakpoint key or pixel value
+ * @param type - The type of media query ('min' or 'max')
+ * @returns The media query string
+ *
+ * @example
+ * createMediaQuery('md') // "(min-width: 768px)"
+ * createMediaQuery('lg', 'max') // "(max-width: 1023px)"
+ * createMediaQuery(1200) // "(min-width: 1200px)"
+ */
+export declare function createMediaQuery(breakpoint: BreakpointKey | number, type?: 'min' | 'max'): string;
+/**
+ * Checks if a window width matches a breakpoint range.
+ *
+ * @param width - The window width in pixels
+ * @param breakpoint - The breakpoint to check against
+ * @param comparison - How to compare ('gte' for >=, 'lte' for <=, 'eq' for exact range)
+ * @returns Whether the width matches the breakpoint criteria
+ *
+ * @example
+ * matchesBreakpoint(800, 'md', 'gte') // true (800 >= 768)
+ * matchesBreakpoint(600, 'md', 'lte') // true (600 < 768)
+ */
+export declare function matchesBreakpoint(width: number, breakpoint: BreakpointKey, comparison?: 'gte' | 'lte'): boolean;
+/**
+ * Gets the current breakpoint key based on window width.
+ *
+ * @param width - The window width in pixels
+ * @returns The current breakpoint key
+ *
+ * @example
+ * getCurrentBreakpoint(800) // 'md'
+ * getCurrentBreakpoint(1500) // '2xl'
+ */
+export declare function getCurrentBreakpoint(width: number): BreakpointKey;

package/dist/layout/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * =============================================
+ * SKALAR DESIGN SYSTEM - LAYOUT MODULE
+ * =============================================
+ *
+ * Centralized layout system providing consistent container widths,
+ * responsive spacing, and layout utilities across all Skalar applications.
+ *
+ * @example
+ * // Import components
+ * import { Container, Section } from '@skalar-app/design-system';
+ *
+ * // Import constants for logic
+ * import { LAYOUT, BREAKPOINTS, CONTAINER } from '@skalar-app/design-system';
+ *
+ * // Use Tailwind classes
+ * <div className="max-w-container mx-auto px-container-mobile md:px-container-desktop">
+ *
+ * @version 1.0.0
+ * @since 2025-11-28
+ */
+export { Container } from "./Container";
+export type { ContainerProps, ContainerElement, ContainerPadding, ContainerHeaderProps, ContainerContentProps, ContainerFooterProps, } from "./Container";
+export { Section, SectionHero, SectionFeatures } from "./Section";
+export type { SectionProps, SectionElement, SectionBackground, SectionHeroProps, SectionFeaturesProps, } from "./Section";
+export { BREAKPOINTS, CONTAINER, CONTAINER_PADDING, SIDEBAR, NAVBAR, LAYOUT_SPACING, CSS_VARIABLES, LAYOUT, pxToRem, pxToCss, createMediaQuery, matchesBreakpoint, getCurrentBreakpoint, } from "./constants";
+export type { BreakpointKey, BreakpointValue, ContainerSize, ContainerValue, ContainerPaddingKey, SidebarKey, NavbarKey, LayoutSpacingKey, CSSVariableName, Layout, } from "./constants";
+export { PanelLayout, Panel, PanelMain, usePanelState, calculatePanelPercentage, calculateDraggedPanelPercentage, getTotalSideWidth, getTotalPanelsWidth, findPanelById, getCentralWidth, initializePanelsState, PANEL_DEFAULTS, } from "./PanelLayout";
+export type { PanelSide, PanelState, PanelConfig, PanelsState, PanelLayoutProps, PanelProps, PanelMainProps, UsePanelStateOptions, UsePanelStateReturn, } from "./PanelLayout";
+export { SplitPanelLayout } from "./SplitPanelLayout";
+export type { SplitPanelLayoutProps, SplitPanelPosition } from "./SplitPanelLayout";

package/dist/shared/icons/AICommentaryIcon.d.ts

@@ -0,0 +1,11 @@
+export interface AICommentaryIconProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * AI Commentary icon component
+ * @description Icon representing AI-powered commentary or conversation history
+ */
+export declare const AICommentaryIcon: ({ size, className }: AICommentaryIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/AIMessage.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AIMessage: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/Add2Icon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface Add2IconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Eye off icon component
+ * @description Icon representing hidden/hide password
+ */
+export declare const Add2Icon: ({ size, className, ...props }: Add2IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/AddIcon.d.ts

@@ -0,0 +1,7 @@
+import React, { SVGProps } from "react";
+export interface AddIconProps extends SVGProps<SVGSVGElement> {
+    title?: string;
+    titleId?: string;
+    size?: number;
+}
+export declare const AddIcon: React.ForwardRefExoticComponent<Omit<AddIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/ArrowNarrowDownIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface ArrowNarrowDownIconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const ArrowNarrowDownIcon: React.ForwardRefExoticComponent<Omit<ArrowNarrowDownIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/BookOutlined.d.ts

@@ -0,0 +1,10 @@
+export interface BookOutlinedProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * BookOutlined icon component
+ */
+export declare const BookOutlined: ({ size, className }: BookOutlinedProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/Box2Icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface Box2IconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const Box2Icon: React.ForwardRefExoticComponent<Omit<Box2IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/BoxIcon.d.ts

@@ -0,0 +1,11 @@
+export interface BoxIconProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Box icon component
+ * @description Icon representing a 3D box or package
+ */
+export declare const BoxIcon: ({ size, className }: BoxIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/CalendarIcon.d.ts

@@ -0,0 +1,11 @@
+export interface CalendarIconProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Calendar icon component
+ * @description Icon representing a 3D Calendar or package
+ */
+export declare const CalendarIcon: ({ size, className }: CalendarIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/CalendarIcon2.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface CalendarIcon2Props extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Calendar icon 2 component
+ * @description Calendar icon with date dots
+ */
+export declare const CalendarIcon2: ({ size, className, ...props }: CalendarIcon2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/ChatIcon.d.ts

@@ -0,0 +1,11 @@
+export interface ChatIconProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Chat icon component
+ * @description Icon representing a chat or conversation
+ */
+export declare const ChatIcon: ({ size, className }: ChatIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/ChevronDownIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface ChevronDownIconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const ChevronDownIcon: React.ForwardRefExoticComponent<Omit<ChevronDownIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/ChevronUpIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface ChevronUpIconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const ChevronUpIcon: React.ForwardRefExoticComponent<Omit<ChevronUpIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/CircleIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface CircleIconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const CircleIcon: React.ForwardRefExoticComponent<Omit<CircleIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/CopyIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CopyIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Copy icon component
+ * @description Icon representing copy/duplicate action
+ */
+export declare const CopyIcon: ({ size, className, ...props }: CopyIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/DataArrowsOutlined.d.ts

@@ -0,0 +1,10 @@
+export interface DataArrowsOutlinedProps {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * DataArrowsOutlined icon component
+ */
+export declare const DataArrowsOutlined: ({ size, className }: DataArrowsOutlinedProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/Edit2Icon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Edit2IconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Edit 2 icon component
+ * @description Icon representing edit/pencil action
+ */
+export declare const Edit2Icon: ({ size, className, ...props }: Edit2IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/EyeIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface EyeIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Eye icon component
+ * @description Icon representing visible/show password
+ */
+export declare const EyeIcon: ({ size, className, ...props }: EyeIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/EyeOffIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface EyeOffIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Eye off icon component
+ * @description Icon representing hidden/hide password
+ */
+export declare const EyeOffIcon: ({ size, className, ...props }: EyeOffIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/FilterFunnel02Icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+export interface FilterFunnel02IconProps extends SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const FilterFunnel02Icon: React.ForwardRefExoticComponent<Omit<FilterFunnel02IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/shared/icons/FlashIcon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface FlashIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Flash icon component
+ * @description Icon representing flash, lightning, or power
+ */
+export declare const FlashIcon: ({ size, className, ...props }: FlashIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/GridIcon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface GridIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Eye off icon component
+ * @description Icon representing hidden/hide password
+ */
+export declare const GridIcon: ({ size, className, ...props }: GridIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/InfoIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface InfoIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Info icon component
+ * @description Icon representing information
+ */
+export declare const InfoIcon: ({ size, className, ...props }: InfoIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/LayerIcon.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface LayerIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Optional CSS classes */
+    className?: string;
+}
+/**
+ * Layer icon component
+ * @description Icon representing layers or stack
+ */
+export declare const LayerIcon: ({ size, className, ...props }: LayerIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/icons/LeftArrowIcon.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface LeftArrowIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const LeftArrowIcon: React.FC<LeftArrowIconProps>;