@dimasbaguspm/versaur 0.0.18 → 0.0.20

package/dist/types/overlays/modal/types.d.ts

@@ -1,4 +1,5 @@
-import { HTMLAttributes } from 'react';
+import { OverlayPortalProps } from '../../utils/overlay-portal';
+import { HTMLAttributes, ReactNode } from 'react';
 /**
  * Modal component prop types
  */
@@ -7,27 +8,17 @@ export type ModalPlacement = 'top' | 'center';
 /**
  * Modal compound root
  */
-export interface ModalRootProps {
+export interface ModalRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, OverlayPortalProps {
     /** Controls whether the modal is open */
     isOpen: boolean;
-    /** Called when modal requests to close (ESC, overlay click) */
-    onOpenChange?: (open: boolean) => void;
+    /** Function to close the modal */
+    onClose: () => void;
     /** Modal size variant */
     size?: ModalSize;
     /** Modal placement variant */
     placement?: ModalPlacement;
     /** Children (Modal compound parts) */
-    children: React.ReactNode;
-    /** Optional: disables closing on overlay click */
-    disableOverlayClose?: boolean;
-    /** Optional: disables closing on ESC key */
-    disableEscClose?: boolean;
-    /** Optional: ARIA label for dialog */
-    'aria-label'?: string;
-    /** Optional: ARIA labelledby for dialog */
-    'aria-labelledby'?: string;
-    /** Optional: ARIA describedby for dialog */
-    'aria-describedby'?: string;
+    children: ReactNode;
 }
 /**
  * Props for Modal.Header, Modal.Footer
@@ -41,8 +32,4 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
-export interface ModalOverlayProps extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    placement?: string;
-    onOverlayClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
+export type ModalOverlayProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/types/overlays/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type * from './types';

package/dist/types/overlays/tooltip/tooltip.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TooltipRootProps } from './types';
+export declare const Tooltip: FC<TooltipRootProps & {
+    delay?: number;
+}>;

package/dist/types/overlays/tooltip/types.d.ts

@@ -0,0 +1,33 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Tooltip position options
+ * 'auto' (default): browser chooses best position, prefers bottom
+ * 'top', 'bottom', 'left', 'right': force position
+ */
+export type TooltipPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * TooltipRootProps: Props for Tooltip root
+ * Extends native div props, but allows ReactNode for content
+ */
+export interface TooltipRootProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'content'> {
+    /**
+     * The content to show inside the tooltip
+     */
+    content: ReactNode;
+    /**
+     * The element that triggers the tooltip (usually a child)
+     */
+    children: ReactNode;
+    /**
+     * Position of the tooltip relative to the trigger (default: 'auto')
+     */
+    position?: TooltipPosition;
+    /**
+     * Optional: delay in ms before showing the tooltip
+     */
+    delay?: number;
+    /**
+     * Optional: className for the tooltip popover
+     */
+    popoverClassName?: string;
+}

package/dist/types/overlays/tooltip/use-tooltip-position.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+import { TooltipPosition } from './types';
+type TooltipPositionRef = {
+    position: TooltipPosition;
+    ref: RefObject<HTMLDivElement | null>;
+};
+export declare function useTooltipPositionRef(preferred?: TooltipPosition): TooltipPositionRef;
+export {};

package/dist/types/primitive/image/base-image.atoms.d.ts

@@ -0,0 +1,6 @@
+import { BaseImageFallbackProps, BaseImageSkeletonProps } from './types';
+export declare function BaseImageSkeleton({ className, shape, size, height, width, }: BaseImageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FallbackAtom - displays a fallback UI when the image fails to load
+ */
+export declare function BaseImageFallback({ alt, width, height, className, style, shape, size, }: BaseImageFallbackProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/primitive/image/base-image.d.ts

@@ -0,0 +1,6 @@
+import { BaseImageProps } from './types';
+/**
+ * Image component that aligns with standard HTML <img> behavior, with required shape, skeleton loading, and cva variants
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare const BaseImage: import('react').ForwardRefExoticComponent<BaseImageProps & import('react').RefAttributes<HTMLImageElement>>;

package/dist/types/primitive/image/image-circle.d.ts

@@ -0,0 +1,6 @@
+import { BaseImageProps } from './types';
+/**
+ * Circle-shaped Image component for Versaur
+ * Inherits all behavior from BaseImage, sets shape to 'circle'
+ */
+export declare const ImageCircle: import('react').ForwardRefExoticComponent<Omit<BaseImageProps, "shape"> & import('react').RefAttributes<HTMLImageElement>>;

package/dist/types/primitive/image/image-rectangle.d.ts

@@ -0,0 +1,6 @@
+import { BaseImageProps } from './types';
+/**
+ * Rectangle-shaped Image component for Versaur
+ * Inherits all behavior from BaseImage, sets shape to 'rectangle'
+ */
+export declare const ImageRectangle: import('react').ForwardRefExoticComponent<Omit<BaseImageProps, "shape"> & import('react').RefAttributes<HTMLImageElement>>;

package/dist/types/primitive/image/image-square.d.ts

@@ -0,0 +1,6 @@
+import { BaseImageProps } from './types';
+/**
+ * Square-shaped Image component for Versaur
+ * Inherits all behavior from BaseImage, sets shape to 'square'
+ */
+export declare const ImageSquare: import('react').ForwardRefExoticComponent<Omit<BaseImageProps, "shape"> & import('react').RefAttributes<HTMLImageElement>>;

package/dist/types/primitive/image/index.d.ts

@@ -0,0 +1,5 @@
+export { ImageCircle } from './image-circle';
+export { ImageSquare } from './image-square';
+export { ImageRectangle } from './image-rectangle';
+export { BaseImage } from './base-image';
+export type * from './types';

package/dist/types/primitive/image/types.d.ts

@@ -0,0 +1,48 @@
+import { SkeletonProps } from '../../feedbacks';
+import { ImgHTMLAttributes } from 'react';
+export interface BaseImageSkeletonProps extends Omit<SkeletonProps, 'shape' | 'size'> {
+    /**
+     * Shape of the skeleton: 'square', 'rectangle', or 'circle'
+     */
+    shape?: BaseImageProps['shape'];
+    /**
+     * Predefined size variant for the skeleton (see helpers.ts)
+     */
+    size?: BaseImageProps['size'];
+    width?: number | string;
+    height?: number | string;
+}
+export interface BaseImageFallbackProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    /**
+     * Alternative text for the fallback image
+     */
+    alt: string;
+    shape?: BaseImageProps['shape'];
+    size?: BaseImageProps['size'];
+}
+/**
+ * ImageProps extends standard HTML <img> attributes with required src and alt, and supports position/size variants
+ */
+export interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alternative text for the image
+     */
+    alt: string;
+    /**
+     * Image object-fit/position variant (see helpers.ts)
+     */
+    position?: 'cover' | 'contain' | 'center' | 'top' | 'bottom' | 'left' | 'right' | 'none';
+    /**
+     * Predefined image size variant (see helpers.ts)
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full' | 'auto';
+    /**
+     * Shape of the image: 'square', 'rectangle', or 'circle'
+     * Required for all image components
+     */
+    shape: 'square' | 'rectangle' | 'circle';
+}

package/dist/types/primitive/image/use-image.d.ts

@@ -0,0 +1,13 @@
+interface UseImageProps {
+    src: string;
+}
+/**
+ * Custom hook to manage image loading, error, and natural size detection
+ */
+export declare function useImage({ src }: UseImageProps): {
+    loaded: boolean;
+    errored: boolean;
+    handleLoad: () => void;
+    handleError: () => void;
+};
+export {};

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

@@ -14,3 +14,4 @@ export * from './table';
 export * from './text';
 export * from './tile';
 export * from './description-list';
+export * from './image';

package/dist/types/primitive/table/table.atoms.d.ts

@@ -1,4 +1,4 @@
-import { TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableColumnProps } from './types';
+import { TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderItemProps, TableRowItemProps } from './types';
 /**
  * Table.Header renders the table header row (grid-based, ARIA role)
  */
@@ -15,8 +15,6 @@ declare const TableFooter: import('react').ForwardRefExoticComponent<TableFooter
  * Table.Row renders a table row (grid-based, ARIA role)
  */
 declare const TableRow: import('react').ForwardRefExoticComponent<TableRowProps & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Table.Column renders a table cell (grid-based, ARIA role)
- */
-declare const TableColumn: import('react').ForwardRefExoticComponent<TableColumnProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TableHeader, TableBody, TableFooter, TableRow, TableColumn };
+declare const TableRowItem: import('react').ForwardRefExoticComponent<TableRowItemProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const TableHeaderItem: import('react').ForwardRefExoticComponent<TableHeaderItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TableHeader, TableBody, TableFooter, TableRow, TableRowItem, TableHeaderItem, };

