@viliha/vui-ui 1.11.0 → 1.11.1

package/CHANGELOG.md

@@ -7,6 +7,16 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.11.1 — 2026-07-26
+
+### Changed
+
+- **Sort indicators are now carets, and every sortable column shows one.** A
+  sortable column header shows a muted up/down caret (`CaretSort`) by default —
+  so sortability is discoverable — and a solid caret for the active direction:
+  `CaretUp` = ascending, `CaretDown` = descending (all Radix icons). The Sort
+  dropdown matches. Non-sortable columns (`sortable: false`) show no indicator.
+
 ## 1.11.0 — 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/record-view.tsx

@@ -8,10 +8,10 @@ import {
   ReaderIcon as Reader,
   TableIcon as SheetIcon,
   UploadIcon as Upload,
-  ArrowDownIcon as ArrowDown,
   ArrowTopRightIcon as ArrowUpRight,
-  ArrowUpIcon as ArrowUp,
-  CaretSortIcon as ArrowUpDown,
+  CaretDownIcon as CaretDown,
+  CaretSortIcon as CaretSort,
+  CaretUpIcon as CaretUp,
   CheckIcon as Check,
   ChevronLeftIcon as ChevronLeft,
   ChevronRightIcon as ChevronRight,
@@ -1274,7 +1274,7 @@ export function RecordView<T extends { id: RowId }>({
             )}
           </Dropdown>
 
-          <Dropdown label="Sort" icon={<ArrowUpDown className="size-3.5 text-blue-500" />}>
+          <Dropdown label="Sort" icon={<CaretSort className="size-3.5 text-blue-500" />}>
             <DropdownLabel>Sort by</DropdownLabel>
             {sortFields.map((f) => (
               <DropdownItem
@@ -1283,9 +1283,9 @@ export function RecordView<T extends { id: RowId }>({
                 icon={
                   sort?.key === f.key ? (
                     sort.dir === "asc" ? (
-                      <ArrowUp className="size-3.5" />
+                      <CaretUp className="size-3.5" />
                     ) : (
-                      <ArrowDown className="size-3.5" />
+                      <CaretDown className="size-3.5" />
                     )
                   ) : undefined
                 }
@@ -1402,11 +1402,18 @@ export function RecordView<T extends { id: RowId }>({
                       {f.label}
                       {f.required && <RequiredMark />}
                     </span>
-                    {sort?.key === f.key &&
-                      (sort.dir === "asc" ? (
-                        <ArrowUp className="size-3 shrink-0" />
+                    {/* Sortable columns always show an indicator: a muted
+                        up/down caret by default, a solid caret for the active
+                        direction (up = ascending, down = descending). */}
+                    {sortable &&
+                      (sort?.key === f.key ? (
+                        sort.dir === "asc" ? (
+                          <CaretUp className="size-3.5 shrink-0" />
+                        ) : (
+                          <CaretDown className="size-3.5 shrink-0" />
+                        )
                       ) : (
-                        <ArrowDown className="size-3 shrink-0" />
+                        <CaretSort className="size-3.5 shrink-0 text-muted-foreground/50" />
                       ))}
                   </>
                 );