@apliteni/apliteni-ui 0.39.1 → 0.40.1

package/guidelines/component-choice.md

@@ -1,5 +1,17 @@
 # Component choice
 
+## Make the committing action stand out
+
+<!-- rule: paired-actions -->
+
+**Rule:** In a pair of actions, give the committing action more visual weight than the dismissing action.
+
+**Why:** Equal weight makes it harder to see which button commits the change.
+
+**Do:** Use a primary Save button beside a ghost Cancel button.
+
+**Don't:** Give Save and Cancel the same primary style.
+
 ## Interrupt with a question
 
 <!-- rule: interrupt -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.39.1",
+  "version": "0.40.1",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -104,4 +104,13 @@
   flex-shrink: 0;
   stroke-width: 2.4;
   color: var(--muted);
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+.rx-caret[data-up] {
+  transform: rotate(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .rx-caret {
+    transition: none;
+  }
 }

package/react/dist/index.js

@@ -899,10 +899,11 @@ function DataTable({
     onSortChange?.(next);
     toFirstPage();
   };
-  const caret = (k) => /* @__PURE__ */ jsxs8(
+  const caret = (k) => /* @__PURE__ */ jsx10(
     "svg",
     {
       className: "rx-caret",
+      "data-up": sort.key === k && sort.dir === 1 || void 0,
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -910,10 +911,10 @@ function DataTable({
       strokeLinejoin: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: [
-        (sort.key !== k || sort.dir === 1) && /* @__PURE__ */ jsx10("path", { d: sort.key === k ? "m8 14 4-4 4 4" : "m8 9 4-4 4 4" }),
-        (sort.key !== k || sort.dir === -1) && /* @__PURE__ */ jsx10("path", { d: sort.key === k ? "m8 10 4 4 4-4" : "m8 15 4 4 4-4" })
-      ]
+      children: sort.key === k ? /* @__PURE__ */ jsx10("path", { d: "m8 10 4 4 4-4" }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        /* @__PURE__ */ jsx10("path", { d: "m8 9 4-4 4 4" }),
+        /* @__PURE__ */ jsx10("path", { d: "m8 15 4 4 4-4" })
+      ] })
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));