package/dist/types/primitive/table/table.d.ts

@@ -1,8 +1,9 @@
 import { TableProps } from './types';
 export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLDivElement>> & {
     Header: import('react').ForwardRefExoticComponent<import('./types').TableHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    HeaderItem: import('react').ForwardRefExoticComponent<import('./types').TableHeaderItemProps & import('react').RefAttributes<HTMLDivElement>>;
     Body: import('react').ForwardRefExoticComponent<import('./types').TableBodyProps & import('react').RefAttributes<HTMLDivElement>>;
     Footer: import('react').ForwardRefExoticComponent<import('./types').TableFooterProps & import('react').RefAttributes<HTMLDivElement>>;
     Row: import('react').ForwardRefExoticComponent<import('./types').TableRowProps & import('react').RefAttributes<HTMLDivElement>>;
-    Column: import('react').ForwardRefExoticComponent<import('./types').TableColumnProps & import('react').RefAttributes<HTMLDivElement>>;
+    RowItem: import('react').ForwardRefExoticComponent<import('./types').TableRowItemProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/types/primitive/table/types.d.ts

@@ -5,19 +5,20 @@ import { HTMLAttributes, ReactNode, TableHTMLAttributes } from 'react';
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
     /** Table children (Header, Body, Footer, etc) */
     children: ReactNode;
-    maxColumns?: number;
+    /** Maximum number of columns in the table */
+    columns: number;
 }
 /**
  * Context value for Table
  */
 export interface TableContextValue {
-    maxColumns: number;
+    columns: number;
 }
 /**
  * TableHeaderProps for <Table.Header>
  */
