mac-human-design 0.1.3 → 0.1.6
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 +55 -11
- package/changelog.md +77 -0
- package/docs/macos-base-ui-coverage.md +119 -0
- package/examples/macos-base-ui-gallery/index.html +12 -0
- package/examples/macos-base-ui-gallery/src/main.tsx +13 -0
- package/package.json +30 -16
- package/scripts/verify-base-ui-coverage.mjs +277 -0
- package/scripts/verify-macos-design.mjs +146 -0
- package/src/components/AppWindowShell.tsx +4 -18
- package/src/components/MacBaseUI.tsx +688 -0
- package/src/components/MacBaseUIGallery.tsx +431 -0
- package/src/components/MacSegmentedControl.tsx +14 -17
- package/src/components/StatusMessage.tsx +2 -41
- package/src/components/SymbolIconButton.tsx +26 -28
- package/src/components/ViewDragRegion.tsx +2 -4
- package/src/components/index.ts +2 -0
- package/src/index.ts +2 -0
- package/src/styles/macosBaseUi.css +1158 -0
- package/src/styles/macosTauri.css +70 -0
- package/src/tauri/macosWindowConfig.ts +20 -0
- package/src/theme/macosTheme.ts +58 -568
- package/src/types/css.d.ts +1 -0
- package/src-tauri/Cargo.toml +1 -0
- package/src-tauri/src/lib.rs +39 -1
- package/src-tauri/templates/macos-transparent-overlay-window.json +16 -0
|
@@ -0,0 +1,431 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import {
|
|
3
|
+
MacAccordion,
|
|
4
|
+
MacAlertDialog,
|
|
5
|
+
MacAutocomplete,
|
|
6
|
+
MacAvatar,
|
|
7
|
+
MacButton,
|
|
8
|
+
MacCheckbox,
|
|
9
|
+
MacCheckboxGroup,
|
|
10
|
+
MacCollapsible,
|
|
11
|
+
MacCombobox,
|
|
12
|
+
MacContextMenu,
|
|
13
|
+
MacCSPProvider,
|
|
14
|
+
MacDestructiveButton,
|
|
15
|
+
MacDialog,
|
|
16
|
+
MacDirectionProvider,
|
|
17
|
+
MacDrawer,
|
|
18
|
+
MacField,
|
|
19
|
+
MacFieldset,
|
|
20
|
+
MacForm,
|
|
21
|
+
MacHelpButton,
|
|
22
|
+
MacIconButton,
|
|
23
|
+
MacInput,
|
|
24
|
+
MacMenu,
|
|
25
|
+
MacMenubar,
|
|
26
|
+
MacMeter,
|
|
27
|
+
MacMotionProvider,
|
|
28
|
+
MacNavigationMenu,
|
|
29
|
+
MacNumberField,
|
|
30
|
+
MacOTPField,
|
|
31
|
+
MacPlainButton,
|
|
32
|
+
MacPopover,
|
|
33
|
+
MacPreviewCard,
|
|
34
|
+
MacPrimaryButton,
|
|
35
|
+
MacProgress,
|
|
36
|
+
MacRadio,
|
|
37
|
+
MacRadioGroup,
|
|
38
|
+
MacScrollArea,
|
|
39
|
+
MacSearchField,
|
|
40
|
+
MacSecondaryButton,
|
|
41
|
+
MacSeparatedSegmentedToggleGroup,
|
|
42
|
+
MacSegmentedToggleGroup,
|
|
43
|
+
MacSelect,
|
|
44
|
+
MacSeparator,
|
|
45
|
+
MacSlider,
|
|
46
|
+
MacSwitch,
|
|
47
|
+
MacTabs,
|
|
48
|
+
MacTextField,
|
|
49
|
+
MacToast,
|
|
50
|
+
MacToggle,
|
|
51
|
+
MacToggleGroup,
|
|
52
|
+
MacToolbar,
|
|
53
|
+
MacToolbarToggle,
|
|
54
|
+
MacTooltip,
|
|
55
|
+
} from "./MacBaseUI";
|
|
56
|
+
import { MacSegmentedControl } from "./MacSegmentedControl";
|
|
57
|
+
|
|
58
|
+
const choices = [
|
|
59
|
+
{ label: "General", value: "general" },
|
|
60
|
+
{ label: "Display", value: "display" },
|
|
61
|
+
{ label: "Advanced", value: "advanced" },
|
|
62
|
+
];
|
|
63
|
+
|
|
64
|
+
function GallerySection({ title, children }: { title: string; children: React.ReactNode }) {
|
|
65
|
+
return (
|
|
66
|
+
<section className="hd-mac-gallery-section">
|
|
67
|
+
<h2>{title}</h2>
|
|
68
|
+
<div className="hd-mac-gallery-row">{children}</div>
|
|
69
|
+
</section>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export function MacBaseUIGallery() {
|
|
74
|
+
const [segment, setSegment] = React.useState("general");
|
|
75
|
+
const [toggleValue, setToggleValue] = React.useState<readonly string[]>(["one"]);
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<MacCSPProvider>
|
|
79
|
+
<MacDirectionProvider direction="ltr">
|
|
80
|
+
<MacMotionProvider>
|
|
81
|
+
<div className="hd-mac hd-mac-gallery">
|
|
82
|
+
<GallerySection title="Buttons">
|
|
83
|
+
<MacButton>Default</MacButton>
|
|
84
|
+
<MacPrimaryButton>Continue</MacPrimaryButton>
|
|
85
|
+
<MacSecondaryButton>Options</MacSecondaryButton>
|
|
86
|
+
<MacDestructiveButton>Delete</MacDestructiveButton>
|
|
87
|
+
<MacPlainButton>Cancel</MacPlainButton>
|
|
88
|
+
<MacIconButton aria-label="Add">+</MacIconButton>
|
|
89
|
+
<MacHelpButton aria-label="Help">?</MacHelpButton>
|
|
90
|
+
</GallerySection>
|
|
91
|
+
|
|
92
|
+
<GallerySection title="Segmented Controls">
|
|
93
|
+
<MacSegmentedControl
|
|
94
|
+
options={choices}
|
|
95
|
+
value={segment}
|
|
96
|
+
onChange={setSegment}
|
|
97
|
+
/>
|
|
98
|
+
<MacSegmentedToggleGroup defaultValue={["compact"]}>
|
|
99
|
+
<MacToggle value="compact">Compact</MacToggle>
|
|
100
|
+
<MacToggle value="expanded">Expanded</MacToggle>
|
|
101
|
+
</MacSegmentedToggleGroup>
|
|
102
|
+
<MacToggleGroup value={toggleValue} onValueChange={setToggleValue}>
|
|
103
|
+
<MacToggle value="one">One</MacToggle>
|
|
104
|
+
<MacToggle value="two">Two</MacToggle>
|
|
105
|
+
</MacToggleGroup>
|
|
106
|
+
<MacSeparatedSegmentedToggleGroup defaultValue={["left"]}>
|
|
107
|
+
<MacToggle value="left">Left</MacToggle>
|
|
108
|
+
<MacToggle value="center">Center</MacToggle>
|
|
109
|
+
<MacToggle value="right">Right</MacToggle>
|
|
110
|
+
</MacSeparatedSegmentedToggleGroup>
|
|
111
|
+
</GallerySection>
|
|
112
|
+
|
|
113
|
+
<GallerySection title="Fields">
|
|
114
|
+
<MacForm>
|
|
115
|
+
<MacField.Root>
|
|
116
|
+
<MacField.Label>Name</MacField.Label>
|
|
117
|
+
<MacInput placeholder="Untitled" />
|
|
118
|
+
<MacField.Description>Shown in the window title.</MacField.Description>
|
|
119
|
+
</MacField.Root>
|
|
120
|
+
<MacField.Root>
|
|
121
|
+
<MacField.Label>Text Field</MacField.Label>
|
|
122
|
+
<MacTextField placeholder="Editable text" />
|
|
123
|
+
</MacField.Root>
|
|
124
|
+
<MacField.Root>
|
|
125
|
+
<MacField.Label>Search</MacField.Label>
|
|
126
|
+
<MacSearchField placeholder="Search settings" />
|
|
127
|
+
</MacField.Root>
|
|
128
|
+
<MacFieldset.Root>
|
|
129
|
+
<MacFieldset.Legend>Options</MacFieldset.Legend>
|
|
130
|
+
<MacCheckboxGroup>
|
|
131
|
+
<label className="hd-mac-gallery-inline-choice">
|
|
132
|
+
<MacCheckbox.Root defaultChecked>
|
|
133
|
+
<MacCheckbox.Indicator />
|
|
134
|
+
</MacCheckbox.Root>
|
|
135
|
+
Launch at login
|
|
136
|
+
</label>
|
|
137
|
+
</MacCheckboxGroup>
|
|
138
|
+
<MacRadioGroup defaultValue="auto">
|
|
139
|
+
<label className="hd-mac-gallery-inline-choice">
|
|
140
|
+
<MacRadio.Root value="auto">
|
|
141
|
+
<MacRadio.Indicator />
|
|
142
|
+
</MacRadio.Root>
|
|
143
|
+
Automatic
|
|
144
|
+
</label>
|
|
145
|
+
</MacRadioGroup>
|
|
146
|
+
</MacFieldset.Root>
|
|
147
|
+
</MacForm>
|
|
148
|
+
</GallerySection>
|
|
149
|
+
|
|
150
|
+
<GallerySection title="Inputs">
|
|
151
|
+
<MacNumberField.Root defaultValue={12}>
|
|
152
|
+
<MacNumberField.Group>
|
|
153
|
+
<MacNumberField.Decrement>-</MacNumberField.Decrement>
|
|
154
|
+
<MacNumberField.Input />
|
|
155
|
+
<MacNumberField.Increment>+</MacNumberField.Increment>
|
|
156
|
+
</MacNumberField.Group>
|
|
157
|
+
</MacNumberField.Root>
|
|
158
|
+
<MacOTPField.Root length={2}>
|
|
159
|
+
<MacOTPField.Input />
|
|
160
|
+
<MacOTPField.Separator>-</MacOTPField.Separator>
|
|
161
|
+
<MacOTPField.Input />
|
|
162
|
+
</MacOTPField.Root>
|
|
163
|
+
<MacSwitch.Root defaultChecked>
|
|
164
|
+
<MacSwitch.Thumb />
|
|
165
|
+
</MacSwitch.Root>
|
|
166
|
+
</GallerySection>
|
|
167
|
+
|
|
168
|
+
<GallerySection title="Pickers">
|
|
169
|
+
<MacSelect.Root items={choices} defaultValue="general">
|
|
170
|
+
<MacSelect.PopUpButtonTrigger>
|
|
171
|
+
<MacSelect.Value />
|
|
172
|
+
</MacSelect.PopUpButtonTrigger>
|
|
173
|
+
<MacSelect.Portal>
|
|
174
|
+
<MacSelect.Positioner>
|
|
175
|
+
<MacSelect.Popup>
|
|
176
|
+
<MacSelect.List>
|
|
177
|
+
{choices.map((choice) => (
|
|
178
|
+
<MacSelect.Item key={choice.value} value={choice.value}>
|
|
179
|
+
<MacSelect.ItemIndicator />
|
|
180
|
+
<MacSelect.ItemText>{choice.label}</MacSelect.ItemText>
|
|
181
|
+
</MacSelect.Item>
|
|
182
|
+
))}
|
|
183
|
+
</MacSelect.List>
|
|
184
|
+
</MacSelect.Popup>
|
|
185
|
+
</MacSelect.Positioner>
|
|
186
|
+
</MacSelect.Portal>
|
|
187
|
+
</MacSelect.Root>
|
|
188
|
+
<MacSelect.Root items={choices} defaultValue="display">
|
|
189
|
+
<MacSelect.PullDownButtonTrigger>
|
|
190
|
+
<MacSelect.Value />
|
|
191
|
+
</MacSelect.PullDownButtonTrigger>
|
|
192
|
+
</MacSelect.Root>
|
|
193
|
+
<MacCombobox.Root items={choices}>
|
|
194
|
+
<label className="hd-mac-label">Find</label>
|
|
195
|
+
<MacCombobox.InputGroup>
|
|
196
|
+
<MacCombobox.Input placeholder="Search" />
|
|
197
|
+
<MacCombobox.Trigger>⌄</MacCombobox.Trigger>
|
|
198
|
+
</MacCombobox.InputGroup>
|
|
199
|
+
</MacCombobox.Root>
|
|
200
|
+
<MacAutocomplete.Root items={choices}>
|
|
201
|
+
<MacAutocomplete.InputGroup>
|
|
202
|
+
<MacAutocomplete.Input placeholder="Autocomplete" />
|
|
203
|
+
<MacAutocomplete.Clear>×</MacAutocomplete.Clear>
|
|
204
|
+
</MacAutocomplete.InputGroup>
|
|
205
|
+
</MacAutocomplete.Root>
|
|
206
|
+
</GallerySection>
|
|
207
|
+
|
|
208
|
+
<GallerySection title="Navigation">
|
|
209
|
+
<MacTabs.Root defaultValue="general">
|
|
210
|
+
<MacTabs.List>
|
|
211
|
+
<MacTabs.Tab value="general">General</MacTabs.Tab>
|
|
212
|
+
<MacTabs.Tab value="display">Display</MacTabs.Tab>
|
|
213
|
+
</MacTabs.List>
|
|
214
|
+
<MacTabs.Panel value="general">General settings</MacTabs.Panel>
|
|
215
|
+
<MacTabs.Panel value="display">Display settings</MacTabs.Panel>
|
|
216
|
+
</MacTabs.Root>
|
|
217
|
+
<MacAccordion.Root>
|
|
218
|
+
<MacAccordion.Item value="network">
|
|
219
|
+
<MacAccordion.Header>
|
|
220
|
+
<MacAccordion.Trigger>Network</MacAccordion.Trigger>
|
|
221
|
+
</MacAccordion.Header>
|
|
222
|
+
<MacAccordion.Panel>Wi-Fi and connection settings.</MacAccordion.Panel>
|
|
223
|
+
</MacAccordion.Item>
|
|
224
|
+
</MacAccordion.Root>
|
|
225
|
+
<MacCollapsible.Root>
|
|
226
|
+
<MacCollapsible.Trigger>Details</MacCollapsible.Trigger>
|
|
227
|
+
<MacCollapsible.Panel>Additional controls.</MacCollapsible.Panel>
|
|
228
|
+
</MacCollapsible.Root>
|
|
229
|
+
</GallerySection>
|
|
230
|
+
|
|
231
|
+
<GallerySection title="Menus">
|
|
232
|
+
<MacMenu.Root>
|
|
233
|
+
<MacMenu.Trigger>Menu</MacMenu.Trigger>
|
|
234
|
+
<MacMenu.Portal>
|
|
235
|
+
<MacMenu.Positioner>
|
|
236
|
+
<MacMenu.Popup>
|
|
237
|
+
<MacMenu.Item>New Window</MacMenu.Item>
|
|
238
|
+
<MacMenu.CheckboxItem checked>
|
|
239
|
+
<MacMenu.CheckboxItemIndicator />
|
|
240
|
+
Show Toolbar
|
|
241
|
+
</MacMenu.CheckboxItem>
|
|
242
|
+
<MacMenu.Separator />
|
|
243
|
+
<MacMenu.Item>Preferences</MacMenu.Item>
|
|
244
|
+
</MacMenu.Popup>
|
|
245
|
+
</MacMenu.Positioner>
|
|
246
|
+
</MacMenu.Portal>
|
|
247
|
+
</MacMenu.Root>
|
|
248
|
+
<MacContextMenu.Root>
|
|
249
|
+
<MacContextMenu.Trigger className="hd-mac-gallery-context-target">
|
|
250
|
+
Context target
|
|
251
|
+
</MacContextMenu.Trigger>
|
|
252
|
+
<MacContextMenu.Portal>
|
|
253
|
+
<MacContextMenu.Positioner>
|
|
254
|
+
<MacContextMenu.Popup>
|
|
255
|
+
<MacContextMenu.Item>Rename</MacContextMenu.Item>
|
|
256
|
+
<MacContextMenu.Item>Duplicate</MacContextMenu.Item>
|
|
257
|
+
</MacContextMenu.Popup>
|
|
258
|
+
</MacContextMenu.Positioner>
|
|
259
|
+
</MacContextMenu.Portal>
|
|
260
|
+
</MacContextMenu.Root>
|
|
261
|
+
<MacMenubar>File Edit View</MacMenubar>
|
|
262
|
+
</GallerySection>
|
|
263
|
+
|
|
264
|
+
<GallerySection title="Surfaces">
|
|
265
|
+
<MacPopover.Root>
|
|
266
|
+
<MacPopover.Trigger>Popover</MacPopover.Trigger>
|
|
267
|
+
<MacPopover.Portal>
|
|
268
|
+
<MacPopover.Positioner sideOffset={6}>
|
|
269
|
+
<MacPopover.Popup>
|
|
270
|
+
<MacPopover.Title>Inspector</MacPopover.Title>
|
|
271
|
+
<MacPopover.Description>Contextual controls.</MacPopover.Description>
|
|
272
|
+
</MacPopover.Popup>
|
|
273
|
+
</MacPopover.Positioner>
|
|
274
|
+
</MacPopover.Portal>
|
|
275
|
+
</MacPopover.Root>
|
|
276
|
+
<MacTooltip.Root>
|
|
277
|
+
<MacTooltip.Trigger>Tooltip</MacTooltip.Trigger>
|
|
278
|
+
<MacTooltip.Portal>
|
|
279
|
+
<MacTooltip.Positioner sideOffset={5}>
|
|
280
|
+
<MacTooltip.Popup>Helpful detail</MacTooltip.Popup>
|
|
281
|
+
</MacTooltip.Positioner>
|
|
282
|
+
</MacTooltip.Portal>
|
|
283
|
+
</MacTooltip.Root>
|
|
284
|
+
<MacPreviewCard.Root>
|
|
285
|
+
<MacPreviewCard.Trigger className="hd-mac-button">Preview</MacPreviewCard.Trigger>
|
|
286
|
+
<MacPreviewCard.Portal>
|
|
287
|
+
<MacPreviewCard.Positioner sideOffset={6}>
|
|
288
|
+
<MacPreviewCard.Popup>Preview content</MacPreviewCard.Popup>
|
|
289
|
+
</MacPreviewCard.Positioner>
|
|
290
|
+
</MacPreviewCard.Portal>
|
|
291
|
+
</MacPreviewCard.Root>
|
|
292
|
+
</GallerySection>
|
|
293
|
+
|
|
294
|
+
<GallerySection title="Dialogs">
|
|
295
|
+
<MacDialog.Root>
|
|
296
|
+
<MacDialog.Trigger>Dialog</MacDialog.Trigger>
|
|
297
|
+
<MacDialog.Portal>
|
|
298
|
+
<MacDialog.Backdrop />
|
|
299
|
+
<MacDialog.Popup>
|
|
300
|
+
<MacDialog.Title>Window Sheet</MacDialog.Title>
|
|
301
|
+
<MacDialog.Description>Dialog content styled as a macOS sheet.</MacDialog.Description>
|
|
302
|
+
<MacDialog.Close>Close</MacDialog.Close>
|
|
303
|
+
</MacDialog.Popup>
|
|
304
|
+
</MacDialog.Portal>
|
|
305
|
+
</MacDialog.Root>
|
|
306
|
+
<MacDialog.Root>
|
|
307
|
+
<MacDialog.Trigger>Sheet</MacDialog.Trigger>
|
|
308
|
+
<MacDialog.Portal>
|
|
309
|
+
<MacDialog.Backdrop />
|
|
310
|
+
<MacDialog.SheetPopup>
|
|
311
|
+
<MacDialog.Title>Save Changes?</MacDialog.Title>
|
|
312
|
+
<MacDialog.Description>Sheets stay attached to the active window.</MacDialog.Description>
|
|
313
|
+
<MacDialog.Close>Done</MacDialog.Close>
|
|
314
|
+
</MacDialog.SheetPopup>
|
|
315
|
+
</MacDialog.Portal>
|
|
316
|
+
</MacDialog.Root>
|
|
317
|
+
<MacAlertDialog.Root>
|
|
318
|
+
<MacAlertDialog.Trigger>Alert</MacAlertDialog.Trigger>
|
|
319
|
+
<MacAlertDialog.Portal>
|
|
320
|
+
<MacAlertDialog.Backdrop />
|
|
321
|
+
<MacAlertDialog.Popup>
|
|
322
|
+
<MacAlertDialog.Title>Delete Item?</MacAlertDialog.Title>
|
|
323
|
+
<MacAlertDialog.Description>This cannot be undone.</MacAlertDialog.Description>
|
|
324
|
+
<MacAlertDialog.Close>Cancel</MacAlertDialog.Close>
|
|
325
|
+
</MacAlertDialog.Popup>
|
|
326
|
+
</MacAlertDialog.Portal>
|
|
327
|
+
</MacAlertDialog.Root>
|
|
328
|
+
<MacDrawer.Root>
|
|
329
|
+
<MacDrawer.Trigger>Drawer</MacDrawer.Trigger>
|
|
330
|
+
<MacDrawer.Portal>
|
|
331
|
+
<MacDrawer.Backdrop />
|
|
332
|
+
<MacDrawer.Viewport>
|
|
333
|
+
<MacDrawer.Popup>
|
|
334
|
+
<MacDrawer.Title>Drawer</MacDrawer.Title>
|
|
335
|
+
<MacDrawer.Content>Additional controls.</MacDrawer.Content>
|
|
336
|
+
</MacDrawer.Popup>
|
|
337
|
+
</MacDrawer.Viewport>
|
|
338
|
+
</MacDrawer.Portal>
|
|
339
|
+
</MacDrawer.Root>
|
|
340
|
+
<MacDrawer.Root>
|
|
341
|
+
<MacDrawer.Trigger>Sidebar</MacDrawer.Trigger>
|
|
342
|
+
<MacDrawer.Portal>
|
|
343
|
+
<MacDrawer.Backdrop />
|
|
344
|
+
<MacDrawer.Viewport>
|
|
345
|
+
<MacDrawer.SidebarPopup>
|
|
346
|
+
<MacDrawer.Title>Sidebar</MacDrawer.Title>
|
|
347
|
+
<MacDrawer.Content>Window-adjacent navigation.</MacDrawer.Content>
|
|
348
|
+
</MacDrawer.SidebarPopup>
|
|
349
|
+
</MacDrawer.Viewport>
|
|
350
|
+
</MacDrawer.Portal>
|
|
351
|
+
</MacDrawer.Root>
|
|
352
|
+
</GallerySection>
|
|
353
|
+
|
|
354
|
+
<GallerySection title="States">
|
|
355
|
+
<MacButton disabled>Disabled</MacButton>
|
|
356
|
+
<MacPrimaryButton disabled>Disabled Primary</MacPrimaryButton>
|
|
357
|
+
<MacInput disabled placeholder="Disabled text field" />
|
|
358
|
+
<label className="hd-mac-gallery-inline-choice">
|
|
359
|
+
<MacCheckbox.Root indeterminate>
|
|
360
|
+
<MacCheckbox.Indicator />
|
|
361
|
+
</MacCheckbox.Root>
|
|
362
|
+
Mixed
|
|
363
|
+
</label>
|
|
364
|
+
<MacSwitch.Root>
|
|
365
|
+
<MacSwitch.Thumb />
|
|
366
|
+
</MacSwitch.Root>
|
|
367
|
+
</GallerySection>
|
|
368
|
+
|
|
369
|
+
<GallerySection title="Feedback">
|
|
370
|
+
<MacProgress.Root value={62}>
|
|
371
|
+
<MacProgress.Label>Progress</MacProgress.Label>
|
|
372
|
+
<MacProgress.Track>
|
|
373
|
+
<MacProgress.Indicator />
|
|
374
|
+
</MacProgress.Track>
|
|
375
|
+
<MacProgress.Value />
|
|
376
|
+
</MacProgress.Root>
|
|
377
|
+
<MacMeter.Root value={72}>
|
|
378
|
+
<MacMeter.Label>Storage</MacMeter.Label>
|
|
379
|
+
<MacMeter.Track>
|
|
380
|
+
<MacMeter.Indicator />
|
|
381
|
+
</MacMeter.Track>
|
|
382
|
+
<MacMeter.Value />
|
|
383
|
+
</MacMeter.Root>
|
|
384
|
+
<MacSlider.Root defaultValue={50}>
|
|
385
|
+
<MacSlider.Control>
|
|
386
|
+
<MacSlider.Track>
|
|
387
|
+
<MacSlider.Indicator />
|
|
388
|
+
</MacSlider.Track>
|
|
389
|
+
<MacSlider.Thumb />
|
|
390
|
+
</MacSlider.Control>
|
|
391
|
+
</MacSlider.Root>
|
|
392
|
+
</GallerySection>
|
|
393
|
+
|
|
394
|
+
<GallerySection title="Utility">
|
|
395
|
+
<MacAvatar.Root>
|
|
396
|
+
<MacAvatar.Fallback>HD</MacAvatar.Fallback>
|
|
397
|
+
</MacAvatar.Root>
|
|
398
|
+
<MacNavigationMenu.Root>
|
|
399
|
+
<MacNavigationMenu.List>
|
|
400
|
+
<MacNavigationMenu.Item>
|
|
401
|
+
<MacNavigationMenu.Trigger>Library</MacNavigationMenu.Trigger>
|
|
402
|
+
</MacNavigationMenu.Item>
|
|
403
|
+
</MacNavigationMenu.List>
|
|
404
|
+
</MacNavigationMenu.Root>
|
|
405
|
+
<MacScrollArea.Root className="hd-mac-gallery-scroll">
|
|
406
|
+
<MacScrollArea.Viewport>
|
|
407
|
+
<MacScrollArea.Content>Scrollable macOS content area.</MacScrollArea.Content>
|
|
408
|
+
</MacScrollArea.Viewport>
|
|
409
|
+
<MacScrollArea.Scrollbar>
|
|
410
|
+
<MacScrollArea.Thumb />
|
|
411
|
+
</MacScrollArea.Scrollbar>
|
|
412
|
+
<MacScrollArea.Corner />
|
|
413
|
+
</MacScrollArea.Root>
|
|
414
|
+
<MacToolbar.Root>
|
|
415
|
+
<MacToolbar.Button>New</MacToolbar.Button>
|
|
416
|
+
<MacToolbarToggle value="snap">Snap</MacToolbarToggle>
|
|
417
|
+
<MacToolbar.Separator />
|
|
418
|
+
<MacToolbar.IconButton aria-label="Add">+</MacToolbar.IconButton>
|
|
419
|
+
<MacToolbar.Input placeholder="Filter" />
|
|
420
|
+
</MacToolbar.Root>
|
|
421
|
+
<MacSeparator />
|
|
422
|
+
<MacToast.Provider>
|
|
423
|
+
<MacToast.Viewport />
|
|
424
|
+
</MacToast.Provider>
|
|
425
|
+
</GallerySection>
|
|
426
|
+
</div>
|
|
427
|
+
</MacMotionProvider>
|
|
428
|
+
</MacDirectionProvider>
|
|
429
|
+
</MacCSPProvider>
|
|
430
|
+
);
|
|
431
|
+
}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
macosSegmentedControlOverrides,
|
|
5
|
-
macosSegmentOverrides,
|
|
6
|
-
} from "../theme/macosTheme";
|
|
2
|
+
import { MacSegmentedToggleGroup, MacToggle } from "./MacBaseUI";
|
|
7
3
|
|
|
8
4
|
export type MacSegmentedControlOption<T extends string> = {
|
|
9
5
|
value: T;
|
|
@@ -27,28 +23,29 @@ export function MacSegmentedControl<T extends string>({
|
|
|
27
23
|
fullWidth,
|
|
28
24
|
}: MacSegmentedControlProps<T>) {
|
|
29
25
|
return (
|
|
30
|
-
<
|
|
31
|
-
|
|
26
|
+
<MacSegmentedToggleGroup
|
|
27
|
+
aria-disabled={disabled || undefined}
|
|
28
|
+
className={fullWidth ? "hd-mac-segmented-control-full-width" : undefined}
|
|
29
|
+
value={[value]}
|
|
32
30
|
disabled={disabled}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
const nextOption = options.find((option) => option.value === activeKey);
|
|
31
|
+
onValueChange={(nextValue) => {
|
|
32
|
+
const nextOption = options.find((option) => option.value === nextValue[0]);
|
|
36
33
|
if (!nextOption) {
|
|
37
34
|
return;
|
|
38
35
|
}
|
|
39
36
|
onChange(nextOption.value);
|
|
40
37
|
}}
|
|
41
|
-
overrides={macosSegmentedControlOverrides}
|
|
42
|
-
width={fullWidth ? "100%" : undefined}
|
|
43
38
|
>
|
|
44
39
|
{options.map((option) => (
|
|
45
|
-
<
|
|
40
|
+
<MacToggle
|
|
46
41
|
key={option.value}
|
|
47
|
-
|
|
42
|
+
value={option.value}
|
|
43
|
+
aria-label={typeof option.label === "string" ? option.label : undefined}
|
|
48
44
|
disabled={option.disabled}
|
|
49
|
-
|
|
50
|
-
|
|
45
|
+
>
|
|
46
|
+
{option.label}
|
|
47
|
+
</MacToggle>
|
|
51
48
|
))}
|
|
52
|
-
</
|
|
49
|
+
</MacSegmentedToggleGroup>
|
|
53
50
|
);
|
|
54
51
|
}
|
|
@@ -1,51 +1,12 @@
|
|
|
1
|
-
import { Block } from "baseui/block";
|
|
2
|
-
import { useStyletron } from "baseui";
|
|
3
|
-
|
|
4
1
|
type StatusMessageProps = {
|
|
5
2
|
intent: "error" | "success" | "info";
|
|
6
3
|
message: string;
|
|
7
4
|
};
|
|
8
5
|
|
|
9
6
|
export function StatusMessage({ intent, message }: StatusMessageProps) {
|
|
10
|
-
const [, theme] = useStyletron();
|
|
11
|
-
const isDark = (theme.name ?? "").toLowerCase().includes("dark");
|
|
12
|
-
|
|
13
|
-
const palette =
|
|
14
|
-
intent === "error"
|
|
15
|
-
? {
|
|
16
|
-
background: isDark ? "rgba(255, 84, 89, 0.16)" : "rgba(255, 84, 89, 0.12)",
|
|
17
|
-
border: isDark ? "rgba(255, 84, 89, 0.45)" : "rgba(255, 84, 89, 0.35)",
|
|
18
|
-
text: isDark ? "#ff9ea2" : "#8f1c1f",
|
|
19
|
-
}
|
|
20
|
-
: intent === "success"
|
|
21
|
-
? {
|
|
22
|
-
background: isDark ? "rgba(52, 199, 89, 0.16)" : "rgba(52, 199, 89, 0.12)",
|
|
23
|
-
border: isDark ? "rgba(52, 199, 89, 0.45)" : "rgba(52, 199, 89, 0.3)",
|
|
24
|
-
text: isDark ? "#8ff0ad" : "#0f6b2b",
|
|
25
|
-
}
|
|
26
|
-
: {
|
|
27
|
-
background: isDark ? "rgba(10, 132, 255, 0.16)" : "rgba(10, 132, 255, 0.08)",
|
|
28
|
-
border: isDark ? "rgba(10, 132, 255, 0.45)" : "rgba(10, 132, 255, 0.25)",
|
|
29
|
-
text: isDark ? "#9fcbff" : "#0b4e98",
|
|
30
|
-
};
|
|
31
|
-
|
|
32
7
|
return (
|
|
33
|
-
<
|
|
34
|
-
marginTop="scale400"
|
|
35
|
-
paddingTop="scale300"
|
|
36
|
-
paddingRight="scale400"
|
|
37
|
-
paddingBottom="scale300"
|
|
38
|
-
paddingLeft="scale400"
|
|
39
|
-
$style={{
|
|
40
|
-
backgroundColor: palette.background,
|
|
41
|
-
border: `1px solid ${palette.border}`,
|
|
42
|
-
borderRadius: "10px",
|
|
43
|
-
color: palette.text,
|
|
44
|
-
fontSize: "13px",
|
|
45
|
-
lineHeight: "1.35",
|
|
46
|
-
}}
|
|
47
|
-
>
|
|
8
|
+
<div className="hd-mac-status-message" data-intent={intent}>
|
|
48
9
|
{message}
|
|
49
|
-
</
|
|
10
|
+
</div>
|
|
50
11
|
);
|
|
51
12
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
2
|
import { invoke } from "@tauri-apps/api/core";
|
|
3
|
-
import {
|
|
4
|
-
import { StatefulTooltip } from "baseui/tooltip";
|
|
5
|
-
import { Block } from "baseui/block";
|
|
3
|
+
import { MacButton, MacTooltip } from "./MacBaseUI";
|
|
6
4
|
|
|
7
5
|
const SYMBOL_SCALE_MULTIPLIER = 2.5;
|
|
8
6
|
const SYMBOL_MIN_POINT_SIZE = 10;
|
|
@@ -81,35 +79,30 @@ export function SymbolIconButton({
|
|
|
81
79
|
const glyphPx = `${iconSizePx}px`;
|
|
82
80
|
|
|
83
81
|
return (
|
|
84
|
-
<
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
style: {
|
|
82
|
+
<MacTooltip.Root>
|
|
83
|
+
<MacTooltip.Trigger
|
|
84
|
+
render={
|
|
85
|
+
<MacButton
|
|
86
|
+
aria-label={label}
|
|
87
|
+
title={label}
|
|
88
|
+
disabled={disabled || isLoading}
|
|
89
|
+
onClick={onClick}
|
|
90
|
+
className="hd-mac-symbol-icon-button"
|
|
91
|
+
data-loading={isLoading || undefined}
|
|
92
|
+
style={{
|
|
96
93
|
width: ICON_BUTTON_SIZE,
|
|
97
94
|
minWidth: ICON_BUTTON_SIZE,
|
|
98
95
|
height: ICON_BUTTON_SIZE,
|
|
99
96
|
minHeight: ICON_BUTTON_SIZE,
|
|
100
97
|
borderRadius: ICON_BUTTON_RADIUS,
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
},
|
|
106
|
-
},
|
|
107
|
-
}}
|
|
98
|
+
padding: 0,
|
|
99
|
+
}}
|
|
100
|
+
/>
|
|
101
|
+
}
|
|
108
102
|
>
|
|
109
|
-
<
|
|
110
|
-
as="span"
|
|
103
|
+
<span
|
|
111
104
|
aria-hidden
|
|
112
|
-
|
|
105
|
+
style={{
|
|
113
106
|
display: "block",
|
|
114
107
|
width: glyphPx,
|
|
115
108
|
height: glyphPx,
|
|
@@ -130,8 +123,13 @@ export function SymbolIconButton({
|
|
|
130
123
|
}}
|
|
131
124
|
>
|
|
132
125
|
{symbolDataUrl ? null : fallback}
|
|
133
|
-
</
|
|
134
|
-
</
|
|
135
|
-
|
|
126
|
+
</span>
|
|
127
|
+
</MacTooltip.Trigger>
|
|
128
|
+
<MacTooltip.Portal>
|
|
129
|
+
<MacTooltip.Positioner sideOffset={5}>
|
|
130
|
+
<MacTooltip.Popup>{label}</MacTooltip.Popup>
|
|
131
|
+
</MacTooltip.Positioner>
|
|
132
|
+
</MacTooltip.Portal>
|
|
133
|
+
</MacTooltip.Root>
|
|
136
134
|
);
|
|
137
135
|
}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import { Block } from "baseui/block";
|
|
2
|
-
|
|
3
1
|
type ViewDragRegionProps = {
|
|
4
2
|
height?: string;
|
|
5
3
|
};
|
|
6
4
|
|
|
7
5
|
export function ViewDragRegion({ height = "32px" }: ViewDragRegionProps) {
|
|
8
6
|
return (
|
|
9
|
-
<
|
|
7
|
+
<div
|
|
10
8
|
data-tauri-drag-region
|
|
11
|
-
|
|
9
|
+
style={{
|
|
12
10
|
height,
|
|
13
11
|
minHeight: height,
|
|
14
12
|
flexShrink: 0,
|
package/src/components/index.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export * from "./MacBaseUI";
|
|
2
|
+
export { MacBaseUIGallery } from "./MacBaseUIGallery";
|
|
1
3
|
export { MacSegmentedControl, type MacSegmentedControlOption } from "./MacSegmentedControl";
|
|
2
4
|
export { StatusMessage } from "./StatusMessage";
|
|
3
5
|
export { SymbolIconButton } from "./SymbolIconButton";
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export * from "./components/MacBaseUI";
|
|
2
|
+
export { MacBaseUIGallery } from "./components/MacBaseUIGallery";
|
|
1
3
|
export { AppWindowShell } from "./components/AppWindowShell";
|
|
2
4
|
export { MacSegmentedControl, type MacSegmentedControlOption } from "./components/MacSegmentedControl";
|
|
3
5
|
export { SymbolIconButton } from "./components/SymbolIconButton";
|