@zvoove/unity-ui 2.32.1 → 2.32.2

package/dist/src/hooks/useBreakpoint.d.ts

@@ -1,51 +0,0 @@
-import { Viewport } from '../types';
-export interface UseBreakpointReturn {
-    /** The current viewport breakpoint */
-    currentBreakpoint: Viewport;
-    /** Returns true if the current breakpoint is larger than the specified breakpoint */
-    isBiggerThan: (breakpoint: Viewport) => boolean;
-    /** Returns true if the current breakpoint is smaller than the specified breakpoint */
-    isSmallerThan: (breakpoint: Viewport) => boolean;
-    /** Returns true if the current breakpoint is between the two specified breakpoints (inclusive) */
-    isBetween: (minBreakpoint: Viewport, maxBreakpoint: Viewport) => boolean;
-}
-/**
- * Custom hook that tracks the current breakpoint based on window width.
- * Returns an object with the current breakpoint and utility functions for comparison.
- *
- * @param enabled - Whether to set up resize event listeners. Defaults to true.
- *                  Set to false to prevent unnecessary listeners when breakpoint tracking is not needed.
- * @returns An object containing the current breakpoint and comparison utilities
- *
- * @example
- * ```tsx
- * const { currentBreakpoint, isBiggerThan, isSmallerThan, isBetween } = useBreakpoint();
- *
- * // Check current breakpoint
- * console.log(currentBreakpoint); // 'tablet'
- *
- * // Check if viewport is bigger than mobile
- * if (isBiggerThan('mobile')) {
- *   // Render desktop layout
- * }
- *
- * // Check if viewport is smaller than laptop
- * if (isSmallerThan('laptop')) {
- *   // Render mobile layout
- * }
- *
- * // Check if viewport is between tablet and laptop (inclusive)
- * if (isBetween('tablet', 'laptop')) {
- *   // Render medium layout
- * }
- * ```
- */
-export declare const useBreakpoint: (enabled?: boolean) => UseBreakpointReturn;
-/**
- * Determines the breakpoint based on window width.
- * Checks breakpoints in descending order (desktop to minimum).
- *
- * @param width - The window width in pixels
- * @returns The corresponding viewport breakpoint
- */
-export declare const getBreakpoint: (width: number) => Viewport;

package/dist/src/hooks/useClickOutside.d.ts

@@ -1,4 +0,0 @@
-import { RefObject } from 'react';
-type RefType<T extends Node = HTMLElement> = RefObject<T | null> | null | undefined;
-export declare const useClickOutside: <T extends Node = HTMLElement>(refs: RefType<T> | RefType<T>[] | RefType<Node>[], callback: () => void, isOpen?: boolean) => void;
-export {};

package/dist/src/index.d.ts

@@ -1,52 +0,0 @@
-export * from './hooks';
-export * from './types';
-export * from './components/Accordion';
-export * from './components/ActionCard';
-export * from './components/Avatar';
-export * from './components/Badge';
-export * from './components/Breadcrumbs';
-export * from './components/Button';
-export * from './components/Card';
-export * from './components/ChatBubble';
-export * from './components/Checkbox';
-export * from './components/Chip';
-export * from './components/CodeBlock';
-export * from './components/ContentBlock';
-export * from './components/DatePicker';
-export * from './components/Dialog';
-export * from './components/Divider';
-export * from './components/Expandable';
-export * from './components/FloatSearch';
-export * from './components/FormLabel';
-export * from './components/Grid';
-export * from './components/Icon';
-export * from './components/ImageVisualizer';
-export * from './components/InfoBox';
-export * from './components/List';
-export * from './components/ListMenu';
-export * from './components/MessageActions';
-export * from './components/MidSectionMenus';
-export * from './components/Pagination';
-export * from './components/PopUpMenu';
-export * from './components/ProgressIndicator';
-export * from './components/Radio';
-export * from './components/ScoreCard';
-export * from './components/Segment';
-export * from './components/Select';
-export * from './components/Sheet';
-export * from './components/SideNavigation';
-export * from './components/Skeleton';
-export * from './components/Snackbar';
-export * from './components/Stack';
-export * from './components/Switch';
-export * from './components/Table';
-export * from './components/Tabs';
-export * from './components/Tag';
-export * from './components/Textarea';
-export * from './components/TextField';
-export * from './components/Tooltip';
-export * from './components/TopBar';
-export * from './components/Typography';
-export * from './components/Uploader';
-export * from './components/UserArea';
-export * from './components/ZvooveBrand';

