hazo_ui 2.7.0 → 2.7.2

package/README.md

@@ -174,6 +174,8 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiFlexRadio](#hazouiflexradio)** - A flexible radio button/icon selection component with support for single and multi-selection modes, customizable layouts, and react-icons integration. Perfect for settings panels, preference selection, and option groups.
 
+- **[HazoUiPillRadio](#hazouipillradio)** - Pill-shaped radio selection buttons with optional icons, customizable accent colors, size variants, and equal-width support. Ideal for action choices, status selection, and compact option groups.
+
 - **[HazoUiFlexInput](#hazouiflexinput)** - An enhanced input component with type validation, character restrictions, and error messaging. Supports numeric, alpha, email, and mixed input types with built-in validation and formatting guides.
 
 - **[HazoUiRte](#hazouirte)** - A comprehensive rich text editor for email template generation with variable insertion support, file attachments, and full formatting controls. Built on Tiptap with support for tables, lists, images, and multiple view modes (HTML, Plain Text, Raw HTML).
@@ -186,6 +188,31 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiConfirmDialog](#hazouiconfirmdialog)** - A compact, opinionated confirmation dialog with accent top border, variant system (destructive, warning, info, success), async loading support, and configurable buttons. Perfect for delete confirmations, unsaved changes warnings, and simple acknowledgments.
 
+### shadcn/ui Primitive Re-exports
+
+All shadcn/ui base components are re-exported from hazo_ui, so sibling hazo_* packages (and consumers) can import UI primitives from a single source without installing shadcn/ui separately:
+
+```tsx
+import { Button, Input, Label, Checkbox, Switch, Tabs, TabsList, TabsTrigger, TabsContent } from 'hazo_ui';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'hazo_ui';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'hazo_ui';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'hazo_ui';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from 'hazo_ui';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'hazo_ui';
+import { Popover, PopoverTrigger, PopoverContent } from 'hazo_ui';
+import { RadioGroup, RadioGroupItem } from 'hazo_ui';
+import { Calendar, Textarea } from 'hazo_ui';
+```
+
+### Animation Utilities
+
+Shared animation presets and resolver function are exported for use in custom dialog implementations:
+
+```tsx
+import { ANIMATION_PRESETS, resolve_animation_classes } from 'hazo_ui';
+import type { AnimationPreset } from 'hazo_ui';
+```
+
 ---
 
 ## HazoUiMultiFilterDialog
@@ -859,6 +886,122 @@ The component supports the following react-icons packages:
 
 ---
 
+## HazoUiPillRadio
+
+Pill-shaped radio selection buttons with optional icons, customizable accent colors per pill, size variants, and equal-width support. Ideal for action choices, status selection, and compact option groups.
+
+#### Features
+
+- **Pill Design**: Rounded-full pill buttons with border, selected state shows accent color tint
+- **Icon Support**: Integration with react-icons library (same icon sets as HazoUiFlexRadio)
+- **Custom Colors**: Each pill can have its own accent color for the selected state
+- **Size Variants**: Three sizes — `sm`, `md` (default), `lg`
+- **Layout Options**: Horizontal (default) or vertical arrangement
+- **Equal Width**: Optional `equal_width` prop makes all pills the same width
+- **Auto-fit Vertical**: Vertical layout auto-fits to the widest pill instead of stretching full-width
+- **Tooltips**: Hover tooltips with 1-second delay
+- **Accessible**: Uses `role="radiogroup"` and `role="radio"` with `aria-checked`
+
+#### Props
+
+```typescript
+interface HazoUiPillRadioItem {
+  label: string;       // Text displayed in the pill
+  value: string;       // Unique value identifier
+  icon?: string;       // react-icons icon name (e.g., "FaFolder")
+  color?: string;      // Accent color when selected (default: "#3b82f6" blue)
+}
+
+interface HazoUiPillRadioProps {
+  layout?: 'horizontal' | 'vertical';  // Layout direction (default: 'horizontal')
+  icon_set?: string;                    // Icon set package name (default: 'fa')
+  data: HazoUiPillRadioItem[];          // Array of pill options
+  value: string;                        // Controlled selected value
+  onChange: (value: string) => void;     // Change handler
+  className?: string;                   // Additional CSS classes
+  pill_size?: 'sm' | 'md' | 'lg';      // Pill size variant (default: 'md')
+  equal_width?: boolean;                // Make all pills equal width (default: false)
+}
+```
+
+#### Usage
+
+**Basic Horizontal Pills**
+
+```tsx
+import { HazoUiPillRadio, type HazoUiPillRadioItem } from 'hazo_ui';
+import { useState } from 'react';
+
+function ResponseSelector() {
+  const [selected, setSelected] = useState<string>('');
+
+  const options: HazoUiPillRadioItem[] = [
+    { value: 'upload', label: 'Upload corrected document', icon: 'FaFolder' },
+    { value: 'comment', label: 'Provide comment', icon: 'FaComment' },
+  ];
+
+  return (
+    <HazoUiPillRadio
+      data={options}
+      value={selected}
+      onChange={setSelected}
+    />
+  );
+}
+```
+
+**Vertical Layout**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  layout="vertical"
+/>
+```
+
+**Custom Colors per Pill**
+
+```tsx
+const priority_options: HazoUiPillRadioItem[] = [
+  { value: 'low', label: 'Low', icon: 'FaArrowDown', color: '#22c55e' },
+  { value: 'medium', label: 'Medium', icon: 'FaMinus', color: '#f59e0b' },
+  { value: 'high', label: 'High', icon: 'FaArrowUp', color: '#ef4444' },
+];
+
+<HazoUiPillRadio
+  data={priority_options}
+  value={selected}
+  onChange={setSelected}
+/>
+```
+
+**Equal Width Pills**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  equal_width
+/>
+```
+
+**Different Icon Set and Size**
+
+```tsx
+<HazoUiPillRadio
+  data={options}
+  value={selected}
+  onChange={setSelected}
+  icon_set="md"
+  pill_size="lg"
+/>
+```
+
+---
+
 ## HazoUiFlexInput
 
 An enhanced input component with type validation, character restrictions, and error messaging. Extends shadcn Input component with additional validation props for numeric, alpha, email, and mixed input types.
@@ -1962,7 +2105,7 @@ HazoUiDialog offers two approaches depending on your needs:
 - **9 Animation Presets**: Zoom, slide (bottom/top/left/right), fade, bounce, scale-up, and flip animations
 - **Header Bar Option**: Full-width colored header bar for modern modal designs
 - **Color Customization**: Override header, body, footer, border, and accent colors via props
-- **Themed Variants**: Pre-built themes for success, warning, danger, and info states
+- **Themed Variants**: Pre-built themes for success, warning, destructive, and info states
 - **Responsive Design**: Viewport-relative sizing with maximum constraints
 - **Controlled Component**: Fully controlled open/close state
 - **Callback Support**: Separate callbacks for confirm and cancel actions
@@ -2035,7 +2178,7 @@ interface HazoUiDialogProps {
   showCloseButton?: boolean;           // default: true
 }
 
-type DialogVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
+type DialogVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
 type AnimationPreset = 'zoom' | 'slide' | 'fade' | 'bounce' | 'scale-up' | 'flip' | 'slide-left' | 'slide-right' | 'slide-top' | 'none';
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
 ```
@@ -2577,9 +2720,9 @@ function ProgressDialog() {
 
 #### Themed Dialogs (Variant Prop)
 
-Use the `variant` prop to apply preset color themes with a single prop instead of specifying individual colors. Available variants: `info`, `success`, `warning`, `danger`.
+Use the `variant` prop to apply preset color themes with a single prop instead of specifying individual colors. Available variants: `info`, `success`, `warning`, `destructive`.
 
-Each variant auto-applies: header background tint, header text color, border color, accent color, tinted overlay, and (for `danger`) destructive button variant.
+Each variant auto-applies: header background tint, header text color, border color, accent color, tinted overlay, and (for `destructive`) destructive button variant.
 
 **Override chain:** Individual prop > Variant preset > Global config. You can use a variant and still override specific colors via props.
 
@@ -2595,7 +2738,7 @@ Each variant auto-applies: header background tint, header text color, border col
 </HazoUiDialog>
 
 // Danger variant (auto-sets destructive button)
-<HazoUiDialog variant="danger" title="⛔ Delete" actionButtonText="Delete Permanently" {...props}>
+<HazoUiDialog variant="destructive" title="⛔ Delete" actionButtonText="Delete Permanently" {...props}>
   <p>All data will be permanently deleted.</p>
 </HazoUiDialog>
 
@@ -2616,7 +2759,7 @@ By default (`splitHeader={true}`), variant dialogs render the title and descript
 </HazoUiDialog>
 
 // Merged header - single background, italic description
-<HazoUiDialog variant="danger" splitHeader={false} title="Delete" description="This is permanent." {...props}>
+<HazoUiDialog variant="destructive" splitHeader={false} title="Delete" description="This is permanent." {...props}>
   <p>One red header background with italic description text.</p>
 </HazoUiDialog>
 ```
@@ -2636,7 +2779,7 @@ By default (`splitHeader={true}`), variant dialogs render the title and descript
 </HazoUiDialog>
 
 // Danger variant with non-destructive button override
-<HazoUiDialog variant="danger" actionButtonVariant="default" title="Acknowledge" {...props}>
+<HazoUiDialog variant="destructive" actionButtonVariant="default" title="Acknowledge" {...props}>
   <p>Red colors from variant, default button from prop override.</p>
 </HazoUiDialog>
 ```