@dimasbaguspm/versaur 0.0.17 → 0.0.19

package/dist/js/{skeleton-QEyPZAuF.js → skeleton-BNZyaRjo.js}

@@ -1,4 +1,4 @@
-import { a as l, j as o, c as d } from "./index-C1uJQB34.js";
+import { c as l, j as o, a as d } from "./index-DOdDlCoL.js";
 import * as m from "react";
 import u, { forwardRef as f } from "react";
 const p = l(

package/dist/js/snackbar-DH8jCh2V.js

@@ -0,0 +1,50 @@
+import { c, j as r, a as d } from "./index-DOdDlCoL.js";
+import { forwardRef as i } from "react";
+const l = c(
+  "flex items-center gap-2 px-4 py-2 rounded-sm w-auto mx-4 sm:mx-0 sm:w-fit relative shadow-sm",
+  {
+    variants: {
+      color: {
+        success: "text-success-bold bg-success-soft border-l-4 border-success",
+        info: "text-info-bold bg-info-soft border-l-4 border-info",
+        warning: "text-warning-bold bg-warning-soft border-l-4 border-warning",
+        danger: "text-danger-bold bg-danger-soft border-l-4 border-danger"
+      }
+    },
+    defaultVariants: {
+      color: "success"
+    }
+  }
+), b = ({
+  children: a,
+  ...s
+}) => /* @__PURE__ */ r.jsx(
+  "span",
+  {
+    className: "flex-1 truncate text-sm",
+    "data-testid": "snackbar-text",
+    ...s,
+    children: a
+  }
+), x = ({
+  children: a,
+  ...s
+}) => /* @__PURE__ */ r.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...s, children: a }), g = i(
+  ({ children: a, action: s, color: e, className: t, ...o }, n) => /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: n,
+      role: "status",
+      "aria-live": "polite",
+      className: d(l({ color: e }), t),
+      ...o,
+      children: [
+        /* @__PURE__ */ r.jsx(b, { children: a }),
+        s && /* @__PURE__ */ r.jsx(x, { children: s })
+      ]
+    }
+  )
+);
+export {
+  g as S
+};

package/dist/js/{tabs-DYcTvVao.js → tabs-BbOkYchB.js}

