@instincthub/react-ui 0.0.4 → 0.0.6

package/dist/src/types/components/navbar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ChannelListAvatar } from "./ChannelListAvatar";
+export { default as MenuDropdown } from "./MenuDropdown";
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as ResponsiveNavbar } from "./ResponsiveNavbar";
+export { default as SideNavbar } from "./SideNavbar";

package/dist/src/types/components/status/CopyToClipBoard.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface CopyToClipboardProps {
+    labels?: string;
+    noLabel?: boolean;
+    text: string;
+}
+/**
+ * @component CopyToClipboard
+ * @description A component that copies text to the clipboard
+ * @example
+ * ```tsx
+ * <CopyToClipboard text="https://instincthub.com/certificates/username/issued_id" />
+ * ```
+ * @param {CopyToClipboardProps} props - The props for the CopyToClipboard component
+ * @returns {React.ReactNode} The rendered component
+ */
+declare const CopyToClipboard: React.FC<CopyToClipboardProps>;
+export default CopyToClipboard;

package/dist/src/types/components/status/DeleteConfirmationModal.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+interface DeleteConfirmationModalProps {
+    itemTitle?: string;
+}
+/**
+ * Modal component for confirming item deletion
+ * @component
+ * @example
+ * ```tsx
+ * <DeleteConfirmationModal
+ *   url="http://endpoint"
+ *   title="Some Title"
+ *   onSuccess={() => {
+ *     // Additional actions after successful deletion
+ *   }}
+ * />
+ *
+ * To trigger this modal:
+ * dispatch(confirmDelete.actions.set({ url: "http://endpoint", title: "Some Title" }));
+ *
+ * To listen for successful deletion:
+ * const { title, deleteStatus } = useSelector(selectConfirmDelete);
+ * useEffect(() => {
+ *   if (deleteStatus === 204) {
+ *     dispatch(confirmDelete.actions.set({}));
+ *     // Additional actions after successful deletion
+ *   }
+ * }, [deleteStatus]);
+ */
+declare const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps>;
+export default DeleteConfirmationModal;

package/dist/src/types/components/status/Error500.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+interface Error500Props {
+    msg?: string;
+}
+/**
+ *
+ * @component
+ * @example
+ * ```tsx
+ *
+ * <Error500 msg="Something went wrong." />
+ * ```
+ * Props interface for the Error500Props interface
+ * @property {string} msg - Optional error message
+ */
+declare const Error500: React.FC<Error500Props>;
+export default Error500;

package/dist/src/types/components/status/ErrorState.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface ErrorStateProps {
+    title: string;
+    text: string;
+}
+/**
+ *
+ * @component
+ * @example
+ * ```tsx
+ *
+ * <ErrorState title="Oops!" text="Something went wrong." />
+ * ```
+ * Props interface for the ErrorStateProps interface
+ * @property {string} title - Title of the error
+ * @property {string} text - Text of the error
+ */
+declare const ErrorState: React.FC<ErrorStateProps>;
+export default ErrorState;

package/dist/src/types/components/status/ModalExamples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Example component demonstrating various ways to use the MultiPurposeModal
+ */
+declare const ModalExamples: () => import("react/jsx-runtime").JSX.Element;
+export default ModalExamples;

package/dist/src/types/components/status/MultiPurposeModal.d.ts

