Smart UI v0.3.4

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.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.