@@ -1,4 +1,4 @@
-import { a as d, j as o, c as u } from "./index-C1uJQB34.js";
+import { c as d, j as o, a as u } from "./index-DOdDlCoL.js";
 import { forwardRef as f, createContext as x, useContext as g, useState as p, useLayoutEffect as y, useRef as h } from "react";
 const w = d(
   "flex items-center gap-2 text-sm text-tertiary",

package/dist/js/use-snackbars-oPoF7J5t.js

@@ -0,0 +1,94 @@
+import { c as d, j as c } from "./index-DOdDlCoL.js";
+import { createContext as x, useState as k, useRef as p, useCallback as m, useEffect as S, useMemo as v, useContext as h } from "react";
+import { S as w } from "./snackbar-DH8jCh2V.js";
+const f = x(
+  null
+), j = d(
+  [
+    "fixed z-50 flex flex-col gap-2 px-0 pb-2",
+    "w-screen left-0 bottom-0",
+    // mobile: full width
+    "sm:w-auto sm:left-4 sm:bottom-4 sm:max-w-sm"
+    // desktop/tablet
+  ].join(" ")
+), T = d("", {
+  variants: {
+    placement: {
+      mobile: "snackbar-animate-fade-in-out",
+      desktop: "snackbar-animate-slide-in-left"
+    }
+  },
+  defaultVariants: {
+    placement: "mobile"
+  }
+}), C = 4e3;
+function E() {
+  const [a, s] = k([]), t = p({}), n = m((e) => {
+    s((r) => r.filter((o) => o.id !== e)), t.current[e] && (clearTimeout(t.current[e]), delete t.current[e]);
+  }, []), i = m(
+    (e, r, o) => {
+      const u = `${Date.now()}-${Math.random()}`, l = o?.duration ?? C;
+      s((b) => [
+        ...b,
+        {
+          id: u,
+          color: e,
+          message: r,
+          ...o,
+          duration: l
+        }
+      ]), t.current[u] = setTimeout(() => {
+        n(u);
+      }, l);
+    },
+    [n]
+  );
+  return S(() => () => {
+    Object.values(t.current).forEach(clearTimeout), t.current = {};
+  }, []), { queue: a, showSnack: i, removeSnack: n };
+}
+const V = ({ children: a }) => {
+  const { queue: s, showSnack: t, removeSnack: n } = E(), i = v(() => ({ showSnack: t }), [t]);
+  return /* @__PURE__ */ c.jsxs(f.Provider, { value: i, children: [
+    a,
+    /* @__PURE__ */ c.jsx(
+      "div",
+      {
+        className: j(),
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: s.map((e, r) => /* @__PURE__ */ c.jsx(
+          "div",
+          {
+            className: T({
+              placement: window.innerWidth >= 640 ? "desktop" : "mobile"
+            }),
+            style: { transitionDelay: `${r * 60}ms` },
+            children: /* @__PURE__ */ c.jsx(
+              w,
+              {
+                color: e.color,
+                action: e.action,
+                onClose: () => {
+                  n(e.id);
+                },
+                children: e.message
+              }
+            )
+          },
+          e.id
+        ))
+      }
+    )
+  ] });
+};
+function N() {
+  const a = h(f);
+  if (!a)
+    throw new Error("useSnackbars must be used within a SnackbarsProvider");
+  return a;
+}
+export {
+  V as S,
+  N as u
+};

package/dist/types/feedbacks/loading-indicator/index.d.ts

@@ -1 +1,2 @@
-export * from './loading-indicator';
+export { LoadingIndicator } from './loading-indicator';
+export type * from './types';

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

@@ -1 +1,2 @@
-export {};
+export { ChipSingleInput } from './chip-single-input';
+export type * from './types';

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

@@ -1,4 +1,3 @@
-export * from './calculator-input';
 export * from './checkbox-input';
 export * from './chip-single-input';
 export * from './chip-multiple-input';
@@ -14,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/price-input/index.d.ts

@@ -1,2 +1,2 @@
-export * from './price-input';
+export { PriceInput } from './price-input';
 export type { PriceInputProps } from './types';

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/forms/switch-input/index.d.ts

@@ -1,3 +1,2 @@
-export * from './switch-input';
-export * from './switch-input.atoms';
-export * from './types';
+export { SwitchInput } from './switch-input';
+export type * from './types';

package/dist/types/forms/time-picker-input/time-picker-input.d.ts

@@ -1,9 +1,9 @@
-import { default as React } from 'react';
 import { TimePickerInputProps } from './types';
 /**
  * TimePickerInput component for Versaur UI
  *
- * Provides a modal-based time picker with hour, minute, and AM/PM selection
- * Follows Material 3 guidelines (no clock UI)
+ * Renders a visually accessible text input
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
  */
-export declare const TimePickerInput: React.FC<TimePickerInputProps>;
+export declare const TimePickerInput: import('react').ForwardRefExoticComponent<TimePickerInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/forms/time-picker-input/types.d.ts

@@ -1,47 +1,11 @@
-import { ReactNode } from 'react';
-import { ModalRootProps } from '../../overlays/modal';
+import { TextInputProps } from '../text-input';
 /**
  * Props for the TimePickerInput component
  */
-export interface TimePickerInputProps {
-    /**
-     * The selected time value in 12-hour format (e.g., '02:30 PM')
-     */
+export interface TimePickerInputProps extends Omit<TextInputProps, 'type' | 'value' | 'onChange'> {
     value: string;
     /**
      * Called when the time value changes
      */
     onChange: (value: string) => void;
-    /**
-     * Optional label for the input
-     */
-    label?: ReactNode;
-    /**
-     * Optional helper text below the input
-     */
-    helperText?: ReactNode;
-    /**
-     * Whether the input is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Optional error message
-     */
-    error?: ReactNode;
-    /**
-     * Whether to decide the modal placement'
-     */
-    placement?: ModalRootProps['placement'];
-    /**
-     * Optional: ARIA label for dialog
-     */
-    'aria-label'?: string;
-    /**
-     * Optional: ARIA labelledby for dialog
-     */
-    'aria-labelledby'?: string;
-    /**
-     * Optional: ARIA describedby for dialog
-     */
-    'aria-describedby'?: string;
 }

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export * from './forms';
 export * from './overlays';
 export * from './primitive';
 export * from './navigation';
+export * from './providers';

package/dist/types/layouts/page-layout/index.d.ts

@@ -1 +1,2 @@
-export * from './page-layout';
+export { PageLayout } from './page-layout';
+export type * from './types';

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

@@ -1,2 +1,2 @@
-export * from './menu';
-export * from './types';
+export { Menu } from './menu';
+export type * from './types';

package/dist/types/primitive/description-list/description-list.atoms.d.ts

@@ -0,0 +1,13 @@
+import { DescriptionListItemProps, DescriptionListTermProps, DescriptionListDetailsProps } from './types';
+/**
+ * DescriptionList.Item atom
+ */
+export declare const DescriptionListItem: import('react').ForwardRefExoticComponent<DescriptionListItemProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * DescriptionList.Term atom
+ */
+export declare const DescriptionListTerm: import('react').ForwardRefExoticComponent<DescriptionListTermProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * DescriptionList.Details atom
+ */
+export declare const DescriptionListDetails: import('react').ForwardRefExoticComponent<DescriptionListDetailsProps & import('react').RefAttributes<HTMLElement>>;

package/dist/types/primitive/description-list/description-list.d.ts

@@ -0,0 +1,6 @@
+import { DescriptionListProps } from './types';
+export declare const DescriptionList: import('react').ForwardRefExoticComponent<DescriptionListProps & import('react').RefAttributes<HTMLDListElement>> & {
+    Item: import('react').ForwardRefExoticComponent<import('./types').DescriptionListItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    Term: import('react').ForwardRefExoticComponent<import('./types').DescriptionListTermProps & import('react').RefAttributes<HTMLElement>>;
+    Details: import('react').ForwardRefExoticComponent<import('./types').DescriptionListDetailsProps & import('react').RefAttributes<HTMLElement>>;
+};

package/dist/types/primitive/description-list/index.d.ts

@@ -0,0 +1,2 @@
+export { DescriptionList } from './description-list';
+export * from './types';

package/dist/types/primitive/description-list/types.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { TextProps } from '../text';
+/**
+ * Props for the DescriptionList root component
+ */
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /**
+     * Children should be DescriptionList.Item elements
+     */
+    children: ReactNode;
+}
+/**
+ * Props for DescriptionList.Item
+ */
+export interface DescriptionListItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children should be DescriptionList.Term and DescriptionList.Details
+     */
+    children: ReactNode;
+    /**
+     * Number of grid columns to span (default: 4)
+     */
+    span?: number;
+}
+/**
+ * Props for DescriptionList.Term
+ */
+export interface DescriptionListTermProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Term label (required, string only)
+     */
+    children: string;
+}
+/**
+ * Props for DescriptionList.Details
+ */
+export interface DescriptionListDetailsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Details value (required, string only)
+     */
+    children: string;
+    /**
+     * Text Color (default: 'black')
+     */
+    color?: TextProps['color'];
+}

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

