@imfusion/web-ui 0.6.0 → 0.6.1-dev.12.ge86ac0a1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -123,23 +123,24 @@ npm run git:config # hooks path + rebase-only pull/merge
123
123
  Web UI development skills use a `/web-ui-dev-*` prefix. `documentation-writer` comes from `npx skills`; it is not a native
124
124
  Web UI skill.
125
125
 
126
- | Skill | What it does |
127
- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
128
- | `/documentation-writer` | External `npx skills` workflow for Diátaxis documentation. |
129
- | `/web-ui-dev-getting-started` | Interactive intro — gauges your experience, works out your goal, routes you. |
130
- | `/web-ui-dev-start` | Starting ritual for any task: Jira context, `master` vs. a worktree, context summary. |
131
- | `/web-ui-dev-new-component` | Scaffolds an architecture-compliant primitive (adapted or absorbed). |
132
- | `/web-ui-dev-update-component` | Pointers to every file a prop, variant, or sub-component change touches. |
133
- | `/web-ui-dev-design-component` | Brand design pass for a component that works but isn't styled yet. |
134
- | `/web-ui-dev-story` | Author or update a Storybook story. |
135
- | `/web-ui-dev-commit` | Commit workflow: changelog skill, staged docs audit, CI-parity checks, house commit format. |
136
- | `/web-ui-dev-release` | Prepare release highlights, commit release notes, verify, and create an annotated local tag. |
137
- | `/web-ui-dev-changelog` | Generate and validate the required one-line CHANGELOG.md entry for a web-ui change, including direct commits to master. |
138
- | `/web-ui-dev-audit-docs` | Audit docs against staged or recent changes for staleness, gaps, and drift. |
139
- | `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream. |
140
- | `/web-ui-dev-teardown-worktree` | Tear down a worktree, wherever it lives — merging its branch first or dropping it. |
141
- | `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots in `design/` from the Figma styleguide. |
142
- | `/web-ui-dev-mcp` | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access. |
126
+ | Skill | What it does |
127
+ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
128
+ | `/documentation-writer` | [External `npx skills` workflow for writing high quality documentation.](https://www.skills.sh/github/awesome-copilot/documentation-writer) |
129
+ | `/skill-creator` | [External `npx skills` workflow for writing and improving skills.](https://www.skills.sh/anthropics/skills/skill-creator) |
130
+ | `/web-ui-dev-getting-started` | Interactive intro — gauges your experience, works out your goal, routes you. |
131
+ | `/web-ui-dev-start` | Starting ritual for any task: Jira context, `master` vs. a worktree, context summary. |
132
+ | `/web-ui-dev-new-component` | Scaffolds an architecture-compliant primitive (adapted or absorbed). |
133
+ | `/web-ui-dev-update-component` | Pointers to every file a prop, variant, or sub-component change touches. |
134
+ | `/web-ui-dev-design-component` | Brand design pass for a component that works but isn't styled yet. |
135
+ | `/web-ui-dev-story` | Author or update a Storybook story. |
136
+ | `/web-ui-dev-commit` | Commit workflow: changelog skill, staged docs audit, CI-parity checks, house commit format. |
137
+ | `/web-ui-dev-release` | Prepare release notes, commit them, and ship the approved release. |
138
+ | `/web-ui-dev-changelog` | Generate and validate the required one-line CHANGELOG.md entry for a web-ui change, including direct commits to master. |
139
+ | `/web-ui-dev-audit-docs` | Audit docs against staged or recent changes for staleness, gaps, and drift. |
140
+ | `/web-ui-dev-audit-pass-through-defaults` | Check `@default` annotations on pass-through props against Base UI upstream. |
141
+ | `/web-ui-dev-teardown-worktree` | Tear down a worktree, wherever it lives — merging its branch first or dropping it. |
142
+ | `/web-ui-dev-refresh-design-reference` | Refresh the committed brand snapshots in `design/` from the Figma styleguide. |
143
+ | `/web-ui-dev-mcp` | Set up or recover Storybook, DevTools, Atlassian, or Figma MCP access. |
143
144
 
144
145
  ## Releasing
145
146
 
@@ -184,26 +185,37 @@ npx tsx scripts/version.ts # prints, changes nothing
184
185
 
185
186
  ### Cutting a release
186
187
 
187
- The detailed Unreleased entries are the release record. Before cutting a version, add one to three titled `Highlights` blocks
188
- at the top for people deciding whether to update. Start each with the outcome; include a small usage example or link when it
189
- helps someone explore the feature. Then prepare the dated release section:
188
+ The release skill prepares the dated release section from detailed Unreleased entries and commits it through the normal
189
+ approval gate. Then ship that prepared commit:
190
190
 
191
191
  ```bash
192
- npm run release:prepare -- --version 0.5.1
192
+ npm run release
193
193
  ```
194
194
 
195
- Commit that change through `/web-ui-dev-release`, then create the local annotated tag:
195
+ The command reads the prepared version from `CHANGELOG.md`, requires a clean working tree, runs full verification, creates a
196
+ version (e.g. `web-ui/v0.5.1`), and pushes the tag. TeamCity builds that tag, publishes the version as `latest`, and points
197
+ `dev` at the same version. The release skill uses the optional `teamcity` CLI when it is installed and authenticated to check
198
+ the tagged build and publish log; otherwise it directs you to the same checks in TeamCity.
199
+
200
+ The tag name must match `web-ui/vX.Y.Z` exactly. Both the version script's `--match` and the TeamCity branch filter in
201
+ [`.teamcity/settings.kts`](./.teamcity/settings.kts) key off that shape; a tag in any other form publishes nothing.
202
+
203
+ ### Optional TeamCity CLI
204
+
205
+ The release skill can verify the tagged build and npm publish with the
206
+ [official TeamCity CLI](https://www.jetbrains.com/help/teamcity/2026.1/teamcity-cli.html#installing). It is optional:
207
+ TeamCity still builds and publishes releases when the CLI is absent.
196
208
 
197
209
  ```bash
198
- npm run release:tag -- --version 0.5.1
199
- ```
210
+ brew install jetbrains/utils/teamcity
211
+ # or: npm install -g @jetbrains/teamcity-cli
200
212
 
201
- The tag command requires a clean working tree, runs full verification, and creates `web-ui/v0.5.1`. It never pushes. Push
202
- that tag only after explicit approval. The tag triggers a build that publishes `0.5.1` as `latest` and repoints the `dev`
203
- dist-tag at the same version.
213
+ teamcity auth login --server https://ci.imfusion.com
214
+ teamcity auth status
215
+ ```
204
216
 
205
- The tag name must match `web-ui/vX.Y.Z` exactly. Both the version script's `--match` and the TeamCity branch filter in
206
- [`.teamcity/settings.kts`](./.teamcity/settings.kts) key off that shape; a tag in any other form publishes nothing.
217
+ `teamcity auth login` opens the browser for TeamCity's PKCE authorization flow and stores the resulting token in the system
218
+ keyring. Use `teamcity auth login --no-browser` when browser login is unavailable.
207
219
 
208
220
  ### Building locally with a real version
209
221
 
@@ -0,0 +1,2 @@
1
+ export * as Toast from './toast';
2
+ export { toastMeta } from './toast.meta';
@@ -0,0 +1,197 @@
1
+ import { Toast as ToastPrimitive } from '@base-ui/react/toast';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ type UpstreamProvider = React.ComponentProps<typeof ToastPrimitive.Provider>;
4
+ type UpstreamPortal = React.ComponentProps<typeof ToastPrimitive.Portal>;
5
+ type UpstreamViewport = React.ComponentProps<typeof ToastPrimitive.Viewport>;
6
+ type UpstreamRoot = React.ComponentProps<typeof ToastPrimitive.Root>;
7
+ type UpstreamContent = React.ComponentProps<typeof ToastPrimitive.Content>;
8
+ type UpstreamTitle = React.ComponentProps<typeof ToastPrimitive.Title>;
9
+ type UpstreamDescription = React.ComponentProps<typeof ToastPrimitive.Description>;
10
+ type UpstreamClose = React.ComponentProps<typeof ToastPrimitive.Close>;
11
+ type UpstreamAction = React.ComponentProps<typeof ToastPrimitive.Action>;
12
+ type UpstreamPositioner = React.ComponentProps<typeof ToastPrimitive.Positioner>;
13
+ type UpstreamArrow = React.ComponentProps<typeof ToastPrimitive.Arrow>;
14
+ declare const toastViewport: (props?: ({
15
+ position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
16
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
17
+ declare const toastRoot: (props?: ({
18
+ variant?: "warning" | "info" | "neutral" | "success" | "error" | null | undefined;
19
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
20
+ /**
21
+ * Toast.useToastManager — reads the queue and the add/close/update/promise
22
+ * methods from the surrounding provider. Must run inside a provider; the one
23
+ * `WebUIProvider` mounts satisfies that for the standard setup.
24
+ */
25
+ export declare const useToastManager: typeof ToastPrimitive.useToastManager;
26
+ /**
27
+ * Toast.createToastManager — creates a manager that lives outside React so
28
+ * non-component code can add toasts. Pass it to a `Toast.Provider` via
29
+ * `toastManager`.
30
+ */
31
+ export declare const createToastManager: typeof ToastPrimitive.createToastManager;
32
+ type ProviderProps = {
33
+ timeout?: UpstreamProvider["timeout"];
34
+ limit?: UpstreamProvider["limit"];
35
+ toastManager?: UpstreamProvider["toastManager"];
36
+ children?: UpstreamProvider["children"];
37
+ };
38
+ /**
39
+ * Toast.Provider — owns the toast queue for its subtree. Renders no DOM element.
40
+ *
41
+ * `WebUIProvider` already mounts one, so most applications never write this
42
+ * part. Use it for a scoped queue or to attach an external manager.
43
+ *
44
+ * @see https://base-ui.com/react/components/toast
45
+ * @llm https://base-ui.com/react/components/toast.md
46
+ */
47
+ export declare function Provider({ timeout, limit, ...props }: ProviderProps): import("react/jsx-runtime").JSX.Element;
48
+ export declare namespace Provider {
49
+ var displayName: string;
50
+ }
51
+ type PortalProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
52
+ container?: UpstreamPortal["container"];
53
+ className?: UpstreamPortal["className"];
54
+ render?: UpstreamPortal["render"];
55
+ children?: UpstreamPortal["children"];
56
+ };
57
+ /** Toast.Portal — moves the viewport out of the page flow so toasts float above the app. */
58
+ export declare function Portal({ className, ...props }: PortalProps): import("react/jsx-runtime").JSX.Element;
59
+ export declare namespace Portal {
60
+ var displayName: string;
61
+ }
62
+ type ViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
63
+ /** Which edge or corner of the screen the stack anchors to. */
64
+ position?: VariantProps<typeof toastViewport>["position"];
65
+ className?: UpstreamViewport["className"];
66
+ render?: UpstreamViewport["render"];
67
+ };
68
+ /**
69
+ * Toast.Viewport — the fixed layer that holds the stack. Hovering or focusing it
70
+ * expands the collapsed toasts; it ignores pointer events except on the toasts
71
+ * themselves so the app underneath stays clickable.
72
+ */
73
+ export declare function Viewport({ className, position, ...props }: ViewportProps): import("react/jsx-runtime").JSX.Element;
74
+ export declare namespace Viewport {
75
+ var displayName: string;
76
+ }
77
+ type RootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
78
+ /** Semantic treatment for the toast surface. */
79
+ variant?: VariantProps<typeof toastRoot>["variant"];
80
+ /** The toast object from the manager's `toasts` array. */
81
+ toast: UpstreamRoot["toast"];
82
+ /** @default ['down', 'right'] */
83
+ swipeDirection?: UpstreamRoot["swipeDirection"];
84
+ className?: UpstreamRoot["className"];
85
+ render?: UpstreamRoot["render"];
86
+ };
87
+ /**
88
+ * Toast.Root — one toast surface. Carries the upstream state as data attributes
89
+ * (`data-starting-style`, `data-ending-style`, `data-expanded`, `data-limited`,
90
+ * `data-swiping`) which the stylesheet uses for stack and exit motion.
91
+ */
92
+ export declare function Root({ className, variant, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
93
+ export declare namespace Root {
94
+ var displayName: string;
95
+ }
96
+ type ContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
97
+ className?: UpstreamContent["className"];
98
+ render?: UpstreamContent["render"];
99
+ };
100
+ /**
101
+ * Toast.Content — lays out title, description, action, and close. Fades out on
102
+ * the toasts stacked behind the frontmost one via `data-behind`.
103
+ */
104
+ export declare function Content({ className, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
105
+ export declare namespace Content {
106
+ var displayName: string;
107
+ }
108
+ type TitleProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, "className"> & {
109
+ className?: UpstreamTitle["className"];
110
+ render?: UpstreamTitle["render"];
111
+ };
112
+ /** Toast.Title — the message heading. Falls back to the toast object's `title` when given no children. */
113
+ export declare function Title({ className, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
114
+ export declare namespace Title {
115
+ var displayName: string;
116
+ }
117
+ type DescriptionProps = Omit<React.HTMLAttributes<HTMLParagraphElement>, "className"> & {
118
+ className?: UpstreamDescription["className"];
119
+ render?: UpstreamDescription["render"];
120
+ };
121
+ /** Toast.Description — supporting copy. Falls back to the toast object's `description` when given no children. */
122
+ export declare function Description({ className, ...props }: DescriptionProps): import("react/jsx-runtime").JSX.Element;
123
+ export declare namespace Description {
124
+ var displayName: string;
125
+ }
126
+ type CloseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
127
+ /** @default true */
128
+ nativeButton?: UpstreamClose["nativeButton"];
129
+ className?: UpstreamClose["className"];
130
+ render?: UpstreamClose["render"];
131
+ };
132
+ /** Toast.Close — dismisses the toast it sits in. */
133
+ export declare function Close({ className, ...props }: CloseProps): import("react/jsx-runtime").JSX.Element;
134
+ export declare namespace Close {
135
+ var displayName: string;
136
+ }
137
+ type ActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
138
+ /** @default true */
139
+ nativeButton?: UpstreamAction["nativeButton"];
140
+ className?: UpstreamAction["className"];
141
+ render?: UpstreamAction["render"];
142
+ };
143
+ /**
144
+ * Toast.Action — the toast's single affordance, typically an undo. Its behavior
145
+ * comes from `actionProps` on the toast object passed to the manager.
146
+ */
147
+ export declare function Action({ className, ...props }: ActionProps): import("react/jsx-runtime").JSX.Element;
148
+ export declare namespace Action {
149
+ var displayName: string;
150
+ }
151
+ type PositionerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
152
+ /** The toast object from the manager's `toasts` array. */
153
+ toast: UpstreamPositioner["toast"];
154
+ /** @default 'top' */
155
+ side?: UpstreamPositioner["side"];
156
+ /** @default 'center' */
157
+ align?: UpstreamPositioner["align"];
158
+ /** @default 0 */
159
+ sideOffset?: UpstreamPositioner["sideOffset"];
160
+ /** @default 0 */
161
+ alignOffset?: UpstreamPositioner["alignOffset"];
162
+ /** @default 5 */
163
+ arrowPadding?: UpstreamPositioner["arrowPadding"];
164
+ anchor?: UpstreamPositioner["anchor"];
165
+ collisionAvoidance?: UpstreamPositioner["collisionAvoidance"];
166
+ /** @default 'clipping-ancestors' */
167
+ collisionBoundary?: UpstreamPositioner["collisionBoundary"];
168
+ /** @default 5 */
169
+ collisionPadding?: UpstreamPositioner["collisionPadding"];
170
+ /** @default 'absolute' */
171
+ positionMethod?: UpstreamPositioner["positionMethod"];
172
+ /** @default false */
173
+ sticky?: UpstreamPositioner["sticky"];
174
+ /** @default false */
175
+ disableAnchorTracking?: UpstreamPositioner["disableAnchorTracking"];
176
+ className?: UpstreamPositioner["className"];
177
+ render?: UpstreamPositioner["render"];
178
+ };
179
+ /**
180
+ * Toast.Positioner — anchors a toast to an element instead of the stack, for
181
+ * feedback that belongs next to the control that caused it. Wrap a `Root` in it
182
+ * and the root switches to the compact content-sized surface.
183
+ */
184
+ export declare function Positioner({ className, ...props }: PositionerProps): import("react/jsx-runtime").JSX.Element;
185
+ export declare namespace Positioner {
186
+ var displayName: string;
187
+ }
188
+ type ArrowProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
189
+ className?: UpstreamArrow["className"];
190
+ render?: UpstreamArrow["render"];
191
+ };
192
+ /** Toast.Arrow — pointer joining an anchored toast to its anchor. Receives `data-side` for orientation. */
193
+ export declare function Arrow({ className, ...props }: ArrowProps): import("react/jsx-runtime").JSX.Element;
194
+ export declare namespace Arrow {
195
+ var displayName: string;
196
+ }
197
+ export {};
@@ -0,0 +1,2 @@
1
+ import { ComponentMeta } from '../../types/meta';
2
+ export declare const toastMeta: ComponentMeta;
@@ -0,0 +1,12 @@
1
+ import { ReactNode, SVGProps } from 'react';
2
+ type IconConfig = Omit<SVGProps<SVGSVGElement>, "children" | "ref">;
3
+ interface ProviderProps {
4
+ children: ReactNode;
5
+ value?: IconConfig;
6
+ }
7
+ /** IconConfig.Provider — sets SVG defaults (color, size, stroke width) for icons in its subtree. Providers shallow-merge with the closest parent's config. */
8
+ export declare function Provider({ children, value }: ProviderProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare namespace Provider {
10
+ var displayName: string;
11
+ }
12
+ export {};
package/dist/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu
27
27
  export { Spinner, spinnerMeta } from './components/spinner';
28
28
  export { Table, tableMeta } from './components/table';
29
29
  export { Tabs, tabsMeta } from './components/tabs';
30
+ export { Toast, toastMeta } from './components/toast';
30
31
  export { Tooltip, tooltipMeta } from './components/tooltip';
31
32
  export { Typo, typoMeta } from './components/typo';
32
33
  export { ImFusionLogo } from './components/logo';