@dimasbaguspm/versaur 0.0.39 → 0.0.41

package/dist/js/{use-snackbars-CKi6BQDT.js → use-snackbars-Cou8L41F.js}

@@ -6,10 +6,7 @@ const f = x(
 ), j = d(
   [
     "fixed z-100 flex flex-col gap-2 px-0 pb-2",
-    "w-[80vw] left-0 top-4",
-    // mobile: full width
-    "sm:w-auto sm:left-4 sm:bottom-4 sm:max-w-sm"
-    // desktop/tablet
+    "w-[80vw] left-0 top-4 md:w-auto md:left-4 md:top-auto md:bottom-4 md:max-w-sm"
   ].join(" ")
 ), T = d("", {
   variants: {
@@ -23,18 +20,18 @@ const f = x(
   }
 }), C = 4e3;
 function E() {
-  const [a, s] = p([]), t = k({}), n = m((e) => {
-    s((r) => r.filter((o) => o.id !== e)), t.current[e] && (clearTimeout(t.current[e]), delete t.current[e]);
+  const [a, o] = p([]), t = k({}), n = m((e) => {
+    o((r) => r.filter((s) => s.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) => [
+    (e, r, s) => {
+      const u = `${Date.now()}-${Math.random()}`, l = s?.duration ?? C;
+      o((b) => [
         ...b,
         {
           id: u,
           color: e,
           message: r,
-          ...o,
+          ...s,
           duration: l
         }
       ]), t.current[u] = setTimeout(() => {
@@ -48,7 +45,7 @@ function E() {
   }, []), { queue: a, showSnack: i, removeSnack: n };
 }
 const V = ({ children: a }) => {
-  const { queue: s, showSnack: t, removeSnack: n } = E(), i = v(() => ({ showSnack: t }), [t]);
+  const { queue: o, showSnack: t, removeSnack: n } = E(), i = v(() => ({ showSnack: t }), [t]);
   return /* @__PURE__ */ c.jsxs(f.Provider, { value: i, children: [
     a,
     /* @__PURE__ */ c.jsx(
@@ -57,7 +54,7 @@ const V = ({ children: a }) => {
         className: j(),
         "aria-live": "polite",
         "aria-atomic": "true",
-        children: s.map((e, r) => /* @__PURE__ */ c.jsx(
+        children: o.map((e, r) => /* @__PURE__ */ c.jsx(
           "div",
           {
             className: T({

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

@@ -6,6 +6,7 @@ export * from './filter-chip-group';
 export * from './page-content';
 export * from './page-header';
 export * from './page-layout';
+export * from './page-loader';
 export * from './form-layout';
 export * from './side-bar';
 export * from './top-bar';

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

@@ -0,0 +1,2 @@
+export { PageLoader } from './page-loader';
+export type { PageLoaderProps } from './types';

package/dist/types/layouts/page-loader/page-loader.d.ts

@@ -0,0 +1,11 @@
+import { PageLoaderProps } from './types';
+import * as React from 'react';
+/**
+ * PageLoader component that centers a loading indicator within a flex container
+ *
+ * This component wraps the LoadingIndicator with layout styling to center it
+ * within the available container space, making it ideal for full-page loading states.
+ *
+ * @group Layout
+ */
+export declare const PageLoader: React.ForwardRefExoticComponent<PageLoaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/page-loader/types.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+import { LoadingIndicatorProps } from '../../feedbacks/loading-indicator';
+/**
+ * PageLoaderProps defines the props for the PageLoader component
+ * Extends LoadingIndicatorProps to support all loading indicator configurations
+ * while adding layout-specific functionality
+ */
+export interface PageLoaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Type of loading indicator: spinner (default), bar
+     * Spinner is recommended for page loading states
+     */
+    type?: LoadingIndicatorProps['type'];
+    /**
+     * Size of the indicator: sm, md, lg
+     */
+    size?: LoadingIndicatorProps['size'];
+    /**
+     * Color variant based on Versaur color system
+     * Core: primary, secondary, tertiary, ghost, neutral
+     * Semantic: success, info, warning, danger
+     */
+    color?: LoadingIndicatorProps['color'];
+    /**
+     * Accessible label for screen readers
+     */
+    ariaLabel?: LoadingIndicatorProps['ariaLabel'];
+    /**
+     * Optional loading message to display below the indicator
+     */
+    message?: string;
+    /**
+     * Whether to use a minimal height (useful for inline loading states)
+     */
+    minimal?: boolean;
+}

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

@@ -11,7 +11,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
      * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
      * Semantic variants: success, info, warning, danger
      */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'accent_1' | 'accent_2' | 'accent_3';
     /**
      * Size of the avatar
      * xs: 24px, sm: 32px, md: 40px, lg: 48px, xl: 64px

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

@@ -32,7 +32,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      * Core colors: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
      * Semantic colors: success, info, warning, danger
      */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'accent_1' | 'accent_2' | 'accent_3';
     /**
      * Icon element to display on the left side of the badge
      * When no children are provided and an icon is present, badge automatically becomes icon-only

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

@@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * Semantic variants: success, info, warning, danger
      * Each variant supports outline and ghost forms for flexible design expression
      */
-    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
+    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'accent_1' | 'accent_1-outline' | 'accent_1-ghost' | 'accent_2' | 'accent_2-outline' | 'accent_2-ghost' | 'accent_3' | 'accent_3-outline' | 'accent_3-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
     /**
      * Size of the button
      * sm: 36px height, compact for space-constrained interfaces

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

@@ -1,5 +1,5 @@
 import { CardProps } from './types';
-export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLButtonElement>> & {
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     List: import('react').ForwardRefExoticComponent<import('./types').CardListProps & import('react').RefAttributes<HTMLUListElement>>;
     ListItem: import('react').ForwardRefExoticComponent<import('./types').CardListItemProps & import('react').RefAttributes<HTMLLIElement>>;
 };

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

@@ -9,7 +9,7 @@ export interface CardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      * Size variant affecting padding
      * @default 'md'
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /**
      * Shape variant affecting border radius
      * @default 'rounded'
@@ -45,6 +45,11 @@ export interface CardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      * @default false
      */
     bordered?: boolean;
+    /**
+     * Is the card a button or a div?
+     * @default 'button'
+     */
+    as?: 'button' | 'div';
 }
 export type CardListProps = {
     children: ReactNode;

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

@@ -36,6 +36,7 @@ const symbolToSubpath = {
   "PageContent": "layouts",
   "PageHeader": "layouts",
   "PageLayout": "layouts",
+  "PageLoader": "layouts",
   "SideBar": "layouts",
   "TopBar": "layouts",
   "Breadcrumbs": "navigation",

package/package.json

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