@traky-app/ui 1.0.0 → 1.2.0

package/src/ui/checkpoint.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { IconBookmark } from "@tabler/icons-react"
+
+import { Button } from "./button"
+import { Marker, MarkerContent, MarkerIcon } from "./marker"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip"
+import { cn } from "../lib/utils"
+
+/**
+ * Checkpoint (AI Element): punto de restauración en un hilo.
+ * Compuesto con Marker + Button — https://ui.shadcn.com/docs/ai-elements/base/checkpoint
+ */
+function Checkpoint({
+  className,
+  ...props
+}: React.ComponentProps<typeof Marker>) {
+  return (
+    <Marker
+      data-slot="checkpoint"
+      variant="separator"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function CheckpointIcon({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof MarkerIcon>) {
+  return (
+    <MarkerIcon data-slot="checkpoint-icon" className={className} {...props}>
+      {children ?? <IconBookmark />}
+    </MarkerIcon>
+  )
+}
+
+function CheckpointTrigger({
+  className,
+  children = "Restore",
+  tooltip,
+  ...props
+}: React.ComponentProps<typeof Button> & {
+  tooltip?: string
+}) {
+  const button = (
+    <Button
+      data-slot="checkpoint-trigger"
+      type="button"
+      size="xs"
+      variant="outline"
+      className={cn(className)}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+function CheckpointContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MarkerContent>) {
+  return (
+    <MarkerContent
+      data-slot="checkpoint-content"
+      className={cn("inline-flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Checkpoint, CheckpointIcon, CheckpointContent, CheckpointTrigger }

package/src/ui/code-block.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import { IconCheck, IconCopy } from "@tabler/icons-react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+
+const codeBlockVariants = cva(
+  "group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs",
+  {
+    variants: {
+      variant: {
+        default:
+          "border border-input bg-background text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+        destructive:
+          "border border-destructive/30 bg-background text-destructive dark:border-destructive/40",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function CodeBlock({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof codeBlockVariants> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="code-block"
+      data-variant={variant}
+      data-size={size}
+      className={cn(codeBlockVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-header"
+      className={cn(
+        "flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-title"
+      className={cn(
+        "min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-actions"
+      className={cn(
+        "-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:-me-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockCopyButton({
+  value,
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "children" | "onClick"> & {
+  value: string
+}) {
+  const [copied, setCopied] = React.useState(false)
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        className={cn("text-muted-foreground", className)}
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value)
+            setCopied(true)
+            window.setTimeout(() => setCopied(false), 1500)
+          } catch {
+            // ignore
+          }
+        }}
+        {...props}
+      >
+        {copied ? <IconCheck /> : <IconCopy />}
+      </Button>
+      <span aria-live="polite" className="sr-only">
+        {copied ? "Copied" : ""}
+      </span>
+    </>
+  )
+}
+
+function CodeBlockContent({
+  className,
+  children,
+  style,
+  wrap = false,
+  lineNumbers = false,
+  startLine = 1,
+  ...props
+}: React.ComponentProps<"pre"> & {
+  wrap?: boolean
+  lineNumbers?: boolean
+  startLine?: number
+}) {
+  return (
+    <pre
+      data-slot="code-block-content"
+      data-wrap={wrap || undefined}
+      data-numbered={lineNumbers || undefined}
+      dir="ltr"
+      tabIndex={0}
+      style={{ counterReset: `line ${startLine - 1}`, ...style }}
+      className={cn(
+        "min-h-0 min-w-0 overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap",
+        className
+      )}
+      {...props}
+    >
+      <code
+        data-slot="code-block-code"
+        className="grid min-h-lh min-w-max content-start in-data-wrap:min-w-0"
+      >
+        {lineNumbers && typeof children === "string"
+          ? children
+              .replace(/\n$/, "")
+              .split("\n")
+              .map((line, index) => (
+                <CodeBlockLine key={index}>{line}</CodeBlockLine>
+              ))
+          : children}
+      </code>
+    </pre>
+  )
+}
+
+const codeBlockLineVariants = cva(
+  "relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none",
+  {
+    variants: {
+      variant: {
+        default: "",
+        added: "bg-muted after:content-['+']",
+        removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+        highlighted: "bg-muted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function CodeBlockLine({
+  className,
+  variant = "default",
+  children,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>) {
+  const empty =
+    children === undefined ||
+    children === null ||
+    children === "" ||
+    (Array.isArray(children) && children.length === 0)
+
+  return (
+    <span
+      data-slot="code-block-line"
+      data-variant={variant}
+      className={cn(codeBlockLineVariants({ variant }), className)}
+      {...props}
+    >
+      <span data-slot="code-block-line-content" className="min-w-0">
+        {empty ? "\n" : children}
+      </span>
+    </span>
+  )
+}
+
+function CodeBlockFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="code-block-footer"
+      className={cn(
+        "flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockTitle,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockContent,
+  CodeBlockLine,
+  CodeBlockFooter,
+}

package/src/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/ui/command.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import { IconSearch } from "@tabler/icons-react";
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { DISABLE_INPUT_AUTOFILL } from "../lib/disable-input-autofill"
+import { cn } from "../lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  name,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <IconSearch className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        // type=search + anti-autofill: evita iCloud Password / gestores
+        // en “Buscar usuario”, “Buscar dirección”, etc.
+        {...DISABLE_INPUT_AUTOFILL}
+        // cmdk omite `type` de sus props, pero el input sí lo recibe.
+        {...({ type: "search" } as React.ComponentProps<typeof CommandPrimitive.Input>)}
+        enterKeyHint="search"
+        name={name ?? "traky-command-search"}
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}