@@ -13,3 +13,5 @@ export * from './snackbar';
 export * from './table';
 export * from './text';
 export * from './tile';
+export * from './description-list';
+export * from './image';

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

@@ -0,0 +1 @@
+export * from './snackbars-provider';

package/dist/types/providers/snackbars-provider/index.d.ts

@@ -0,0 +1,3 @@
+export { SnackbarsProvider } from './provider';
+export { useSnackbars } from './use-snackbars';
+export type * from './types';

package/dist/types/providers/snackbars-provider/provider.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { SnackbarsProviderProps } from './types';
+/**
+ * SnackbarsProvider manages a queue of snackbars and provides showSnack
+ * Placement: full width bottom for mobile, bottom left for desktop/tablet
+ */
+export declare const SnackbarsProvider: FC<SnackbarsProviderProps>;

package/dist/types/providers/snackbars-provider/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+/**
+ * SnackbarQueueItem: Represents a snackbar in the queue
+ */
+export interface SnackbarQueueItem {
+    /** Unique id for the snackbar */
+    id: string;
+    /** Message content */
+    message: ReactNode;
+    /** Color variant */
+    color?: 'success' | 'info' | 'warning' | 'danger';
+    /** Optional action element */
+    action?: ReactNode;
+    /** Optional duration in milliseconds */
+    duration?: number | null;
+}
+export type ShowSnackFunction = (color: SnackbarQueueItem['color'], message: ReactNode, options?: Partial<Omit<SnackbarQueueItem, 'id' | 'color' | 'message'>>) => void;
+/**
+ * SnackbarsContextValue: Context value for snackbars
+ */
+export interface SnackbarsContextValue {
+    /** Show a snackbar */
+    showSnack: ShowSnackFunction;
+}
+export interface SnackbarsProviderProps {
+    /** Children to render inside the provider */
+    children: ReactNode;
+}

package/dist/types/providers/snackbars-provider/use-snackbars-queue.d.ts

@@ -0,0 +1,9 @@
+import { ShowSnackFunction, SnackbarQueueItem } from './types';
+/**
+ * Custom hook to manage snackbar queue and auto-close logic
+ */
+export declare function useSnackbarsQueue(): {
+    queue: SnackbarQueueItem[];
+    showSnack: ShowSnackFunction;
+    removeSnack: (id: string) => void;
+};

package/dist/types/providers/snackbars-provider/use-snackbars.d.ts

@@ -0,0 +1,4 @@
+/**
+ * useSnackbars: Access the snackbars context and showSnack function
+ */
+export declare function useSnackbars(): import('./types').SnackbarsContextValue;