tembro 2.0.2 → 2.0.4

package/dist/showcase/premium/tag-list/showcase.js

@@ -1,83 +0,0 @@
-import { TagList as e } from "../../../components/display/tag-list.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/showcase/premium/tag-list/showcase.tsx
-var i = "border-t border-[color:var(--aui-divider)] py-6", a = [
-	{
-		key: "react",
-		label: "React"
-	},
-	{
-		key: "typescript",
-		label: "TypeScript"
-	},
-	{
-		key: "dashboard",
-		label: "Dashboard"
-	},
-	{
-		key: "design-system",
-		label: "Design system"
-	},
-	{
-		key: "release",
-		label: "Release"
-	}
-];
-function o() {
-	let [o, s] = t.useState(a);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-0",
-		children: [/* @__PURE__ */ r("section", {
-			className: "pb-6",
-			children: [
-				/* @__PURE__ */ n("p", {
-					className: "text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted",
-					children: "Installed display primitive"
-				}),
-				/* @__PURE__ */ n("h3", {
-					className: "mt-3 text-2xl font-semibold tracking-tight aui-text-strong",
-					children: "TagList shows existing labels, not text entry"
-				}),
-				/* @__PURE__ */ n("p", {
-					className: "mt-3 max-w-2xl text-sm leading-6 aui-text-muted",
-					children: "Use TagList to display or lightly edit known labels. If the user must type new values, move to TagInput instead."
-				})
-			]
-		}), /* @__PURE__ */ n("section", {
-			className: i,
-			children: /* @__PURE__ */ r("div", {
-				className: "grid gap-6 xl:grid-cols-[1fr_360px]",
-				children: [/* @__PURE__ */ r("div", { children: [
-					/* @__PURE__ */ n("p", {
-						className: "text-lg font-semibold aui-text-strong",
-						children: "Editable metadata chips"
-					}),
-					/* @__PURE__ */ n("p", {
-						className: "mt-2 max-w-xl text-sm leading-6 aui-text-muted",
-						children: "Remove actions should stay small and secondary so the tags remain readable as content first."
-					}),
-					/* @__PURE__ */ n("div", {
-						className: "mt-5 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4",
-						children: /* @__PURE__ */ n(e, {
-							items: o,
-							removable: !0,
-							onRemove: (e) => s((t) => t.filter((t) => t.key !== e.key))
-						})
-					})
-				] }), /* @__PURE__ */ r("div", {
-					className: "rounded-xl border border-[color:var(--aui-divider)] p-4",
-					children: [/* @__PURE__ */ n("p", {
-						className: "text-sm font-semibold aui-text-strong",
-						children: "Guidance"
-					}), /* @__PURE__ */ r("div", {
-						className: "mt-3 space-y-3 text-sm leading-6 aui-text-muted",
-						children: [/* @__PURE__ */ n("p", { children: "TagList is display-first. It should not impersonate a full input when creation is not available." }), /* @__PURE__ */ n("p", { children: "Use `max` when pages need a condensed summary and overflow should collapse into a count chip." })]
-					})]
-				})]
-			})
-		})]
-	});
-}
-//#endregion
-export { o as TagListShowcase };

package/dist/showcase/premium/watermark/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./mock.cjs"),t=require("./showcase.cjs");exports.WatermarkShowcase=t.WatermarkShowcase,exports.watermarkMock=e.watermarkMock;

package/dist/showcase/premium/watermark/index.d.ts

@@ -1,2 +0,0 @@
-export { watermarkMock } from "./mock";
-export { WatermarkShowcase } from "./showcase";

package/dist/showcase/premium/watermark/index.js

@@ -1,3 +0,0 @@
-import { watermarkMock as e } from "./mock.js";
-import { WatermarkShowcase as t } from "./showcase.js";
-export { t as WatermarkShowcase, e as watermarkMock };

package/dist/showcase/premium/watermark/mock.cjs

