refactor(ui): extract reusable component package

packages/ui/src/components/CornerBracketFrame.tsx

@@ -0,0 +1,26 @@
+export interface CornerBracketFrameProps {
+  density?: "regular" | "tight";
+  size?: "sm" | "md" | "lg";
+  tone?: "neutral" | "accent" | "danger";
+}
+
+export function CornerBracketFrame({
+  density = "regular",
+  size = "md",
+  tone = "neutral",
+}: CornerBracketFrameProps) {
+  return (
+    <div
+      className="corner-bracket-frame"
+      data-density={density}
+      data-size={size}
+      data-tone={tone}
+      aria-hidden="true"
+    >
+      <span data-corner="top-left" />
+      <span data-corner="top-right" />
+      <span data-corner="bottom-left" />
+      <span data-corner="bottom-right" />
+    </div>
+  );
+}