@mshuja288/aksuicore 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ Versioning follows [VERSIONING.md](./VERSIONING.md).
 
 ## [Unreleased]
 
+## [0.3.0] — 2026-10-12
+
+### Added
+
+- `RecordWorkspace` download control: optional `onDownload(format)` with CSV / Excel / JSON choices in the side rail (`ExportDownloadFormat` type exported)
+
+## [0.2.1] — 2026-10-05
+
+### Added
+
+- `ConfirmDeleteDialog` for in-app delete confirmation (Cancel / Delete) before destructive actions
+
 ## [0.2.0] — 2026-10-05
 
 ### Changed

package/README.md

@@ -4,7 +4,7 @@ Shared React UI library for Ikssam apps — reusable **primitives** and **templa
 
 ## Status
 
-`v0.2.0` — package renamed to `@mshuja288/aksuicore`. Published on npmjs. See [CHANGELOG.md](./CHANGELOG.md).
+`v0.3.0` — RecordWorkspace download (CSV / Excel / JSON). Published on npmjs. See [CHANGELOG.md](./CHANGELOG.md).
 
 ## AppShell API
 

package/dist/aksui.css

@@ -1211,6 +1211,65 @@ button.side-rail-add:hover {
   background: #2a3546;
 }
 
+.side-rail-download {
+  display: grid;
+  gap: 8px;
+}
+
+button.side-rail-download-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  box-shadow: none;
+}
+
+button.side-rail-download-toggle svg {
+  width: 18px;
+  height: 18px;
+}
+
+button.side-rail-download-toggle:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-download-toggle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.side-rail-download-formats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+button.side-rail-download-format {
+  padding: 8px 6px;
+  border: 1px solid var(--aks-border, #d7dde5);
+  border-radius: var(--aks-radius);
+  background: #fff;
+  color: var(--aks-brand);
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+button.side-rail-download-format:hover:not(:disabled) {
+  background: #f5f7fa;
+}
+
+button.side-rail-download-format:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
 .side-rail-filters {
   display: grid;
   gap: 12px;

package/dist/index.cjs

@@ -436,6 +436,21 @@ function Dialog({
   ) });
 }
 var FormDialog = Dialog;
+function ConfirmDeleteDialog({
+  open,
+  message,
+  pending = false,
+  onCancel,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { title: "Confirm delete", open, onClose: pending ? () => void 0 : onCancel, wide: false, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-form", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "hint", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: onCancel, disabled: pending, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "danger", onClick: onConfirm, disabled: pending, children: pending ? "Deleting\u2026" : "Delete" })
+    ] })
+  ] }) });
+}
 function useIsClient() {
   return react.useSyncExternalStore(
     () => () => {
@@ -713,6 +728,11 @@ function useIsClient2() {
     () => false
   );
 }
+var EXPORT_FORMAT_OPTIONS = [
+  { format: "csv", label: "CSV" },
+  { format: "xlsx", label: "Excel" },
+  { format: "json", label: "JSON" }
+];
 function compareColumnValues(column, left, right) {
   const leftRaw = column.display ? column.display(left) : column.value(left);
   const rightRaw = column.display ? column.display(right) : column.value(right);
@@ -755,6 +775,13 @@ function PreviewIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "2.4", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
   ] });
 }
+function DownloadIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3.5v8.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 9.2 10 12.8l3.5-3.6", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15.5h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
+  ] });
+}
 function DetailList({ lines }) {
   return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: "record-detail-list", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "record-detail-row", children: [
     /* @__PURE__ */ jsxRuntime.jsx("dt", { children: line.label }),
@@ -775,6 +802,9 @@ function RecordWorkspace({
   onDelete,
   canUpdate,
   canDelete,
+  onDownload,
+  canDownload = true,
+  downloadBusy = false,
   toolbar,
   form
 }) {
@@ -782,6 +812,7 @@ function RecordWorkspace({
   const [filters, setFilters] = react.useState({});
   const [sort, setSort] = react.useState(null);
   const [sideOpen, setSideOpen] = react.useState(false);
+  const [downloadOpen, setDownloadOpen] = react.useState(false);
   const [previewEnabled, setPreviewEnabled] = react.useState(false);
   const [previewKey, setPreviewKey] = react.useState(null);
   const [tooltip, setTooltip] = react.useState(null);
@@ -827,8 +858,16 @@ function RecordWorkspace({
   const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
   const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
   const showAdd = canAdd && Boolean(onAdd);
+  const showDownload = Boolean(onDownload) && canDownload;
   const showFilters = filterableColumns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
+  function requestDownload(format) {
+    if (!onDownload || downloadBusy) {
+      return;
+    }
+    onDownload(format);
+    setDownloadOpen(false);
+  }
   function cellText(column, item) {
     const raw = column.display ? column.display(item) : column.value(item);
     return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
@@ -1028,6 +1067,33 @@ function RecordWorkspace({
                 /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: addLabel })
               ] }) : null,
+              showDownload ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-download", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ghost side-rail-download-toggle",
+                    "aria-expanded": downloadOpen,
+                    disabled: downloadBusy,
+                    onClick: () => setDownloadOpen((open) => !open),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: downloadBusy ? "Downloading\u2026" : "Download" })
+                    ]
+                  }
+                ),
+                downloadOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "side-rail-download-formats", role: "group", "aria-label": "Download format", children: EXPORT_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ghost side-rail-download-format",
+                    disabled: downloadBusy,
+                    onClick: () => requestDownload(option.format),
+                    children: option.label
+                  },
+                  option.format
+                )) }) : null
+              ] }) : null,
               showFilters ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "side-rail-filters", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "filter-panel-head", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Filters" }),
@@ -1081,6 +1147,22 @@ function RecordWorkspace({
                 /* @__PURE__ */ jsxRuntime.jsx(PreviewIcon, {})
               ] }),
               showAdd ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {}) }) : null,
+              showDownload ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost side-rail-icon",
+                  title: "Download",
+                  "aria-label": "Download",
+                  "aria-expanded": downloadOpen,
+                  disabled: downloadBusy,
+                  onClick: () => {
+                    setSideOpen(true);
+                    setDownloadOpen(true);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, {})
+                }
+              ) : null,
               showFilters ? /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -1127,6 +1209,7 @@ var RecordTable = RecordWorkspace;
 exports.AppSelect = AppSelect;
 exports.AppShell = AppShell;
 exports.Button = Button;
+exports.ConfirmDeleteDialog = ConfirmDeleteDialog;
 exports.DateField = DateField;
 exports.Dialog = Dialog;
 exports.FormActions = FormActions;