@zvoove/unity-ui 2.29.1 → 2.32.1

package/dist/src/components/SideNavigation/SideNavigation.styled.d.ts

@@ -0,0 +1,249 @@
+import { ListMenuVariant } from '../ListMenu';
+export { closedWidth, compactClosedWidth, compactOpenWidth, openWidth, transition, } from '../ListMenu/ListMenu.styled';
+export declare const getWidths: (variant?: ListMenuVariant) => {
+    closed: string;
+    open: string;
+};
+export declare const mainWrapperStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const toggleWrapperStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+    hasLogo: {
+        true: string[];
+        false: never[];
+    };
+    hasToggleButton: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+    hasLogo: {
+        true: string[];
+        false: never[];
+    };
+    hasToggleButton: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        compact: string[];
+    };
+    hasLogo: {
+        true: string[];
+        false: never[];
+    };
+    hasToggleButton: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const toggleButtonStyles: import('tailwind-variants').TVReturnType<{
+    addBorderToToggleButton: {
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    open: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], {
+    addBorderToToggleButton: {
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    open: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    addBorderToToggleButton: {
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    open: {
+        true: never[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const mainContentWrapperStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        false: string[];
+    };
+    isCompact: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    open: {
+        false: string[];
+    };
+    isCompact: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        false: string[];
+    };
+    isCompact: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const menuItemsWrapperStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    /**
+     * Main root list: tighter margin when expanded, room when collapsed.
+     * Sub-menu back row: always `mb-xs` so spacing below matches the list body.
+     */
+    section: {
+        main: never[];
+        subMenuBack: never[];
+    };
+}, undefined, string[], {
+    open: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    /**
+     * Main root list: tighter margin when expanded, room when collapsed.
+     * Sub-menu back row: always `mb-xs` so spacing below matches the list body.
+     */
+    section: {
+        main: never[];
+        subMenuBack: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+    /**
+     * Main root list: tighter margin when expanded, room when collapsed.
+     * Sub-menu back row: always `mb-xs` so spacing below matches the list body.
+     */
+    section: {
+        main: never[];
+        subMenuBack: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const menuScrollAreaStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/** Space between the utility list and the user area (scroll column vs. footer). */
+export declare const utilityItemsWrapperStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sideNavigationStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const userAreaWrapperStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    compact: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+        false: string[];
+    };
+    compact: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    compact: {
+        true: never[];
+        false: never[];
+    };
+    variant: {
+        default: never[];
+        compact: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const menuLayersContainerStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const menuLayerStyles: import('tailwind-variants').TVReturnType<{
+    state: {
+        visible: string[];
+        'hidden-right': string[];
+        'hidden-left': string[];
+    };
+}, undefined, string[], {
+    state: {
+        visible: string[];
+        'hidden-right': string[];
+        'hidden-left': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    state: {
+        visible: string[];
+        'hidden-right': string[];
+        'hidden-left': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/SideNavigation/SideNavigation.types.d.ts

@@ -0,0 +1,128 @@
+import { ReactNode } from 'react';
+import { UserAreaProps } from '../../index.ts';
+import { ListMenuItem, ListMenuVariant } from '../ListMenu';
+import { MidSection } from '../MidSectionMenus/MidSectionMenus.types';
+/**
+ * @deprecated Use `ListMenuItem` instead
+ */
+export type MenuItem<T extends React.ElementType = 'a'> = ListMenuItem<T>;
+/**
+ * @deprecated Use `ListMenuVariant` instead
+ */
+export type SideNavigationVariant = ListMenuVariant;
+export type { MidSection };
+/**
+ * Slide-in panel for a root `menuItems` entry. The shell renders only the back row and spacer; pass any
+ * content (e.g. one or more `ListMenu`s from a micro-frontend) as `content`. Selection and `activeItem`
+ * for that UI live outside `SideNavigation`.
+ */
+export type SubMenuLayer = {
+    /**
+     * Must match the `id` of the root `menuItems` entry that opens this panel.
+     */
+    parentId: string;
+    /**
+     * Custom body below the back row (often `ListMenu` or composed layout from a remote module).
+     */
+    content: ReactNode;
+    /**
+     * Label for the control that returns to the main menu.
+     * @default 'Hauptmenü'
+     */
+    backLabel?: string;
+};
+export type SideNavigationProps<T extends React.ElementType = 'a'> = {
+    /**
+     * Whether the navigation is expanded
+     */
+    open?: boolean;
+    /**
+     * The visual variant of the navigation
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Logo displayed in the top area (compact variant only).
+     * Shows `icon` when collapsed, `icon + name` when expanded.
+     * Both have zvoove defaults if omitted.
+     */
+    logo?: {
+        /**
+         * Small logo icon shown when the sidebar is collapsed.
+         */
+        icon?: ReactNode;
+        /**
+         * Full logo name shown next to the icon when expanded.
+         */
+        name?: ReactNode;
+        /**
+         * When `true`, the icon is hidden while the sidebar is expanded so that only the name is visible.
+         * When the sidebar collapses the icon reappears as the sole identifier.
+         * @default false
+         */
+        hideIconWhenOpen?: boolean;
+    };
+    /**
+     * The list of menu items
+     */
+    menuItems: ListMenuItem<T>[];
+    /**
+     * The list of utility items to stay at the bottom of the menu
+     */
+    utilityItems?: ListMenuItem<T>[];
+    /**
+     * Sections between the root main list and utility items, with collapse/expand behavior when the sidebar
+     * closes (see `replaceWithIconOnClose`). Only the **root** column uses this prop; any lists inside a
+     * slide-in panel belong in that layer’s `content`.
+     */
+    midSections?: MidSection<T>[];
+    /**
+     * Slide-in panels: `parentId` matches a root `menuItems` id; `content` is the custom body (back row is built-in).
+     */
+    subMenus?: SubMenuLayer[];
+    /**
+     * User area rendered at the bottom of the navigation
+     */
+    userArea?: UserAreaProps;
+    /**
+     * Hide the user area on mobile (useful when it's shown elsewhere, e.g. in a top bar).
+     * @default true
+     */
+    hideUserAreaInMobile?: boolean;
+    /**
+     * When `true`, the built-in expand/collapse control in the header row is not rendered.
+     * Use a `utilityItems` entry with `onClick` (and controlled `open` / `onToggleOpen`) instead.
+     * @default false
+     */
+    hideToggleButton?: boolean;
+    /**
+     * When `true`, a border top, right and bottom are added to the toggle button. <br />
+     * This is useful when the SideNavigation is used next to a Card with outlined variant as a content container.
+     * @default false
+     */
+    addBorderToToggleButton?: boolean;
+    /**
+     * Active id for **root** `menuItems` / `utilityItems`. To open a sub panel from the shell, pass either the
+     * layer’s `parentId` (e.g. `'zain'`) or an opaque dotted string `'<parentId>.<segment>'` where only the
+     * part before the first `.` is read to choose the panel; the rest is for your app / `content` only.
+     */
+    activeItem?: string;
+    /**
+     * The component to render for the link
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The callback to handle the open/close state
+     */
+    onToggleOpen?: (open: boolean) => void;
+    /**
+     * Fired after a root `menuItems` / `utilityItems` click with the suggested `activeItem` id, or with the
+     * sub-panel `parentId` when opening a layer. Not called for `__back__` or `target="_blank"`. Clicks inside
+     * `subMenus[].content` are not observed here.
+     */
+    onActiveItemChange?: (activeItem: string) => void;
+    /**
+     * The callback to handle the item click
+     */
+    onItemClick?: (item: ListMenuItem) => void;
+};

package/dist/src/components/SideNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SideNavigation } from './SideNavigation';
+export type { MenuItem, MidSection, SideNavigationProps, SideNavigationVariant, SubMenuLayer, } from './SideNavigation.types';

package/dist/src/components/SideNavigation/usePinnedSections.d.ts

@@ -0,0 +1,7 @@
+import { MidSection } from './SideNavigation.types';
+/**
+ * Hook that manages pinned/unpinned chat sections for story demos.
+ * Returns mid-sections with interactive pin/unpin buttons.
+ */
+declare const usePinnedSections: () => MidSection<"a">[];
+export default usePinnedSections;

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonProps } from './Skeleton.types';
+declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/dist/src/components/Skeleton/Skeleton.styled.d.ts

@@ -0,0 +1,43 @@
+export declare const skeletonStyles: import('tailwind-variants').TVReturnType<{
+    borderRadius: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    animation: {
+        pulse: string[];
+        wave: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    borderRadius: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    animation: {
+        pulse: string[];
+        wave: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    borderRadius: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    animation: {
+        pulse: string[];
+        wave: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/src/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,20 @@
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The animation type of the skeleton.
+     * @default 'pulse'
+     */
+    animation?: 'pulse' | 'wave' | false;
+    /**
+     * The width of the skeleton.
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton.
+     */
+    height?: number | string;
+    /**
+     * The border radius of the skeleton.
+     * @default 'xs'
+     */
+    borderRadius?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+}

package/dist/src/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton.types';

package/dist/src/components/Snackbar/Snackbar.constants.d.ts

@@ -0,0 +1,5 @@
+import { BackgroundColors, ForegroundColors, IconProps } from '../../index.ts';
+import { SnackbarOptions } from './';
+export declare const iconDictionary: Record<NonNullable<SnackbarOptions['variant']>, Omit<IconProps, 'size' | 'color'>>;
+export declare const cardColorDictionary: Record<NonNullable<SnackbarOptions['variant']>, BackgroundColors>;
+export declare const foregroundColorDictionary: Record<NonNullable<SnackbarOptions['variant']>, ForegroundColors>;

package/dist/src/components/Snackbar/Snackbar.context.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface SnackbarProviderProps {
+    children: React.ReactNode;
+    maxSnackbars?: number;
+    defaultDuration?: number;
+}
+export declare const SnackbarProvider: React.FC<SnackbarProviderProps>;
+export {};

package/dist/src/components/Snackbar/Snackbar.context.definition.d.ts

@@ -0,0 +1,2 @@
+import { SnackbarContextValue } from './Snackbar.types';
+export declare const SnackbarContext: import('react').Context<SnackbarContextValue | null>;

package/dist/src/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { SnackbarProps } from './Snackbar.types';
+/**
+ * Snackbar component for displaying snackbar notifications
+ * Must be used within a SnackbarProvider
+ *
+ * @example
+ * ```tsx
+ * import { SnackbarProvider, Snackbar, useSnackbar } from '@components';
+ *
+ * function App() {
+ *   return (
+ *     <SnackbarProvider>
+ *       <Snackbar />
+ *       <YourApp />
+ *     </SnackbarProvider>
+ *   );
+ * }
+ *
+ * function YourComponent() {
+ *   const { snackbar, success, error } = useSnackbar();
+ *
+ *   return (
+ *     <button onClick={() => success('Operation completed!')}>
+ *       Click me
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const Snackbar: React.FC<SnackbarProps>;
+export default Snackbar;

package/dist/src/components/Snackbar/Snackbar.styled.d.ts

@@ -0,0 +1,173 @@
+export declare const snackbarContainerStyles: import('tailwind-variants').TVReturnType<{
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, string[], {
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const snackbarStackStyles: import('tailwind-variants').TVReturnType<{
+    isHovered: {
+        true: string[];
+        false: string[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, string[], {
+    isHovered: {
+        true: string[];
+        false: string[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isHovered: {
+        true: string[];
+        false: string[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const snackbarItemStyles: import('tailwind-variants').TVReturnType<{
+    position: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+    isHovered: {
+        true: never[];
+        false: never[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+    isMounted: {
+        true: string[];
+        false: string[];
+    };
+    isRemoving: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    position: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+    isHovered: {
+        true: never[];
+        false: never[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+    isMounted: {
+        true: string[];
+        false: string[];
+    };
+    isRemoving: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    position: {
+        0: string[];
+        1: string[];
+        2: string[];
+    };
+    isHovered: {
+        true: never[];
+        false: never[];
+    };
+    placement: {
+        'top-left': string[];
+        'top-center': string[];
+        'top-right': string[];
+        'bottom-left': string[];
+        'bottom-center': string[];
+        'bottom-right': string[];
+    };
+    isMounted: {
+        true: string[];
+        false: string[];
+    };
+    isRemoving: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const snackbarActionStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        positive: string[];
+        warning: string[];
+        error: string[];
+        subtle: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        positive: string[];
+        warning: string[];
+        error: string[];
+        subtle: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string[];
+        positive: string[];
+        warning: string[];
+        error: string[];
+        subtle: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const snackbarCloseStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;