@vitus-labs/elements 2.0.0-alpha.27 → 2.0.0-alpha.28

package/README.md

@@ -21,7 +21,7 @@ Five composable components for building buttons, cards, lists, dropdowns, toolti
 ## Installation
 
 ```bash
-npm install @vitus-labs/elements @vitus-labs/core @vitus-labs/unistyle styled-components
+npm install @vitus-labs/elements @vitus-labs/core @vitus-labs/unistyle
 ```
 
 ## Components
@@ -271,6 +271,10 @@ Every layout prop (direction, alignX, alignY, gap, block, equalCols) supports th
 <Element direction={{ xs: 'rows', md: 'inline', lg: 'inline' }} />
 ```
 
+## React Native
+
+Elements includes a native entry point (`index.native.ts`) that excludes Portal and Overlay (which depend on `react-dom`). Element, Text, List, and Util work on React Native when initialized with `@vitus-labs/connector-native`.
+
 ## Peer Dependencies
 
 | Package | Version |
@@ -279,7 +283,7 @@ Every layout prop (direction, alignX, alignY, gap, block, equalCols) supports th
 | react-dom | >= 19 |
 | @vitus-labs/core | * |
 | @vitus-labs/unistyle | * |
-| styled-components | >= 6 |
+| react-native | >= 0.76 (optional) |
 
 ## License
 

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import { Provider } from "@vitus-labs/unistyle";
 import { BreakpointKeys, HTMLTags, HTMLTextTags, config, render } from "@vitus-labs/core";
-import * as react from "react";
-import { ComponentType, FC, ForwardRefExoticComponent, ForwardedRef, PropsWithoutRef, ReactNode, RefAttributes } from "react";
+import * as _$react from "react";
+import { ComponentType, FC, ForwardRefExoticComponent, ForwardedRef, ReactElement, ReactNode } from "react";
 
 //#region src/types.d.ts
 type ExtractNullableKeys<T> = { [P in keyof T as T[P] extends null | undefined ? never : P]: T[P] };
@@ -24,8 +24,9 @@ type Direction = ContentDirection | ContentDirection[] | Partial<Record<Breakpoi
 type ResponsiveBoolType = ContentBoolean | ContentBoolean[] | Partial<Record<BreakpointKeys, ContentBoolean>>;
 type Responsive = ContentSimpleValue | ContentSimpleValue[] | Partial<Record<BreakpointKeys, number | string>>;
 type ExtendCss = Css | Css[] | Partial<Record<BreakpointKeys, Css>>;
-type VLForwardedComponent<P extends Record<string, unknown> = {}> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<any>> & VLStatic;
-type VLComponent<P extends Record<string, any> = {}> = FC<P> & VLStatic;
+type VLComponent<P extends Record<string, any> = {}> = ((props: P & {
+  ref?: any;
+}) => ReactElement | null) & VLStatic;
 interface VLStatic {
   /**
    * React displayName
@@ -291,7 +292,9 @@ type Props = Partial<{
    */
   afterContentCss: ExtendCss;
 }>;
-type VLElement<P extends Record<string, unknown> = {}> = ForwardRefExoticComponent<PropsWithoutRef<Props & P> & RefAttributes<any>> & VLStatic;
+type VLElement<P extends Record<string, unknown> = {}> = ((props: Props & P & {
+  ref?: any;
+}) => ReactElement | null) & VLStatic;
 //#endregion
 //#region src/Element/component.d.ts
 declare const Component: VLElement;
@@ -385,10 +388,13 @@ declare const Component$3: FC<Context & {
   children: ReactNode;
 }>;
 //#endregion
-//#region src/Overlay/useOverlay.d.ts
+//#region src/Overlay/positionMath.d.ts
 type Align$1 = 'bottom' | 'top' | 'left' | 'right';
 type AlignX$2 = 'left' | 'center' | 'right';
 type AlignY$2 = 'bottom' | 'top' | 'center';
+type OverlayType = 'dropdown' | 'tooltip' | 'popover' | 'modal' | 'custom';
+//#endregion
+//#region src/Overlay/useOverlay.d.ts
 type UseOverlayProps = Partial<{
   /**
    * Defines default state whether **Overlay** component should be active.
@@ -412,7 +418,7 @@ type UseOverlayProps = Partial<{
    * has different positioning calculations than others.
    * @defaultValue `dropdown`
    */
-  type: 'dropdown' | 'tooltip' | 'popover' | 'modal' | 'custom';
+  type: OverlayType;
   /**
    * Defines how `content` is treated regarding CSS positioning.
    * @defaultValue `fixed`
@@ -461,6 +467,12 @@ type UseOverlayProps = Partial<{
    * @defaultValue `true`
    */
   closeOnEsc: boolean;
+  /**
+   * Delay in milliseconds before hiding content on hover leave. Bridges the
+   * gap between trigger and content elements to prevent flicker.
+   * @defaultValue `100`
+   */
+  hoverDelay: number;
   /**
    * When set to `true`, **Overlay** is automatically closed and is blocked for
    * being opened.
@@ -491,12 +503,13 @@ declare const useOverlay: ({
   throttleDelay,
   parentContainer,
   closeOnEsc,
+  hoverDelay,
   disabled,
   onOpen,
   onClose
 }?: Partial<UseOverlayProps>) => {
-  triggerRef: react.RefObject<HTMLElement | null>;
-  contentRef: (node: HTMLElement) => void;
+  triggerRef: _$react.RefObject<HTMLElement | null>;
+  contentRef: (node: HTMLElement | null) => void;
   active: boolean;
   align: Align$1;
   alignX: "left" | "right" | "center";
@@ -506,8 +519,8 @@ declare const useOverlay: ({
   blocked: boolean;
   setBlocked: () => void;
   setUnblocked: () => void;
-  Provider: react.FC<Context & {
-    children: react.ReactNode;
+  Provider: _$react.FC<Context & {
+    children: _$react.ReactNode;
   }>;
 };
 //#endregion
@@ -601,7 +614,7 @@ type Props$5 = Partial<{
    */
   css: ExtendCss;
 }>;
-declare const Component$5: VLForwardedComponent<Props$5> & {
+declare const Component$5: VLComponent<Props$5> & {
   isText?: true;
 };
 //#endregion