tembro 1.0.2 → 2.0.0

package/packages/cli/vendor/src/showcase/families/types.ts

@@ -1,40 +0,0 @@
-import type * as React from "react"
-
-export type FamilyDemoState = {
-  search: string
-  notes: string
-  step: number
-  uploadCount: number
-  density: "comfortable" | "compact"
-}
-
-export type FamilyDemoMock = {
-  code: string
-  highlights: string[]
-  scenarios: Array<{
-    title: string
-    description: string
-  }>
-  metrics: Array<{
-    label: string
-    value: string
-  }>
-}
-
-export type FamilyDemoProps = {
-  state: FamilyDemoState
-  setState: (patch: Partial<FamilyDemoState>) => void
-}
-
-export type FamilyDemoBundle = {
-  mock: FamilyDemoMock
-  Showcase: (props: FamilyDemoProps) => React.ReactNode
-}
-
-export const defaultFamilyDemoState: FamilyDemoState = {
-  search: "",
-  notes: "This module family is wired into the public showcase and has real route-level actions.",
-  step: 2,
-  uploadCount: 3,
-  density: "comfortable",
-}

package/packages/cli/vendor/src/showcase/families/upload/data.ts

@@ -1,7 +0,0 @@
-export const uploadHelperTags = [
-  "Dropzone",
-  "Custom actions",
-  "Progress",
-  "Rejected files",
-  "Image preview",
-]

package/packages/cli/vendor/src/showcase/families/upload/index.ts

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