package/dist/src/libs/index.d.ts

@@ -1 +0,0 @@
-export { tv } from './tv';

package/dist/src/libs/tv.d.ts

@@ -1,23 +0,0 @@
-/**
- * Configured tailwind-variants with custom tailwind-merge
- * that supports our custom spacing values.
- *
- * Use this instead of importing `tv` directly from 'tailwind-variants'
- * to ensure proper class merging with our custom theme values.
- *
- * @example
- * ```ts
- * import { tv } from '@libs';
- *
- * const button = tv({
- *   base: ['px-md', 'py-sm'],
- *   variants: {
- *     size: {
- *       sm: ['px-sm', 'py-xs'],
- *       lg: ['px-lg', 'py-md'],
- *     }
- *   }
- * });
- * ```
- */
-export declare const tv: import('tailwind-variants').TV;

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

@@ -1,83 +0,0 @@
-import { BREAKPOINTS } from '../constants';
-export type NonNullable<T> = Exclude<T, null | undefined>;
-export type SpacingKeys = 'none' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4' | 'xl5' | 'xl6' | 'xl7';
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-export type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
-export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type OverflowBase = 'visible' | 'hidden' | 'scroll' | 'auto' | 'y-auto' | 'y-scroll' | 'x-auto' | 'x-scroll';
-export type OverflowYOrX = 'auto' | 'scroll' | 'hidden' | 'visible';
-export type Overflow = OverflowBase | {
-    y?: OverflowYOrX;
-    x?: OverflowYOrX;
-};
-export type Density = 'default' | '-2' | '-4';
-export type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container' | 'container-neutral' | 'container-neutral-hover' | 'code-surface' | 'code-surface-variant';
-export type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim' | 'on-container-neutral' | 'code-on-surface';
-export type Padding = SpacingKeys | {
-    top?: SpacingKeys;
-    right?: SpacingKeys;
-    bottom?: SpacingKeys;
-    left?: SpacingKeys;
-    x?: SpacingKeys;
-    y?: SpacingKeys;
-};
-export type Margin = SpacingKeys | {
-    top?: SpacingKeys;
-    right?: SpacingKeys;
-    bottom?: SpacingKeys;
-    left?: SpacingKeys;
-    x?: SpacingKeys;
-    y?: SpacingKeys;
-};
-export type Gap = SpacingKeys | {
-    row?: SpacingKeys;
-    column?: SpacingKeys;
-};
-export type Viewport = keyof typeof BREAKPOINTS;
-export type ResponsiveType<T> = T | {
-    [key in Viewport]?: T;
-};
-export type ResponsiveTypeFixed<T> = {
-    [key in Viewport]: T;
-};
-type ResponsiveBreakpoint = 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL' | '4XL';
-type SideVariant = 'Top' | 'Bottom' | 'Left' | 'Right';
-type AxisVariant = 'X' | 'Y';
-type GapAxisVariant = 'Row' | 'Column';
-type GenerateSimpleResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
-export type SimpleResponsiveStyles<Attr extends string> = {
-    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
-};
-type GenerateResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${AxisVariant}` | `${Attr}${SideVariant}` | `${Attr}${AxisVariant}${ResponsiveBreakpoint}` | `${Attr}${SideVariant}${ResponsiveBreakpoint}`;
-export type GenerateResponsiveGenericStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
-export type ResponsiveGenericStyles<Attr extends string, T extends string = string> = {
-    [K in GenerateResponsiveGenericStyleKeys<Attr>]: Record<T, string>;
-};
-export type ResponsiveStyles<Attr extends string> = {
-    [K in GenerateResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
-};
-export type GetSpacingPropsReturnType<Attr extends string> = {
-    [K in GenerateResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
-};
-export type GetSimpleSpacingPropsReturnType<Attr extends string> = {
-    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
-};
-type GenerateGapResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${GapAxisVariant}` | `${Attr}${GapAxisVariant}${ResponsiveBreakpoint}`;
-export type GapResponsiveStyles<Attr extends string> = {
-    [K in GenerateGapResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
-};
-export type GetGapPropsReturnType<Attr extends string> = {
-    [K in GenerateGapResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
-};
-export type GenericResponsiveKeys<T extends string> = {
-    [key in Viewport]: Record<T, string>;
-};
-export type FlexResponsiveStylesKeys<Attr extends string> = GenerateSimpleResponsiveStyleKeys<Attr>;
-export type FlexResponsiveStyles<Attr extends string, T extends string> = {
-    [K in FlexResponsiveStylesKeys<Attr>]: Record<T, string>;
-};
-export type GetGenericPropsReturnType<Attr extends string, T extends string> = {
-    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: T | undefined;
-};
-export {};

package/dist/src/utils/checkIconSource.d.ts

@@ -1 +0,0 @@
-export declare const checkIconSource: (name: string) => "file" | "common" | "not-found";

package/dist/src/utils/containsOnlySizeProps.d.ts

@@ -1 +0,0 @@
-export declare const containsOnlySizeProps: (str: string) => boolean;

package/dist/src/utils/formatFromStringToDate.d.ts

@@ -1 +0,0 @@
-export declare const formatFromStringToDate: (date: string, locale?: string) => Date;

package/dist/src/utils/getComponentTagName.d.ts

@@ -1 +0,0 @@
-export declare const getComponentTagName: (element: React.ReactElement) => string | null;

package/dist/src/utils/getFlexProps.d.ts

@@ -1,4 +0,0 @@
-import { AlignItems, FlexDirection, FlexWrap, GetGenericPropsReturnType, JustifyContent, ResponsiveType } from '../types';
-type ReturnType = GetGenericPropsReturnType<'direction', FlexDirection> & GetGenericPropsReturnType<'justify', JustifyContent> & GetGenericPropsReturnType<'align', AlignItems> & GetGenericPropsReturnType<'wrap', FlexWrap>;
-export declare const getFlexProps: (direction?: ResponsiveType<FlexDirection>, justify?: ResponsiveType<JustifyContent>, align?: ResponsiveType<AlignItems>, wrap?: ResponsiveType<FlexWrap>) => ReturnType;
-export {};

package/dist/src/utils/getOverflowProps.d.ts

@@ -1,23 +0,0 @@
-import { GetGenericPropsReturnType, Overflow, OverflowBase, OverflowYOrX, ResponsiveType } from '../types';
-type OverflowPropsReturnType = GetGenericPropsReturnType<'overflow', OverflowBase> & GetGenericPropsReturnType<'overflowX', OverflowYOrX> & GetGenericPropsReturnType<'overflowY', OverflowYOrX>;
-/**
- * Generates overflow props handling both simple values and x/y object notation.
- * Supports responsive breakpoints for all overflow variants.
- *
- * @example
- * // Simple overflow value
- * getOverflowProps('hidden')
- * // Returns: { overflow: 'hidden', overflowX: undefined, overflowY: undefined, ... }
- *
- * @example
- * // Object with x/y notation
- * getOverflowProps({ x: 'auto', y: 'scroll' })
- * // Returns: { overflow: undefined, overflowX: 'auto', overflowY: 'scroll', ... }
- *
- * @example
- * // Responsive with mixed values
- * getOverflowProps({ mobile: 'hidden', desktop: { x: 'auto', y: 'scroll' } })
- * // Returns: { overflowMD: 'hidden', overflowX2XL: 'auto', overflowY2XL: 'scroll', ... }
- */
-export declare const getOverflowProps: (value: ResponsiveType<Overflow> | undefined) => OverflowPropsReturnType;
-export {};

package/dist/src/utils/getResponsiveValue.d.ts

@@ -1,35 +0,0 @@
-import { ResponsiveType, Viewport } from '../types';
-/**
- * Resolves a responsive value to the current breakpoint value.
- * If the value is not a responsive object, returns it as-is.
- * If it's a responsive object, returns the value for the current breakpoint,
- * falling back to smaller breakpoints if the current one is not defined.
- *
- * @param value - The responsive value to resolve
- * @param currentBreakpoint - The current breakpoint viewport
- * @returns The resolved value for the current breakpoint
- *
- * @example
- * ```tsx
- * const { currentBreakpoint } = useBreakpoint();
- * const columns = getResponsiveValue(
- *   { mobile: 2, tablet: 3, desktop: 4 },
- *   currentBreakpoint
- * );
- * // Returns 2 on mobile, 3 on tablet, 4 on desktop
- * ```
- */
-export declare const getResponsiveValue: <T>(value: ResponsiveType<T>, currentBreakpoint: Viewport) => T | undefined;
-/**
- * Hook version that automatically uses the current breakpoint.
- * Use this inside React components.
- *
- * @param value - The responsive value to resolve
- * @returns The resolved value for the current breakpoint
- *
- * @example
- * ```tsx
- * const columns = useResponsiveValue({ mobile: 2, tablet: 3, desktop: 4 });
- * ```
- */
-export declare const useResponsiveValue: <T>(value: ResponsiveType<T>) => T | undefined;

package/dist/src/utils/getSpacingProps.d.ts

@@ -1,4 +0,0 @@
-import { Gap, GetGapPropsReturnType, GetSpacingPropsReturnType, Margin, Padding, ResponsiveType } from '../types';
-type ReturnType = GetSpacingPropsReturnType<'padding' | 'margin'> & GetGapPropsReturnType<'gap'>;
-export declare const getSpacingProps: (padding?: ResponsiveType<Padding>, margin?: ResponsiveType<Margin>, gap?: ResponsiveType<Gap>) => ReturnType;
-export {};

package/dist/src/utils/index.d.ts

@@ -1,15 +0,0 @@
-export * from './logs';
-export * from './getComponentTagName';
-export * from './setupUserEvent';
-export * from './containsOnlySizeProps';
-export * from './formatFromStringToDate';
-export * from './checkIconSource';
-export * from './isValidSizeUnit';
-export * from './isDefined';
-export * from './typeGuards';
-export * from './getSpacingProps';
-export * from './getResponsiveValue';
-export * from './getFlexProps';
-export * from './getOverflowProps';
-export * from './viewports';
-export * from './linkify';

package/dist/src/utils/isDefined.d.ts

@@ -1 +0,0 @@
-export declare const isDefined: (value: unknown) => boolean;

package/dist/src/utils/isValidSizeUnit.d.ts

@@ -1 +0,0 @@
-export declare const isValidSizeUnit: (value: string) => boolean;

package/dist/src/utils/linkify.d.ts

@@ -1,2 +0,0 @@
-import { ReactNode } from 'react';
-export declare function linkify(text: string): ReactNode;

package/dist/src/utils/logs.d.ts

@@ -1,6 +0,0 @@
-type LogColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'brightBlack' | 'brightRed' | 'brightGreen' | 'brightYellow' | 'brightBlue' | 'brightMagenta' | 'brightCyan' | 'brightWhite';
-export declare const colorMap: Record<LogColor, number>;
-export declare const logColor: (color: LogColor, text: string) => string;
-export declare const logError: (condition: boolean, message: string) => void;
-export declare const logWarning: (condition: boolean, message: string) => void;
-export {};

package/dist/src/utils/setupUserEvent.d.ts

@@ -1,6 +0,0 @@
-import { JSX } from 'react';
-import { render } from '@testing-library/react';
-import { default as userEvent } from '@testing-library/user-event';
-export declare const setupUserEvent: (jsx: JSX.Element) => ReturnType<typeof render> & {
-    user: ReturnType<typeof userEvent.setup>;
-};

package/dist/src/utils/typeGuards.d.ts

@@ -1,21 +0,0 @@
-import { ResponsiveType, SpacingKeys, Viewport } from '../types';
-export declare const isSpacingKeys: (value: unknown) => value is SpacingKeys;
-export declare const isObject: (value: unknown) => value is Record<string, unknown>;
-export declare const isResponsiveTypeKeys: (value: unknown) => value is keyof ResponsiveType<unknown>;
-export declare const isResponsiveType: (value: unknown) => value is ResponsiveType<unknown>;
-export declare const hasResponsiveType: (value: unknown, viewport: Viewport) => value is keyof ResponsiveType<SpacingKeys>;
-/**
- * Type guard to check if a value is an object with x and/or y axis properties.
- * This is useful for handling directional values that can be specified per axis.
- *
- * @example
- * isAxisObject({ x: 'auto', y: 'scroll' }) // true
- * isAxisObject({ x: 'auto' }) // true
- * isAxisObject({ y: 'scroll' }) // true
- * isAxisObject('auto') // false
- * isAxisObject({}) // false
- */
-export declare const isAxisObject: <T>(value: unknown) => value is {
-    x?: T;
-    y?: T;
-};

package/dist/src/utils/viewports.d.ts

@@ -1,13 +0,0 @@
-import { Viewport } from '../types';
-/**
- * Viewport configuration mapping viewport keys to their CSS suffix names.
- * Used for generating responsive prop variants across breakpoints.
- *
- * @example
- * // Maps viewport 'mobile' to suffix 'MD' for props like 'directionMD'
- * VIEWPORTS.find(v => v.key === 'mobile')?.suffix // 'MD'
- */
-export declare const VIEWPORTS: Array<{
-    key: Viewport;
-    suffix: string;
-}>;