@squadbase/vantage 0.7.0 → 0.7.1-dev1.0d13f9a

package/registry/ui/checkbox.tsx

@@ -5,14 +5,14 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
 import { cn } from "@squadbase/vantage/ui"
-import { CheckIcon } from "lucide-react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "group/checkbox peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary",
         className
       )}
       {...props}
@@ -21,7 +21,8 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon />
+        <CheckIcon className="group-data-indeterminate/checkbox:hidden" />
+        <MinusIcon className="hidden group-data-indeterminate/checkbox:block" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/registry/ui/code-block.tsx

@@ -0,0 +1,44 @@
+// Copied by `vantage add ui code-block`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/code-block.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+
+type CodeBlockProps = Omit<React.ComponentProps<"div">, "children"> & {
+  /** The text shown and copied. No syntax highlighting. */
+  code: string
+  /** Plain-text label above the code (a file name or language). */
+  title?: string
+}
+
+/** Monospace text with a copy button. */
+function CodeBlock({ code, title, className, ...props }: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div data-slot="code-block" className={cn("rounded-lg bg-muted", className)} {...props}>
+      <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1.5">
+        <span className="truncate text-xs text-muted-foreground">{title}</span>
+        <Button type="button" variant="ghost" size="xs" onClick={copy} aria-label="Copy code">
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? "Copied" : "Copy"}
+        </Button>
+      </div>
+      <pre className="overflow-x-auto p-3 font-mono text-sm text-foreground">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+export { CodeBlock, type CodeBlockProps }