@salemcobalt/ui 0.2.0-rc.1 → 0.2.0-rc.3

package/dist/index.js

@@ -196,12 +196,18 @@ function ArchiveIcon(props) {
     /* @__PURE__ */ jsx5("path", { d: "M3.25 5.75v6.5a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6.5M6.5 8.75h3" })
   ] });
 }
+function ArrowDownIcon(props) {
+  return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M8 3v10M4 9l4 4 4-4" }) });
+}
 function ArrowLeftIcon(props) {
   return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M13 8H3M7 4 3 8l4 4" }) });
 }
 function ArrowRightIcon(props) {
   return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M3 8h10M9 4l4 4-4 4" }) });
 }
+function ArrowUpIcon(props) {
+  return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M8 13V3M4 7l4-4 4 4" }) });
+}
 function BellIcon(props) {
   return /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
     /* @__PURE__ */ jsx5("path", { d: "M4 6.5a4 4 0 0 1 8 0v3l1.25 2H2.75L4 9.5z" }),
@@ -489,8 +495,10 @@ var Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close
 // src/icons/icon-names.gen.ts
 var iconNames = [
   "archive",
+  "arrow-down",
   "arrow-left",
   "arrow-right",
+  "arrow-up",
   "bell",
   "briefcase",
   "calendar",
@@ -1293,12 +1301,192 @@ function Text({
   });
 }
 
+// src/components/Table/Table.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+function Root5({
+  stickyHeader = false,
+  maxHeight,
+  density,
+  divided = true,
+  layout = "auto",
+  wrapperClassName,
+  wrapperStyle,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cx("sc-table-wrap", wrapperClassName),
+      "data-sticky-header": stickyHeader || void 0,
+      "data-scroll": maxHeight ? "" : void 0,
+      style: maxHeight ? { ...wrapperStyle, maxBlockSize: maxHeight } : wrapperStyle,
+      children: /* @__PURE__ */ jsx21(
+        "table",
+        {
+          className: cx("sc-table", className),
+          "data-density": density,
+          "data-divided": divided || void 0,
+          "data-layout": layout,
+          style,
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+function Caption({ className, ...rest }) {
+  return /* @__PURE__ */ jsx21("caption", { className: cx("sc-table__caption", className), ...rest });
+}
+function Head({ className, ...rest }) {
+  return /* @__PURE__ */ jsx21("thead", { className: cx("sc-table__head", className), ...rest });
+}
+function Body2({ className, ...rest }) {
+  return /* @__PURE__ */ jsx21("tbody", { className: cx("sc-table__body", className), ...rest });
+}
+function Foot({ className, ...rest }) {
+  return /* @__PURE__ */ jsx21("tfoot", { className: cx("sc-table__foot", className), ...rest });
+}
+function Row({ selected = false, interactive = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx21(
+    "tr",
+    {
+      className: cx("sc-table__row", className),
+      "data-selected": selected || void 0,
+      "data-interactive": interactive || void 0,
+      "aria-selected": selected || void 0,
+      ...rest
+    }
+  );
+}
+function Header({
+  align,
+  numeric = false,
+  nowrap = false,
+  truncate = false,
+  width,
+  sortable = false,
+  sortDirection = "none",
+  onSort,
+  scope = "col",
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const sorted = sortable && sortDirection !== "none";
+  return /* @__PURE__ */ jsx21(
+    "th",
+    {
+      scope,
+      className: cx("sc-table__header", className),
+      "data-align": align ?? (numeric ? "end" : void 0),
+      "data-numeric": numeric || void 0,
+      "data-nowrap": nowrap || void 0,
+      "data-truncate": truncate || void 0,
+      "data-sortable": sortable || void 0,
+      "data-sorted": sorted ? sortDirection : void 0,
+      "aria-sort": sorted ? sortDirection : void 0,
+      style: width ? { ...style, inlineSize: width } : style,
+      ...rest,
+      children: sortable ? /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          type: "button",
+          className: "sc-table__sort",
+          onClick: () => onSort?.(sortDirection === "ascending" ? "descending" : "ascending"),
+          children: [
+            /* @__PURE__ */ jsx21("span", { className: "sc-table__sort-label", children }),
+            /* @__PURE__ */ jsx21("span", { className: "sc-table__sort-icon", "aria-hidden": "true", children: sortDirection === "descending" ? /* @__PURE__ */ jsx21(ArrowDownIcon, { size: "xs" }) : /* @__PURE__ */ jsx21(ArrowUpIcon, { size: "xs" }) })
+          ]
+        }
+      ) : children
+    }
+  );
+}
+function Cell({
+  align,
+  numeric = false,
+  nowrap = false,
+  truncate = false,
+  width,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx21(
+    "td",
+    {
+      className: cx("sc-table__cell", className),
+      "data-align": align ?? (numeric ? "end" : void 0),
+      "data-numeric": numeric || void 0,
+      "data-nowrap": nowrap || void 0,
+      "data-truncate": truncate || void 0,
+      style: width ? { ...style, inlineSize: width } : style,
+      ...rest
+    }
+  );
+}
+var Table = { Root: Root5, Caption, Head, Body: Body2, Foot, Row, Header, Cell };
+
+// src/components/Stat/Stat.tsx
+import { createElement as createElement5 } from "react";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+var trendIcons = {
+  up: /* @__PURE__ */ jsx22(ArrowUpIcon, { size: "xs" }),
+  down: /* @__PURE__ */ jsx22(ArrowDownIcon, { size: "xs" }),
+  flat: /* @__PURE__ */ jsx22(ArrowRightIcon, { size: "xs" })
+};
+function Stat({
+  label,
+  value,
+  delta,
+  deltaTone = "neutral",
+  trend,
+  hint,
+  icon,
+  variant = "outlined",
+  size = "md",
+  as = "div",
+  className,
+  ...rest
+}) {
+  return createElement5(
+    as,
+    {
+      className: cx("sc-stat", className),
+      "data-variant": variant,
+      "data-size": size,
+      ...rest
+    },
+    /* @__PURE__ */ jsxs19(Fragment4, { children: [
+      /* @__PURE__ */ jsx22("div", { className: "sc-stat__label", children: label }),
+      icon ? /* @__PURE__ */ jsx22("span", { className: "sc-stat__icon", "aria-hidden": "true", children: icon }) : null,
+      /* @__PURE__ */ jsx22("div", { className: "sc-stat__value", children: value }),
+      delta != null ? /* @__PURE__ */ jsxs19("div", { className: "sc-stat__delta", "data-tone": deltaTone, children: [
+        trend ? /* @__PURE__ */ jsx22("span", { className: "sc-stat__trend", "aria-hidden": "true", children: trendIcons[trend] }) : null,
+        trend ? /* @__PURE__ */ jsxs19("span", { className: "sc-visually-hidden", children: [
+          trend === "flat" ? "unchanged" : trend,
+          " "
+        ] }) : null,
+        delta
+      ] }) : null,
+      hint != null ? /* @__PURE__ */ jsx22("div", { className: "sc-stat__hint", children: hint }) : null
+    ] })
+  );
+}
+
 // src/index.ts
 var version = "0.1.1";
 export {
   ArchiveIcon,
+  ArrowDownIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
+  ArrowUpIcon,
   Badge,
   Banner,
   BellIcon,
@@ -1352,8 +1540,10 @@ export {
   Spinner,
   Stack,
   StarIcon,
+  Stat,
   SunIcon,
   Switch,
+  Table,
   Tabs,
   Text,
   Textarea,