groovinads-ui 1.9.95 → 1.9.96

package/README.md

@@ -34,6 +34,7 @@ The library includes the following components:
 
 - [Labels](#labels):
   - [Alert](#alert): For displaying alerts.
+  - [Card](#card): For containing and grouping related content.
   - [EditableContent](#editablecontent): For inline editing of text content.
   - [Icon](#icon): For displaying icons.
   - [LoginSource](#loginsource): For show icons of login sources.
@@ -1037,6 +1038,48 @@ import { BlockIcon } from 'groovinads-ui';
 | `name`      | String | No       | n/a                                                                       | `font-awesome` | FontAwesome icon name.                |
 | `size`      | String | No       | `sm` `md` `lg`                                                            | `md`        | Size of the block icon container.        |
 
+### Card
+
+```jsx
+import React from 'react';
+import { Card } from 'groovinads-ui';
+
+const ExampleCard = () => (
+	<div>
+		<Card className='p-4' depth={1} size='md'>
+			<h3>Card Title</h3>
+			<p>This is a simple card component that can contain any content.</p>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={2} size='lg'>
+			<h4>User Profile</h4>
+			<p>Name: John Doe</p>
+			<p>Email: john@example.com</p>
+			<button className='btn btn-primary'>Edit Profile</button>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={0} size='sm'>
+			<h4>Small card without shadow</h4>
+			<p>This card has no shadow depth and is small size.</p>
+		</Card>
+
+		<Card className='mt-3 p-4' depth={3} size='full'>
+			<h4>Full width card</h4>
+			<p>This card takes the full width of its container.</p>
+		</Card>
+	</div>
+);
+
+export default ExampleCard;
+```
+
+| Property    | Type   | Required | Options                   | Default | Description                                                                              |
+| ----------- | ------ | -------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `children`  | Node   | No       | n/a                       | n/a     | Content to be displayed inside the card.                                                 |
+| `className` | String | No       | n/a                       | n/a     | Additional CSS class names that can be applied to the card.                              |
+| `depth`     | Number | No       | `0` `1` `2` `3` `4`       | `1`     | Shadow depth level. Adds `.shadow-{depth}` class. Use `0` for no shadow.                |
+| `size`      | String | No       | `sm` `md` `lg` `full`     | `md`    | Card size. Adds `.card-{size}` class. Use `md` for default size (no additional class).  |
+
 ### EditableContent
 
 ```jsx

package/index.d.ts

@@ -22,6 +22,19 @@ export interface ButtonProps {
 
 export const Button: React.FC<ButtonProps>;
 
+// ============================================================================
+// CARD COMPONENTS
+// ============================================================================
+
+export interface CardProps {
+  children?: ReactNode;
+  className?: string;
+  depth?: 0 | 1 | 2 | 3 | 4;
+  size?: 'sm' | 'md' | 'lg' | 'full';
+}
+
+export const Card: React.FC<CardProps>;
+
 // ============================================================================
 // DROPDOWN COMPONENTS
 // ============================================================================
@@ -53,76 +66,100 @@ export interface DropdownComponentProps {
 export const DropdownComponent: React.FC<DropdownComponentProps>;
 
 export interface DropdownFilterProps {
-  align?: 'start' | 'end';
-  autoClose?: boolean | 'inside' | 'outside';
+  autoClose?: boolean | 'outside';
   className?: string;
-  data: Array<{ id: string | number; name: string; [key: string]: any }>;
   disabled?: boolean;
-  dropDirection?: 'up' | 'down' | 'start' | 'end';
-  fullWidth?: boolean;
-  iconName?: string;
-  label: string;
-  maxHeight?: string;
-  onFilter: (selectedItems: any[]) => void;
-  search?: boolean;
-  selectedItems?: Array<{ id: string | number; name: string; [key: string]: any }>;
+  locked?: boolean;
+  menuType?: 'simple' | 'selection';
+  onRemoveFilter?: () => void;
+  onToggle?: (show: boolean) => void;
+  overflow?: boolean;
+  requiredText?: string;
+  searchLabel?: string;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  setValuesSelected?: Dispatch<SetStateAction<any[]>>;
+  show?: boolean;
+  showError?: boolean;
+  title?: string;
+  values?: any[];
+  valuesSelected?: any[];
 }
 
 export const DropdownFilter: React.FC<DropdownFilterProps>;
 
 export interface DropdownMultiSelectProps {
-  align?: 'start' | 'end';
-  autoClose?: boolean | 'inside' | 'outside';
+  autoClose?: boolean | string;
+  buttonVariant?: 'input' | 'primary' | 'secondary' | 'terciary' | 'outline';
   className?: string;
-  data: Array<{ id: string | number; name: string; [key: string]: any }>;
+  customKey?: string;
   disabled?: boolean;
-  dropDirection?: 'up' | 'down' | 'start' | 'end';
-  fullWidth?: boolean;
-  iconName?: string;
-  label: string;
-  maxHeight?: string;
-  onChange: (selectedItems: any[]) => void;
-  search?: boolean;
-  selectedItems?: Array<{ id: string | number; name: string; [key: string]: any }>;
+  drop?: 'up' | 'down';
+  focus?: boolean;
+  hasId?: boolean;
+  idInPill?: boolean;
+  idKey?: string;
+  label?: string;
+  nameKey?: string;
+  notMatchedText?: string;
+  nowrap?: boolean;
+  object?: boolean;
+  onToggle?: (show: boolean) => void;
+  overflow?: boolean;
+  requiredText?: string;
+  searchLabel?: string;
+  setValuesSelected?: Dispatch<SetStateAction<any[]>>;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+  showError?: boolean;
+  showStatus?: string;
   size?: 'sm' | 'md' | 'lg';
+  values?: any[];
+  valuesSelected?: any[];
 }
 
 export const DropdownMultiSelect: React.FC<DropdownMultiSelectProps>;
 
 export interface DropdownDatePickerProps {
-  align?: 'start' | 'end';
   className?: string;
-  defaultSelected?: string;
+  dateFrom?: string;
+  dateTo?: string;
   disabled?: boolean;
-  dropDirection?: 'up' | 'down' | 'start' | 'end';
-  fullWidth?: boolean;
-  iconName?: string;
   label?: string;
+  locked?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  onDateChange: (date: Date | null) => void;
-  selectedDate?: Date | null;
+  onRemoveFilter?: () => void;
+  onToggle?: (show: boolean) => void;
+  overflow?: boolean;
+  requiredText?: string;
+  setDateFrom?: Dispatch<SetStateAction<string>>;
+  setDateTo?: Dispatch<SetStateAction<string>>;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+  showError?: boolean;
   size?: 'sm' | 'md' | 'lg';
+  variant?: 'input' | 'filter';
 }
 
 export const DropdownDatePicker: React.FC<DropdownDatePickerProps>;
 
 export interface DropdownSimpleDatePickerProps {
-  align?: 'start' | 'end';
   className?: string;
-  dateFormat?: string;
+  clearDate?: () => void;
+  date?: string;
   disabled?: boolean;
-  dropDirection?: 'up' | 'down' | 'start' | 'end';
-  endDate?: Date | null;
-  fullWidth?: boolean;
-  iconName?: string;
+  handleClear?: () => void;
   label?: string;
-  maxDate?: Date;
-  minDate?: Date;
-  onChange: (dates: [Date | null, Date | null]) => void;
-  selectsRange?: boolean;
+  maxDate?: string | Date;
+  minDate?: string | Date;
+  onToggle?: (show: boolean) => void;
+  overflow?: boolean;
+  requiredText?: string;
+  setDate?: Dispatch<SetStateAction<string>>;
+  setShow?: Dispatch<SetStateAction<boolean>>;
+  show?: boolean;
+  showError?: boolean;
   size?: 'sm' | 'md' | 'lg';
-  startDate?: Date | null;
 }
 
 export const DropdownSimpleDatePicker: React.FC<DropdownSimpleDatePickerProps>;
@@ -132,14 +169,13 @@ export const DropdownSimpleDatePicker: React.FC<DropdownSimpleDatePickerProps>;
 // ============================================================================
 
 export interface CheckboxProps {
-  checked?: boolean;
   className?: string;
   disabled?: boolean;
   id?: string;
-  label?: string;
   name?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  required?: boolean;
+  setStatus?: Dispatch<SetStateAction<boolean>>;
+  size?: 'sm' | 'md' | 'lg';
+  status?: boolean;
 }
 
 export const Checkbox: React.FC<CheckboxProps>;
@@ -170,44 +206,42 @@ export interface InputProps {
 export const Input: React.FC<InputProps>;
 
 export interface RadioProps {
-  checked?: boolean;
   className?: string;
   disabled?: boolean;
+  fullWidth?: boolean;
   id?: string;
-  label?: string;
   name?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  required?: boolean;
-  value?: string | number;
+  setStatus?: Dispatch<SetStateAction<boolean>>;
+  size?: 'sm' | 'md' | 'lg';
+  status?: boolean;
 }
 
 export const Radio: React.FC<RadioProps>;
 
 export interface SwitchProps {
-  checked?: boolean;
   className?: string;
   disabled?: boolean;
+  icon?: boolean;
   id?: string;
-  label?: string;
   name?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  setStatus?: Dispatch<SetStateAction<number | boolean>>;
+  status?: number | boolean;
+  size?: 'sm' | 'md' | 'lg';
+  switchPosition?: 'start' | 'end';
 }
 
 export const Switch: React.FC<SwitchProps>;
 
 export interface TextareaProps {
-  autoFocus?: boolean;
   className?: string;
   disabled?: boolean;
   helpText?: string;
   label?: string;
-  maxLength?: number;
   name?: string;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-  placeholder?: string;
   requiredText?: string;
-  rows?: number;
   showError?: boolean;
+  setShowError?: Dispatch<SetStateAction<boolean>>;
   size?: 'sm' | 'md' | 'lg';
   value?: string;
 }
@@ -215,15 +249,14 @@ export interface TextareaProps {
 export const Textarea: React.FC<TextareaProps>;
 
 export interface InputEmailProps {
-  className?: string;
+  apiGetEmail: string;
+  apiPostEmail: string;
   disabled?: boolean;
-  helpText?: string;
   label?: string;
-  name?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  required?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  value?: string;
+  showModal?: boolean;
+  textButton?: string;
+  textError?: string;
+  titleList?: string;
 }
 
 export const InputEmail: React.FC<InputEmailProps>;
@@ -271,13 +304,13 @@ export const Slider: React.FC<SliderProps>;
 // ============================================================================
 
 export interface AlertProps {
-  children?: ReactNode;
+  animation?: boolean;
+  children: ReactNode;
   className?: string;
-  dismissible?: boolean;
-  icon?: string;
+  icon?: boolean;
   onClose?: () => void;
-  show?: boolean;
-  style?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+  size?: 'sm' | 'md' | 'lg';
+  type: 'warning' | 'danger' | 'success' | 'info';
 }
 
 export const Alert: React.FC<AlertProps>;
@@ -313,7 +346,7 @@ export const Icon: React.FC<IconProps>;
 
 export interface LoginSourceProps {
   className?: string;
-  source: string;
+  logo?: 'groovinads' | 'google' | 'microsoft' | 'linkedin' | 'slack';
 }
 
 export const LoginSource: React.FC<LoginSourceProps>;
@@ -331,8 +364,7 @@ export const PillComponent: React.FC<PillComponentProps>;
 
 export interface SpinnerProps {
   className?: string;
-  scale?: number;
-  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+  scale?: 0.7 | 1 | 2 | 3 | 4;
 }
 
 export const Spinner: React.FC<SpinnerProps>;
@@ -351,10 +383,9 @@ export interface ProgressBarProps {
 export const ProgressBar: React.FC<ProgressBarProps>;
 
 export interface StatusIconProps {
+  animated?: boolean;
   className?: string;
-  icon?: string;
-  label?: string;
-  status: 'success' | 'warning' | 'danger' | 'info' | 'disabled';
+  status: number;
 }
 
 export const StatusIcon: React.FC<StatusIconProps>;
@@ -364,30 +395,21 @@ export const StatusIcon: React.FC<StatusIconProps>;
 // ============================================================================
 
 export interface ToastComponentProps {
-  autohide?: boolean;
   className?: string;
-  delay?: number;
-  icon?: string;
-  message: string;
-  onClose?: () => void;
-  show?: boolean;
-  style?: 'success' | 'danger' | 'warning' | 'info';
-  title?: string;
+  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  toast?: object;
 }
 
 export const ToastComponent: React.FC<ToastComponentProps>;
 
 export interface ToastProgressProps {
-  autohide?: boolean;
+  cancelButton?: boolean;
   className?: string;
-  delay?: number;
-  icon?: string;
-  message: string;
-  onClose?: () => void;
-  progress?: number;
-  show?: boolean;
-  style?: 'success' | 'danger' | 'warning' | 'info';
-  title?: string;
+  currentProgress?: number;
+  onCancel?: () => void;
+  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  status?: 'in-progress' | 'error';
+  variant: 'upload' | 'processing';
 }
 
 export const ToastProgress: React.FC<ToastProgressProps>;
@@ -439,18 +461,22 @@ export interface AsideProps {
 export const Aside: React.FC<AsideProps>;
 
 export interface StepperProps {
-  activeStep?: number;
   className?: string;
-  steps: Array<{ label: string; [key: string]: any }>;
+  current: number;
+  list: any[];
+  orientation?: 'horizontal' | 'vertical';
 }
 
 export const Stepper: React.FC<StepperProps>;
 
 export interface TabnavProps {
-  activeTab?: string | number;
+  activeTab?: number;
   className?: string;
-  onTabChange?: (tabId: string | number) => void;
-  tabs: Array<{ id: string | number; label: string; content?: ReactNode; [key: string]: any }>;
+  disabledTabs?: number[];
+  navigateTab?: boolean;
+  onNavigate?: (tab: number) => void;
+  setActiveTab?: Dispatch<SetStateAction<number>>;
+  tabs: any[];
 }
 
 export const Tabnav: React.FC<TabnavProps>;
@@ -472,11 +498,22 @@ export interface PaginationProps {
 export const Pagination: React.FC<PaginationProps>;
 
 export interface SidebarProps {
-  children?: ReactNode;
-  className?: string;
-  header?: ReactNode;
+  api?: string;
+  clientLogoUrl?: string;
+  clientNotFoundTitle?: string;
+  clientNotFoundText?: string;
+  clientSearchLabel?: string;
+  customLinks: any[];
+  customUrl?: string;
+  defaultOpened?: boolean;
+  inModal?: boolean;
+  onNavigate: (path: string) => void;
+  pendingType?: 'warning' | 'badge';
+  selectedClient?: object;
+  setGroovinProfile?: Dispatch<SetStateAction<any>>;
   setShow?: Dispatch<SetStateAction<boolean>>;
   show?: boolean;
+  showClients?: true | false | 'single';
 }
 
 export const Sidebar: React.FC<SidebarProps>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "groovinads-ui",
   "description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-  "version": "1.9.95",
+  "version": "1.9.96",
   "type": "module",
   "keywords": [
     "css",