feat: table component with data, editable, and async variants

components/motion/checkbox.tsx

@@ -16,6 +16,7 @@ export interface CheckboxProps {
   label?: string;
   className?: string;
   id?: string;
+  "aria-label"?: string;
 }
 
 export function Checkbox({
@@ -26,6 +27,7 @@ export function Checkbox({
   label,
   className,
   id: idProp,
+  "aria-label": ariaLabel,
 }: CheckboxProps) {
   const autoId = useId();
   const id = idProp ?? autoId;
@@ -47,6 +49,7 @@ export function Checkbox({
         type="button"
         role="checkbox"
         aria-checked={indeterminate ? "mixed" : checked}
+        aria-label={ariaLabel}
         disabled={disabled}
         onClick={() => !disabled && onCheckedChange(!checked)}
         whileTap={reduce || disabled ? undefined : { scale: 0.92 }}

components/motion/table/editable-cell.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+export function EditableCell({
+  value,
+  label,
+  onChange,
+}: {
+  value: string;
+  label: string;
+  onChange: (next: string) => void;
+}) {
+  return (
+    <input
+      value={value}
+      aria-label={label}
+      size={1}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder="Empty"
+      className="-mx-2 w-full min-w-0 appearance-none rounded-md border-0 bg-transparent px-2 py-1 text-foreground outline-none transition-colors placeholder:text-muted-foreground/40 focus:bg-muted focus:ring-1 focus:ring-ring"
+    />
+  );
+}