tembro 2.1.13 → 3.1.1

package/packages/cli/vendor/src/components/modern/calendar-scheduler.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
 export type CalendarSchedulerEvent = {
   id: string
   title: React.ReactNode
@@ -19,54 +19,113 @@ export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   onCreateEvent?: (date: string) => void
   onEventClick?: (event: CalendarSchedulerEvent) => void
 }
-
-const toneClassName = {
-  default: "border-border bg-muted",
-  success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
-  warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
-  danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
-}
-
-function CalendarScheduler({ events, days, view = "week", empty = "No events scheduled.", onCreateEvent, onEventClick, className, ...props }: CalendarSchedulerProps) {
+
+const toneClassName = {
+  default: "border-border bg-muted",
+  success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
+  warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
+  danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
+}
+
+function CalendarScheduler({
+  events,
+  days,
+  view = "week",
+  empty = "No events scheduled.",
+  onCreateEvent,
+  onEventClick,
+  className,
+  ...props
+}: CalendarSchedulerProps) {
   const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
 
-  return (
-    <div data-slot="calendar-scheduler" data-view={view} className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)} {...props}>
-      {visibleDays.map((day) => (
-        <section key={day} className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div className="text-sm font-semibold text-foreground">{day}</div>
-            <div className="text-xs text-muted-foreground">{events.filter((event) => event.date === day).length} items</div>
+  if (visibleDays.length === 0) {
+    return (
+      <div
+        data-slot="calendar-scheduler"
+        data-view={view}
+        className={cn(
+          "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex min-h-32 items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-muted/20 px-4 py-6 text-center">
+          <div className="space-y-1.5">
+            <p data-empty="true" className="text-sm font-medium text-foreground">
+              {empty}
+            </p>
+            {onCreateEvent ? (
+              <button
+                type="button"
+                className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
+                onClick={() => onCreateEvent("today")}
+              >
+                Create event
+              </button>
+            ) : null}
           </div>
-          <div className="grid gap-2">
-            {events.filter((event) => event.date === day).length === 0 ? (
-              <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
-                {empty}
-              </div>
-            ) : (
-              events.filter((event) => event.date === day).map((event) => (
-                <button
-                  key={event.id}
-                  type="button"
-                  className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", toneClassName[event.tone ?? "default"])}
-                  onClick={() => onEventClick?.(event)}
-                >
-                  <div className="font-medium">{event.title}</div>
-                  {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                  {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
-                </button>
-              ))
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="calendar-scheduler"
+      data-view={view}
+      className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)}
+      {...props}
+    >
+      {visibleDays.map((day) => {
+        const dayEvents = events.filter((event) => event.date === day)
+
+        return (
+          <section
+            key={day}
+            className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]"
+          >
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <div className="text-sm font-semibold text-foreground">{day}</div>
+              <div className="text-xs text-muted-foreground">{dayEvents.length} items</div>
+            </div>
+            <div className="grid gap-2">
+              {dayEvents.length === 0 ? (
+                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
+                  {empty}
+                </div>
+              ) : (
+                dayEvents.map((event) => (
+                  <button
+                    key={event.id}
+                    type="button"
+                    className={cn(
+                      "rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                      toneClassName[event.tone ?? "default"],
+                    )}
+                    onClick={() => onEventClick?.(event)}
+                  >
+                    <div className="font-medium">{event.title}</div>
+                    {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
+                    {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                  </button>
+                ))
+              )}
+            </div>
+            {onCreateEvent && (
+              <button
+                type="button"
+                className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
+                onClick={() => onCreateEvent(day)}
+              >
+                Create event
+              </button>
             )}
-          </div>
-          {onCreateEvent && (
-            <button type="button" className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent(day)}>
-              Create event
-            </button>
-          )}
-        </section>
-      ))}
+          </section>
+        )
+      })}
     </div>
-  )
-}
-
-export { CalendarScheduler }
+  )
+}
+
+export { CalendarScheduler }

package/packages/cli/vendor/src/components/modern/dual-list-picker.tsx

@@ -1,18 +1,19 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type DualListItem = {
-  label: React.ReactNode
-  value: string
-  disabled?: boolean
-}
-
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DualListItem = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+}
+
 export type DualListPickerProps = React.ComponentProps<"div"> & {
   items: DualListItem[]
   picked?: string[]
+  defaultPicked?: string[]
   onPickedChange?: (value: string[]) => void
   availableTitle?: React.ReactNode
   pickedTitle?: React.ReactNode
@@ -24,74 +25,106 @@ export type DualListPickerProps = React.ComponentProps<"div"> & {
 
 function DualListPicker({
   items,
-  picked = [],
+  picked,
+  defaultPicked = [],
   onPickedChange,
   availableTitle = "Available",
   pickedTitle = "Selected",
   searchPlaceholder = "Search items...",
-  emptyMessage = "No items.",
+  emptyMessage = "Nothing to show.",
   maxPicked,
   transferAll = true,
   className,
   ...props
 }: DualListPickerProps) {
+  const [internalPicked, setInternalPicked] = React.useState(defaultPicked)
   const [query, setQuery] = React.useState("")
-  const pickedSet = new Set(picked)
+  const currentPicked = picked ?? internalPicked
+  const pickedSet = React.useMemo(() => new Set(currentPicked), [currentPicked])
+
   const normalizedQuery = query.trim().toLowerCase()
-  const matchesQuery = (item: DualListItem) => {
-    if (!normalizedQuery) return true
-    return String(item.label).toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
-  }
-  const availableItems = items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item))
-  const pickedItems = items.filter((item) => pickedSet.has(item.value) && matchesQuery(item))
-  const maxReached = maxPicked !== undefined && picked.length >= maxPicked
+  const matchesQuery = React.useCallback(
+    (item: DualListItem) => {
+      if (!normalizedQuery) return true
+      const label = typeof item.label === "string" ? item.label : String(item.value)
+      return label.toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
+    },
+    [normalizedQuery]
+  )
+
+  const availableItems = React.useMemo(
+    () => items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item)),
+    [items, matchesQuery, pickedSet]
+  )
+  const pickedItems = React.useMemo(
+    () => items.filter((item) => pickedSet.has(item.value) && matchesQuery(item)),
+    [items, matchesQuery, pickedSet]
+  )
+  const maxReached = maxPicked !== undefined && currentPicked.length >= maxPicked
+
+  const setPickedValues = React.useCallback(
+    (next: string[]) => {
+      if (picked === undefined) {
+        setInternalPicked(next)
+      }
+      onPickedChange?.(next)
+    },
+    [onPickedChange, picked]
+  )
 
   function toggle(value: string) {
-    const isPicked = pickedSet.has(value)
-    if (!isPicked && maxReached) return
-    const next = isPicked ? picked.filter((item) => item !== value) : [...picked, value]
-    onPickedChange?.(next)
+    if (pickedSet.has(value)) {
+      setPickedValues(currentPicked.filter((item) => item !== value))
+      return
+    }
+
+    if (maxReached) return
+    setPickedValues([...currentPicked, value])
   }
 
   function addAll() {
-    const next = [...picked]
+    const next = [...currentPicked]
+
     for (const item of items) {
       if (item.disabled || pickedSet.has(item.value)) continue
       if (maxPicked !== undefined && next.length >= maxPicked) break
       next.push(item.value)
     }
-    onPickedChange?.(next)
+
+    setPickedValues(next)
   }
 
   function removeAll() {
-    onPickedChange?.([])
+    setPickedValues([])
   }
 
-  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[], mode: "available" | "picked") => (
+  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[]) => (
     <div className="min-h-48 rounded-lg border bg-card">
       <div className="flex items-center justify-between gap-2 border-b px-3 py-2 text-sm font-medium">
         <span>{title}</span>
         <span className="text-xs font-normal text-muted-foreground">{columnItems.length}</span>
       </div>
       <div className="grid gap-1 p-2">
-        {columnItems.length === 0 ? (
-          <div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
-        ) : columnItems.map((item) => (
-          <button
-            key={item.value}
-            type="button"
-            disabled={item.disabled || (mode === "available" && maxReached)}
-            className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50"
-            aria-pressed={pickedSet.has(item.value)}
-            onClick={() => toggle(item.value)}
-          >
-            <span>{item.label}</span>
-            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
+        {columnItems.length ? (
+          columnItems.map((item) => (
+            <button
+              key={item.value}
+              type="button"
+              disabled={item.disabled}
+              aria-pressed={pickedSet.has(item.value)}
+              className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted disabled:opacity-50"
+              onClick={() => toggle(item.value)}
+            >
+              <span>{item.label}</span>
+              <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
+            </button>
+          ))
+        ) : (
+          <div className="px-2 py-3 text-sm text-muted-foreground">{emptyMessage}</div>
+        )}
+      </div>
+    </div>
+  )
 
   return (
     <div data-slot="dual-list-picker" className={cn("grid gap-3", className)} {...props}>
@@ -102,20 +135,40 @@ function DualListPicker({
           className="h-9 min-w-0 rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40 sm:max-w-xs"
           onChange={(event) => setQuery(event.currentTarget.value)}
         />
-        {transferAll && (
-          <div className="flex gap-2">
-            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={maxReached} onClick={addAll}>Add all</button>
-            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={picked.length === 0} onClick={removeAll}>Remove all</button>
+        {transferAll ? (
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
+              disabled={maxReached}
+              onClick={addAll}
+            >
+              Add all
+            </button>
+            <button
+              type="button"
+              className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
+              disabled={currentPicked.length === 0}
+              onClick={removeAll}
+            >
+              Remove all
+            </button>
           </div>
-        )}
+        ) : null}
       </div>
+
       <div className="grid gap-3 md:grid-cols-2">
-        {renderColumn(availableTitle, availableItems, "available")}
-        {renderColumn(pickedTitle, pickedItems, "picked")}
+        {renderColumn(availableTitle, availableItems)}
+        {renderColumn(pickedTitle, pickedItems)}
       </div>
-      {maxPicked !== undefined && <div className="text-xs text-muted-foreground">{picked.length} / {maxPicked} selected</div>}
+
+      {maxPicked !== undefined ? (
+        <div className="text-xs text-muted-foreground">
+          {currentPicked.length} / {maxPicked} selected
+        </div>
+      ) : null}
     </div>
   )
 }
-
-export { DualListPicker }
+
+export { DualListPicker }

package/packages/cli/vendor/src/components/modern/index.ts

@@ -1,11 +1,6 @@
 export * from "../display/carousel"
-export * from "../display/qr-code"
 export * from "../display/tag"
 export * from "../display/typography"
 export * from "./calendar-scheduler"
 export * from "./dual-list-picker"
-export * from "./menubar"
-export * from "./navigation-menu"
-export * from "./resizable-panel"
-export * from "./rich-text-editor"
-export * from "./tour"
+export * from "./resizable-panel"

package/packages/cli/vendor/src/components/modern/rich-text-editor.tsx

@@ -1,49 +1,58 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type RichTextEditorProps = React.ComponentProps<"div"> & {
   value?: string
+  defaultValue?: string
   onValueChange?: (value: string) => void
+  output?: "text" | "html"
   placeholder?: string
-  output?: "html" | "text"
-  disabled?: boolean
 }
 
-function RichTextEditor({ value, onValueChange, placeholder = "Write something...", output = "html", disabled = false, className, ...props }: RichTextEditorProps) {
-  const ref = React.useRef<HTMLDivElement | null>(null)
-
-  React.useEffect(() => {
-    if (ref.current && value !== undefined && ref.current.innerHTML !== value) {
-      ref.current.innerHTML = value
-    }
-  }, [value])
-
-  return (
-    <div data-slot="rich-text-editor" data-disabled={disabled || undefined} className={cn("grid gap-2 rounded-lg border bg-background p-2", disabled && "opacity-60", className)} {...props}>
-      <div className="flex flex-wrap gap-1 border-b pb-2">
-        {[
-          ["bold", "B"],
-          ["italic", "I"],
-          ["underline", "U"],
-        ].map(([command, label]) => (
-          <button key={command} type="button" disabled={disabled} className="rounded border px-2 py-1 text-xs font-medium disabled:opacity-50" onClick={() => document.execCommand(command)}>
-            {label}
-          </button>
-        ))}
-      </div>
-      <div
-        ref={ref}
-        contentEditable={!disabled}
-        aria-disabled={disabled || undefined}
-        data-placeholder={placeholder}
-        className="min-h-32 rounded-md p-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
-        onInput={(event) => onValueChange?.(output === "text" ? event.currentTarget.textContent ?? "" : event.currentTarget.innerHTML)}
+function RichTextEditor({
+  value,
+  defaultValue,
+  onValueChange,
+  output: _output,
+  placeholder = "Start typing...",
+  className,
+  children,
+  ...props
+}: RichTextEditorProps) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? "")
+  const isControlled = value !== undefined
+  const currentValue = isControlled ? value ?? "" : uncontrolledValue
+
+  return (
+    <div
+      {...props}
+      data-slot="rich-text-editor"
+      className={cn(
+        "min-h-28 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-3 py-2 text-sm leading-6 text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] outline-none transition-[background-color,border-color,box-shadow] focus-within:border-[color:var(--ring)] focus-within:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)]",
+        className
+      )}
+    >
+      <textarea
+        value={currentValue}
+        placeholder={placeholder}
+        aria-multiline="true"
+        className={cn(
+          "min-h-20 w-full resize-none border-0 bg-transparent p-0 outline-none placeholder:text-muted-foreground/65"
+        )}
+        onChange={(event) => {
+          const nextValue = event.currentTarget.value
+          if (!isControlled) {
+            setUncontrolledValue(nextValue)
+          }
+          onValueChange?.(nextValue)
+        }}
       />
+      {children}
     </div>
   )
 }
-
-export { RichTextEditor }
+
+export { RichTextEditor }

package/packages/cli/vendor/src/components/modern/tour.tsx

@@ -1,62 +1,72 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
 export type TourStep = {
   title: React.ReactNode
   description?: React.ReactNode
-  target?: string
 }
-
-export type TourProps = React.ComponentProps<"div"> & {
-  steps: TourStep[]
-  index?: number
-  onIndexChange?: (index: number) => void
-  onClose?: () => void
-  onSkip?: () => void
+
+export type TourProps = React.ComponentProps<"div"> & {
+  steps: TourStep[]
   onFinish?: () => void
-  placement?: "top" | "right" | "bottom" | "left"
+  onClose?: () => void
+  doneLabel?: string
+  closeLabel?: string
 }
 
-function Tour({ steps, index = 0, onIndexChange, onClose, onSkip, onFinish, placement = "bottom", className, ...props }: TourProps) {
-  const step = steps[index]
-  const containerRef = React.useRef<HTMLDivElement | null>(null)
-  React.useEffect(() => {
-    containerRef.current?.focus()
-  }, [index])
-
-  if (!step) return null
+function Tour({
+  steps,
+  onFinish,
+  onClose,
+  doneLabel = "Done",
+  closeLabel = "Close",
+  className,
+  ...props
+}: TourProps) {
+  const activeStep = steps[0]
 
   return (
     <div
-      ref={containerRef}
-      data-slot="tour"
-      data-placement={placement}
-      tabIndex={-1}
-      className={cn("rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/40", className)}
       {...props}
+      data-slot="tour"
+      className={cn(
+        "rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-card,var(--background))] p-4 text-sm text-foreground shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]",
+        className
+      )}
     >
-      <div className="grid gap-2">
-        <div className="font-semibold">{step.title}</div>
-        {step.description && <div className="text-sm text-muted-foreground">{step.description}</div>}
-        {step.target && <div className="text-xs text-muted-foreground">{step.target}</div>}
-        <div className="flex items-center justify-between gap-3 pt-2">
-          <span className="text-xs text-muted-foreground">{index + 1} / {steps.length}</span>
-          <div className="flex gap-2">
-            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => { onSkip?.(); onClose?.() }}>Skip</button>
-            <button type="button" className="rounded-md border px-2.5 py-1 text-sm" disabled={index === 0} onClick={() => onIndexChange?.(index - 1)}>Back</button>
-            {index < steps.length - 1 ? (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => onIndexChange?.(index + 1)}>Next</button>
-            ) : (
-              <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-sm text-primary-foreground" onClick={() => { onFinish?.(); onClose?.() }}>Done</button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export { Tour }
+      <div className="space-y-2">
+        <div className="text-base font-semibold">{activeStep?.title ?? "Tour"}</div>
+        {activeStep?.description ? <p className="text-muted-foreground">{activeStep.description}</p> : null}
+      </div>
+
+      <div className="mt-4 flex items-center justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            onClose?.()
+          }}
+        >
+          {closeLabel}
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          onClick={() => {
+            onFinish?.()
+            onClose?.()
+          }}
+        >
+          {doneLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export { Tour }