@dimasbaguspm/versaur 0.0.18 → 0.0.19

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

@@ -13,3 +13,5 @@ export * from './time-picker-input';
 export * from './switch-input';
 export * from './price-input';
 export * from './email-input';
+export * from './selectable-single-input';
+export * from './selectable-multiple-input';

package/dist/types/forms/selectable-multiple-input/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectableMultipleInput } from './selectable-multiple-input';
+export type * from './types';

package/dist/types/forms/selectable-multiple-input/selectable-multiple-input.d.ts

@@ -0,0 +1,6 @@
+import { SelectableMultipleInputProps } from './types';
+/**
+ * SelectableMultipleInput is a checkbox input with a custom label and checked icon
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+ */
+export declare const SelectableMultipleInput: import('react').ForwardRefExoticComponent<SelectableMultipleInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/forms/selectable-multiple-input/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+/**
+ * Props for SelectableMultipleInput
+ */
+export interface SelectableMultipleInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * The value of the checkbox input
+     */
+    value: string;
+    /**
+     * The label to display next to the checkbox input (can be any ReactNode)
+     */
+    label: ReactNode;
+    /**
+     * Whether the input is checked (controlled)
+     */
+    checked: boolean;
+}

package/dist/types/forms/selectable-single-input/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectableSingleInput } from './selectable-single-input';
+export type * from './types';

package/dist/types/forms/selectable-single-input/selectable-single-input.d.ts

@@ -0,0 +1,6 @@
+import { SelectableSingleInputProps } from './types';
+/**
+ * SelectableSingleInput is a radio input with a custom label and checked icon
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare const SelectableSingleInput: import('react').ForwardRefExoticComponent<SelectableSingleInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/forms/selectable-single-input/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+/**
+ * Props for SelectableSingleInput
+ */
+export interface SelectableSingleInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * The value of the radio input
+     */
+    value: string;
+    /**
+     * The label to display next to the radio input (can be any ReactNode)
+     */
+    label: ReactNode;
+    /**
+     * Whether the input is checked (controlled)
+     */
+    checked: boolean;
+}

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/utils/enforce-subpath-import.js

@@ -18,6 +18,8 @@ const symbolToSubpath = {
   "SegmentMultipleInput": "forms",
   "SegmentSingleInput": "forms",
   "SelectInput": "forms",
+  "SelectableMultipleInput": "forms",
+  "SelectableSingleInput": "forms",
   "SwitchInput": "forms",
   "TextInput": "forms",
   "TextAreaInput": "forms",
@@ -45,6 +47,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.19",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",