tembro 2.0.3 → 2.0.4

package/packages/cli/vendor/src/components/inputs/mention-input.tsx

@@ -1,162 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type MentionOption = {
-  label: React.ReactNode
-  value: string
-  searchText?: string
-  insertValue?: string
-}
-
-export type MentionInputProps = Omit<React.ComponentProps<"textarea">, "value" | "defaultValue"> & {
-  value?: string
-  defaultValue?: string
-  options?: MentionOption[]
-  onMentionSelect?: (value: string) => void
-  onValueChange?: (value: string) => void
-  trigger?: string
-  maxSuggestions?: number
-}
-
-function getTriggerMatch(value: string, selectionStart: number, trigger: string) {
-  const prefix = value.slice(0, selectionStart)
-  const triggerIndex = prefix.lastIndexOf(trigger)
-
-  if (triggerIndex < 0) return null
-
-  const previousCharacter = prefix[triggerIndex - 1]
-  if (previousCharacter && /\S/.test(previousCharacter)) return null
-
-  const query = prefix.slice(triggerIndex + trigger.length)
-  if (/\s/.test(query)) return null
-
-  return { triggerIndex, query }
-}
-
-function MentionInput({
-  value,
-  defaultValue = "",
-  options = [],
-  onMentionSelect,
-  onValueChange,
-  className,
-  trigger = "@",
-  maxSuggestions = 6,
-  onChange,
-  onKeyDown,
-  ...props
-}: MentionInputProps) {
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
-  const [internalValue, setInternalValue] = React.useState(defaultValue)
-  const [selectionStart, setSelectionStart] = React.useState(0)
-  const [activeIndex, setActiveIndex] = React.useState(0)
-  const currentValue = value ?? internalValue
-  const triggerMatch = getTriggerMatch(currentValue, selectionStart, trigger)
-  const filteredOptions = React.useMemo(() => {
-    if (!triggerMatch) return []
-    const normalizedQuery = triggerMatch.query.trim().toLowerCase()
-
-    return options
-      .filter((option) => {
-        if (!normalizedQuery) return true
-        const rawLabel = typeof option.label === "string" ? option.label : option.value
-        const haystack = `${option.value} ${option.searchText ?? ""} ${rawLabel}`.toLowerCase()
-        return haystack.includes(normalizedQuery)
-      })
-      .slice(0, maxSuggestions)
-  }, [maxSuggestions, options, triggerMatch])
-  const showSuggestions = filteredOptions.length > 0 && triggerMatch !== null
-
-  React.useEffect(() => {
-    if (!showSuggestions) setActiveIndex(0)
-  }, [showSuggestions])
-
-  function updateValue(nextValue: string, event?: React.ChangeEvent<HTMLTextAreaElement>) {
-    if (value === undefined) setInternalValue(nextValue)
-    onValueChange?.(nextValue)
-    if (event) onChange?.(event)
-  }
-
-  function insertMention(option: MentionOption) {
-    if (!triggerMatch) return
-
-    const mentionValue = option.insertValue ?? option.value
-    const nextValue = `${currentValue.slice(0, triggerMatch.triggerIndex)}${trigger}${mentionValue} ${currentValue.slice(selectionStart)}`
-    const nextCursor = triggerMatch.triggerIndex + trigger.length + mentionValue.length + 1
-
-    if (value === undefined) setInternalValue(nextValue)
-    onValueChange?.(nextValue)
-    onMentionSelect?.(option.value)
-
-    requestAnimationFrame(() => {
-      textareaRef.current?.focus()
-      textareaRef.current?.setSelectionRange(nextCursor, nextCursor)
-      setSelectionStart(nextCursor)
-    })
-  }
-
-  return (
-    <div data-slot="mention-input" className="grid gap-2">
-      <textarea
-        ref={textareaRef}
-        value={currentValue}
-        className={cn("min-h-24 rounded-md border bg-background p-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
-        onChange={(event) => {
-          updateValue(event.target.value, event)
-          setSelectionStart(event.target.selectionStart ?? event.target.value.length)
-        }}
-        onClick={(event) => setSelectionStart(event.currentTarget.selectionStart ?? 0)}
-        onKeyUp={(event) => setSelectionStart(event.currentTarget.selectionStart ?? 0)}
-        onKeyDown={(event) => {
-          if (showSuggestions) {
-            if (event.key === "ArrowDown") {
-              event.preventDefault()
-              setActiveIndex((current) => (current + 1) % filteredOptions.length)
-              return
-            }
-            if (event.key === "ArrowUp") {
-              event.preventDefault()
-              setActiveIndex((current) => (current - 1 + filteredOptions.length) % filteredOptions.length)
-              return
-            }
-            if (event.key === "Enter" || event.key === "Tab") {
-              event.preventDefault()
-              insertMention(filteredOptions[activeIndex] ?? filteredOptions[0])
-              return
-            }
-            if (event.key === "Escape") {
-              event.preventDefault()
-              setSelectionStart(currentValue.length)
-              return
-            }
-          }
-
-          onKeyDown?.(event)
-        }}
-        {...props}
-      />
-      {showSuggestions ? (
-        <div className="grid gap-1 rounded-xl border bg-card p-2 shadow-sm">
-          {filteredOptions.map((option, index) => (
-            <button
-              key={option.value}
-              type="button"
-              className={cn(
-                "flex items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
-                index === activeIndex && "bg-muted"
-              )}
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => insertMention(option)}
-            >
-              <span className="font-medium">{option.label}</span>
-              <span className="text-xs text-muted-foreground">{trigger}{option.insertValue ?? option.value}</span>
-            </button>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-export { MentionInput }

package/packages/cli/vendor/src/components/layout/stack.tsx

@@ -1,106 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-type StackGap = "xs" | "sm" | "md" | "lg" | "xl"
-type InlineAlign = "start" | "center" | "end" | "stretch"
-type InlineJustify = "start" | "center" | "end" | "between"
-type GridColumns = 1 | 2 | 3 | 4 | 5 | 6
-
-const stackGapClassName: Record<StackGap, string> = {
-  xs: "gap-2",
-  sm: "gap-3",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-}
-
-const inlineAlignClassName: Record<InlineAlign, string> = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-}
-
-const inlineJustifyClassName: Record<InlineJustify, string> = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-}
-
-const gridColumnClassName: Record<GridColumns, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6",
-}
-
-export type StackProps = React.ComponentProps<"div"> & {
-  gap?: StackGap
-  splitAfter?: React.ReactNode
-}
-
-function Stack({ gap = "md", splitAfter, className, children, ...props }: StackProps) {
-  return (
-    <div data-slot="stack" className={cn("flex min-w-0 flex-col", stackGapClassName[gap], className)} {...props}>
-      {children}
-      {splitAfter ? <div data-slot="stack-split-after">{splitAfter}</div> : null}
-    </div>
-  )
-}
-
-export type InlineProps = React.ComponentProps<"div"> & {
-  gap?: StackGap
-  align?: InlineAlign
-  justify?: InlineJustify
-  wrap?: boolean
-}
-
-export type GridProps = React.ComponentProps<"div"> & {
-  gap?: StackGap
-  columns?: GridColumns
-}
-
-function Inline({
-  gap = "md",
-  align = "center",
-  justify = "start",
-  wrap = true,
-  className,
-  children,
-  ...props
-}: InlineProps) {
-  return (
-    <div
-      data-slot="inline"
-      className={cn(
-        "flex min-w-0",
-        stackGapClassName[gap],
-        inlineAlignClassName[align],
-        inlineJustifyClassName[justify],
-        wrap ? "flex-wrap" : "flex-nowrap",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-function Grid({ gap = "md", columns = 2, className, children, ...props }: GridProps) {
-  return (
-    <div
-      data-slot="grid"
-      className={cn("grid min-w-0", stackGapClassName[gap], gridColumnClassName[columns], className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export { Grid, Inline, Stack }

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

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type AffixProps = React.ComponentProps<"div"> & {
-  offsetTop?: number
-  zIndex?: number
-}
-
-function Affix({ offsetTop = 0, zIndex = 30, className, style, ...props }: AffixProps) {
-  return (
-    <div
-      data-slot="affix"
-      className={cn("sticky", className)}
-      style={{ top: offsetTop, zIndex, ...style }}
-      {...props}
-    />
-  )
-}
-
-export { Affix }

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

@@ -1,3 +0,0 @@
-export { affixMock } from "./mock"
-export { AffixShowcase } from "./showcase"
-

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const affixMock: ComponentDemoMock = {
-  code: `import { Affix } from "@/index"
-
-export function Example() {
-  return (
-    <div className="relative h-48 overflow-y-auto border p-3">
-      <Affix offsetTop={12} zIndex={40} className="bg-primary text-primary-foreground px-3 py-2">
-        Sticky header
-      </Affix>
-      <p className="pt-10">Scroll inside container to test sticky placement.</p>
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add affix",
-  highlights: [
-    "Pin content to an offset within a scrollable container",
-    "Simple API with top and z-index control",
-  ],
-  scenarios: [
-    { title: "Toolbar", description: "Keep action buttons visible while users scroll long forms." },
-    { title: "Quick filters", description: "Keep filters always reachable in long list pages." },
-  ],
-}
-

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

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-import { Affix } from "@/index"
-
-export function AffixShowcase() {
-  const [offsetTop, setOffsetTop] = React.useState(0)
-  const [zIndex, setZIndex] = React.useState(40)
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-2">
-        <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => setOffsetTop((value) => Math.max(0, value - 8))}>
-          Offset -8
-        </button>
-        <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => setOffsetTop((value) => value + 8)}>
-          Offset +8
-        </button>
-        <button type="button" className="rounded-md border px-2.5 py-1 text-sm" onClick={() => setZIndex((value) => (value === 30 ? 80 : 30))}>
-          Toggle z-index
-        </button>
-      </div>
-      <p className="text-sm text-muted-foreground">Current settings: offsetTop={offsetTop}, zIndex={zIndex}</p>
-      <div className="relative h-48 overflow-y-auto rounded-lg border bg-muted/20 p-3">
-        <div className="h-80 space-y-2">
-          <Affix offsetTop={offsetTop} zIndex={zIndex} className="mb-3 bg-primary/95 rounded-md px-3 py-2 text-primary-foreground">
-            Sticky anchor bar
-          </Affix>
-          <p>Scroll this area to verify sticky behavior.</p>
-          <p>Affix stays visible at the selected top offset.</p>
-          <p>Useful in dashboard toolbars and contextual quick actions.</p>
-          <p className="h-64" />
-        </div>
-      </div>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/aspect-ratio/index.ts

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

package/packages/cli/vendor/src/showcase/premium/aspect-ratio/mock.ts

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const aspectRatioMock: ComponentDemoMock = {
-  code: `import { AspectRatio } from "@/index"
-
-export function Example() {
-  return (
-    <AspectRatio ratio={16 / 9} className="rounded-xl border bg-muted">
-      <div className="grid size-full place-items-center text-sm font-medium text-foreground">
-        16:9 media slot
-      </div>
-    </AspectRatio>
-  )
-}`,
-  cliCommand: "npx tembro add aspect-ratio",
-  highlights: [
-    "Controls media card proportions in one place",
-    "Works for images, iframes, and any fixed-ratio container",
-    "Stable in dashboard and content-heavy layouts",
-  ],
-  scenarios: [
-    { title: "Media hero", description: "Reserve consistent 16:9 ratio for previews." },
-    { title: "Card media", description: "Keep media and text alignment predictable." },
-    { title: "Document preview", description: "Prevent jumpy layouts while content loads." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/aspect-ratio/showcase.tsx

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-const ratioLabels: Array<{ label: string; ratio: number }> = [
-  { label: "16:9", ratio: 16 / 9 },
-  { label: "4:3", ratio: 4 / 3 },
-  { label: "1:1", ratio: 1 },
-  { label: "3:4", ratio: 3 / 4 },
-]
-
-import { Button, AspectRatio } from "@/index"
-export function AspectRatioShowcase() {
-  const [active, setActive] = React.useState(0)
-
-  return (
-    <div className="space-y-5">
-      <section className="flex flex-wrap gap-3">
-        {ratioLabels.map((item, index) => (
-          <Button
-            key={item.label}
-            variant={active === index ? "default" : "outline"}
-            size="sm"
-            onClick={() => setActive(index)}
-          >
-            {item.label}
-          </Button>
-        ))}
-      </section>
-
-      <AspectRatio ratio={ratioLabels[active].ratio} className="rounded-2xl border border-border bg-card">
-        <div className="grid h-full place-items-center bg-[linear-gradient(135deg,color-mix(in_oklch,var(--aui-page-bg),transparent_75%),transparent)] p-6 text-center">
-          <p className="text-sm text-muted-foreground">{ratioLabels[active].label}</p>
-          <p className="text-xl font-semibold text-foreground">Adaptive ratio surface</p>
-        </div>
-      </AspectRatio>
-    </div>
-  )
-}

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

@@ -1,3 +0,0 @@
-export { cascaderMock } from "./mock"
-export { CascaderShowcase } from "./showcase"
-

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

@@ -1,24 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const cascaderMock: ComponentDemoMock = {
-  code: `import { Cascader } from "@/index"
-
-const options = [{ value: "eu", label: "Europe", children: [{ value: "uk", label: "United Kingdom", children: [{ value: "london", label: "London" }] }] }]
-
-export function Example() {
-  const [value, setValue] = useState<string[]>([])
-
-  return <Cascader options={options} value={value} onValueChange={setValue} />
-}`,
-  cliCommand: "npx tembro add cascader",
-  highlights: [
-    "Three-level dependency selects",
-    "Controlled by string path value",
-    "Disabled states for unavailable levels",
-  ],
-  scenarios: [
-    { title: "Location selector", description: "Choose region / country / city in one compact control." },
-    { title: "Category trees", description: "Pick nested taxonomy in forms." },
-  ],
-}
-

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

@@ -1,20 +0,0 @@
-import * as React from "react"
-
-import { Cascader, type CascaderOption } from "@/index"
-
-const locations: CascaderOption[] = [
-  { value: "eu", label: "Europe", children: [{ value: "uk", label: "United Kingdom", children: [{ value: "london", label: "London" }] }] },
-  { value: "us", label: "United States", children: [{ value: "ca", label: "California", children: [{ value: "sf", label: "San Francisco" }] }] },
-]
-
-export function CascaderShowcase() {
-  const [value, setValue] = React.useState<string[]>([])
-
-  return (
-    <div className="space-y-3">
-      <Cascader options={locations} value={value} onValueChange={setValue} />
-      <p className="text-sm text-muted-foreground">Selected path: {value.length ? value.join(" / ") : "Not selected"}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/float-button/index.ts

@@ -1,3 +0,0 @@
-export { floatButtonMock } from "./mock"
-export { FloatButtonShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/float-button/mock.ts

@@ -1,24 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const floatButtonMock: ComponentDemoMock = {
-  code: `import { FloatButton } from "@/index"
-import { Plus } from "lucide-react"
-
-export function Example() {
-  return (
-    <FloatButton placement="bottom-right">
-      <Plus className="size-4" />
-    </FloatButton>
-  )
-}`,
-  cliCommand: "npx tembro add float-button",
-  highlights: [
-    "Fixed-position shortcut button",
-    "Placement variants across corners",
-  ],
-  scenarios: [
-    { title: "Quick action", description: "Keep add/create action always reachable." },
-    { title: "Chat widgets", description: "Mount floating controls without complex absolute layout." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/float-button/showcase.tsx

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { FloatButton } from "@/index"
-import { PlusIcon } from "lucide-react"
-
-const placements = ["bottom-right", "bottom-left", "top-right", "top-left"] as const
-
-export function FloatButtonShowcase() {
-  const [index, setIndex] = React.useState(0)
-  const placement = placements[index % placements.length]
-
-  return (
-    <div className="relative h-48 rounded-lg border bg-muted/20 p-6">
-      <p className="mb-3 text-sm text-muted-foreground">Current placement: {placement}</p>
-      <FloatButton onClick={() => setIndex((value) => value + 1)} aria-label="Open quick actions" placement={placement}>
-        <PlusIcon className="size-5" />
-      </FloatButton>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/index.ts

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

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const keyboardShortcutMock: ComponentDemoMock = {
-  code: `import { KeyboardShortcut } from "@/index"
-
-export function Example() {
-  return <KeyboardShortcut keys={["Ctrl", "K"]} />
-}`,
-  cliCommand: "npx tembro add keyboard-shortcut",
-  highlights: [
-    "Compact visual hint for one or many keys",
-    "Accepts key arrays or raw children",
-    "Useful inside command palette, docs hints and action toolbars",
-  ],
-  scenarios: [
-    { title: "Search hint", description: "Show the command palette trigger beside a search action." },
-    { title: "Editor help", description: "Reveal save or publish shortcuts close to the action." },
-    { title: "Docs legend", description: "Document power-user flows without adding a heavy table." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/showcase.tsx

@@ -1,42 +0,0 @@
-import { Button, KeyboardShortcut } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function KeyboardShortcutShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">KeyboardShortcut shows power-user hints without noise</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Keep shortcut chips short and nearby to the action they describe. They should reinforce real behavior, not decorative text.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex flex-wrap items-center gap-3">
-              <Button variant="outline">Search routes</Button>
-              <KeyboardShortcut keys={["Ctrl", "K"]} />
-            </div>
-            <div className="mt-4 flex flex-wrap items-center gap-3">
-              <Button variant="secondary">Save draft</Button>
-              <KeyboardShortcut keys={["Ctrl", "S"]} />
-              <Button>Publish</Button>
-              <KeyboardShortcut keys={["Shift", "Enter"]} />
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Show shortcuts only where the action is relevant. Repeating the same hint everywhere weakens it.</p>
-              <p>Use concise labels like `Ctrl`, `Cmd`, `Shift`, `Enter`, not long prose inside the chip.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/mention-input/index.ts

@@ -1,3 +0,0 @@
-export { mentionInputMock } from "./mock"
-export { MentionInputShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/mention-input/mock.ts

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const mentionInputMock: ComponentDemoMock = {
-  code: `import { MentionInput } from "@/index"
-
-export function Example() {
-  return (
-    <MentionInput
-      value="Assign @alice and @bob."
-      options={[{ label: "Alice", value: "alice" }, { label: "Bob", value: "bob" }]}
-      onValueChange={(value) => console.log(value)}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add mention-input",
-  highlights: [
-    "Trigger-based suggestion filtering",
-    "Keyboard navigation for suggestions",
-    "Auto insert with controlled value",
-  ],
-  scenarios: [
-    { title: "Comments", description: "Mention teammates in internal notes." },
-    { title: "Chat input", description: "Add quick user references while composing." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/mention-input/showcase.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-
-import { MentionInput } from "@/index"
-
-const defaultOptions = [
-  { label: "Alice", value: "alice" },
-  { label: "Bob", value: "bob" },
-  { label: "Charlie", value: "charlie" },
-]
-
-export function MentionInputShowcase() {
-  const [value, setValue] = React.useState("Hi @alice, please review this task.")
-  const [mentions, setMentions] = React.useState<string[]>([])
-
-  return (
-    <div className="space-y-3">
-      <MentionInput
-        value={value}
-        options={defaultOptions}
-        onValueChange={setValue}
-        onMentionSelect={(selected) => setMentions((current) => [...new Set([...current, selected])])}
-      />
-      <p className="text-sm text-muted-foreground">Inserted mentions: {mentions.join(", ") || "None"}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-form/index.ts

@@ -1,3 +0,0 @@
-export { skeletonFormMock } from "./mock"
-export { SkeletonFormShowcase } from "./showcase"
-