@dimasbaguspm/versaur 0.0.26 → 0.0.28

package/dist/types/forms/drawer-input/types.d.ts

@@ -13,6 +13,6 @@ export interface DrawerInputContextValue {
  * @property {(open: boolean) => void} onOpenChange - Callback for drawer open state change
  * @property {React.ReactNode} children - Drawer content
  */
-export interface DrawerInputProps extends Omit<TextInputProps, 'readOnly' | 'children'>, Pick<DrawerProps, 'size' | 'position'> {
+export interface DrawerInputProps extends Omit<TextInputProps, 'readOnly' | 'children'>, Pick<DrawerProps, 'size' | 'position' | 'disableEscapeKeyDown' | 'disableOverlayClickToClose'> {
     children: (ctx: DrawerInputContextValue) => ReactNode;
 }

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/filter-chip-group/filter-chip-group.d.ts

@@ -0,0 +1,27 @@
+import { FilterChipGroupProps } from './types';
+/**
+ * FilterChipGroup provides layout management for filter chips with control over
+ * positioning, alignment, and fluid behavior
+ *
+ * @example
+ * <FilterChipGroup alignment="center" gap="sm">
+ *   <FilterChip active>Category 1</FilterChip>
+ *   <FilterChip>Category 2</FilterChip>
+ * </FilterChipGroup>
+ *
+ * @example
+ * // Vertical filter chip group
+ * <FilterChipGroup orientation="vertical" fluid>
+ *   <FilterChip active>Category 1</FilterChip>
+ *   <FilterChip>Category 2</FilterChip>
+ *   <FilterChip>Category 3</FilterChip>
+ * </FilterChipGroup>
+ *
+ * @example
+ * // Fluid filter chips with space between
+ * <FilterChipGroup alignment="between" fluid>
+ *   <FilterChip>Clear All</FilterChip>
+ *   <FilterChip active>Apply</FilterChip>
+ * </FilterChipGroup>
+ */
+export declare const FilterChipGroup: import('react').ForwardRefExoticComponent<FilterChipGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/filter-chip-group/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterChipGroup } from './filter-chip-group';
+export type { FilterChipGroupProps } from './types';

package/dist/types/layouts/filter-chip-group/types.d.ts

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

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

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

package/dist/types/overlays/bottom-sheet/types.d.ts

@@ -12,6 +12,10 @@ export interface BottomSheetProps extends HTMLAttributes<HTMLDivElement>, Overla
      * Called when the backdrop is clicked (should close the sheet)
      */
     onClose: () => void;
+    /**
+     * Whether to disable overlay click to close
+     */
+    disableOverlayClickToClose?: boolean;
     /**
      * Content of the bottom sheet
      */

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

@@ -38,23 +38,15 @@ export interface DrawerContextValue {
     variant: DrawerVariant;
     /** Drawer transition type */
     transitionType: DrawerTransitionType;
+    /** Whether to disable overlay click to close */
+    disableOverlayClickToClose: boolean;
+    /** Whether to disable escape key down */
+    disableEscapeKeyDown: boolean;
 }
 /**
  * Props for the Drawer component (controlled component)
  */
-export interface DrawerProps extends ComponentPropsWithoutRef<'div'>, OverlayPortalProps {
-    /** Whether the drawer is open (required - controlled component) */
-    isOpen: boolean;
-    /** Callback when the drawer should close */
-    onClose: (open: boolean) => void;
-    /** Drawer position */
-    position?: DrawerPosition;
-    /** Drawer size */
-    size?: DrawerSize;
-    /** Drawer variant */
-    variant?: DrawerVariant;
-    /** Drawer transition type */
-    transitionType?: DrawerTransitionType;
+export interface DrawerProps extends ComponentPropsWithoutRef<'div'>, OverlayPortalProps, Partial<Omit<DrawerContextValue, 'isOpen' | 'onClose'>>, Pick<DrawerContextValue, 'isOpen' | 'onClose'> {
     /** Children components */
     children: ReactNode;
 }

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

@@ -6,17 +6,27 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'fit-content';
 export type ModalPlacement = 'top' | 'center';
 /**
- * Modal compound root
+ * Context for the Modal compound component
+ * Provides shared state and functions across all modal sub-components
  */
-export interface ModalRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, OverlayPortalProps {
+export interface ModalContextValue {
     /** Controls whether the modal is open */
     isOpen: boolean;
     /** Function to close the modal */
     onClose: () => void;
     /** Modal size variant */
-    size?: ModalSize;
+    size: ModalSize;
     /** Modal placement variant */
-    placement?: ModalPlacement;
+    placement: ModalPlacement;
+    /** Whether to disable overlay click to close */
+    disableOverlayClickToClose: boolean;
+    /** Whether to disable escape key down */
+    disableEscapeKeyDown: boolean;
+}
+/**
+ * Modal compound root
+ */
+export interface ModalRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, OverlayPortalProps, Partial<Omit<ModalContextValue, 'isOpen' | 'onClose'>>, Pick<ModalContextValue, 'isOpen' | 'onClose'> {
     /** Children (Modal compound parts) */
     children: ReactNode;
 }

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/filter-chip/filter-chip.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FilterChipProps } from './types';
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/primitive/filter-chip/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterChip } from './filter-chip';
+export type { FilterChipProps } from './types';

package/dist/types/primitive/filter-chip/types.d.ts

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * FilterChipProps defines the props for the FilterChip component
+ * @property variant - Visual style variant based on Versaur color system
+ * @property size - Size of the chip (sm, md, lg)
+ * @property disabled - Whether the chip is disabled
+ * @property onRemove - Callback when the remove icon is clicked
+ * @property label - The text content of the chip
+ */
+export interface FilterChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual style variant supporting Versaur color system
+     * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
+     * Semantic variants: success, info, warning, danger
+     * Each variant supports outline forms for flexible design expression
+     */
+    variant?: 'primary' | 'primary-outline' | 'secondary' | 'secondary-outline' | 'tertiary' | 'tertiary-outline' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'success' | 'success-outline' | 'info' | 'info-outline' | 'warning' | 'warning-outline' | 'danger' | 'danger-outline';
+    /**
+     * Size of the chip
+     * sm: 28px height, compact for dense layouts
+     * md: 32px height, standard for most use cases
+     * lg: 36px height, prominent for important filters
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the chip is disabled
+     * When true, the chip becomes non-interactive and visually dimmed
+     */
+    disabled?: boolean;
+    /**
+     * The text content of the chip
+     * This will be displayed as the main content
+     */
+    children: string;
+}

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

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

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

@@ -28,8 +28,10 @@ const symbolToSubpath = {
   "TextAreaInput": "forms",
   "TimePickerInput": "forms",
   "AppBar": "layouts",
+  "BadgeGroup": "layouts",
   "BottomBar": "layouts",
   "ButtonGroup": "layouts",
+  "FilterChipGroup": "layouts",
   "FormLayout": "layouts",
   "PageContent": "layouts",
   "PageHeader": "layouts",
@@ -53,7 +55,9 @@ const symbolToSubpath = {
   "ButtonIcon": "primitive",
   "Calculator": "primitive",
   "Calendar": "primitive",
+  "Card": "primitive",
   "DescriptionList": "primitive",
+  "FilterChip": "primitive",
   "Icon": "primitive",
   "ImageCircle": "primitive",
   "ImageSquare": "primitive",

package/package.json

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