Smart UI v0.3.21

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.21 — 24 June 2026

Fixes

• DataTable — fixed header cell content (label + sort icon) not respecting per-column align set via muiTableHeadCellProps; the header's inner flex wrapper now mirrors the configured align (left/center/right) instead of always staying left-aligned, keeping header and body cells visually consistent.

v0.3.20 — 22 June 2026

Fixes

• DateRangePicker — fixed double-calendar month navigation so the left and right panels always stay consecutive (e.g. Agustus / September) when clicking prev/next, instead of drifting out of sync.
• DateRangePicker — consolidated double-calendar prev/next into a single pair of buttons (outer-left and outer-right) instead of duplicating navigation controls on each panel.
• DateRangePicker — disabled the month/year label buttons in double-calendar mode to prevent switching either panel into an independent months/years view.

v0.3.19 — 17 June 2026

Fixes

• Alert — fixed layout when title is empty: description, the action button, and the close button are now grouped inline on a single vertically-centered row instead of being misaligned with the title/description stack.

v0.3.18 — 2 June 2026

Fixes

• ThemeProvider / Theme — synced defaultTheme typography font sizes to match designTokens.css exactly, preventing unexpected font size scaling (e.g. sm shrinking to 10px and md to 12px) in client applications.
• ListViewLabel — increased CSS specificity for .size--sm, .size--md, .size--lg, .size--xl, and .size--2xl in ListViewLabel.module.css to prevent typography variant styles from overriding customized label sizes in Storybook.

v0.3.17 — 26 May 2026

• style: normalize danger hex codes to lowercase and update typography scale tokens
• feat: add action button support to Alert component with updated layout and documentation

v0.3.16 — 20 May 2026

• feat: add action grouping support and Markdown-style message formatting to DialogAction

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.