<p><a target="_blank" href="https://app.eraser.io/workspace/zznMZKW2bQwnN4EatpJw" id="edit-in-eraser-github-link"><img alt="Edit in Eraser" src="https://firebasestorage.googleapis.com/v0/b/second-petal-295822.appspot.com/o/images%2Fgithub%2FOpen%20in%20Eraser.svg?alt=media&token=968381c8-a7e7-472a-8ed6-4a6626da5501"></a></p>

# Smart UI `v0.3.15`

A React component library built for PT Praisindo Teknologi — covering inputs, navigation, feedback, layout, and data display, all aligned to a unified design system.

---

## Installation

```bash
npm install ds-smart-ui
```

Import the stylesheet once at your app's entry point:

```js
import "ds-smart-ui/dist/style.css";
```

---

## Usage

```tsx
import { Button } from "ds-smart-ui";

export default function App() {
  return (
    <Button variant="contained" color="primary">
      Click me
    </Button>
  );
}
```

---

## Icons

We recommend [Lucide Icons](https://lucide.dev) as the icon library:

```bash
npm install lucide-react
```

```tsx
import { IconButton } from "ds-smart-ui";
import { X } from "lucide-react";

<IconButton iconStart={<X />} onClick={() => {}} />
```

---

## Changelog

### v0.3.15 — 18 May 2026

- **feat**: add `useLabelOnChip` support for dynamic chip labeling and fix `DataTable` selection column alignment

---

### v0.3.14 — 13 May 2026

**Optimizations**
- **DatePicker / DateRangePicker** — optimized UI compactness by reducing day cell sizes to `34px`, internal padding to `12px`, and header font sizes to `12px` (*md*).
- **DatePicker / DateRangePicker** — unified header styles including chevron sizes (16px) and element spacing (4px) across both components for a consistent visual experience.

**Fixes**
- **DatePicker** — resolved dropdown width issue where it previously stretched to match the full width of the input field. The dropdown now maintains its compact, content-based width.
- **DateRangePicker** — updated minimum width constraints for all modes (single/double calendar, with/without presets) to align with the new compact design system.

---

### v0.3.13 — 13 May 2026

**Fixes**
- **DatePicker / DateRangePicker** — implemented robust viewport constraint logic in `updatePosition` to prevent the dropdown from being cut off on smaller screens (e.g. 1366x768). The picker now intelligently shifts or pins itself to the viewport edges if space is insufficient.
- **DateRangePicker** — migrated to portal-based rendering using `ReactDOM.createPortal` and `fixed` positioning to resolve clipping issues in containers with `overflow: hidden`.
- **DateRangePicker** — fixed a syntax error where the internal calendar wrapper `div` was missing, causing TypeScript errors.

**Optimizations**
- **DatePicker / DateRangePicker** — reduced default cell size from `40px` to `36px` and internal padding from `16px` to `12px` for a more compact and professional UI, aligned with industry-standard date picker libraries.
- **DateRangePicker** — reduced the width of the quick-select presets panel to `160px` to save horizontal space.

### v0.3.12 — 11 May 2026

**New Features**
- **DataTable** — added `dropdownAnchorOrigin` and `dropdownTransformOrigin` props to allow custom positioning of the action menu.
- **DataTable** — implemented conditional tooltips for action buttons via `enableDetailTooltip` and `enableMenuTooltip` props (hidden by default).
- **DateRangePicker** — added `minDate`, `maxDate`, and icon props to Storybook documentation.

**Changes**
- **DataTable** — default action menu position is now below the trigger button.
- **DateRangePicker** — changed "Cancel" button to "Reset". Clicking "Reset" now clears the selection without closing the picker; closing is handled via overlay click.

### v0.3.11 — 4 May 2026

**Fixes**
- **DatePicker / Autocomplete** — implemented portal-based rendering using `ReactDOM.createPortal` to resolve UI clipping issues when used inside scrollable containers or Dialogs.
- **DatePicker** — implemented dynamic, viewport-relative positioning with `useLayoutEffect` and `fixed` coordinates to ensure accurate placement during window scrolling and resizing.

**New Features**
- **DatePicker** — added strict range validation: navigation buttons and month/year selection are now automatically disabled when outside `minDate` and `maxDate` constraints.

### v0.3.10 — 27 April 2026

**Fixes**
- **Build / Dependencies** — resolved `eval` security warning in `lottie-web` by aliasing it to its light version (`lottie_light.js`) in the build configuration.

**Optimizations**
- **Bundle Size** — reduced library bundle size by ~400kB by switching to the expression-free light version of Lottie player.

### v0.3.9 — 16 April 2026
- **DataTable** — redesigned empty state with a centered layout, utilizing a new custom folder icon (`material-outline:folder`) and customizable title/description.
- **DataTable** — implemented grouped property structures:
    - `emptyState` — groups `title`, `description`, and `icon` for better organization and API clarity.
    - `retryButtonProps` — groups `color`, `rounded`, `size`, and `variant` to customize the retry and hard refresh buttons.
- **DataTable** — added dedicated Storybook stories to demonstrate various empty state configurations and retry button customizations.

**Refactor**
- **DataTable / EmptyOrRetryState** — migrated from individual props (`emptyTitle`, `emptyDescription`, etc.) to organized grouped props.
- **EmptyOrRetryState** — resolved import sorting lint issues by ordering based on path depth.

### v0.3.8 — 14 April 2026

**New**
- **DataTable** — refined pagination layout: moved info text ("1 - 10 Of 100") to the left combined with the rows-per-page selector for a more compact and grouped UI.
- **Button / IconButton** — fully implemented and documented `soft-outlined` variant for all color themes.
- **DataTable** — updated rows-per-page selector with `8px` border-radius and `30px` height to align perfectly with `sm` pagination buttons.

**Changes**
- **Button / IconButton** — refined `soft-dark` variant with a higher-contrast `dark-200` background for better visibility.
- **Button / IconButton** — updated `soft-outlined--light` variant to use `light-900` text for improved readability.
- **DataTable** — customized `Select` focus states to use theme primary colors instead of default browser blue.

**Fixes**
- **DialogAction** — resolved "double-blink" animation issue on close and standardized button styles to use the `soft` variant.

---

## 📦 v0.3.7 — 6 April 2026

**New**
- **Dialog** — added per-button color props: `colorConfirmButton`, `colorCloseButton`, `colorResetButton` to override the global `color` prop per button.
- **Dialog** — added per-button variant props: `variantConfirmButton`, `variantCloseButton`, `variantResetButton` (properly documented in Storybook with `ButtonVariants` story).

**Changes**
- **DialogCheck** — simplified rounded: removed individual `roundedConfirmButton` / `roundedCloseButton`, replaced with single `roundedButton` prop that applies to all buttons. Default remains `"full"`.

---

### v0.3.6 — 6 April 2026

**New**
- **AdvancedToolbar** — date and date-range filter chips now auto-format ISO strings to a readable date (e.g. `31 Mar 2026`) instead of showing the raw ISO value.
- **AdvancedToolbar** — added `dateChipFormatter` and `dateRangeChipFormatter` props on `AdvancedField` for custom chip label formatting.
- **Utils** — added `formatDateYMD(date)` and `formatDateDisplay(date, locale?, month?)` helper functions, exported from the library root.

**Fixes**
- **Dialog** — removed `e.stopPropagation()` from the dialog container's `onMouseDown` handler, which was blocking `DatePicker` / `DateRangePicker` click-outside detection when opened inside a Dialog.

---

### v0.3.5 — 30 March 2026

**New**
- **DataTable** — added `paginationRounded` prop (`"none" | "sm" | "md" | "lg" | "full"`, default `"full"`) to control the border radius of all pagination icon buttons (page numbers, first, prev, next, last).
- **UploadZone** — added `helperIcon` prop (`ReactNode`) to display an optional icon to the left of `helperText`. Icon color inherits from the helper text — `dark-600` normally, `danger-500` in error state.

**Fixes**
- **UploadZone** — fixed helper text color not applying `danger-500` in error state due to CSS cascade order; resolved using a higher-specificity combined selector.

---


### v0.3.4 — 16 March 2026

**Fixes**
- **ButtonGroup** — fixed visual inconsistency when an item is both active (selected) and disabled. Item now displays a muted primary style (primary-50 background, primary-200 border, primary-300 icon, primary-400 label, 0.55 opacity) with `cursor: not-allowed`, clearly distinguishing it from a non-selected disabled item.

---

### v0.3.3 — 5 March 2026

**New**
- **AdvancedToolbar** — added `slotLeft` prop in Row 2 to replace `PendingStatusSelect` with any custom component (e.g. `DateRangePicker`). When `slotLeft` is provided, `rowStatusOptions` is hidden.
- **DateRangePicker** — added `customPresets` prop (`PresetRange[] | null`) to override the default quick-select preset list. Added Storybook story and Controls documentation for `customPresets`.

**Fixes**
- **DateRangePicker** — fixed double-calendar showing the same month on both panels after selecting a preset (e.g. "Today") and reopening the picker. `nextMonth` is now explicitly synced inside `handleToggle` to bypass React 18 batching.

---

### v0.3.2 — 3 March 2026

**New**
- **Divider** — horizontal and vertical content separator, matching Material UI's Divider API (`orientation`, `variant`, `textAlign`, `flexItem`, `children`, `component`).

**Accessibility**
- **HelperText** — wrapper `div` with stable `id`, `role="alert"` on error, `aria-live="polite"` on normal state, `aria-atomic="true"`.
- **TextField / Select / Checkbox / Radio / NumberField** — added `aria-invalid`, `aria-required`, and `aria-describedby` pointing to the helper text element.
- **Checkbox** — fixed `aria-label` to only apply when no visible label is present.
- **Select** — added `aria-hidden="true"` to the chevron icon.
- **TabButton** — added `aria-selected`.
- **Tabs** — added `role="tablist"`, `role="tab"`, `aria-selected`, roving `tabIndex`, and keyboard navigation (Arrow keys, Home, End).
- **DropdownMenu** — added `aria-haspopup`, `aria-expanded`, and `aria-controls` to trigger buttons.
- **Button / IconButton** — added `aria-busy` when `isLoading` is active.
- **Alert** — added `role="alert"`, `aria-live="assertive"`, `aria-atomic="true"`, and `aria-label` on the close button.
- **Badge** — exposed `aria-label` prop for descriptive count labeling.

---

### v0.3.1 — 26 February 2026

**New**
- **DialogAction** — added status icons (success, danger, warning, info).
- **NumberField** — added `showRequired` prop to display asterisk independently from HTML `required`.
- **ButtonGroup** — added `variant="tab"` with horizontal scroll support.

**Refactor**
- **Box** — now accepts direct CSS property props (`width`, `height`, `display`, etc.) for MUI-like inline styling.

---

### v0.3.0 — 24 February 2026

**New**
- **Dialog / DialogAction / DialogCheck** — added `rounded` prop for custom border radius.
- **DataTable** — added custom drag handle for column reordering.
- **Button** — added `soft-outlined` variant.

**Fixes**
- **ButtonGroup** — text color consistency update.
- **Tabs** — set Scrollable direction to horizontal.

---

### v0.2.111 — 20 February 2026

**New**
- **Box** — MUI-like Box with `component` prop and event handler passthrough.
- **Grid** — 12-column responsive grid with breakpoints (xs → xl) and spacing tokens.
- **Stack** — flexbox layout with spacing, divider, and alignment support.
- **Container** — centering wrapper with max-width presets and gutter control.
- **Skeleton** — loading placeholder with `pulse` / `wave` animations.
- **Select2** — debounced search input (configurable delay).
- **TextArea** — optional character counter via `showCharacterCount`.
- **DialogCheck** — per-button `variant`, `color`, and `rounded` props.

**Fixes**
- **DataTable** — fixed `enablePagination` prop being ignored; removed prop validation for better MRT passthrough.

---

### v0.2.110 — 12 February 2026

**New**
- **DataTable** — table footer with pagination and column pinning support.
- **Select2** — pagination, infinite scroll, edit mode, and API-based search.

---

### v0.2.108 — 11 February 2026

**New**
- **validateProps** utility — type, range, pattern, and custom validator support (dev-only warnings).
- **Card** — added `xl` border-radius option.
- **ButtonGroup** — padding and label font size adjustments.

---

### v0.2.107 — 10 February 2026

**New**
- **UploadZone** — drag-and-drop file upload with progress bar and cancel support.
- **ButtonGroup** — initial component release.
- **DialogAction** — added `children` slot for custom content.

---

### v0.2.106 — 26 January 2026

**New**
- **Drawer** — slide-in navigation drawer with full Storybook coverage.
- **CardTabs / TabButton** — visual "pressed" state and enhanced active styles.
- Upgraded Storybook to v10.2.0.

---

### v0.2.102 — 16 December 2025

**New**
- **ThemeProvider** — runtime theming for 6 color types with auto-generated palettes (10 shades each).
- **generateColorPalette()** utility for single-color palette generation.

---

### v0.2.101 — 2 December 2025

**New**
- Separated `required` (HTML validation) and `showRequired` (asterisk display) across all input components: `TextField`, `Select`, `Select2`, `Radio`, `Checkbox`, `Textarea`, `DatePicker`, `DateRangePicker`.

---

### v0.2.92 — 18 November 2025

**New**
- **Wizard** — sticky header, scroll spy, multi-action steps, and `WizardSection` helper.

---

### v0.2.91 — 23 October 2025

**New**
- Smooth closing animations (fadeOut + slideDown) for `Dialog`, `DialogAction`, and `DialogCheck`.

---

### v0.2.85 — 15 October 2025

**New**
- **DatePicker** and **DateRangePicker** — localization, double-calendar mode, quick presets, min/max validation, and 8 color variants.

---

### v0.2.65 — 2 September 2025

**New**
- **SmartDatePicker** — single/range date picker integrated with the Smart UI input system.
- **AdvancedToolbar** — active status switch, debounce search, number/date range filters.

---

### v0.2.63 — 13 August 2025

**Refactor**
- **DataTable** — modular rebuild: `ActionDropdown`, `InlineActions`, `RowActions`, `EmptyState`, `DataTablePagination`, and separated hooks (`useTableColumns`, `useTableDefaults`).

---

### v0.2.43 — 7 June 2025

**New**
- **HelperText** — shared helper/error text component adopted across all input components.

---

### v0.2.33 — 16 May 2025

**New**
- **TextField** — show/hide toggle for password fields; clickable `iconEnd`.
- **IconPicker** — SVG icon picker with search and dialog integration.
- **SvgIcon** — lightweight SVG icon renderer with size and color props.

---

### v0.1.67 — 12 February 2025

**New**
- Design tokens — colors, font sizes, line-height, letter-spacing; standard badge color set.

<!--- Eraser file: https://app.eraser.io/workspace/zznMZKW2bQwnN4EatpJw --->