package/packages/cli/vendor/src/showcase/families/upload/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const uploadFamilyMock: FamilyDemoMock = {
-  code: `import { FileUpload, ImageUpload } from "tembro"\n\nexport function Example() {\n  return <FileUpload />\n}`,
-  highlights: ["File upload", "Image upload", "Attachment counts", "Media-ready flows"],
-  scenarios: [
-    { title: "Asset manager", description: "Collect multiple files and preview uploaded media." },
-    { title: "Profile image flow", description: "Use image upload in account and brand settings." },
-    { title: "Document attachments", description: "Attach release notes, invoices or briefs inline." },
-  ],
-  metrics: [
-    { label: "Exports", value: "2" },
-    { label: "Files", value: "12" },
-    { label: "Status", value: "Preview" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/upload/showcase.tsx

@@ -1,86 +0,0 @@
-import * as React from "react"
-
-import { Badge, FileUpload, ImageUpload } from "@/index"
-
-import type { FamilyDemoProps } from "../types"
-
-import { uploadHelperTags } from "./data"
-
-export function UploadFamilyShowcase({ setState }: FamilyDemoProps) {
-  const [files, setFiles] = React.useState<File[]>([])
-  const [images, setImages] = React.useState<File[]>([])
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-          <div className="space-y-3">
-            <div className="flex flex-wrap gap-2">
-              {uploadHelperTags.map((tag) => (
-                <Badge key={tag} variant="outline">{tag}</Badge>
-              ))}
-            </div>
-            <div>
-              <p className="aui-text-strong text-sm font-medium">Upload family coverage</p>
-              <p className="aui-text-muted mt-1 text-sm leading-6">
-                File and image upload should expose real dropzone behavior, clear actions, remove actions, preview surfaces and controlled file counts.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-          <p className="aui-text-strong text-sm font-medium">File upload</p>
-          <p className="aui-text-muted mt-1 text-sm leading-6">Drop files, clear all, reject invalid types and keep remove actions inside the file item surface.</p>
-          <div className="mt-4">
-            <FileUpload
-              files={files}
-              onFilesChange={(nextFiles) => {
-                setFiles(nextFiles)
-                setState({ notes: `${nextFiles.length} file attachments are now staged.` })
-              }}
-              accept=".pdf,.docx,.png"
-              maxFiles={4}
-              maxSize={4 * 1024 * 1024}
-              helperText="Accepts PDF, DOCX and PNG up to 4 MB."
-            />
-          </div>
-        </div>
-
-        <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4">
-          <p className="aui-text-strong text-sm font-medium">Image upload</p>
-          <p className="aui-text-muted mt-1 text-sm leading-6">Image preview, removable files and count summary are exposed directly from the reusable component.</p>
-          <div className="mt-4">
-            <ImageUpload
-              files={images}
-              onFilesChange={(nextFiles) => {
-                setImages(nextFiles)
-                setState({ notes: `${nextFiles.length} preview images are now staged.` })
-              }}
-              maxFiles={3}
-              helperText="Upload hero illustrations or block thumbnails."
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-          <p className="aui-text-muted text-sm">Attached files</p>
-          <p className="aui-text-strong mt-2 text-lg font-semibold">{files.length}</p>
-        </div>
-        <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-          <p className="aui-text-muted text-sm">Attached images</p>
-          <p className="aui-text-strong mt-2 text-lg font-semibold">{images.length}</p>
-        </div>
-        <div className="rounded-[20px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-          <p className="aui-text-muted text-sm">Interaction proof</p>
-          <p className="aui-text-strong mt-2 text-lg font-semibold">Remove and clear are isolated</p>
-          <p className="aui-text-subtle mt-2 text-sm">Nested upload actions no longer conflict with the parent dropzone click surface.</p>
-        </div>
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/families/wizard/index.ts

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

package/packages/cli/vendor/src/showcase/families/wizard/mock.ts

@@ -1,18 +0,0 @@
-import type { FamilyDemoMock } from "../types"
-
-export const wizardFamilyMock: FamilyDemoMock = {
-  code: `import { Stepper, Wizard } from "tembro"\n\nexport function Example() {\n  return <Wizard />\n}`,
-  highlights: ["Multi-step flow", "Progress state", "Guided forms", "Step affordances"],
-  scenarios: [
-    { title: "Onboarding", description: "Guide users through setup without overwhelming them." },
-    { title: "Checkout flow", description: "Break complex processes into sequential steps." },
-    { title: "Workspace creation", description: "Collect structured info with visible progress." },
-  ],
-  metrics: [
-    { label: "Exports", value: "2" },
-    { label: "Steps", value: "4" },
-    { label: "Status", value: "Stable" },
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/families/wizard/showcase.tsx

@@ -1,39 +0,0 @@
-import { Button } from "@/index"
-
-import type { FamilyDemoProps } from "../types"
-
-const steps = ["Workspace", "Brand", "Members", "Publish"]
-
-export function WizardFamilyShowcase({ state, setState }: FamilyDemoProps) {
-  return (
-    <div className="space-y-4">
-      <div className="grid gap-3 md:grid-cols-4">
-        {steps.map((label, index) => {
-          const stepNumber = index + 1
-          const active = state.step === stepNumber
-          const complete = state.step > stepNumber
-          return (
-            <button
-              key={label}
-              onClick={() => setState({ step: stepNumber })}
-              className={`rounded-[22px] border px-4 py-4 text-left ${active ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : complete ? "aui-status-success" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] aui-text-muted"}`}
-            >
-              <div className="text-xs uppercase tracking-[0.24em]">{`Step ${stepNumber}`}</div>
-              <div className="mt-2 text-lg font-semibold">{label}</div>
-            </button>
-          )
-        })}
-      </div>
-      <div className="rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-5">
-        <p className="text-2xl font-semibold tracking-tight">{steps[state.step - 1]} step</p>
-        <p className="aui-text-muted mt-2 text-sm leading-6">A multi-step guided workflow with a stable route and predictable step flow.</p>
-        <div className="mt-5 flex gap-3">
-          <Button variant="outline" onClick={() => setState({ step: Math.max(1, state.step - 1) })}>Back</Button>
-          <Button onClick={() => setState({ step: Math.min(4, state.step + 1) })}>Next</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-