@zvoove/unity-ui 2.48.0 → 2.49.0

package/dist/llms.txt

@@ -299,12 +299,12 @@ import { Typography } from '@zvoove/unity-ui';
   size="md"                    // 'sm' | 'md' | 'lg' (responsive — accepts breakpoint object). 'small' | 'medium' | 'large' are accepted but deprecated; will be removed in v3.0.0
   as="p"                       // 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   color="on-surface"           // ForegroundColors
-  textAlign="left"             // 'left' | 'center' | 'right'
+  textAlign="left"             // 'left' | 'center' | 'right' | { minimum: 'left', tablet: 'center' }
   textTransform="uppercase"    // 'uppercase' | 'lowercase' | 'capitalize'
-  truncate={2}                 // number - max lines before truncation
-  truncatedBy="word"           // 'word' | 'letter' (default: 'word')
-  hyphenate={true}             // boolean (default: true)
-  wrap={true}                  // boolean
+  truncate={2}                 // number | { minimum: 2, tablet: 3 }
+  truncatedBy="word"           // 'word' | 'letter' | { minimum: 'word', tablet: 'letter' }
+  hyphenate={true}             // boolean | { minimum: false, tablet: true }
+  wrap={true}                  // boolean | { minimum: true, tablet: false }
 >
   Text content
 </Typography>
@@ -398,6 +398,8 @@ import { Select } from '@zvoove/unity-ui';
   errorMessage="Required"      // string
   disabled={false}             // boolean
   hideLabel={false}            // boolean
+  placeholder="Select…"       // string — shown when no value is selected
+  required={false}             // boolean — prevents deselection in single-select
 />
 ```
 
@@ -406,6 +408,9 @@ Common patterns:
 // Searchable select — for long option lists
 <Select name="country" label="Country" searchable={true} options={countries} />
 
+// Required with placeholder — compact filter / toolbar
+<Select name="status" label="Status" hideLabel required placeholder="Status" options={statusOptions} />
+
 // Multi-select
 <Select
   name="tags"
@@ -475,8 +480,8 @@ import { Switch } from '@zvoove/unity-ui';
   checked={false}              // boolean
   onChange={handleChange}       // ChangeEventHandler<HTMLInputElement>
   label="Enable notifications" // string | { on: string; off: string }
-  labelPlacement="left"        // 'left' | 'right' (default: 'left')
-  justify="space-between"      // JustifyContent
+  labelPlacement="left"        // 'left' | 'right' | { minimum: 'left', tablet: 'right' }
+  justify="space-between"      // JustifyContent | { minimum: 'space-between', tablet: 'flex-start' }
   disabled={false}             // boolean
   withIcons={false}            // boolean | { on: IconName; off: IconName }
   name="notifications"         // string
@@ -709,7 +714,7 @@ import { Table } from '@zvoove/unity-ui';
 const columns = [
   { id: 'name', label: 'Name', orderable: true },
   { id: 'email', label: 'Email' },
-  { id: 'role', label: 'Role', align: 'right' as const },
+  { id: 'role', label: 'Role', align: { minimum: 'right', tablet: 'left' }, width: { tablet: '160px' } },
 ] as const;
 
 <Table
@@ -1311,20 +1316,32 @@ import { Snackbar, useSnackbar } from '@zvoove/unity-ui';
 <Snackbar />
 
 // In any component:
-const { addSnackbar } = useSnackbar();
+const { snackbar, update, dismiss, dismissAll } = useSnackbar();
 
-addSnackbar('Operation successful', {
+const id = snackbar('Operation successful', {
   variant: 'positive',          // 'default' | 'positive' | 'warning' | 'error' | 'subtle'
   placement: 'top-right',       // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
   icon: 'Check',                // CommonIconNames
   showCloseButton: true,        // boolean
-  actionLabel: 'Undo',          // string
-  onAction: handleUndo,         // (id: string) => void
+  hideIcon: false,              // boolean — hide the variant icon
+  actions: [                    // SnackbarAction[] — flexible Button actions
+    { label: 'Dismiss' },       //   secondary (auto variant per snackbar variant)
+    { label: 'Undo' },          //   primary (last = filled style)
+  ],
   onClose: handleClose,         // (id: string) => void
   duration: 5000,               // number (ms)
 });
 ```
 
+Action buttons render as real `<Button>` components. The last action defaults to
+the primary variant; preceding actions use the secondary variant. Each
+`SnackbarAction` accepts `{ label, onClick?, variant? }`.
+
+`update(id, message, options?)` updates a snackbar in-place. Ideal for selection
+bars or counters.
+
+> Legacy `actionLabel`/`onAction` still work but are deprecated.
+
 ### InfoBox
 Inline informational message.
 ```tsx