Fix a11y incomplete checks and glyph icons

2026-03-20 14:11:12 +08:00
parent 91a0bac8dd
commit 6b160e1993
14 changed files with 213 additions and 29 deletions
@@ -0,0 +1,133 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { cn } from "./cn";
+
+type IconProps = ComponentPropsWithoutRef<"svg">;
+
+function IconFrame({
+  children,
+  className,
+  viewBox = "0 0 16 16",
+  ...props
+}: IconProps & {
+  children: ReactNode;
+  viewBox?: string;
+}) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("size-4 shrink-0", className)}
+      fill="none"
+      viewBox={viewBox}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function CheckIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="M3.5 8.5 6.5 11.5 12.5 5.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.75"
+      />
+    </IconFrame>
+  );
+}
+
+export function ChevronDownIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="m4.5 6.5 3.5 3 3.5-3"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.75"
+      />
+    </IconFrame>
+  );
+}
+
+export function ChevronRightIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="m6 4.5 3.5 3.5L6 11.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.75"
+      />
+    </IconFrame>
+  );
+}
+
+export function CloseIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="m4.5 4.5 7 7m0-7-7 7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.75"
+      />
+    </IconFrame>
+  );
+}
+
+export function DotIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} viewBox="0 0 8 8" {...props}>
+      <circle cx="4" cy="4" fill="currentColor" r="2.25" />
+    </IconFrame>
+  );
+}
+
+export function SortAscendingIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="M8 12.5v-9m0 0L5.5 6m2.5-2.5L10.5 6"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconFrame>
+  );
+}
+
+export function SortDescendingIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="M8 3.5v9m0 0-2.5-2.5M8 12.5l2.5-2.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconFrame>
+  );
+}
+
+export function SortUnsortedIcon({ className, ...props }: IconProps) {
+  return (
+    <IconFrame className={className} {...props}>
+      <path
+        d="m5 6 3-3 3 3M11 10l-3 3-3-3"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </IconFrame>
+  );
+}