@@ -0,0 +1,74 @@
+import React, { ReactNode } from "react";
+interface MultiPurposeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    size?: "small" | "medium" | "large" | "full";
+    height?: string;
+    children: ReactNode;
+    showFooter?: boolean;
+    footerContent?: ReactNode;
+    showCloseButton?: boolean;
+    closeOnOverlayClick?: boolean;
+    className?: string;
+    disableScroll?: boolean;
+    handleSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    removeForm?: boolean;
+    /**
+     * Controls whether the modal should force re-render when children change
+     * @default true
+     * Set to false when using forms or components that manage their own state
+     */
+    enableContentRefresh?: boolean;
+    /**
+     * Preserves scroll position when content refreshes (only works when enableContentRefresh is true)
+     * @default true
+     */
+    preserveScrollPosition?: boolean;
+}
+/**
+ * A multipurpose modal component for InstinctHub applications
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // For forms - disable content refresh to prevent scroll jumping
+ * <MultiPurposeModal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="User Form"
+ *   enableContentRefresh={false}
+ * >
+ *   <UserForm />
+ * </MultiPurposeModal>
+ *
+ * // For dynamic content - enable content refresh (default behavior)
+ * <MultiPurposeModal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Dynamic Content"
+ *   enableContentRefresh={true}
+ * >
+ *   {dynamicContent}
+ * </MultiPurposeModal>
+ * ```
+ *
+ * @param isOpen Controls whether the modal is visible
+ * @param onClose Function to call when the modal is closed
+ * @param title Optional title to display in the modal header
+ * @param size Size of the modal - small, medium, large, or full
+ * @param height Height of the modal body
+ * @param children Content to display in the modal body
+ * @param showFooter Whether to show the modal footer
+ * @param footerContent Custom content for the footer
+ * @param showCloseButton Whether to show the close button in the header
+ * @param closeOnOverlayClick Whether clicking the overlay closes the modal
+ * @param className Additional class names to apply to the modal
+ * @param disableScroll Whether to disable body scrolling when modal is open
+ * @param handleSubmit Function to call when the modal is submitted
+ * @param removeForm Whether to remove the default form element
+ * @param enableContentRefresh Whether to force re-render when children change (default: true)
+ * @param preserveScrollPosition Whether to maintain scroll position during refreshes (default: true)
+ */
+declare const MultiPurposeModal: React.FC<MultiPurposeModalProps>;
+export default MultiPurposeModal;

package/dist/src/types/components/status/NotFound.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface NotFoundProps {
+    message?: string;
+    linkText?: string;
+    linkHref?: string;
+    showHomeLink?: boolean;
+}
+/**
+ * NotFound component displays a 404 error page with customizable message and links
+ * @example
+ * ```tsx
+ * <NotFound message="Page not found" linkText="Go back" linkHref="/" showHomeLink={true} />
+ * ```
+ * @param message - Custom message to display (defaults to "Page not found")
+ * @param linkText - Text for the primary action link
+ * @param linkHref - URL for the primary action link
+ * @param showHomeLink - Whether to show a link back to home page
+ */
+declare const NotFound: React.FC<NotFoundProps>;
+export default NotFound;

package/dist/src/types/components/status/ReactTimeTracker.d.ts

@@ -0,0 +1,17 @@
+import { SessionUserType } from "src/types";
+interface TimeTrackerProps {
+    channel_username?: string | null;
+    session: SessionUserType;
+    endpoint: string | null;
+}
+/**
+ * React Time Tracker Component
+ * @component
+ * @example
+ * <ReactTimeTracker />
+ * @param {string} channel_username - The channel username
+ * @param {SessionUserType} session - The session user type
+ * @param {string} endpoint - The endpoint to fetch the IP Address
+ */
+export default function ReactTimeTracker({ channel_username, session, endpoint, }: TimeTrackerProps): null;
+export {};

