@dimasbaguspm/versaur 0.0.44 → 0.0.46

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

@@ -2,19 +2,17 @@ export * from './checkbox-input';
 export * from './chip-single-input';
 export * from './chip-multiple-input';
 export * from './date-single-picker-input';
+export * from './email-input';
+export * from './pin-field';
+export * from './price-input';
 export * from './radio-input';
+export * from './search-input';
 export * from './segment-single-input';
 export * from './segment-multiple-input';
-export * from './search-input';
 export * from './select-input';
+export * from './selectable-single-input';
+export * from './selectable-multiple-input';
+export * from './switch-input';
 export * from './text-input';
 export * from './textarea-input';
 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';
-export * from './modal-input';
-export * from './drawer-input';
-export * from './bottom-sheet-input';

package/dist/types/forms/pin-field/index.d.ts

@@ -0,0 +1,2 @@
+export { PinField } from './pin-field';
+export type { PinFieldProps } from './types';

package/dist/types/forms/pin-field/pin-field.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { PinFieldProps } from './types';
+/**
+ * PinField component for Versaur UI
+ *
+ * Provides a 6-digit PIN input field with automatic focus management
+ * Ensures only numeric input and follows accessibility best practices
+ */
+export declare const PinField: React.ForwardRefExoticComponent<PinFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/forms/pin-field/types.d.ts

@@ -0,0 +1,86 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the PinField component
+ */
+export interface PinFieldProps {
+    /**
+     * 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 form 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';
+    /**
+     * Label text to display above the pin field
+     */
+    label?: ReactNode;
+    /**
+     * Helper text to display below the pin field
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message for invalid state
+     */
+    error?: ReactNode;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Current value of the pin field (6 digits)
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled usage
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the pin value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when the pin field is completed (all 6 digits entered)
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether to automatically submit when complete
+     */
+    autoSubmit?: boolean;
+    /**
+     * Custom className for styling
+     */
+    className?: string;
+    /**
+     * ID for the pin field group
+     */
+    id?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Whether the pin field is required
+     */
+    required?: boolean;
+    /**
+     * Whether to show the pin values as dots/asterisks for security
+     */
+    secure?: boolean;
+}
+/**
+ * Props for individual pin input
+ */
+export interface PinInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+    onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    error?: boolean;
+    variant: PinFieldProps['variant'];
+    secure?: boolean;
+    inputRef: (el: HTMLInputElement | null) => void;
+    index: number;
+    id: string;
+}

package/dist/types/primitive/action-card/action-card.atoms.d.ts

@@ -0,0 +1,18 @@
+import { ActionCardGroupProps } from './types';
+/**
+ * ActionCard.Group - Container component for grouping multiple ActionCards
+ *
+ * Provides a clean container with proper spacing and borders for multiple ActionCards.
+ * ActionCards within a group are automatically spaced and can be configured with
+ * consistent sizing.
+ *
+ * @example
+ * ```tsx
+ * <ActionCard.Group>
+ *   <ActionCard icon={<WalletIcon />} title="Account Groups" badge={<Badge>Popular</Badge>} />
+ *   <ActionCard icon={<TagsIcon />} title="Category Groups" />
+ *   <ActionCard icon={<DatabaseIcon />} title="Backup & Restore" />
+ * </ActionCard.Group>
+ * ```
+ */
+export declare const ActionCardGroup: import('react').ForwardRefExoticComponent<ActionCardGroupProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+import { ActionCardProps } from './types';
+export declare const ActionCard: import('react').ForwardRefExoticComponent<ActionCardProps & import('react').RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+    Group: import('react').ForwardRefExoticComponent<import('./types').ActionCardGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,2 @@
+export { ActionCard } from './action-card';
+export type { ActionCardProps, ActionCardGroupProps } from './types';

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

@@ -0,0 +1,57 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { actionCardVariants } from './helpers';
+/**
+ * Props for the ActionCard component
+ */
+export interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'children'>, VariantProps<typeof actionCardVariants> {
+    /**
+     * Size variant affecting padding and spacing
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Icon element to display in the icon container
+     */
+    icon?: ReactNode;
+    /**
+     * Main title text
+     */
+    title: ReactNode;
+    /**
+     * Subtitle or description text
+     */
+    subtitle?: ReactNode;
+    /**
+     * Badge element to display next to the title
+     */
+    badge?: ReactNode;
+    /**
+     * Whether to show the chevron arrow
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Is the action card a button or a div?
+     * @default 'button'
+     */
+    as?: 'button' | 'div';
+}
+/**
+ * Props for the ActionCard Group container
+ */
+export interface ActionCardGroupProps {
+    /**
+     * ActionCard components to display as a group
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Size variant for all cards in the group
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+}

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

@@ -6,7 +6,7 @@ export interface BrandProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * The app name to display (predefined, default: 'spenicle')
      */
-    name: 'spenicle' | 'hub';
+    name: 'spenicle' | 'hub' | 'notunic';
     /**
      * The size of the brand icon and text
      * @default 'md'

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

@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './action-card';
 export * from './alert';
 export * from './anchor';
 export * from './attribute';
@@ -9,9 +10,7 @@ export * from './brand';
 export * from './button';
 export * from './button-menu';
 export * from './button-menu-icon';
-export * from './button-float';
 export * from './button-icon';
-export * from './calculator';
 export * from './card';
 export * from './filter-chip';
 export * from './heading';

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

@@ -7,14 +7,12 @@ const symbolToSubpath = {
   "LoadingIndicator": "feedbacks",
   "ProgressIndicator": "feedbacks",
   "Skeleton": "feedbacks",
-  "BottomSheetInput": "forms",
   "CheckboxInput": "forms",
   "ChipMultipleInput": "forms",
   "ChipSingleInput": "forms",
   "DateSinglePickerInput": "forms",
-  "DrawerInput": "forms",
   "EmailInput": "forms",
-  "ModalInput": "forms",
+  "PinField": "forms",
   "PriceInput": "forms",
   "RadioInput": "forms",
   "SearchInput": "forms",
@@ -47,6 +45,7 @@ const symbolToSubpath = {
   "Modal": "overlays",
   "Tooltip": "overlays",
   "Accordion": "primitive",
+  "ActionCard": "primitive",
   "Alert": "primitive",
   "Anchor": "primitive",
   "Attribute": "primitive",
@@ -55,11 +54,9 @@ const symbolToSubpath = {
   "Badge": "primitive",
   "Brand": "primitive",
   "Button": "primitive",
-  "ButtonFloat": "primitive",
   "ButtonIcon": "primitive",
   "ButtonMenu": "primitive",
   "ButtonMenuIcon": "primitive",
-  "Calculator": "primitive",
   "Card": "primitive",
   "FilterChip": "primitive",
   "Heading": "primitive",

package/package.json

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