@@ -1,11 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { Watermark } from "@/index"
-
-export function Example() {
-  return (
-    <Watermark text="PRIVATE BETA">
-      <div className="grid h-28 place-items-center rounded-xl border bg-card">
-        Document surface
-      </div>
-    </Watermark>
-  )
-}`,cliCommand:`npx tembro add watermark`,highlights:[`Optional watermark for document and export previews`,`Works on any container content`,`Configurable watermark text and overlay style`],scenarios:[{title:`Confidential docs`,description:`Show usage watermark without blocking interaction.`},{title:`Design previews`,description:`Brand mark on generated screenshots.`},{title:`Shared exports`,description:`Visual indicator for internal staging artifacts.`}]};exports.watermarkMock=e;

package/dist/showcase/premium/watermark/mock.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentDemoMock } from "../types";
-export declare const watermarkMock: ComponentDemoMock;

package/dist/showcase/premium/watermark/mock.js

@@ -1,26 +0,0 @@
-//#region src/showcase/premium/watermark/mock.ts
-var e = {
-	code: "import { Watermark } from \"@/index\"\n\nexport function Example() {\n  return (\n    <Watermark text=\"PRIVATE BETA\">\n      <div className=\"grid h-28 place-items-center rounded-xl border bg-card\">\n        Document surface\n      </div>\n    </Watermark>\n  )\n}",
-	cliCommand: "npx tembro add watermark",
-	highlights: [
-		"Optional watermark for document and export previews",
-		"Works on any container content",
-		"Configurable watermark text and overlay style"
-	],
-	scenarios: [
-		{
-			title: "Confidential docs",
-			description: "Show usage watermark without blocking interaction."
-		},
-		{
-			title: "Design previews",
-			description: "Brand mark on generated screenshots."
-		},
-		{
-			title: "Shared exports",
-			description: "Visual indicator for internal staging artifacts."
-		}
-	]
-};
-//#endregion
-export { e as watermarkMock };

package/dist/showcase/premium/watermark/showcase.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/watermark.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=[`tembro`,`STAGING`,`DRAFT`,`PRIVATE BETA`];function o(){let[e,o]=r.useState(a[0]);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[(0,i.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:a.map(n=>(0,i.jsx)(t.Button,{size:`sm`,variant:e===n?`default`:`outline`,onClick:()=>o(n),children:n},n))}),(0,i.jsx)(n.Watermark,{text:e,children:(0,i.jsx)(`div`,{className:`grid h-36 place-items-center rounded-xl border bg-card p-5 text-sm text-muted-foreground`,children:`This content keeps full interaction while visually marking environment.`})})]})}exports.WatermarkShowcase=o;

package/dist/showcase/premium/watermark/showcase.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare function WatermarkShowcase(): React.JSX.Element;

package/dist/showcase/premium/watermark/showcase.js

@@ -1,34 +0,0 @@
-import { Button as e } from "../../../components/ui/button/index.js";
-import { Watermark as t } from "../../../components/display/watermark.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/showcase/premium/watermark/showcase.tsx
-var a = [
-	"tembro",
-	"STAGING",
-	"DRAFT",
-	"PRIVATE BETA"
-];
-function o() {
-	let [o, s] = n.useState(a[0]);
-	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
-		children: [/* @__PURE__ */ r("div", {
-			className: "flex flex-wrap gap-2",
-			children: a.map((t) => /* @__PURE__ */ r(e, {
-				size: "sm",
-				variant: o === t ? "default" : "outline",
-				onClick: () => s(t),
-				children: t
-			}, t))
-		}), /* @__PURE__ */ r(t, {
-			text: o,
-			children: /* @__PURE__ */ r("div", {
-				className: "grid h-36 place-items-center rounded-xl border bg-card p-5 text-sm text-muted-foreground",
-				children: "This content keeps full interaction while visually marking environment."
-			})
-		})]
-	});
-}
-//#endregion
-export { o as WatermarkShowcase };

package/packages/cli/vendor/src/components/display/aspect-ratio.tsx

@@ -1,22 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type AspectRatioProps = React.ComponentProps<"div"> & {
-  ratio?: number
-}
-
-function AspectRatio({ ratio = 16 / 9, className, style, children, ...props }: AspectRatioProps) {
-  return (
-    <div
-      data-slot="aspect-ratio"
-      className={cn("relative w-full overflow-hidden", className)}
-      style={{ aspectRatio: String(ratio), ...style }}
-      {...props}
-    >
-      <div className="absolute inset-0">{children}</div>
-    </div>
-  )
-}
-
-export { AspectRatio }

package/packages/cli/vendor/src/components/display/float-button.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type FloatButtonProps = React.ComponentProps<"button"> & {
-  placement?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
-}
-
-const placementClassName = {
-  "bottom-right": "bottom-6 right-6",
-  "bottom-left": "bottom-6 left-6",
-  "top-right": "right-6 top-6",
-  "top-left": "left-6 top-6",
-}
-
-function FloatButton({ placement = "bottom-right", className, ...props }: FloatButtonProps) {
-  return (
-    <button
-      type="button"
-      data-slot="float-button"
-      className={cn("fixed z-50 inline-flex size-12 items-center justify-center rounded-full border bg-primary text-primary-foreground shadow-lg transition hover:opacity-90", placementClassName[placement], className)}
-      {...props}
-    />
-  )
-}
-
-export { FloatButton }

package/packages/cli/vendor/src/components/display/key-value-card.tsx

@@ -1,50 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, type CardProps } from "@/components/ui/card"
-import { cn } from "@/lib/utils"
-
-export type KeyValueCardItem = {
-  key: string
-  label: React.ReactNode
-  value: React.ReactNode
-  description?: React.ReactNode
-}
-
-export type KeyValueCardProps = Omit<CardProps, "children"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  items: KeyValueCardItem[]
-  columns?: 1 | 2
-}
-
-function KeyValueCard({ title, description, items, columns = 1, className, ...props }: KeyValueCardProps) {
-  return (
-    <Card data-slot="key-value-card" className={className} {...props}>
-      {(title || description) && (
-        <CardHeader>
-          {title && <CardTitle>{title}</CardTitle>}
-          {description && <CardDescription>{description}</CardDescription>}
-        </CardHeader>
-      )}
-      <CardContent>
-        <dl
-          className={cn(
-            "grid gap-3",
-            columns === 1 && "grid-cols-1",
-            columns === 2 && "grid-cols-1 sm:grid-cols-2"
-          )}
-        >
-          {items.map((item) => (
-            <div key={item.key} data-slot="key-value-card-item" className="min-w-0 rounded-lg border bg-muted/25 p-3">
-              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</dt>
-              <dd className="mt-1 break-words text-sm font-semibold text-foreground">{item.value}</dd>
-              {item.description && <dd className="mt-1 text-xs leading-5 text-muted-foreground">{item.description}</dd>}
-            </div>
-          ))}
-        </dl>
-      </CardContent>
-    </Card>
-  )
-}
-
-export { KeyValueCard }

package/packages/cli/vendor/src/components/display/keyboard-shortcut.tsx

@@ -1,31 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
-  keys?: React.ReactNode[]
-  separator?: React.ReactNode
-}
-
-function KeyboardShortcut({ keys, separator = "+", className, children, ...props }: KeyboardShortcutProps) {
-  const content = keys?.length
-    ? keys.map((key, index) => (
-        <React.Fragment key={index}>
-          {index > 0 && <span className="text-muted-foreground">{separator}</span>}
-          <span>{key}</span>
-        </React.Fragment>
-      ))
-    : children
-
-  return (
-    <kbd
-      data-slot="keyboard-shortcut"
-      className={cn("inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", className)}
-      {...props}
-    >
-      {content}
-    </kbd>
-  )
-}
-
-export { KeyboardShortcut }

package/packages/cli/vendor/src/components/display/skeleton-form.tsx

@@ -1,51 +0,0 @@
-import * as React from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-import { cn } from "@/lib/utils"
-
-export type SkeletonFormProps = React.ComponentProps<"div"> & {
-  fields?: number
-  showTitle?: boolean
-  showActions?: boolean
-  columns?: 1 | 2
-}
-
-function SkeletonForm({
-  fields = 4,
-  showTitle = true,
-  showActions = true,
-  columns = 1,
-  className,
-  ...props
-}: SkeletonFormProps) {
-  return (
-    <div data-slot="skeleton-form" className={cn("w-full space-y-6", className)} {...props}>
-      {showTitle && (
-        <div className="space-y-2 border-b pb-4">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-4 w-1/2" />
-        </div>
-      )}
-      
-      <div className={cn(
-        "grid gap-6",
-        columns === 2 && "sm:grid-cols-2"
-      )}>
-        {Array.from({ length: fields }).map((_, i) => (
-          <div key={i} className="space-y-2">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ))}
-      </div>
-
-      {showActions && (
-        <div className="flex justify-end gap-2 pt-4">
-          <Skeleton className="h-10 w-24" />
-          <Skeleton className="h-10 w-24" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { SkeletonForm }

package/packages/cli/vendor/src/components/display/skeleton-table.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-import { cn } from "@/lib/utils"
-
-export type SkeletonTableProps = React.ComponentProps<"div"> & {
-  rows?: number
-  columns?: number
-  showHeader?: boolean
-  showToolbar?: boolean
-}
-
-function SkeletonTable({
-  rows = 5,
-  columns = 4,
-  showHeader = true,
-  showToolbar = false,
-  className,
-  ...props
-}: SkeletonTableProps) {
-  return (
-    <div data-slot="skeleton-table" className={cn("w-full space-y-4", className)} {...props}>
-      {showToolbar && (
-        <div className="flex items-center justify-between">
-          <Skeleton className="h-8 w-[250px]" />
-          <div className="flex items-center gap-2">
-            <Skeleton className="h-8 w-[100px]" />
-            <Skeleton className="h-8 w-[80px]" />
-          </div>
-        </div>
-      )}
-      <div className="rounded-md border">
-        {showHeader && (
-          <div className="border-b bg-muted/50">
-            <div className="flex px-4 py-3">
-              {Array.from({ length: columns }).map((_, i) => (
-                <div key={i} className="flex-1 pr-4">
-                  <Skeleton className="h-4 w-24" />
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-        <div className="divide-y">
-          {Array.from({ length: rows }).map((_, rowIndex) => (
-            <div key={rowIndex} className="flex px-4 py-3">
-              {Array.from({ length: columns }).map((_, colIndex) => (
-                <div key={colIndex} className="flex-1 pr-4">
-                  <Skeleton className={cn("h-4", colIndex === 0 ? "w-full max-w-[200px]" : "w-1/2")} />
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export { SkeletonTable }

package/packages/cli/vendor/src/components/display/tag-list.tsx

@@ -1,52 +0,0 @@
-import * as React from "react"
-import { XIcon } from "lucide-react"
-
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-
-export type TagListItem = {
-  key: string
-  label: React.ReactNode
-  variant?: React.ComponentProps<typeof Badge>["variant"]
-  disabled?: boolean
-}
-
-export type TagListProps = React.ComponentProps<"div"> & {
-  items: TagListItem[]
-  max?: number
-  removable?: boolean
-  onRemove?: (item: TagListItem) => void
-  overflowLabel?: (count: number) => React.ReactNode
-}
-
-function TagList({ items, max, removable = false, onRemove, overflowLabel = (count) => `+${count}`, className, ...props }: TagListProps) {
-  const visibleItems = typeof max === "number" ? items.slice(0, max) : items
-  const overflowCount = typeof max === "number" ? Math.max(items.length - max, 0) : 0
-
-  return (
-    <div data-slot="tag-list" className={cn("flex flex-wrap items-center gap-1.5", className)} {...props}>
-      {visibleItems.map((item) => (
-        <Badge
-          key={item.key}
-          variant={item.variant}
-          className={cn("gap-1", item.disabled && "opacity-55")}
-        >
-          <span>{item.label}</span>
-          {removable && !item.disabled && (
-            <button
-              type="button"
-              aria-label="Remove tag"
-              className="rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={() => onRemove?.(item)}
-            >
-              <XIcon className="size-3" />
-            </button>
-          )}
-        </Badge>
-      ))}
-      {overflowCount > 0 && <Badge variant="outline">{overflowLabel(overflowCount)}</Badge>}
-    </div>
-  )
-}
-
-export { TagList }

package/packages/cli/vendor/src/components/display/watermark.tsx

@@ -1,20 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type WatermarkProps = React.ComponentProps<"div"> & {
-  text?: string
-}
-
-function Watermark({ text = "Azamat UI", className, children, ...props }: WatermarkProps) {
-  return (
-    <div data-slot="watermark" className={cn("relative overflow-hidden", className)} {...props}>
-      <div className="pointer-events-none absolute inset-0 z-0 grid place-items-center opacity-10">
-        <span className="rotate-[-24deg] select-none text-4xl font-bold tracking-widest text-muted-foreground">{text}</span>
-      </div>
-      <div className="relative z-10">{children}</div>
-    </div>
-  )
-}
-
-export { Watermark }

package/packages/cli/vendor/src/components/form/repeater-field.tsx

@@ -1,93 +0,0 @@
-import * as React from "react"
-import { PlusIcon, Trash2Icon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type RepeaterFieldProps<T> = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
-  value: T[]
-  onValueChange: (value: T[]) => void
-  renderItem: (item: T, index: number, helpers: { remove: () => void; update: (item: T) => void }) => React.ReactNode
-  createItem: () => T
-  addLabel?: React.ReactNode
-  max?: number
-  min?: number
-  disabled?: boolean
-}
-
-function RepeaterField<T>({
-  value,
-  onValueChange,
-  renderItem,
-  createItem,
-  addLabel = "Add item",
-  max = Infinity,
-  min = 0,
-  disabled = false,
-  className,
-  ...props
-}: RepeaterFieldProps<T>) {
-  const handleAdd = () => {
-    if (value.length < max) {
-      onValueChange([...value, createItem()])
-    }
-  }
-
-  const handleRemove = (indexToRemove: number) => {
-    if (value.length > min) {
-      onValueChange(value.filter((_, index) => index !== indexToRemove))
-    }
-  }
-
-  const handleUpdate = (indexToUpdate: number, newItem: T) => {
-    const newItems = [...value]
-    newItems[indexToUpdate] = newItem
-    onValueChange(newItems)
-  }
-
-  const canAdd = value.length < max && !disabled
-  const canRemove = value.length > min && !disabled
-
-  return (
-    <div data-slot="repeater-field" className={cn("flex flex-col gap-4", className)} {...props}>
-      {value.map((item, index) => (
-        <div key={index} className="flex items-start gap-2">
-          <div className="flex-1 min-w-0">
-            {renderItem(item, index, {
-              remove: () => handleRemove(index),
-              update: (newItem: T) => handleUpdate(index, newItem),
-            })}
-          </div>
-          {canRemove && (
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="shrink-0 text-muted-foreground hover:text-destructive"
-              onClick={() => handleRemove(index)}
-              aria-label="Remove item"
-            >
-              <Trash2Icon className="size-4" />
-            </Button>
-          )}
-        </div>
-      ))}
-      {canAdd && (
-        <div>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={handleAdd}
-            className="w-full sm:w-auto"
-          >
-            <PlusIcon className="mr-2 size-4" />
-            {addLabel}
-          </Button>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { RepeaterField }

package/packages/cli/vendor/src/components/inputs/cascader.tsx

@@ -1,41 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type CascaderOption = {
-  label: React.ReactNode
-  value: string
-  children?: CascaderOption[]
-}
-
-export type CascaderProps = React.ComponentProps<"div"> & {
-  options: CascaderOption[]
-  value?: string[]
-  onValueChange?: (value: string[]) => void
-}
-
-function Cascader({ options, value = [], onValueChange, className, ...props }: CascaderProps) {
-  const firstValue = value[0] ?? ""
-  const secondOptions = options.find((item) => item.value === firstValue)?.children ?? []
-  const secondValue = value[1] ?? ""
-  const thirdOptions = secondOptions.find((item) => item.value === secondValue)?.children ?? []
-
-  return (
-    <div data-slot="cascader" className={cn("grid gap-2 sm:grid-cols-3", className)} {...props}>
-      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={firstValue} onChange={(event) => onValueChange?.([event.target.value])}>
-        <option value="">Select</option>
-        {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-      </select>
-      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={secondValue} disabled={!secondOptions.length} onChange={(event) => onValueChange?.([firstValue, event.target.value])}>
-        <option value="">Select</option>
-        {secondOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-      </select>
-      <select className="h-10 rounded-md border bg-background px-3 text-sm" value={value[2] ?? ""} disabled={!thirdOptions.length} onChange={(event) => onValueChange?.([firstValue, secondValue, event.target.value])}>
-        <option value="">Select</option>
-        {thirdOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-      </select>
-    </div>
-  )
-}
-
-export { Cascader }