Smart UI v0.3.11

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

npm install ds-smart-ui

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

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

Usage

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

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

Icons

We recommend Lucide Icons as the icon library:

npm install lucide-react

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

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

Changelog

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.