package/dist/src/types/components/status/SessionHandleProvider.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+interface SessionHandleProviderProps {
+    children: ReactNode;
+    endpointPath?: string | null;
+}
+/**
+ * Provider component for the session handle
+ * @constructor
+ * @example
+ * ```tsx
+ *
+ * <SessionHandleProvider endpointPath="channels/instructor-channel/selected/">
+ *   <Component />
+ * </SessionHandleProvider>
+ * ```
+ * @param {ReactNode} children - Children components
+ * @param {string} endpointPath - API endpoint path for the session handle
+ */
+export default function SessionHandleProvider({ children, endpointPath, }: SessionHandleProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/types/components/status/Unauthorized.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+interface UnauthorizedProps {
+    /**
+     * Custom message to display to the user
+     */
+    message?: string;
+    /**
+     * URL to redirect the user to
+     */
+    redirectTo?: string;
+    /**
+     * Text to display for the redirect link
+     */
+    linkText?: string;
+    /**
+     * HTTP error code to display
+     */
+    errorCode?: number;
+}
+/**
+ * Unauthorized component displays when a user doesn't have permission to access a page
+ * @param props Component properties
+ * @returns JSX element with unauthorized message and redirect link
+ * @example
+ * ```tsx
+ * <Unauthorized message="You are not authorized to access this page" redirectTo="/" linkText="Go back to homepage" errorCode={403} />
+ * ```
+ */
+declare const Unauthorized: React.FC<UnauthorizedProps>;
+export default Unauthorized;

package/dist/src/types/components/status/index.d.ts

@@ -0,0 +1,11 @@
+export { default as TimeTracker } from "./ReactTimeTracker";
+export { default as SessionHandleProvider } from "./SessionHandleProvider";
+export { default as Error500 } from "./Error500";
+export { default as ErrorState } from "./ErrorState";
+export { default as ReactTimeTracker } from "./ReactTimeTracker";
+export { default as DeleteConfirmationModal } from "./DeleteConfirmationModal";
+export { default as CopyToClipboard } from "./CopyToClipBoard";
+export { default as MultiPurposeModal } from "./MultiPurposeModal";
+export { default as ModalExamples } from "./ModalExamples";
+export { default as NotFound } from "./NotFound";
+export { default as Unauthorized } from "./Unauthorized";

package/dist/src/types/components/tabs/TabContent.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface TabContentProps {
+    title?: string | null;
+    description: React.ReactElement;
+}
+/**
+ *
+ * @jsx
+ * @example
+ * ```tsx
+ *
+ * <TabContent title="Tab Title" description={<p>Tab Description</p>} />
+ * ```
+ * Props interface for the TabContent component
+ * @property {string} [title] - Optional title for the tab
+ * @property {React.ReactElement} description - Description for the tab
+ *
+ * @returns
+ */
+declare const TabContent: ({ title, description }: TabContentProps) => JSX.Element;
+export default TabContent;

package/dist/src/types/components/tabs/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { TabItemType } from "src/types";
+interface TabsProps {
+    items: TabItemType[];
+    defaultActiveTab?: string | number;
+    onChange?: (tabId: TabItemType) => void;
+    variant?: "default" | "bordered" | "pills";
+    className?: string;
+    tabsContainerClassName?: string;
+    contentClassName?: string;
+}
+declare const Tabs: ({ items, defaultActiveTab, onChange, variant, className, tabsContainerClassName, contentClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/src/types/components/tabs/VerticalTabs.d.ts

@@ -0,0 +1,39 @@
+import { VerticalTabItemType } from "src/types";
+interface VerticalTabsProps {
+    items: VerticalTabItemType[];
+    defaultActiveTab?: string | number;
+    onChange?: (tabItem: VerticalTabItemType) => void;
+    className?: string;
+    tabsContainerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Vertical Tab component for InstinctHub
+ * @compnent
+ * @example
+ * ```tsx
+ *
+ * <VerticalTabs
+ *   items={[
+ *     { id: 1, label: "Tab 1", content: <div>Content 1</div> },
+ *     { id: 2, label: "Tab 2", content: <div>Content 2</div> },
+ *     { id: 3, label: "Tab 3", content: <div>Content 3</div> },
+ *   ]}
+ *   defaultActiveTab={1}
+ *   onChange={(tabItem) => {
+ *     console.log(tabItem);
+ *   }}
+ * />
+ * ```
+ * Props interface for the VerticalTabsProps interface
+ * @param items Array of tab items containing id, label, content, and optional icon
+ * @param defaultActiveTab ID of the tab that should be active by default
+ * @param onChange Callback function that fires when a tab is changed
+ * @param className Additional classes for the main container
+ * @param tabsContainerClassName Additional classes for the tabs sidebar container
+ * @param contentClassName Additional classes for the content container
+ *
+ * @type {VerticalTabsProps} from src/types
+ */
+declare const VerticalTabs: ({ items, defaultActiveTab, onChange, className, tabsContainerClassName, contentClassName, }: VerticalTabsProps) => import("react/jsx-runtime").JSX.Element;
+export default VerticalTabs;

package/dist/src/types/components/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tabs } from "./Tabs";
+export { default as VerticalTabs } from "./VerticalTabs";
+export { default as TabContent } from "./TabContent";

package/dist/src/types/components/theme/DarkModeProvider.d.ts

@@ -1,12 +1,28 @@
 import { ReactNode } from "react";
 export type Theme = "DarkMode" | "LightMode" | "Device";
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
 interface DarkModeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
     onChange?: (theme: Theme) => void;
 }
+export declare function useTheme(): ThemeContextType;
 /**
  * Provider component that manages theme state based on user preference or system settings
+ * @constructor
+ * @example
+ * ```tsx
+ *
+ * <DarkModeProvider>
+ *   <Component />
+ * </DarkModeProvider>
+ * ```
+ * Props interface for the DarkModeProviderProps interface
+ * @property {ReactNode} children - Child components to render
+ * @property {Theme} [defaultTheme] - Default theme to use (defaults to Device)
  */
 export default function DarkModeProvider({ children, defaultTheme, onChange, }: DarkModeProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/types/components/theme/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ChangeStyleVariable } from "./ChangeStyleVariable";
+export { default as DarkModeProvider } from "./DarkModeProvider";
+export { default as LoadingAnimate } from "./LoadingAnimate";
+export { default as SessionProviders } from "./SessionProviders";
+export { default as SessionExpiresLogout } from "./signout/SessionExpiresLogout";
+export { default as SignOutSession } from "./signout/SignOutSession";

package/dist/src/types/components/theme/signout/SessionExpiresLogout.d.ts

@@ -1,55 +1,20 @@
 import React from "react";
-/**
- * Session data user information
- */
-export interface SessionUser {
-    name?: {
-        id?: number;
-        uuid?: string;
-        email?: string;
-        username?: string;
-        first_name?: string;
-        last_name?: string;
-        full_name?: string;
-        picture?: string;
-        token?: string;
-        category?: string;
-        channels?: any;
-        [key: string]: any;
-    };
-    track?: boolean;
-    profile_id?: string;
-    verified?: boolean;
-    is_staff?: boolean;
-    status?: number;
-    [key: string]: any;
-}
-/**
- * Session data structure
- */
-interface SessionData {
-    expires: string;
-    user?: SessionUser;
-    [key: string]: any;
-}
-/**
- * Properties for the SessionExpiresLogout component
- */
+import { SessionType } from "src/types";
 interface SessionExpiresLogoutProps {
-    /** Child components to render when session is valid */
     children: React.ReactNode;
-    /** Next.js session object */
-    session: SessionData | null;
-    /** Custom message to display when session expires */
+    session: SessionType | null;
     expiredMessage?: string;
-    /** Whether to disable automatic session validation */
     disableValidation?: boolean;
-    /** Callback function when session validation fails */
     onSessionInvalid?: () => void;
 }
 /**
- * Component that validates session and token expiration
- * and displays a logout screen when invalid
+ *
+ * @constructor
+ * @example
+ * <SessionExpiresLogout session={session}>
+ *   <div>Your session has expired</div>
+ * </SessionExpiresLogout>
+ *
  */
 export default function SessionExpiresLogout({ children, session, expiredMessage, disableValidation, onSessionInvalid, }: SessionExpiresLogoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/types/components/ui/Action.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+/**
+ * Defines the structure of a dropdown item
+ */
+export interface ActionDropdownItem {
+    /** Text label to display for the dropdown item */
+    label: string;
+    /** Click handler function */
+    onClick?: () => void;
+    /** Link destination if the dropdown item is a link */
+    href?: string;
+    /** Icon to display before the label */
+    iconBefore?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional additional class names */
+    className?: string;
+}
+/**
+ * ActionProps interface defines all possible props for the Action component
+ */
+interface ActionProps {
+    /** Text label to display in the action element */
+    label: string;
+    /** Click handler function */
+    onClick?: () => void;
+    /** Link destination if the action is a link */
+    href?: string;
+    /** Visual style variant */
+    variant?: "primary" | "secondary" | "outline" | "danger" | "text";
+    /** Size variation */
+    size?: "small" | "medium" | "large";
+    /** Whether the action should take up full width of container */
+    fullWidth?: boolean;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Icon to display before the label */
+    iconBefore?: React.ReactNode;
+    /** Icon to display after the label */
+    iconAfter?: React.ReactNode;
+    /** Optional additional class names */
+    className?: string;
+    /** Target attribute for links */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /** Type attribute for buttons */
+    type?: "button" | "submit" | "reset";
+    /** Whether to add animation effect */
+    animated?: boolean;
+    /** Whether to show a dropdown menu */
+    dropdown?: boolean;
+    /** Items to display in the dropdown menu */
+    dropdownItems?: ActionDropdownItem[];
+    /** Position of the dropdown menu */
+    dropdownPosition?: "left" | "right" | "center";
+}
+/**
+ * A versatile Action component that can be rendered as a button or link
+ * with various styles, sizes, icon options, and dropdown functionality
+ */
+declare const Action: ({ label, onClick, href, variant, size, fullWidth, disabled, iconBefore, iconAfter, className, target, type, animated, dropdown, dropdownItems, dropdownPosition, }: ActionProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | null | undefined;
+export default Action;

package/dist/src/types/components/ui/Badge.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+export type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
+export type BadgeSize = "small" | "medium" | "large";
+export type BadgeShape = "rounded" | "pill" | "square";
+export interface BadgeProps {
+    /**
+     * The content to display inside the badge
+     */
+    children?: React.ReactNode;
+    /**
+     * The visual style variant of the badge
+     * @default 'default'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The size of the badge
+     * @default 'medium'
+     */
+    size?: BadgeSize;
+    /**
+     * The shape of the badge
+     * @default 'rounded'
+     */
+    shape?: BadgeShape;
+    /**
+     * Whether the badge has an outline style
+     * @default false
+     */
+    outlined?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Badge value for notification-style badges
+     */
+    count?: number;
+    /**
+     * Maximum count to display before showing "count+"
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * Show a dot badge without content
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Makes the badge standalone (not overlaying another element)
+     * @default true
+     */
+    standalone?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+}
+/**
+ * Badge Component - Used for displaying counts, status indicators, or labels
+ */
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/dist/src/types/components/ui/ColorPicker.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+interface ColorPickerProps {
+    id?: string;
+    label?: string;
+    defaultColor?: string;
+    name?: string;
+    className?: string;
+    showButton?: boolean;
+    onChange?: (color: string) => void;
+    CUSTOM_COLORS?: string[] | null;
+    hidePreview?: boolean;
+    hideFormats?: boolean;
+    hideEyeDropper?: boolean;
+}
+/**
+ * ColorPicker component
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *  id="color-picker"
+ *  label="Color Picker"
+ *  defaultColor="#000000"
+ *  name="color-picker"
+ *  className="color-picker"
+ *  showButton={true}
+ *  onChange={(color) => console.log(color)}
+ * />
+ * ```
+ * @param id {string} - The id of the color picker
+ * @param label {string} - The label of the color picker
+ * @param defaultColor {string} - The default color of the color picker
+ * @param name {string} - The name of the color picker
+ * @param className {string} - The class name of the color picker
+ * @param showButton {boolean} - Whether to show the button of the color picker
+ * @param onChange {function} - The onChange event of the color picker
+ * @param CUSTOM_COLORS {string[]} - The custom colors of the color picker
+ * @param hidePreview {boolean} - Whether to hide the preview of the color picker
+ * @param hideFormats {boolean} - Whether to hide the formats of the color picker
+ * @param hideEyeDropper {boolean} - Whether to hide the eye dropper of the color picker
+ */
+declare const ColorPicker: React.FC<ColorPickerProps>;
+export default ColorPicker;

package/dist/src/types/components/ui/ComponentLists.d.ts

@@ -0,0 +1,2 @@
+declare const ComponentLists: () => import("react/jsx-runtime").JSX.Element;
+export default ComponentLists;