klun-ui 0.1.19 → 0.1.20

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.1.20] — 2026-07-11
+
+### Added
+- **`StatCard` (data-display) — a KPI metric card.** A tinted icon tile
+  (`tint` = feature | success | warning | information | error), a `label`, a big
+  `value`, and an optional up/down `delta` pill (`trend`). For a bare metric
+  without the card surface, use `Statistic`.
+- **`EmptyState` (feedback) — a centered placeholder for empty lists/views.**
+  `icon` medallion, `title`, `description` and an `action` slot.
+- **`Result` (feedback) — a full-page outcome screen.** `status` presets
+  (success / error / warning / info / 404 / 403 / 500) each supply an icon and
+  color (override with a custom `icon`), plus `title`, `subtitle`, an `extra`
+  actions row and optional body `children`.
+
+  These three existed in the legacy inline-style design-system but had never been
+  ported to the token-based `src/` package, so they were missing from the npm
+  build (and the browser bundle). Now ported to the standard CSS-class + token
+  architecture and exported.
+
 ## [0.1.19] — 2026-07-11
 
 ### Added

package/dist/{chunk-NYIPE2T7.js → chunk-JFRI333P.js}

@@ -3700,6 +3700,30 @@ var Statistic = forwardRef(function Statistic2({ label, value, prefix, suffix, p
   ] });
 });
 Statistic.displayName = "Statistic";
+var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "up", icon, tint = "feature", className, ...props }, ref) {
+  const up = trend === "up";
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-stat-card", `klun-stat-card--${tint}`, className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "klun-stat-card__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "klun-stat-card__icon", children: icon }),
+      delta != null ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cx(
+            "klun-stat-card__delta",
+            up ? "klun-stat-card__delta--up" : "klun-stat-card__delta--down"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: up ? "ri-arrow-up-line" : "ri-arrow-down-line" }),
+            delta
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__value", children: value })
+  ] });
+});
+StatCard.displayName = "StatCard";
 var SIZES2 = { xs: 6, sm: 8, md: 10, lg: 12 };
 var StatusDot = forwardRef(function StatusDot2({ tone = "neutral", size = "sm", pulse = false, label, className, style, ...props }, ref) {
   const sizeStyle = { ["--klun-status-dot-size"]: `${SIZES2[size] ?? SIZES2.sm}px` };
@@ -5663,6 +5687,43 @@ var Alert = forwardRef(function Alert2({ status = "information", variant = "ligh
   );
 });
 Alert.displayName = "Alert";
+var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-empty-state", className), ...props, children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__icon", children: icon }) : null,
+    title ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__title", children: title }) : null,
+    description ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__desc", children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__action", children: action }) : null
+  ] });
+});
+EmptyState.displayName = "EmptyState";
+var PRESET_ICON = {
+  success: "ri-checkbox-circle-fill",
+  error: "ri-close-circle-fill",
+  warning: "ri-alert-fill",
+  info: "ri-information-fill",
+  "404": "ri-compass-3-line",
+  "403": "ri-lock-2-line",
+  "500": "ri-server-line"
+};
+var Result = forwardRef(function Result2({ status = "info", icon, title, subtitle, extra, children, className, ...props }, ref) {
+  const big = status === "404" || status === "403" || status === "500";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-result", `klun-result--${status}`, big && "klun-result--big", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "klun-result__icon", children: icon || /* @__PURE__ */ jsx("i", { className: PRESET_ICON[status] }) }),
+        title ? /* @__PURE__ */ jsx("div", { className: "klun-result__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-result__subtitle", children: subtitle }) : null,
+        extra ? /* @__PURE__ */ jsx("div", { className: "klun-result__extra", children: extra }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "klun-result__content", children }) : null
+      ]
+    }
+  );
+});
+Result.displayName = "Result";
 var Banner = forwardRef(function Banner2({ status = "information", variant = "filled", icon, action, onClose, className, children, ...props }, ref) {
   const { banner } = useLocale();
   return /* @__PURE__ */ jsxs(
@@ -11462,6 +11523,6 @@ var Popconfirm = forwardRef(function Popconfirm2({
 });
 Popconfirm.displayName = "Popconfirm";
 
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-NYIPE2T7.js.map
-//# sourceMappingURL=chunk-NYIPE2T7.js.map
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
+//# sourceMappingURL=chunk-JFRI333P.js.map
+//# sourceMappingURL=chunk-JFRI333P.js.map