-export interface TableHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+export interface TableHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
 }
 /**
  * TableBodyProps for <Table.Body>
@@ -49,3 +50,5 @@ export interface TableColumnProps extends HTMLAttributes<HTMLDivElement> {
     /** Horizontal alignment of cell content (left, center, right). Default: left */
     align?: 'left' | 'center' | 'right';
 }
+export type TableHeaderItemProps = Omit<TableColumnProps, 'as'>;
+export type TableRowItemProps = Omit<TableColumnProps, 'as'>;

package/dist/utils/enforce-subpath-import.js

@@ -7,17 +7,22 @@ const symbolToSubpath = {
   "LoadingIndicator": "feedbacks",
   "ProgressIndicator": "feedbacks",
   "Skeleton": "feedbacks",
+  "BottomSheetInput": "forms",
   "CheckboxInput": "forms",
   "ChipMultipleInput": "forms",
   "ChipSingleInput": "forms",
   "DateSinglePickerInput": "forms",
+  "DrawerInput": "forms",
   "EmailInput": "forms",
+  "ModalInput": "forms",
   "PriceInput": "forms",
   "RadioInput": "forms",
   "SearchInput": "forms",
   "SegmentMultipleInput": "forms",
   "SegmentSingleInput": "forms",
   "SelectInput": "forms",
+  "SelectableMultipleInput": "forms",
+  "SelectableSingleInput": "forms",
   "SwitchInput": "forms",
   "TextInput": "forms",
   "TextAreaInput": "forms",
@@ -26,6 +31,7 @@ const symbolToSubpath = {
   "BottomBar": "layouts",
   "FormLayout": "layouts",
   "PageLayout": "layouts",
+  "SideBar": "layouts",
   "TopBar": "layouts",
   "Breadcrumbs": "navigation",
   "Tabs": "navigation",
@@ -33,6 +39,7 @@ const symbolToSubpath = {
   "Drawer": "overlays",
   "Menu": "overlays",
   "Modal": "overlays",
+  "Tooltip": "overlays",
   "Alert": "primitive",
   "Anchor": "primitive",
   "Avatar": "primitive",
@@ -45,6 +52,10 @@ const symbolToSubpath = {
   "Calendar": "primitive",
   "DescriptionList": "primitive",
   "Icon": "primitive",
+  "ImageCircle": "primitive",
+  "ImageSquare": "primitive",
+  "ImageRectangle": "primitive",
+  "BaseImage": "primitive",
   "Snackbar": "primitive",
   "Table": "primitive",
   "Text": "primitive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",