@dimasbaguspm/versaur 0.0.25 → 0.0.27

package/dist/types/layouts/badge-group/badge-group.d.ts

@@ -0,0 +1,27 @@
+import { BadgeGroupProps } from './types';
+/**
+ * BadgeGroup provides layout management for badges with control over
+ * positioning, alignment, and fluid behavior
+ *
+ * @example
+ * <BadgeGroup alignment="center" gap="sm">
+ *   <Badge variant="primary">Save</Badge>
+ *   <Badge variant="ghost">Cancel</Badge>
+ * </BadgeGroup>
+ *
+ * @example
+ * // Vertical badge group
+ * <BadgeGroup orientation="vertical" fluid>
+ *   <Badge variant="primary">Save</Badge>
+ *   <Badge variant="secondary">Save as Draft</Badge>
+ *   <Badge variant="ghost">Cancel</Badge>
+ * </BadgeGroup>
+ *
+ * @example
+ * // Fluid badges with space between
+ * <BadgeGroup alignment="between" fluid>
+ *   <Badge variant="ghost">Back</Badge>
+ *   <Badge variant="primary">Next</Badge>
+ * </BadgeGroup>
+ */
+export declare const BadgeGroup: import('react').ForwardRefExoticComponent<BadgeGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/badge-group/index.d.ts

@@ -0,0 +1,2 @@
+export { BadgeGroup } from './badge-group';
+export type { BadgeGroupProps } from './types';

package/dist/types/layouts/badge-group/types.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../utils/variants';
+import { badgeGroupVariants } from './helpers';
+/**
+ * Props for the BadgeGroup component
+ */
+export interface BadgeGroupProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeGroupVariants> {
+    /**
+     * Children (should be Badge components)
+     */
+    children: ReactNode;
+    /**
+     * Alignment of badges within the group
+     * @default 'start'
+     */
+    alignment?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /**
+     * Whether badges should be fluid (full width)
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Orientation of the badge group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Size of the gap between badges
+     * @default 'md'
+     */
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

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

@@ -1,5 +1,6 @@
 export * from './app-bar';
 export * from './bottom-bar';
+export * from './badge-group';
 export * from './button-group';
 export * from './page-content';
 export * from './page-header';

package/dist/types/overlays/drawer/drawer.atoms.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
-import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerOverlayProps, DrawerHeaderTabProps } from './types';
+import { DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerHeaderTabProps } from './types';
+import { ButtonIconProps, TextProps } from '../../primitive';
 /**
  * DrawerOverlay - Background overlay that appears behind the drawer
  * Always provides a dark blurred background to help users focus on the drawer content
  */
-export declare const DrawerOverlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * DrawerHeader - Header section of the drawer
  * Typically contains the title and close button
  */
 export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export declare const DrawerCloseButton: React.ForwardRefExoticComponent<Partial<ButtonIconProps> & React.RefAttributes<HTMLButtonElement>>;
 export declare const DrawerTab: React.ForwardRefExoticComponent<DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * DrawerBody - Main content area of the drawer

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

@@ -11,6 +11,8 @@ export declare const DrawerRoot: React.FC<DrawerProps>;
  */
 export declare const Drawer: React.FC<DrawerProps> & {
     Header: React.ForwardRefExoticComponent<import('./types').DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<import('../..').TextProps & React.RefAttributes<HTMLElement>>;
+    CloseButton: React.ForwardRefExoticComponent<Partial<import('../..').ButtonIconProps> & React.RefAttributes<HTMLButtonElement>>;
     Tab: React.ForwardRefExoticComponent<import('./types').DrawerHeaderTabProps & React.RefAttributes<HTMLDivElement>>;
     Body: React.ForwardRefExoticComponent<import('./types').DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<import('./types').DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -57,8 +57,6 @@ export interface DrawerProps extends ComponentPropsWithoutRef<'div'>, OverlayPor
     transitionType?: DrawerTransitionType;
     /** Children components */
     children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
 }
 /**
  * Props for the DrawerHeader component
@@ -78,8 +76,6 @@ export interface DrawerHeaderTabProps extends HTMLAttributes<HTMLDivElement> {
 export interface DrawerBodyProps extends ComponentPropsWithoutRef<'div'> {
     /** Children components */
     children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
 }
 /**
  * Props for the DrawerFooter component
@@ -87,19 +83,8 @@ export interface DrawerBodyProps extends ComponentPropsWithoutRef<'div'> {
 export interface DrawerFooterProps extends ComponentPropsWithoutRef<'div'> {
     /** Children components */
     children: ReactNode;
-    /** Additional CSS classes */
-    className?: string;
-    /**
-     * Enable responsive flex behavior
-     * When true (default): on small screens children expand (flex-grow), on larger screens children are right-aligned and sized to content
-     * When false: children behavior is not modified by responsive rules
-     */
-    responsiveFlex?: boolean;
 }
 /**
  * Props for the DrawerOverlay component
  */
