@zvoove/unity-ui 2.29.1 → 2.32.1

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/theme.css

@@ -36,11 +36,21 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'Overpass';
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://d1ciav5yxfbyc5.cloudfront.net/fonts/overpass-normal-variable.woff2')
+    format('woff2');
+  font-display: swap;
+}
+
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 @custom-variant child (& > *);
 @theme {
   --font-*: initial;
   --font-body: 'Source Sans 3', sans-serif;
+  --font-tagline: 'Overpass', sans-serif;
 
   --text-*: initial;
   --text-display-large: 4rem;
@@ -388,6 +398,8 @@
   --breakpoint-tablet: 64rem; /* 1024px */
   --breakpoint-laptop: 80rem; /* 1280px */
   --breakpoint-desktop: 96rem; /* 1536px */
+  --breakpoint-wide: 120rem; /* 1920px */
+  --breakpoint-ultrawide: 160rem; /* 2560px */
 
   --container-*: initial;
   --container-minimum: 0rem; /* 0px */
@@ -395,6 +407,8 @@
   --container-tablet: 64rem; /* 1024px */
   --container-laptop: 80rem; /* 1280px */
   --container-desktop: 96rem; /* 1536px */
+  --container-wide: 120rem; /* 1920px */
+  --container-ultrawide: 160rem; /* 2560px */
 
   --chat-content-measure: 60%; /* max inline-size for bubbles & cards */