@imfusion/web-ui 0.11.1-dev.48.g0fcb0d30 → 0.11.1-dev.49.gcda1589f

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/CHANGELOG.md CHANGED
@@ -14,6 +14,13 @@
14
14
  failed rows. A single-file zone shows its file with `FileDropZone.File` and `FileDropZone.Remove`, and the glyph changes to a
15
15
  page.
16
16
  [FileDropZone](src/components/file-drop-zone/file-drop-zone.mdx) — Nikolaus Brunner <brunner@imfusion.com>
17
+ - `@imfusion/web-ui/integrations/view-tools` adds `ViewTools`: Pan, Zoom, and Windowing toggles that limit the left mouse
18
+ button in the ImFusion main 2D and MPR views to one action, and a button that resets the view group. `orientation` lays
19
+ the tools out in a row (`"horizontal"`, the default) or a column (`"vertical"`). It needs `@imfusion/sdk` 1.3.0 or later. [ViewTools](src/integrations/view-tools/view-tools.mdx)
20
+ ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Stephan Wenninger <wenninger@imfusion.com>
21
+ - `useViewInteraction` from `@imfusion/web-ui/integrations/view-tools` reads and sets the active `ViewTools` tool, so the
22
+ app and the toolbar share one value. `setViewInteraction("Default")` releases the tool. [ViewTools](src/integrations/view-tools/view-tools.mdx)
23
+ ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Nikolaus Brunner <brunner@imfusion.com>
17
24
  - `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
18
25
  renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
19
26
  [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
@@ -0,0 +1,171 @@
1
+ import { _M as e } from "./icons-vc1WZCxX.js";
2
+ import { t } from "./meta-V_KyLeGn.js";
3
+ import { a as n, r } from "./toggle-group-eGr6_hgQ.js";
4
+ import { a as i } from "./utils-J6vbjIt1.js";
5
+ import { Button as a } from "@base-ui/react/button";
6
+ import { cva as o } from "class-variance-authority";
7
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
8
+ var l = {
9
+ chamfer: "imf-ui-button-module-chamfer",
10
+ contextOncolor: "imf-ui-button-module-contextOncolor",
11
+ endIcon: "imf-ui-button-module-endIcon",
12
+ justifySpread: "imf-ui-button-module-justifySpread",
13
+ label: "imf-ui-button-module-label",
14
+ radiusLg: "imf-ui-button-module-radiusLg",
15
+ radiusMd: "imf-ui-button-module-radiusMd",
16
+ radiusRound: "imf-ui-button-module-radiusRound",
17
+ radiusSm: "imf-ui-button-module-radiusSm",
18
+ root: "imf-ui-button-module-root",
19
+ shortcut: "imf-ui-button-module-shortcut",
20
+ sizeHero: "imf-ui-button-module-sizeHero",
21
+ sizeLg: "imf-ui-button-module-sizeLg",
22
+ sizeMd: "imf-ui-button-module-sizeMd",
23
+ sizeSm: "imf-ui-button-module-sizeSm",
24
+ startIcon: "imf-ui-button-module-startIcon",
25
+ variantGhost: "imf-ui-button-module-variantGhost",
26
+ variantNegative: "imf-ui-button-module-variantNegative",
27
+ variantOutline: "imf-ui-button-module-variantOutline",
28
+ variantPositive: "imf-ui-button-module-variantPositive",
29
+ variantPrimary: "imf-ui-button-module-variantPrimary",
30
+ variantSecondary: "imf-ui-button-module-variantSecondary"
31
+ }, u = o(l.root, { variants: {
32
+ variant: {
33
+ primary: l.variantPrimary,
34
+ secondary: l.variantSecondary,
35
+ positive: l.variantPositive,
36
+ negative: l.variantNegative,
37
+ outline: l.variantOutline,
38
+ ghost: l.variantGhost
39
+ },
40
+ size: {
41
+ sm: l.sizeSm,
42
+ md: l.sizeMd,
43
+ lg: l.sizeLg,
44
+ hero: l.sizeHero
45
+ },
46
+ chamfer: {
47
+ false: null,
48
+ true: l.chamfer
49
+ },
50
+ radius: {
51
+ none: null,
52
+ sm: l.radiusSm,
53
+ md: l.radiusMd,
54
+ lg: l.radiusLg,
55
+ round: l.radiusRound
56
+ },
57
+ context: {
58
+ default: null,
59
+ oncolor: l.contextOncolor
60
+ },
61
+ justify: {
62
+ center: null,
63
+ spread: l.justifySpread
64
+ }
65
+ } });
66
+ function d({ variant: e = "primary", size: t = "md", context: o = "default", chamfer: d = t === "hero", radius: f = "none", justify: p = "center", startIcon: m, endIcon: h, shortcut: g, children: _, ...v }) {
67
+ return /* @__PURE__ */ c(a, {
68
+ "aria-keyshortcuts": g ? r(g) : void 0,
69
+ ...v,
70
+ "data-imf-ui-component": "Button",
71
+ className: (n) => u({
72
+ variant: e,
73
+ size: t,
74
+ chamfer: d,
75
+ radius: f,
76
+ context: o,
77
+ justify: p,
78
+ className: i(v.className, n)
79
+ }),
80
+ children: [
81
+ m != null && /* @__PURE__ */ s("span", {
82
+ className: l.startIcon,
83
+ "aria-hidden": !0,
84
+ children: m
85
+ }),
86
+ /* @__PURE__ */ s("span", {
87
+ className: l.label,
88
+ children: _
89
+ }),
90
+ h != null && /* @__PURE__ */ s("span", {
91
+ className: l.endIcon,
92
+ "aria-hidden": !0,
93
+ children: h
94
+ }),
95
+ g && /* @__PURE__ */ s(n, {
96
+ variant: "flat",
97
+ className: l.shortcut,
98
+ "aria-hidden": !0,
99
+ children: g
100
+ })
101
+ ]
102
+ });
103
+ }
104
+ //#endregion
105
+ //#region src/components/button/button.meta.ts
106
+ var f = {
107
+ name: "Button",
108
+ category: t.buttons,
109
+ status: "stable",
110
+ description: "Triggers an action such as submit, confirm, cancel, navigate, or delete. Also called a CTA or action button; variants and sizes communicate its importance.",
111
+ origin: "adapted",
112
+ internalDependencies: ["Kbd"],
113
+ upstream: {
114
+ name: "Base UI",
115
+ websiteLink: "https://base-ui.com/",
116
+ docLink: "https://base-ui.com/react/components/button",
117
+ llmDocLink: "https://base-ui.com/react/components/button.md"
118
+ }
119
+ }, p = {
120
+ root: "imf-ui-icon-button-module-root",
121
+ sizeHero: "imf-ui-icon-button-module-sizeHero",
122
+ sizeLg: "imf-ui-icon-button-module-sizeLg",
123
+ sizeMd: "imf-ui-icon-button-module-sizeMd",
124
+ sizeSm: "imf-ui-icon-button-module-sizeSm"
125
+ }, m = o(p.root, { variants: { size: {
126
+ sm: p.sizeSm,
127
+ md: p.sizeMd,
128
+ lg: p.sizeLg,
129
+ hero: p.sizeHero
130
+ } } }), h = {
131
+ sm: 15,
132
+ md: 18,
133
+ lg: 20,
134
+ hero: 24
135
+ }, g = {
136
+ sm: "md",
137
+ md: "lg",
138
+ lg: "hero",
139
+ hero: "hero"
140
+ };
141
+ function _({ glyph: t, label: n, iconProps: r, size: a = "md", ...o }) {
142
+ let c = a ?? "md", l = o.shortcut ? g[c] : c;
143
+ return /* @__PURE__ */ s(d, {
144
+ ...o,
145
+ size: c,
146
+ "aria-label": n,
147
+ className: (e) => m({
148
+ size: l,
149
+ className: i(o.className, e)
150
+ }),
151
+ children: /* @__PURE__ */ s(e, {
152
+ size: h[c],
153
+ ...r,
154
+ glyph: t,
155
+ "aria-hidden": !0
156
+ })
157
+ });
158
+ }
159
+ _.displayName = "IconButton";
160
+ //#endregion
161
+ //#region src/components/icon-button/icon-button.meta.ts
162
+ var v = {
163
+ name: "IconButton",
164
+ category: t.buttons,
165
+ status: "experimental",
166
+ description: "Square button that shows a single icon and no visible text, with its accessible name from `label`. Also called an icon-only or toolbar button. Use Button with `startIcon` or `endIcon` when a text label is visible.",
167
+ origin: "native",
168
+ internalDependencies: ["Button", "Icon"]
169
+ };
170
+ //#endregion
171
+ export { d as i, _ as n, f as r, v as t };