tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/components/overlay/dialog-actions.tsx

@@ -1,68 +0,0 @@
-import * as React from "react"
-import { Loader2Icon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-type DialogActionsAlign = "start" | "center" | "end" | "between"
-
-const alignClassName: Record<DialogActionsAlign, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-}
-
-export type DialogActionButtonProps = React.ComponentProps<typeof Button> & {
-  isLoading?: boolean
-  loadingLabel?: React.ReactNode
-}
-
-export type DialogActionsProps = React.ComponentProps<"div"> & {
-  align?: DialogActionsAlign
-  stackOnMobile?: boolean
-}
-
-function DialogActionButton({
-  children,
-  disabled,
-  isLoading = false,
-  loadingLabel,
-  className,
-  ...props
-}: DialogActionButtonProps) {
-  return (
-    <Button
-      className={className}
-      disabled={disabled || isLoading}
-      aria-busy={isLoading || undefined}
-      {...props}
-    >
-      {isLoading && <Loader2Icon data-icon="inline-start" className="animate-spin" />}
-      {isLoading && loadingLabel ? loadingLabel : children}
-    </Button>
-  )
-}
-
-function DialogActions({
-  className,
-  align = "end",
-  stackOnMobile = true,
-  ...props
-}: DialogActionsProps) {
-  return (
-    <div
-      data-slot="dialog-actions"
-      className={cn(
-        "flex items-center gap-2",
-        stackOnMobile && "flex-col-reverse sm:flex-row",
-        !stackOnMobile && "flex-row",
-        alignClassName[align],
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { DialogActions, DialogActionButton }

package/packages/cli/vendor/src/components/overlay/modal-shell.tsx

@@ -1,93 +0,0 @@
-import * as React from "react"
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
-
-type ModalShellSize = "sm" | "md" | "lg" | "xl" | "full"
-
-const modalSizeClassName: Record<ModalShellSize, string> = {
-  sm: "sm:max-w-sm",
-  md: "sm:max-w-lg",
-  lg: "sm:max-w-2xl",
-  xl: "sm:max-w-4xl",
-  full: "sm:max-w-[calc(100vw-2rem)] sm:h-[calc(100vh-2rem)]",
-}
-
-export type ModalShellProps = {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  trigger?: React.ReactNode
-  title?: React.ReactNode
-  description?: React.ReactNode
-  children?: React.ReactNode
-  footer?: React.ReactNode
-  size?: ModalShellSize
-  showCloseButton?: boolean
-  contentClassName?: string
-  headerClassName?: string
-  bodyClassName?: string
-}
-
-function renderDialogTrigger(trigger: React.ReactNode) {
-  if (!trigger) return null
-
-  if (React.isValidElement(trigger)) {
-    return <DialogTrigger render={trigger} />
-  }
-
-  return <DialogTrigger>{trigger}</DialogTrigger>
-}
-
-function ModalShell({
-  open,
-  defaultOpen,
-  onOpenChange,
-  trigger,
-  title,
-  description,
-  children,
-  footer,
-  size = "md",
-  showCloseButton = true,
-  contentClassName,
-  headerClassName,
-  bodyClassName,
-}: ModalShellProps) {
-  const hasHeader = Boolean(title || description)
-
-  return (
-    <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {renderDialogTrigger(trigger)}
-      <DialogContent
-        showCloseButton={showCloseButton}
-        className={cn(modalSizeClassName[size], contentClassName)}
-      >
-        {hasHeader && (
-          <DialogHeader className={headerClassName}>
-            {title && <DialogTitle>{title}</DialogTitle>}
-            {description && <DialogDescription>{description}</DialogDescription>}
-          </DialogHeader>
-        )}
-
-        {children && (
-          <div data-slot="modal-shell-body" className={cn("min-w-0", bodyClassName)}>
-            {children}
-          </div>
-        )}
-
-        {footer && <div data-slot="modal-shell-footer">{footer}</div>}
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export { ModalShell }
-export type { ModalShellSize }

package/packages/cli/vendor/src/components/overlay/sheet-shell.tsx

@@ -1,212 +0,0 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
-import { XIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-type SheetSide = "top" | "right" | "bottom" | "left"
-
-type SheetShellProps = {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  trigger?: React.ReactNode
-  title?: React.ReactNode
-  description?: React.ReactNode
-  children?: React.ReactNode
-  footer?: React.ReactNode
-  side?: SheetSide
-  showCloseButton?: boolean
-  contentClassName?: string
-  headerClassName?: string
-  bodyClassName?: string
-}
-
-const Sheet = DialogPrimitive.Root
-
-function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-function SheetPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-function SheetClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />
-}
-
-function SheetOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
-  return (
-      <DialogPrimitive.Backdrop
-      data-slot="sheet-overlay"
-      className={cn(
-        "fixed inset-0 z-50 bg-foreground/12 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const sheetSideClassName: Record<SheetSide, string> = {
-  top: "inset-x-0 top-0 max-h-[85vh] rounded-b-xl border-b data-open:slide-in-from-top data-closed:slide-out-to-top",
-  right:
-    "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-md",
-  bottom:
-    "inset-x-0 bottom-0 max-h-[85vh] rounded-t-xl border-t data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
-  left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-md",
-}
-
-function SheetContent({
-  className,
-  children,
-  side = "right",
-  showCloseButton = true,
-  ...props
-}: DialogPrimitive.Popup.Props & {
-  side?: SheetSide
-  showCloseButton?: boolean
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <DialogPrimitive.Popup
-        data-slot="sheet-content"
-        className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background p-4 text-foreground shadow-xl outline-none duration-200 data-open:animate-in data-closed:animate-out",
-          sheetSideClassName[side],
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetClose
-            render={
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                className="absolute right-3 top-3"
-              />
-            }
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </SheetClose>
-        )}
-      </DialogPrimitive.Popup>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-2 pr-8", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("font-heading text-base font-medium leading-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function renderSheetTrigger(trigger: React.ReactNode) {
-  if (!trigger) return null
-
-  if (React.isValidElement(trigger)) {
-    return <SheetTrigger render={trigger} />
-  }
-
-  return <SheetTrigger>{trigger}</SheetTrigger>
-}
-
-function SheetShell({
-  open,
-  defaultOpen,
-  onOpenChange,
-  trigger,
-  title,
-  description,
-  children,
-  footer,
-  side = "right",
-  showCloseButton = true,
-  contentClassName,
-  headerClassName,
-  bodyClassName,
-}: SheetShellProps) {
-  const hasHeader = Boolean(title || description)
-
-  return (
-    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {renderSheetTrigger(trigger)}
-      <SheetContent
-        side={side}
-        showCloseButton={showCloseButton}
-        className={contentClassName}
-      >
-        {hasHeader && (
-          <SheetHeader className={headerClassName}>
-            {title && <SheetTitle>{title}</SheetTitle>}
-            {description && <SheetDescription>{description}</SheetDescription>}
-          </SheetHeader>
-        )}
-
-        {children && (
-          <div data-slot="sheet-shell-body" className={cn("min-w-0 flex-1", bodyClassName)}>
-            {children}
-          </div>
-        )}
-
-        {footer && <SheetFooter>{footer}</SheetFooter>}
-      </SheetContent>
-    </Sheet>
-  )
-}
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetShell,
-  SheetTitle,
-  SheetTrigger,
-}
-export type { SheetShellProps, SheetSide }

package/packages/cli/vendor/src/components/ui/hover-card.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
-
-import { cn } from "@/lib/utils"
-
-export type HoverCardProps = Omit<PreviewCardPrimitive.Root.Props, "children"> &
-  Omit<React.ComponentProps<"span">, "content" | "children"> & {
-  trigger: React.ReactNode
-  content: React.ReactNode
-  side?: PreviewCardPrimitive.Positioner.Props["side"]
-  align?: PreviewCardPrimitive.Positioner.Props["align"]
-  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"]
-  alignOffset?: PreviewCardPrimitive.Positioner.Props["alignOffset"]
-  collisionPadding?: PreviewCardPrimitive.Positioner.Props["collisionPadding"]
-  delay?: PreviewCardPrimitive.Trigger.Props["delay"]
-  closeDelay?: PreviewCardPrimitive.Trigger.Props["closeDelay"]
-  disabled?: boolean
-  contentClassName?: string
-}
-
-function HoverCard({
-  trigger,
-  content,
-  side = "bottom",
-  align = "center",
-  sideOffset = 10,
-  alignOffset = 0,
-  collisionPadding = 12,
-  delay = 450,
-  closeDelay = 180,
-  disabled = false,
-  contentClassName,
-  className,
-  ...props
-}: HoverCardProps) {
-  if (disabled) {
-    return (
-      <span data-slot="hover-card" className={cn("inline-flex", className)} {...props}>
-        {trigger}
-      </span>
-    )
-  }
-
-  return (
-    <PreviewCardPrimitive.Root>
-      <PreviewCardPrimitive.Trigger
-        data-slot="hover-card-trigger"
-        delay={delay}
-        closeDelay={closeDelay}
-        render={<span data-slot="hover-card" className={cn("inline-flex", className)} {...props} />}
-      >
-        {trigger}
-      </PreviewCardPrimitive.Trigger>
-      <PreviewCardPrimitive.Portal>
-        <PreviewCardPrimitive.Positioner
-          className="isolate z-50"
-          side={side}
-          align={align}
-          sideOffset={sideOffset}
-          alignOffset={alignOffset}
-          collisionPadding={collisionPadding}
-        >
-          <PreviewCardPrimitive.Popup
-            data-slot="hover-card-content"
-            className={cn(
-              "z-50 min-w-60 max-w-[min(24rem,calc(100vw-1rem))] origin-(--transform-origin) rounded-[var(--aui-card-radius,var(--radius-xl))] border border-border/80 bg-popover/98 p-4 text-sm text-popover-foreground shadow-[0_18px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/8 outline-hidden backdrop-blur duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-              contentClassName
-            )}
-          >
-            {content}
-          </PreviewCardPrimitive.Popup>
-        </PreviewCardPrimitive.Positioner>
-      </PreviewCardPrimitive.Portal>
-    </PreviewCardPrimitive.Root>
-  )
-}
-
-export { HoverCard }

package/packages/cli/vendor/src/components/ui/input-group/index.tsx

@@ -1,8 +0,0 @@
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/components/ui/input/group"

package/packages/cli/vendor/src/components/ui/input-primitive/index.tsx

@@ -1,2 +0,0 @@
-export { InputPrimitive } from "@/components/ui/input/primitive"
-export type { InputPrimitiveProps } from "@/components/ui/input/primitive"

package/packages/cli/vendor/src/components/upload/file-dropzone.tsx

@@ -1,38 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type FileDropzoneProps = Omit<React.ComponentProps<"input">, "type" | "onChange"> & {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  value?: File[]
-  onFilesChange?: (files: File[]) => void
-  containerClassName?: string
-}
-
-function FileDropzone({ label = "Drop files here", description, value, onFilesChange, containerClassName, className, multiple = true, ...props }: FileDropzoneProps) {
-  const inputId = React.useId()
-  const files = value ?? []
-
-  return (
-    <label
-      htmlFor={inputId}
-      data-slot="file-dropzone"
-      className={cn("flex cursor-pointer flex-col items-center justify-center rounded-[var(--radius-2xl)] border border-dashed border-border/80 bg-muted/35 p-6 text-center transition hover:border-ring/45 hover:bg-muted/55", containerClassName)}
-    >
-      <span className="font-medium text-foreground">{label}</span>
-      {description ? <span className="mt-1 text-sm text-muted-foreground">{description}</span> : null}
-      {files.length ? <span className="mt-3 text-xs text-muted-foreground">{files.length} file selected</span> : null}
-      <input
-        id={inputId}
-        type="file"
-        multiple={multiple}
-        className={cn("sr-only", className)}
-        onChange={(event) => onFilesChange?.(Array.from(event.currentTarget.files ?? []))}
-        {...props}
-      />
-    </label>
-  )
-}
-
-export { FileDropzone }

package/packages/cli/vendor/src/showcase/premium/accordion/index.ts

@@ -1,2 +0,0 @@
-export { accordionMock } from "./mock"
-export { AccordionShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/accordion/mock.ts

@@ -1,43 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const accordionMock: ComponentDemoMock = {
-  code: `import { Accordion } from "tembro"
-
-const items = [
-  {
-    key: "tokens",
-    title: "Theme tokens",
-    description: "Control border, background, radius, and spacing from one place.",
-    content: "Keep product decisions inside tokens instead of hardcoded one-off wrappers.",
-  },
-  {
-    key: "composition",
-    title: "Component composition",
-    description: "Teach one component first.",
-    content: "Advanced behavior should be exposed through props, hooks, and helpers instead of separate public groups.",
-  },
-]
-
-export function Example() {
-  return <Accordion type="single" defaultValue="tokens" items={items} />
-}`,
-  htmlCode: `<details data-slot="accordion">
-  <summary data-slot="accordion-trigger">Theme tokens</summary>
-  <div data-slot="accordion-content">Keep product decisions inside tokens.</div>
-</details>`,
-  cliCommand: "npx tembro add accordion",
-  highlights: [
-    "Single and multiple expansion behavior",
-    "Title, description, and body content through one item contract",
-    "Good for docs FAQs, settings help, and release notes",
-  ],
-  scenarios: [
-    { title: "Settings help", description: "Hide advanced explanation until the user requests it." },
-    { title: "FAQ", description: "Keep pages shorter while preserving full guidance." },
-    { title: "Release checklist", description: "Reveal only the currently relevant operational details." },
-  ],
-  capabilityNotes: [
-    "Use `type=\"single\"` for focus-first documentation flows.",
-    "Use `type=\"multiple\"` when users may compare several sections together.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/accordion/showcase.tsx

@@ -1,138 +0,0 @@
-import * as React from "react"
-
-import { Accordion, Badge } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const docsItems = [
-  {
-    key: "tokens",
-    title: "Theme tokens stay in one place",
-    meta: "P0",
-    description: "Radius, color and shadow should not be redefined per route.",
-    content: "Use shared CSS tokens so consumers can adapt the system without fighting deeply nested component styles.",
-  },
-  {
-    key: "surface",
-    title: "One canonical public surface",
-    badge: <Badge variant="secondary">Core</Badge>,
-    description: "Teach one entry point before helper members.",
-    content: "Start with Input, Select, DataTable, Card and Badge. Move aliases and advanced members lower in the docs hierarchy.",
-  },
-  {
-    key: "demo",
-    title: "Real demos beat placeholder previews",
-    description: "Each route should prove the actual component behavior.",
-    meta: "Docs",
-    content: "A docs page should show the real installed component with interactive state, not a generic substitute card.",
-  },
-] as const
-
-const releaseItems = [
-  {
-    key: "docs",
-    title: "Docs updated",
-    badge: <Badge variant="secondary">Done</Badge>,
-    description: "Public route and CLI snippet verified",
-    content: "Component detail page, API notes, and install snippet were reviewed together before release.",
-  },
-  {
-    key: "tokens",
-    title: "Visual tokens synced",
-    meta: "Review",
-    description: "No stray radius, border, or surface overrides",
-    content: "The route uses package tokens directly so the result matches what consumers install.",
-  },
-  {
-    key: "qa",
-    title: "QA preview checked",
-    description: "Build and interactive preview passed",
-    disabled: true,
-    disabledReason: "Blocked until release candidate is built.",
-    content: "The component was verified with type-check and production build before push.",
-  },
-] as const
-
-export function AccordionShowcase() {
-  const [singleValue, setSingleValue] = React.useState<string | string[]>("surface")
-  const [multiValue, setMultiValue] = React.useState<string | string[]>(["docs"])
-  const [variant, setVariant] = React.useState<"default" | "soft" | "ghost">("soft")
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Accordion keeps dense guidance readable</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          This route uses the exported accordion surface directly. The page adds only spacing and explanation around it.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="mb-5 flex flex-wrap gap-2">
-          {(["soft", "default", "ghost"] as const).map((item) => (
-            <button
-              key={item}
-              type="button"
-              className={`rounded-full border px-3 py-1.5 text-xs font-medium ${variant === item ? "border-primary bg-primary/10 text-foreground" : "border-[color:var(--aui-divider)] text-muted-foreground"}`}
-              onClick={() => setVariant(item)}
-            >
-              {item}
-            </button>
-          ))}
-        </div>
-        <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Documentation flow</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Single-open mode keeps the user focused on one explanation at a time.
-            </p>
-            <Accordion className="mt-5" type="single" variant={variant} size="lg" value={singleValue} onValueChange={setSingleValue} items={[...docsItems]} />
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex items-start justify-between gap-4">
-              <div>
-                <p className="text-sm font-semibold aui-text-strong">Current open item</p>
-                <p className="mt-1 text-xs aui-text-muted">Controlled state mirrors route-level docs navigation.</p>
-              </div>
-              <Badge variant="secondary">{Array.isArray(singleValue) ? singleValue.join(", ") : singleValue || "none"}</Badge>
-            </div>
-            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Use this mode on component detail pages, FAQs, or policy explanations where only one answer should dominate the layout.</p>
-              <p>The trigger keeps title and helper description together, so content stays understandable even before expansion.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Operational checklist</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Multiple-open mode works better when teams compare several readiness items together.
-            </p>
-            <div className="mt-5 flex flex-wrap gap-2">
-              {(Array.isArray(multiValue) ? multiValue : []).map((item) => (
-                <Badge key={item} variant="outline">{item}</Badge>
-              ))}
-            </div>
-          </div>
-
-          <Accordion
-            className="xl:mt-8"
-            type="multiple"
-            variant={variant}
-            value={multiValue}
-            onValueChange={setMultiValue}
-            items={releaseItems.map((item, index) => ({
-              ...item,
-              indicatorPosition: index === 0 ? "start" : "end",
-            }))}
-          />
-        </div>
-      </section>
-    </div>
-  )
-}