@ponti-studios/ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",

package/src/components/data-display/sort-controls.tsx

@@ -5,7 +5,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -57,10 +56,9 @@ export function SortControls({
               .filter((_, i) => i !== index)
               .map((option) => option.field);
             return (
-              <DropdownMenuItem
+              <div
                 key={sort.field}
-                onSelect={(e) => e.preventDefault()}
-                className={`p-0 focus:bg-transparent ${index === focusedSortIndex ? "bg-muted" : ""}`}
+                className={`rounded-sm ${index === focusedSortIndex ? "bg-muted" : ""}`}
               >
                 <SortRow
                   sortOption={sort}
@@ -70,27 +68,26 @@ export function SortControls({
                   updateSortOption={updateSortOption}
                   removeSortOption={removeSortOption}
                 />
-              </DropdownMenuItem>
+              </div>
             );
           })}
         </DropdownMenuGroup>
         {availableFieldsToAdd.length > 0 && (
           <>
             <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onSelect={(e) => {
-                e.preventDefault();
+            <button
+              type="button"
+              onClick={() => {
                 const firstAvailable = availableFieldsToAdd[0];
                 if (firstAvailable) {
                   addSortOption({ field: firstAvailable, direction: "desc" });
                 }
               }}
-              disabled={availableFieldsToAdd.length === 0}
-              className="mt-1"
+              className="hover:bg-muted focus-visible:ring-ring mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-offset-2"
             >
               <PlusCircle className="mr-2 size-4" />
               Add Sort Criterion
-            </DropdownMenuItem>
+            </button>
           </>
         )}
       </DropdownMenuContent>

package/src/components/data-display/sort-row.tsx

@@ -1,7 +1,13 @@
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, X } from "lucide-react";
+
 import type { SortField, SortOption } from "../../hooks/sort.types";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../forms/select";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../overlays/dropdown-menu";
 import { Button } from "../primitives/button";
-import { X } from "lucide-react";
 
 export interface SortRowProps {
   sortOption: SortOption;
@@ -12,6 +18,10 @@ export interface SortRowProps {
   removeSortOption: (index: number) => void;
 }
 
+function fieldLabel(field: SortField) {
+  return field.charAt(0).toUpperCase() + field.slice(1);
+}
+
 export function SortRow({
   sortOption,
   index,
@@ -25,47 +35,51 @@ export function SortRow({
   );
 
   return (
-    <div key={sortOption.field} className="flex items-center gap-2">
-      <Select
-        value={sortOption.field}
-        onValueChange={(value) => updateSortOption(index, { ...sortOption, field: value })}
-      >
-        <SelectTrigger className="h-8 w-[130px] text-xs">
-          <SelectValue placeholder="Select field" />
-        </SelectTrigger>
-        <SelectContent>
+    <div className="flex w-full items-center gap-1">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            className="hover:bg-muted focus-visible:ring-ring flex-1 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          >
+            {fieldLabel(sortOption.field)}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
           {availableFieldsForCurrentSelect.map((field) => (
-            <SelectItem key={field} value={field} className="text-xs">
-              {field.charAt(0).toUpperCase() + field.slice(1)}
-            </SelectItem>
+            <DropdownMenuItem
+              key={field}
+              onClick={() => updateSortOption(index, { ...sortOption, field })}
+            >
+              {fieldLabel(field)}
+            </DropdownMenuItem>
           ))}
-        </SelectContent>
-      </Select>
-      <Select
-        value={sortOption.direction}
-        onValueChange={(value) => {
-          if (value === "asc" || value === "desc") {
-            updateSortOption(index, { ...sortOption, direction: value });
-          }
-        }}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="size-8 p-0"
+        aria-label={sortOption.direction === "asc" ? "Sorted ascending" : "Sorted descending"}
+        onClick={() =>
+          updateSortOption(index, {
+            ...sortOption,
+            direction: sortOption.direction === "asc" ? "desc" : "asc",
+          })
+        }
       >
-        <SelectTrigger className="h-8 w-[110px] text-xs">
-          <SelectValue placeholder="Direction" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="asc" className="text-xs">
-            Ascending
-          </SelectItem>
-          <SelectItem value="desc" className="text-xs">
-            Descending
-          </SelectItem>
-        </SelectContent>
-      </Select>
+        {sortOption.direction === "asc" ? (
+          <ArrowUpWideNarrow className="size-4" />
+        ) : (
+          <ArrowDownWideNarrow className="size-4" />
+        )}
+      </Button>
       <Button
         variant="ghost"
         size="sm"
         onClick={() => removeSortOption(index)}
         className="size-8 p-0"
+        aria-label="Remove sort criterion"
       >
         <X className="text-muted-foreground size-4" />
       </Button>

package/src/components/navigation/pagination-controls.tsx

@@ -15,7 +15,7 @@ export function PaginationControls({
   onPageChange,
 }: PaginationControlsProps) {
   return (
-    <div className="border-border bg-background text-foreground inline-flex items-center overflow-hidden rounded-full border text-sm">
+    <div className="border-border bg-background text-foreground inline-flex w-fit shrink-0 items-center self-start overflow-hidden rounded-full border text-sm">
       <Button
         type="button"
         variant="outline"

package/src/styles/index.css

@@ -43,14 +43,16 @@
   animation-name: zoom-out;
 }
 
-/* shadcn New York semantic contract. Values are generated from the DTCG
- * source; this file only names the roles consumed by web components. */
+/* 
+  Values are generated from the DTCG source; 
+  this file only names the roles consumed by web components. 
+*/
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--text-primary);
   --color-card: var(--card);
   --color-card-foreground: var(--text-primary);
-  --color-popover: var(--popover);
+  --color-popover: var(--background);
   --color-popover-foreground: var(--text-primary);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);