-export interface DrawerOverlayProps extends ComponentPropsWithoutRef<'div'> {
-    /** Additional CSS classes */
-    className?: string;
-}
+export type DrawerOverlayProps = ComponentPropsWithoutRef<'div'>;

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

@@ -0,0 +1,24 @@
+import { CardProps } from './types';
+/**
+ * Card component - A clickable container component for displaying structured information
+ *
+ * Features:
+ * - All cards are clickable by default with hover effects
+ * - Structured layout with avatar, title, subtitle, badge, and supplementary info
+ * - Multiple color variants with soft backgrounds
+ * - Configurable padding sizes and shapes
+ * - Built with accessibility in mind
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   title="John Doe"
+ *   subtitle="Software Engineer"
+ *   avatar={<Avatar shape="rounded">JD</Avatar>}
+ *   badge={<BadgeGroup><Badge color="secondary">Available</Badge></BadgeGroup>}
+ *   supplementaryInfo="$2,847.32"
+ *   onClick={handleClick}
+ * />
+ * ```
+ */
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './types';

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './helpers';
+/**
+ * Props for the Card component
+ */
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>, VariantProps<typeof cardVariants> {
+    /**
+     * Size variant affecting padding
+     * @default 'md'
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Shape variant affecting border radius
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'square';
+    /**
+     * Avatar element to display on the left side
+     */
+    avatar?: ReactNode;
+    /**
+     * Main title text
+     */
+    title: ReactNode;
+    /**
+     * Subtitle or description text
+     */
+    subtitle?: ReactNode;
+    /**
+     * Badge element to display in the header area
+     */
+    badge?: ReactNode;
+    /**
+     * Supplementary information to display on the right side
+     * Usually used for amounts, status, or additional info
+     */
+    supplementaryInfo?: ReactNode;
+}

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

@@ -8,6 +8,7 @@ export * from './button-float';
 export * from './button-icon';
 export * from './calculator';
 export * from './calendar';
+export * from './card';
 export * from './icon';
 export * from './no-results';
 export * from './snackbar';

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

@@ -28,6 +28,7 @@ const symbolToSubpath = {
   "TextAreaInput": "forms",
   "TimePickerInput": "forms",
   "AppBar": "layouts",
+  "BadgeGroup": "layouts",
   "BottomBar": "layouts",
   "ButtonGroup": "layouts",
   "FormLayout": "layouts",
@@ -53,6 +54,7 @@ const symbolToSubpath = {
   "ButtonIcon": "primitive",
   "Calculator": "primitive",
   "Calendar": "primitive",
+  "Card": "primitive",
   "DescriptionList": "primitive",
   "Icon": "primitive",
   "ImageCircle": "primitive",

package/package.json

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

package/dist/js/text-CRsIInRA.js

@@ -1,127 +0,0 @@
-import { c as u, j as b, a as y } from "./index-DOdDlCoL.js";
-import { forwardRef as w } from "react";
-const j = u("", {
-  variants: {
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-ghost",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      inherit: "",
-      gray: "text-gray-500",
-      black: "text-black",
-      white: "text-white"
-    },
-    hasUnderline: {
-      true: "underline",
-      false: ""
-    },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-      justify: "text-justify"
-    },
-    italic: {
-      true: "italic",
-      false: ""
-    },
-    clamp: {
-      1: "line-clamp-1",
-      2: "line-clamp-2",
-      3: "line-clamp-3",
-      4: "line-clamp-4",
-      5: "line-clamp-5",
-      none: ""
-    },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
-    as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
-      p: "font-normal text-base leading-normal",
-      span: "font-normal text-base leading-normal",
-      label: "font-normal text-xs leading-normal"
-    }
-  },
-  defaultVariants: {
-    color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
-    align: "left",
-    italic: !1,
-    clamp: "none",
-    ellipsis: !1,
-    as: "span"
-  }
-}), v = w(
-  ({
-    as: e = "span",
-    color: l = "ghost",
-    hasUnderline: n = !1,
-    isCapitalize: s = !1,
-    align: i = "left",
-    italic: r = !1,
-    clamp: o = "none",
-    ellipsis: x = !1,
-    fontSize: t,
-    fontWeight: a,
-    className: c,
-    children: f,
-    ...d
-  }, m) => {
-    const g = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", h = t ? `text-${t}` : "", p = a ? `font-${a}` : "";
-    return /* @__PURE__ */ b.jsx(
-      e,
-      {
-        ref: m,
-        className: y(
-          j({
-            color: l,
-            hasUnderline: n,
-            isCapitalize: s,
-            align: i,
-            italic: r,
-            clamp: o,
-            ellipsis: x,
-            // @ts-expect-error - `as` is not a valid variant
-            as: g
-          }),
-          h,
-          p,
-          c
-        ),
-        ...d,
-        children: f
-      }
-    );
-  }
-);
-export {
-  v as T
-};