@stasho/ds 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stasho/ds",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "stasho design system",
   "type": "module",
   "license": "MIT",

package/src/components/alert/alert.tsx

@@ -30,7 +30,7 @@ const VARIANT_BG_CLASS: Record<AlertVariant, string> = {
 
 const alertVariants = cva(
   [
-    "relative overflow-hidden rounded-none border",
+    "relative overflow-hidden rounded-sm border",
     "px-3 py-2",
     "transition-all duration-200",
     "motion-reduce:transition-none",

package/src/components/badge/badge.tsx

@@ -5,7 +5,7 @@ import { cn } from "@ac/lib/cn";
 const badgeVariants = cva(
   [
     "inline-flex items-center justify-center gap-1.5",
-    "rounded-[2px] font-mono uppercase tracking-wider",
+    "rounded-sm font-mono uppercase tracking-wider",
     "whitespace-nowrap select-none",
   ].join(" "),
   {

package/src/components/button/button.tsx

@@ -12,7 +12,7 @@ import { cn } from "@ac/lib/cn";
 const buttonVariants = cva(
   [
     "inline-flex items-center font-body font-bold leading-none",
-    "rounded-none border-0 text-white",
+    "rounded-sm border-0 text-white",
     "transition-[background,box-shadow,transform] duration-150 ease-out",
     "active:translate-y-px",
     "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",

package/src/components/checkbox/checkbox.tsx

@@ -26,9 +26,9 @@ const checkboxVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-3.5 rounded-none",
-        sm: "size-4 rounded-none",
-        md: "size-5 rounded-none",
+        xs: "size-3.5 rounded-sm",
+        sm: "size-4 rounded-sm",
+        md: "size-5 rounded-sm",
       },
     },
     defaultVariants: {

package/src/components/combobox/combobox.tsx

@@ -10,7 +10,7 @@ const triggerVariants = cva(
     "inline-flex items-center justify-between",
     "w-full font-sans text-foreground",
     "bg-background dark:bg-surface",
-    "border border-edge rounded-none",
+    "border border-edge rounded-sm",
     "hover:border-edge-hover",
     "focus-visible:outline-none",
     "focus-visible:border-accent-700 dark:focus-visible:border-accent",
@@ -112,7 +112,7 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
           <Popover.Content
             className={cn(
               "z-50 w-[var(--radix-popover-trigger-width)]",
-              "overflow-hidden rounded-none",
+              "overflow-hidden rounded-sm",
               "bg-popover-bg border border-popover-border shadow",
             )}
             sideOffset={4}
@@ -141,7 +141,7 @@ const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
                       setOpen(false);
                     }}
                     className={cn(
-                      "relative flex items-center rounded-none px-4 py-2",
+                      "relative flex items-center rounded-sm px-4 py-2",
                       "text-sm text-foreground cursor-pointer select-none",
                       "outline-none",
                       "data-[selected=true]:bg-muted",

package/src/components/copyable-text/copyable-text.tsx

@@ -162,7 +162,7 @@ const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
           onClick={handleCopy}
           className={cn(
             "relative inline-flex items-center justify-center",
-            "rounded-none cursor-pointer shrink-0",
+            "rounded-sm cursor-pointer shrink-0",
             "hover:bg-foreground/10 transition-colors",
             btnCn,
           )}
@@ -207,7 +207,7 @@ const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
             className={cn(
-              "inline-flex items-center justify-center rounded-none shrink-0",
+              "inline-flex items-center justify-center rounded-sm shrink-0",
               "text-muted-foreground hover:text-foreground",
               "hover:bg-foreground/10 transition-colors",
               btnCn,

package/src/components/dialog/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "relative w-full max-w-md rounded-xl bg-surface p-6",
+            "relative w-full max-w-md rounded-xl border border-edge bg-surface p-6",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             "motion-reduce:animate-none",
@@ -56,7 +56,7 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
           {locked ? null : (
             <DialogPrimitive.Close
               className={cn(
-                "absolute top-4 right-4 rounded-none",
+                "absolute top-4 right-4 rounded-sm",
                 "text-muted-foreground transition-colors hover:text-foreground",
                 "focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
               )}

package/src/components/input/input.tsx

@@ -6,7 +6,7 @@ const inputVariants = cva(
   [
     "w-full font-sans text-foreground",
     "bg-background dark:bg-surface",
-    "border border-edge rounded-none",
+    "border border-edge rounded-sm",
     "placeholder:text-muted-foreground",
     "focus-visible:outline-none",
     "focus-visible:border-accent-700 dark:focus-visible:border-accent",

package/src/components/multi-select/multi-select.tsx

@@ -10,7 +10,7 @@ const triggerVariants = cva(
     "inline-flex items-center gap-1.5",
     "w-full font-sans text-foreground",
     "bg-background dark:bg-surface",
-    "border border-edge rounded-none",
+    "border border-edge rounded-sm",
     "hover:border-edge-hover",
     "focus-visible:outline-none",
     "focus-visible:border-accent-700 dark:focus-visible:border-accent",
@@ -35,7 +35,7 @@ const triggerVariants = cva(
 
 const tagVariants = cva(
   [
-    "inline-flex items-center gap-1 rounded-[2px] bg-muted",
+    "inline-flex items-center gap-1 rounded-sm bg-muted",
     "text-foreground max-w-32 select-none",
   ].join(" "),
   {
@@ -165,7 +165,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                       aria-label={`Remove ${opt.label}`}
                       onClick={(e) => removeTag(e, opt.value)}
                       className={cn(
-                        "shrink-0 rounded-[2px]",
+                        "shrink-0 rounded-sm",
                         "hover:bg-foreground/10 transition-colors",
                         size === "sm" ? "size-3.5" : "size-4",
                       )}
@@ -195,7 +195,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                 aria-label="Clear all"
                 onClick={clearAll}
                 className={cn(
-                  "shrink-0 rounded-[2px]",
+                  "shrink-0 rounded-sm",
                   "text-muted-foreground",
                   "hover:text-foreground transition-colors",
                   size === "sm" ? "size-4" : "size-5",
@@ -232,7 +232,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
           <Popover.Content
             className={cn(
               "z-50 w-[var(--radix-popover-trigger-width)]",
-              "overflow-hidden rounded-none",
+              "overflow-hidden rounded-sm",
               "bg-popover-bg border border-popover-border shadow",
             )}
             sideOffset={4}
@@ -268,7 +268,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                       onSelect={() => toggle(option.value)}
                       className={cn(
                         "relative flex items-center gap-2",
-                        "rounded-none px-3 py-2",
+                        "rounded-sm px-3 py-2",
                         "text-sm text-foreground",
                         "cursor-pointer select-none",
                         "outline-none",
@@ -281,7 +281,7 @@ const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(
                         className={cn(
                           "flex size-4 shrink-0 items-center",
                           "justify-center",
-                          "rounded-none border transition-colors",
+                          "rounded-sm border transition-colors",
                           selected
                             ? "border-accent bg-accent text-accent-foreground"
                             : "border-edge bg-surface",

package/src/components/pagination/pagination.tsx

@@ -80,7 +80,7 @@ type PaginationProps = Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
 
 const NAV_BUTTON = [
   "inline-flex items-center justify-center",
-  "size-8 rounded-none",
+  "size-8 rounded-sm",
   "text-foreground/60 hover:text-accent-500 dark:hover:text-accent",
   "transition-colors cursor-pointer",
   "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
@@ -90,7 +90,7 @@ const NAV_DISABLED = "text-foreground/30 cursor-not-allowed";
 
 const PAGE_BUTTON = [
   "inline-flex items-center justify-center",
-  "size-[26px] rounded-none",
+  "size-[26px] rounded-sm",
   "font-mono text-sm",
   "text-foreground/60 hover:text-accent-500 dark:hover:text-accent",
   "transition-colors cursor-pointer",

package/src/components/select/select.tsx

@@ -9,7 +9,7 @@ const triggerVariants = cva(
     "inline-flex items-center justify-between",
     "w-full font-sans text-foreground",
     "bg-background dark:bg-surface",
-    "border border-edge rounded-none",
+    "border border-edge rounded-sm",
     "hover:border-edge-hover",
     "focus-visible:outline-none",
     "focus-visible:border-accent-700 dark:focus-visible:border-accent",
@@ -89,7 +89,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={cn(
-              "z-50 overflow-hidden rounded-none",
+              "z-50 overflow-hidden rounded-sm",
               "bg-popover-bg border border-popover-border shadow",
             )}
             position="popper"
@@ -102,7 +102,7 @@ const Select = forwardRef<HTMLButtonElement, SelectProps>(
                   value={option.value}
                   disabled={option.disabled ?? false}
                   className={cn(
-                    "relative flex items-center rounded-none px-4 py-2",
+                    "relative flex items-center rounded-sm px-4 py-2",
                     "text-sm text-foreground cursor-pointer select-none",
                     "outline-none",
                     "data-[highlighted]:bg-muted",

package/src/components/slider/slider.tsx

@@ -114,7 +114,7 @@ const Slider = forwardRef<
               <span
                 className={cn(
                   "absolute bottom-full left-1/2 -translate-x-1/2 mb-2",
-                  "rounded-none bg-popover-bg border border-popover-border px-2 py-1",
+                  "rounded-sm bg-popover-bg border border-popover-border px-2 py-1",
                   "text-xs text-foreground whitespace-nowrap pointer-events-none",
                 )}
               >

package/src/components/stepper/stepper.tsx

@@ -115,7 +115,7 @@ const StepperIndicator = forwardRef<HTMLDivElement, StepperIndicatorProps>(
         ref={ref}
         data-state={state}
         className={cn(
-          "relative flex size-8 items-center justify-center rounded-[2px]",
+          "relative flex size-8 items-center justify-center rounded-sm",
           "font-sans text-sm font-semibold",
           "border border-edge text-foreground/45 bg-transparent",
           "data-[state=active]:border-accent data-[state=active]:text-accent-500 dark:data-[state=active]:text-accent",

package/src/components/switch/switch.tsx

@@ -6,7 +6,7 @@ import { cn } from "@ac/lib/cn";
 const switchVariants = cva(
   [
     "peer inline-flex shrink-0 cursor-pointer",
-    "items-center rounded-[2px]",
+    "items-center rounded-sm",
     "border border-edge bg-muted dark:bg-neutral-900",
     "[box-shadow:inset_0_1px_0_rgba(255,255,255,0.7),inset_0_-1px_0_rgba(0,0,0,0.10)]",
     "dark:[box-shadow:inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.4)]",
@@ -34,7 +34,7 @@ const switchVariants = cva(
 
 const thumbVariants = cva(
   [
-    "pointer-events-none block rounded-[2px]",
+    "pointer-events-none block rounded-sm",
     "bg-edge data-[state=checked]:bg-accent",
     "transition-all motion-reduce:transition-none",
     "data-[state=unchecked]:translate-x-0.5",

package/src/components/table/table.tsx

@@ -221,43 +221,40 @@ export function Table<T>({
               </td>
             </tr>
           ) : (
-            sortedData.map((row) => (
-              <tr
-                key={keyExtractor(row)}
-                className={cn(
-                  "border-b border-edge transition-all",
-                  activeKey === keyExtractor(row)
-                    ? "bg-accent/15 shadow-[inset_3px_0_0_var(--accent)]"
-                    : "even:bg-muted/30",
-                  "hover:bg-muted/50",
-                  onRowClick &&
-                    "cursor-pointer hover:shadow-[inset_3px_0_0_var(--accent)]",
-                )}
-                aria-current={
-                  activeKey === keyExtractor(row) ? "true" : undefined
-                }
-                style={{ transitionDuration: "var(--duration-fast)" }}
-                tabIndex={onRowClick ? 0 : undefined}
-                onClick={onRowClick ? () => onRowClick(row) : undefined}
-                onKeyDown={
-                  onRowClick
-                    ? (e) => handleRowKeyDown(e, row)
-                    : undefined
-                }
-              >
-                {columns.map((col) => (
-                  <td
-                    key={col.id ?? col.header}
-                    className={cn(
-                      "px-4 py-3 text-sm",
-                      alignClass[col.align ?? "left"],
-                    )}
-                  >
-                    {col.accessor(row)}
-                  </td>
-                ))}
-              </tr>
-            ))
+            sortedData.map((row) => {
+              const isActive = activeKey === keyExtractor(row);
+              return (
+                <tr
+                  key={keyExtractor(row)}
+                  className={cn(
+                    "border-b border-edge transition-all",
+                    isActive
+                      ? "bg-accent/15 shadow-[inset_3px_0_0_var(--accent)] hover:bg-accent/20"
+                      : "even:bg-muted/30 hover:bg-muted/50",
+                    onRowClick && "cursor-pointer",
+                  )}
+                  aria-current={isActive ? "true" : undefined}
+                  style={{ transitionDuration: "var(--duration-fast)" }}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  onKeyDown={
+                    onRowClick ? (e) => handleRowKeyDown(e, row) : undefined
+                  }
+                >
+                  {columns.map((col) => (
+                    <td
+                      key={col.id ?? col.header}
+                      className={cn(
+                        "px-4 py-3 text-sm",
+                        alignClass[col.align ?? "left"],
+                      )}
+                    >
+                      {col.accessor(row)}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })
           )}
         </tbody>
       </table>

package/src/components/tabs/tabs.tsx

@@ -211,7 +211,7 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
             "motion-reduce:transition-none",
             isPill
               ? cn(
-                  "relative z-10 rounded-[2px]",
+                  "relative z-10 rounded-sm",
                   isSmall ? "px-2 py-0.5 text-xs" : "px-3 py-1.5 text-sm",
                 )
               : isSmall
@@ -227,7 +227,7 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
         <DropdownMenu.Content
           className={cn(
             "z-50 min-w-[8rem]",
-            "rounded-none bg-popover-bg border border-popover-border shadow",
+            "rounded-sm bg-popover-bg border border-popover-border shadow",
             "p-1",
             "motion-reduce:transition-none",
           )}
@@ -252,7 +252,7 @@ const OverflowTrigger = forwardRef<HTMLButtonElement, OverflowTriggerProps>(
                 });
               }}
               className={cn(
-                "flex w-full items-center rounded-none px-3 py-2",
+                "flex w-full items-center rounded-sm px-3 py-2",
                 "text-sm text-foreground cursor-pointer select-none",
                 "outline-none",
                 "hover:bg-muted focus-visible:bg-muted",
@@ -360,7 +360,7 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
           "group relative flex",
           isPill
             ? [
-                "rounded-[2px] bg-muted border border-edge",
+                "rounded-sm bg-muted border border-edge",
                 isSmall ? "p-0.5" : "p-1",
                 !isCollapse && "inline-flex",
               ]
@@ -387,7 +387,7 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
             isPill
               ? [
                   isSmall ? "inset-y-0.5" : "inset-y-1",
-                  "rounded-[2px] bg-accent/15",
+                  "rounded-sm bg-accent/15",
                   ready ? "opacity-100" : "opacity-0",
                   ready
                     ? "transition-[transform,width,opacity] duration-200 ease-out"
@@ -435,7 +435,7 @@ const TabsTrigger = forwardRef<
         "group-data-[size=sm]:text-sm group-data-[size=sm]:gap-1.5",
         // Pill variant overrides (via group data attribute on TabsList)
         "group-data-[variant=pill]:relative group-data-[variant=pill]:z-10",
-        "group-data-[variant=pill]:rounded-[2px]",
+        "group-data-[variant=pill]:rounded-sm",
         "group-data-[variant=pill]:px-5 group-data-[variant=pill]:py-1.5",
         "group-data-[variant=pill]:text-sm",
         "group-data-[variant=pill]:text-muted-foreground",

package/src/components/textarea/textarea.tsx

@@ -6,7 +6,7 @@ const textareaVariants = cva(
   [
     "w-full font-sans text-foreground",
     "bg-background dark:bg-surface",
-    "border border-edge rounded-none",
+    "border border-edge rounded-sm",
     "placeholder:text-muted-foreground",
     "focus-visible:outline-none",
     "focus-visible:border-accent-700 dark:focus-visible:border-accent",

package/src/components/tooltip/tooltip.tsx

@@ -16,7 +16,7 @@ const TooltipContent = forwardRef<
       sideOffset={sideOffset}
       className={cn(
         [
-          "z-50 rounded-none bg-popover-bg border border-popover-border px-3 py-1.5",
+          "z-50 rounded-sm bg-popover-bg border border-popover-border px-3 py-1.5",
           "text-sm text-foreground shadow-sm",
           "animate-in fade-in-0 zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",

package/src/components/ui/skeleton.tsx

@@ -9,7 +9,7 @@ const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
       <div
         ref={ref}
         aria-hidden="true"
-        className={cn("animate-pulse motion-reduce:animate-none rounded-none bg-muted", className)}
+        className={cn("animate-pulse motion-reduce:animate-none rounded-sm bg-muted", className)}
         {...rest}
       />
     );

package/src/styles/tokens.css

@@ -119,11 +119,11 @@
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "Departure Mono", ui-monospace, monospace;
 
-  /* Radius vocabulary (Abyssal Void — 0/0/2/4, full reserved for round-by-design) */
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 2px;
-  --radius-xl: 4px;
+  /* Radius vocabulary (Abyssal Void — 4/6/8 hard floor, full reserved for round-by-design) */
+  --radius-sm: 4px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
 }
 
 /* ──────────────────────────────────────────────
@@ -148,8 +148,8 @@
   --muted-foreground: oklch(0.55 0.014 270);
   --surface: oklch(0.94 0.009 270);
   --surface-foreground: oklch(0.22 0.015 270);
-  --edge: oklch(0.87 0.013 270);
-  --edge-hover: oklch(0.80 0.015 270);
+  --edge: rgba(0, 0, 0, 0.14);
+  --edge-hover: rgba(0, 0, 0, 0.22);
   --popover-bg: var(--surface);
   --popover-border: var(--edge);
 
@@ -180,8 +180,8 @@
   --muted-foreground: oklch(0.62 0.012 273);
   --surface: oklch(0.18 0.005 273);
   --surface-foreground: #f3f3f3;
-  --edge: rgba(255, 255, 255, 0.16);
-  --edge-hover: rgba(255, 255, 255, 0.24);
+  --edge: rgba(255, 255, 255, 0.10);
+  --edge-hover: rgba(255, 255, 255, 0.20);
   --popover-bg: var(--surface);
   --popover-border: var(--edge);
 
@@ -223,7 +223,7 @@
    detected from source files. This directive feeds
    them directly into the candidate list.
    ────────────────────────────────────────────── */
-@source inline("group-data-[variant=pill]:relative group-data-[variant=pill]:z-10 group-data-[variant=pill]:rounded-[2px] group-data-[variant=pill]:px-5 group-data-[variant=pill]:py-1.5 group-data-[variant=pill]:text-sm group-data-[variant=pill]:text-muted-foreground group-data-[variant=pill]:translate-y-0 group-data-[variant=pill]:hover:text-accent-500 dark:group-data-[variant=pill]:hover:text-accent group-data-[variant=pill]:data-[state=active]:text-accent-500 dark:group-data-[variant=pill]:data-[state=active]:text-accent group-data-[variant=pill]:data-[state=active]:translate-y-0");
+@source inline("group-data-[variant=pill]:relative group-data-[variant=pill]:z-10 group-data-[variant=pill]:rounded-sm group-data-[variant=pill]:px-5 group-data-[variant=pill]:py-1.5 group-data-[variant=pill]:text-sm group-data-[variant=pill]:text-muted-foreground group-data-[variant=pill]:translate-y-0 group-data-[variant=pill]:hover:text-accent-500 dark:group-data-[variant=pill]:hover:text-accent group-data-[variant=pill]:data-[state=active]:text-accent-500 dark:group-data-[variant=pill]:data-[state=active]:text-accent group-data-[variant=pill]:data-[state=active]:translate-y-0");
 
 /* ──────────────────────────────────────────────
    Utilities: gradient border effects