@create-ui/cli 0.6.0 → 0.6.1

package/dist/skills/createui/reference/toast.md

@@ -1,162 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/toast.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/toast.md -->
-
-# toast
-
-Notification card with icon, action and close slots plus ToastProgress countdown; seven variants by four appearances
-
-Install: `npx @create-ui/cli add toast`
-
-## Import
-
-```tsx
-import { Toast, ToastBody, ToastIcon, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastProgress } from "@/components/ui/toast"
-```
-
-Also exported: `toastVariants`, `useToastContext`
-
-## Toast props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `primary \| neutral \| danger \| success \| warning \| info \| away` | `primary` |
-| appearance | `solid \| soft \| outline \| default` (solid = filled, soft/outline/default = quieter surfaces) | `solid` |
-
-Extends `React.ComponentProps<"div">`.
-
-## ToastProgress props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| value | `number` | - |
-| duration | `number` (CSS tween duration per value change (default 150ms); for a lifetime countdown set it to the toast's full lifetime in ms) | `150` |
-
-Extends `React.ComponentProps<"div">`.
-
-## Examples
-
-From `toast-demo`:
-
-```tsx
-import { RiInformationFill } from "@create-ui/assets/icons"
-
-import {
-  Toast,
-  ToastBody,
-  ToastContent,
-  ToastDescription,
-  ToastIcon,
-  ToastTitle,
-} from "@/components/ui/toast"
-
-export default function ToastDemo() {
-  return (
-    <Toast>
-      <ToastBody>
-        <ToastIcon>
-          <RiInformationFill />
-        </ToastIcon>
-        <ToastContent>
-          <ToastTitle>New update available</ToastTitle>
-          <ToastDescription>Version 2.1 is ready to install.</ToastDescription>
-        </ToastContent>
-      </ToastBody>
-    </Toast>
-  )
-}
-```
-
-From `toast-with-progress`:
-
-```tsx
-"use client"
-
-import * as React from "react"
-import { RiInformationFill } from "@create-ui/assets/icons"
-
-import { Button } from "@/components/ui/button"
-import {
-  Toast,
-  ToastBody,
-  ToastContent,
-  ToastDescription,
-  ToastIcon,
-  ToastProgress,
-  ToastTitle,
-} from "@/components/ui/toast"
-
-const DURATION_MS = 5000
-
-export default function ToastWithProgress() {
-  const [visible, setVisible] = React.useState(true)
-  const [progress, setProgress] = React.useState(0)
-
-  React.useEffect(() => {
-    if (!visible) return
-
-    const raf = requestAnimationFrame(() => setProgress(100))
-    const timeout = setTimeout(() => setVisible(false), DURATION_MS)
-
-    return () => {
-      cancelAnimationFrame(raf)
-      clearTimeout(timeout)
-    }
-  }, [visible])
-
-  if (!visible) {
-    return (
-      <Button
-        variant="neutral-light"
-        appearance="outline"
-        onClick={() => {
-          setProgress(0)
-          setVisible(true)
-        }}
-      >
-        Show toast again
-      </Button>
-    )
-  }
-
-  return (
-    <Toast variant="info" appearance="soft">
-      <ToastBody>
-        <ToastIcon>
-          <RiInformationFill />
-        </ToastIcon>
-        <ToastContent>
-          <ToastTitle>Auto-dismissing in 5s</ToastTitle>
-          <ToastDescription>
-            The progress bar tracks the remaining lifetime of this toast.
-          </ToastDescription>
-        </ToastContent>
-      </ToastBody>
-      <ToastProgress value={progress} duration={DURATION_MS} />
-    </Toast>
-  )
-}
-```
-
-More: `npx @create-ui/cli view toast` or MCP `get_item_examples_from_registries` with "toast-demo" / "toast-example".
-
-## When to use
-
-Ephemeral, floating confirmation of an action ("Draft saved", "Copied"); render it in a screen-level fixed container. Not for status that belongs to a section (use `InlineAlert`), blocking confirm/cancel decisions (use `Dialog`), or per-field validation (use `Field` helper/error text).
-
-## Gotchas
-
-- There is no `toast()` function, no `Toaster`, no app-level provider, no portal, no queue or positioning system. `Toast` is just the card; render active toasts from your own state into a fixed container. Do NOT install or import `sonner`.
-- Dismiss lifecycle: `ToastClose` starts a 300ms fade/scale exit; the root's `onDismiss` fires only after the transition ends, then the component renders `null`. Remove the toast from your list in `onDismiss`, not in `ToastClose`'s `onClick`. Once dismissed it stays hidden; re-showing requires a remount (state toggle or new `key`).
-- `ToastProgress` never ticks by itself and is `aria-hidden` (purely visual). For an auto-dismissing toast, set `duration` to the lifetime, flip `value` from 0 to 100 inside `requestAnimationFrame`, and pair it with a `setTimeout` that actually hides the toast:
-
-```tsx
-React.useEffect(() => {
-  const raf = requestAnimationFrame(() => setProgress(100))
-  const timeout = setTimeout(() => setVisible(false), DURATION_MS)
-  return () => { cancelAnimationFrame(raf); clearTimeout(timeout) }
-}, [])
-// <ToastProgress value={progress} duration={DURATION_MS} />
-```
-
-- `ToastIcon`, `ToastDescription`, `ToastAction`, `ToastClose`, and `ToastProgress` read the Toast context, so they only style correctly inside `<Toast>`. Don't hand-set Button variants on `ToastAction`/`ToastClose` (the appearance-matched pairing is automatic) or color/size classes on the icon (the svg is auto-sized `size-5` and colored per variant/appearance).
-- The root is hard-coded `w-[410px] min-w-[300px]`; override the width via `className` for narrow viewports.
-- The root renders `role="status"` (polite live region); pass `role="alert"` for urgent messages. No Escape-key handling is wired; dismissal happens only through `ToastClose` (or `useToastContext().dismiss`).

package/dist/skills/createui/reference/tooltip.md

@@ -1,63 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/tooltip.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/tooltip.md -->
-
-# tooltip
-
-Radix hover tooltip for any trigger element; five color variants, optional arrow, side and offset control
-
-Install: `npx @create-ui/cli add tooltip`
-
-## Import
-
-```tsx
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-```
-
-Also exported: `tooltipContentVariants`
-
-## TooltipContent props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| children | `ReactNode` | - |
-| className | `string` | - |
-| variant | `primary \| neutral \| inverse \| danger \| info` | `primary` |
-| showArrow | `boolean` (effective offset = sideOffset when true; sideOffset + 5 when false, so the chip keeps a visible gap without the caret) | `false` |
-| side | `top \| bottom \| left \| right` (defaults to bottom; shadcn/Radix default to top, do not assume top) | `bottom` |
-| sideOffset | `number` | `2.5` |
-
-Extends `React.ComponentProps<typeof TooltipPrimitive.Content>`.
-
-## Examples
-
-From `tooltip-demo`:
-
-```tsx
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-
-export default function TooltipDemo() {
-  return (
-    <Tooltip defaultOpen>
-      <TooltipTrigger asChild>
-        <Button appearance="outline" size="sm">
-          Hover me
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent showArrow>Add to library</TooltipContent>
-    </Tooltip>
-  )
-}
-```
-
-More: `npx @create-ui/cli view tooltip` or MCP `get_item_examples_from_registries` with "tooltip-demo" / "tooltip-example".
-
-## When to use
-Tooltip is a short hover/focus hint for icon-only buttons, truncated labels, and similar read-only context. Content must stay brief: the chip caps at max-w-[200px] and wraps. For content with links, buttons, or inputs there is no popover component - put it inline; for a help icon next to a label use InfoTooltip; for post-action messages use Toast; for a persistent in-flow note use InlineAlert.
-## Gotchas
-- Tooltip self-provides its Radix Provider and passes delayDuration (default 0) explicitly to both Provider and Root, so an ancestor TooltipProvider's delayDuration never reaches it. Set delay per instance: `<Tooltip delayDuration={400}>`. The exported TooltipProvider only matters for raw TooltipPrimitive.Root subtrees.
-- align is hardcoded to "center" and Omit-ed from the passthrough type; it cannot be overridden.
-- TooltipTrigger should use asChild wrapping a focusable registry element (Button, link); the trigger always gets an `inline-flex` class so the wrapped child lays out consistently.
-- TooltipArrow is internal and not exported; the only way to render the caret is `showArrow` on TooltipContent, and its fill auto-matches the chosen variant. Never try to style or compose the arrow separately.
-- InfoTooltip is a separate ready-made component for inline "what is this" affordances; do not hand-compose Tooltip around an info icon.