@scattered-light/loomiere-mojave 0.5.3 → 0.7.0
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/dist/exports/AGENTS.md +24 -8
- package/dist/exports/catalog.json +21 -0
- package/dist/exports/chakra.js +333 -0
- package/dist/exports/design-system/README.md +23 -7
- package/dist/exports/design-system/components/Accordion/README.md +20 -20
- package/dist/exports/design-system/components/Accordion/preview.html +1 -1
- package/dist/exports/design-system/components/AlertDialog/README.md +8 -8
- package/dist/exports/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/exports/design-system/components/Autocomplete/README.md +9 -9
- package/dist/exports/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/exports/design-system/components/Avatar/README.md +3 -4
- package/dist/exports/design-system/components/Avatar/preview.html +1 -1
- package/dist/exports/design-system/components/Badge/README.md +35 -0
- package/dist/exports/design-system/components/Badge/preview.html +19 -0
- package/dist/exports/design-system/components/Checkbox/README.md +5 -5
- package/dist/exports/design-system/components/Checkbox/preview.html +1 -1
- package/dist/exports/design-system/components/CheckboxGroup/README.md +14 -14
- package/dist/exports/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/exports/design-system/components/Collapsible/README.md +6 -6
- package/dist/exports/design-system/components/Collapsible/preview.html +1 -1
- package/dist/exports/design-system/components/Collection/README.md +14 -0
- package/dist/exports/design-system/components/CollectionPagination/README.md +15 -0
- package/dist/exports/design-system/components/CollectionToolbar/README.md +24 -0
- package/dist/exports/design-system/components/Combobox/README.md +11 -11
- package/dist/exports/design-system/components/Combobox/preview.html +1 -1
- package/dist/exports/design-system/components/ContextMenu/README.md +9 -9
- package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/exports/design-system/components/DataList/README.md +39 -0
- package/dist/exports/design-system/components/DataList/preview.html +475 -0
- package/dist/exports/design-system/components/DataTable/README.md +41 -0
- package/dist/exports/design-system/components/DataTable/preview.html +475 -0
- package/dist/exports/design-system/components/DatePicker/README.md +55 -0
- package/dist/exports/design-system/components/DatePicker/preview.html +475 -0
- package/dist/exports/design-system/components/Dialog/README.md +6 -6
- package/dist/exports/design-system/components/Dialog/preview.html +1 -1
- package/dist/exports/design-system/components/Drawer/README.md +1 -1
- package/dist/exports/design-system/components/Drawer/preview.html +1 -1
- package/dist/exports/design-system/components/EditableList/README.md +33 -0
- package/dist/exports/design-system/components/EditableList/preview.html +475 -0
- package/dist/exports/design-system/components/EmptyState/README.md +60 -0
- package/dist/exports/design-system/components/EmptyState/preview.html +475 -0
- package/dist/exports/design-system/components/ListDetail/README.md +43 -0
- package/dist/exports/design-system/components/ListDetail/preview.html +475 -0
- package/dist/exports/design-system/components/Menu/README.md +11 -11
- package/dist/exports/design-system/components/Menu/preview.html +1 -1
- package/dist/exports/design-system/components/Menubar/README.md +32 -32
- package/dist/exports/design-system/components/Menubar/preview.html +1 -1
- package/dist/exports/design-system/components/Meter/README.md +9 -8
- package/dist/exports/design-system/components/Meter/preview.html +1 -1
- package/dist/exports/design-system/components/MoneyField/README.md +52 -0
- package/dist/exports/design-system/components/MoneyField/preview.html +475 -0
- package/dist/exports/design-system/components/NumberField/README.md +10 -10
- package/dist/exports/design-system/components/NumberField/preview.html +1 -1
- package/dist/exports/design-system/components/OTPField/README.md +5 -5
- package/dist/exports/design-system/components/OTPField/preview.html +1 -1
- package/dist/exports/design-system/components/Popover/README.md +7 -7
- package/dist/exports/design-system/components/Popover/preview.html +1 -1
- package/dist/exports/design-system/components/PreviewCard/README.md +9 -11
- package/dist/exports/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/exports/design-system/components/Progress/README.md +8 -8
- package/dist/exports/design-system/components/Progress/preview.html +1 -1
- package/dist/exports/design-system/components/Radio/README.md +16 -23
- package/dist/exports/design-system/components/Radio/preview.html +1 -1
- package/dist/exports/design-system/components/ScrollArea/README.md +6 -6
- package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/exports/design-system/components/Select/README.md +13 -12
- package/dist/exports/design-system/components/Select/preview.html +1 -1
- package/dist/exports/design-system/components/Separator/README.md +2 -2
- package/dist/exports/design-system/components/Separator/preview.html +1 -1
- package/dist/exports/design-system/components/Slider/README.md +6 -6
- package/dist/exports/design-system/components/Slider/preview.html +1 -1
- package/dist/exports/design-system/components/Splitter/README.md +42 -0
- package/dist/exports/design-system/components/Splitter/preview.html +475 -0
- package/dist/exports/design-system/components/Switch/README.md +3 -3
- package/dist/exports/design-system/components/Switch/preview.html +1 -1
- package/dist/exports/design-system/components/Table/README.md +2 -1
- package/dist/exports/design-system/components/Table/preview.html +1 -1
- package/dist/exports/design-system/components/Tabs/README.md +9 -9
- package/dist/exports/design-system/components/Tabs/preview.html +1 -1
- package/dist/exports/design-system/components/Toast/README.md +7 -7
- package/dist/exports/design-system/components/Toast/preview.html +1 -1
- package/dist/exports/design-system/components/Toggle/README.md +2 -2
- package/dist/exports/design-system/components/Toggle/preview.html +1 -1
- package/dist/exports/design-system/components/ToggleGroup/README.md +5 -5
- package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/exports/design-system/components/Toolbar/README.md +11 -11
- package/dist/exports/design-system/components/Toolbar/preview.html +1 -1
- package/dist/exports/design-system/components/Tooltip/README.md +4 -4
- package/dist/exports/design-system/components/Tooltip/preview.html +1 -1
- package/dist/exports/design-system/components/bundle.css +2394 -193
- package/dist/exports/design-system/components/bundle.js +7 -5
- package/dist/exports/design-system/components/index.d.ts +627 -29
- package/dist/exports/design-system/tokens.json +15 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/mui.js +727 -0
- package/dist/exports/tailwind.css +36 -0
- package/dist/exports/tokens.dtcg.json +316 -2
- package/dist/tokens.css +111 -4
- package/dist/tokens.d.ts +93 -0
- package/dist/tokens.js +94 -1
- package/dist/tokens.json +572 -2
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Menu styled by the theme. No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Menu
|
|
5
|
+
Use `Loomiere.Menu`, this package's wrapper: it puts the class names on for you (`import { Menu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Menu`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/menu
|
|
8
8
|
|
|
@@ -34,19 +34,19 @@ From the Menu stories (`Default`):
|
|
|
34
34
|
export const Default: Story = {
|
|
35
35
|
render: () => (
|
|
36
36
|
<Menu.Root>
|
|
37
|
-
<Menu.Trigger
|
|
37
|
+
<Menu.Trigger>
|
|
38
38
|
Open Menu
|
|
39
39
|
</Menu.Trigger>
|
|
40
40
|
<Menu.Portal>
|
|
41
|
-
<Menu.Positioner
|
|
42
|
-
<Menu.Popup
|
|
43
|
-
<Menu.Item
|
|
44
|
-
<Menu.Item
|
|
45
|
-
<Menu.Separator
|
|
46
|
-
<Menu.Item
|
|
47
|
-
<Menu.Item
|
|
48
|
-
<Menu.Separator
|
|
49
|
-
<Menu.Item
|
|
41
|
+
<Menu.Positioner>
|
|
42
|
+
<Menu.Popup>
|
|
43
|
+
<Menu.Item>New File</Menu.Item>
|
|
44
|
+
<Menu.Item>New Window</Menu.Item>
|
|
45
|
+
<Menu.Separator />
|
|
46
|
+
<Menu.Item>Save</Menu.Item>
|
|
47
|
+
<Menu.Item>Save As...</Menu.Item>
|
|
48
|
+
<Menu.Separator />
|
|
49
|
+
<Menu.Item>Exit</Menu.Item>
|
|
50
50
|
</Menu.Popup>
|
|
51
51
|
</Menu.Positioner>
|
|
52
52
|
</Menu.Portal>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var k=Object.create;var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var l=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),C=(o,n)=>{for(var a in n)m(o,a,{get:n[a],enumerable:!0})},f=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of P(n))!w.call(o,r)&&r!==a&&m(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var p=(o,n,a)=>(a=o!=null?k(x(o)):{},f(n||!o||!o.__esModule?m(a,"default",{value:o,enumerable:!0}):a,o));var h=l((O,M)=>{M.exports=window.React});var R=l((V,b)=>{b.exports=window.Loomiere});var I={};C(I,{Default:()=>T,WithCheckboxes:()=>E,WithDisabledItems:()=>v,WithRadioGroup:()=>F,WithSubmenu:()=>_,default:()=>d});var c=p(h(),1),t=p(R(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var N={title:"Components/Lib/Menu",component:t.Menu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=N,T={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"Open Menu"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Save"}),e(t.Menu.Item,{children:"Save As..."}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]})},E={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,S]=c.useState(!1);return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{"data-variant":"outline",children:"View Options"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{checked:r,onCheckedChange:S,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Footer"]})]})})})]})}},F={render:()=>{let[o,n]=c.useState("light");return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{"data-variant":"ghost",children:"Theme"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:e(t.Menu.RadioGroup,{value:o,onValueChange:n,children:[e(t.Menu.RadioItem,{value:"light",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.Menu.RadioItem,{value:"dark",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.Menu.RadioItem,{value:"system",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})})})})]})}},_={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"project-1.txt"}),e(t.Menu.Item,{children:"project-2.txt"}),e(t.Menu.Item,{children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]})},v={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Select All"})]})})})]})};var i=window.React,g=d||{},L=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function W({id:o}){let n=I[o],a={...g.args||{},...n.args||{}};return(n.render||(r=>i.createElement(g.component,r)))(a,{args:a,id:o,name:o})}var j=L.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(W,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Menubar styled by the theme. No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Menubar
|
|
5
|
+
Use `Loomiere.Menubar`, this package's wrapper: it puts the class names on for you (`import { Menubar } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Menubar`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/menubar
|
|
8
8
|
|
|
@@ -35,19 +35,19 @@ From the Menubar stories (`Default`):
|
|
|
35
35
|
```tsx
|
|
36
36
|
export const Default: Story = {
|
|
37
37
|
render: () => (
|
|
38
|
-
<Menubar
|
|
38
|
+
<Menubar>
|
|
39
39
|
<Menu.Root>
|
|
40
40
|
<Menu.Trigger className="MenubarTrigger">File</Menu.Trigger>
|
|
41
41
|
<Menu.Portal>
|
|
42
|
-
<Menu.Positioner
|
|
43
|
-
<Menu.Popup
|
|
44
|
-
<Menu.Item
|
|
45
|
-
<Menu.Item
|
|
46
|
-
<Menu.Separator
|
|
47
|
-
<Menu.Item
|
|
48
|
-
<Menu.Item
|
|
49
|
-
<Menu.Separator
|
|
50
|
-
<Menu.Item
|
|
42
|
+
<Menu.Positioner sideOffset={6}>
|
|
43
|
+
<Menu.Popup>
|
|
44
|
+
<Menu.Item>New File</Menu.Item>
|
|
45
|
+
<Menu.Item>New Window</Menu.Item>
|
|
46
|
+
<Menu.Separator />
|
|
47
|
+
<Menu.Item>Open...</Menu.Item>
|
|
48
|
+
<Menu.Item>Save</Menu.Item>
|
|
49
|
+
<Menu.Separator />
|
|
50
|
+
<Menu.Item>Exit</Menu.Item>
|
|
51
51
|
</Menu.Popup>
|
|
52
52
|
</Menu.Positioner>
|
|
53
53
|
</Menu.Portal>
|
|
@@ -56,14 +56,14 @@ export const Default: Story = {
|
|
|
56
56
|
<Menu.Root>
|
|
57
57
|
<Menu.Trigger className="MenubarTrigger">Edit</Menu.Trigger>
|
|
58
58
|
<Menu.Portal>
|
|
59
|
-
<Menu.Positioner
|
|
60
|
-
<Menu.Popup
|
|
61
|
-
<Menu.Item
|
|
62
|
-
<Menu.Item
|
|
63
|
-
<Menu.Separator
|
|
64
|
-
<Menu.Item
|
|
65
|
-
<Menu.Item
|
|
66
|
-
<Menu.Item
|
|
59
|
+
<Menu.Positioner sideOffset={6}>
|
|
60
|
+
<Menu.Popup>
|
|
61
|
+
<Menu.Item>Undo</Menu.Item>
|
|
62
|
+
<Menu.Item>Redo</Menu.Item>
|
|
63
|
+
<Menu.Separator />
|
|
64
|
+
<Menu.Item>Cut</Menu.Item>
|
|
65
|
+
<Menu.Item>Copy</Menu.Item>
|
|
66
|
+
<Menu.Item>Paste</Menu.Item>
|
|
67
67
|
</Menu.Popup>
|
|
68
68
|
</Menu.Positioner>
|
|
69
69
|
</Menu.Portal>
|
|
@@ -72,13 +72,13 @@ export const Default: Story = {
|
|
|
72
72
|
<Menu.Root>
|
|
73
73
|
<Menu.Trigger className="MenubarTrigger">View</Menu.Trigger>
|
|
74
74
|
<Menu.Portal>
|
|
75
|
-
<Menu.Positioner
|
|
76
|
-
<Menu.Popup
|
|
77
|
-
<Menu.Item
|
|
78
|
-
<Menu.Item
|
|
79
|
-
<Menu.Item
|
|
80
|
-
<Menu.Separator
|
|
81
|
-
<Menu.Item
|
|
75
|
+
<Menu.Positioner sideOffset={6}>
|
|
76
|
+
<Menu.Popup>
|
|
77
|
+
<Menu.Item>Zoom In</Menu.Item>
|
|
78
|
+
<Menu.Item>Zoom Out</Menu.Item>
|
|
79
|
+
<Menu.Item>Reset Zoom</Menu.Item>
|
|
80
|
+
<Menu.Separator />
|
|
81
|
+
<Menu.Item>Full Screen</Menu.Item>
|
|
82
82
|
</Menu.Popup>
|
|
83
83
|
</Menu.Positioner>
|
|
84
84
|
</Menu.Portal>
|
|
@@ -87,12 +87,12 @@ export const Default: Story = {
|
|
|
87
87
|
<Menu.Root>
|
|
88
88
|
<Menu.Trigger className="MenubarTrigger">Help</Menu.Trigger>
|
|
89
89
|
<Menu.Portal>
|
|
90
|
-
<Menu.Positioner
|
|
91
|
-
<Menu.Popup
|
|
92
|
-
<Menu.Item
|
|
93
|
-
<Menu.Item
|
|
94
|
-
<Menu.Separator
|
|
95
|
-
<Menu.Item
|
|
90
|
+
<Menu.Positioner sideOffset={6}>
|
|
91
|
+
<Menu.Popup>
|
|
92
|
+
<Menu.Item>Documentation</Menu.Item>
|
|
93
|
+
<Menu.Item>Keyboard Shortcuts</Menu.Item>
|
|
94
|
+
<Menu.Separator />
|
|
95
|
+
<Menu.Item>About</Menu.Item>
|
|
96
96
|
</Menu.Popup>
|
|
97
97
|
</Menu.Positioner>
|
|
98
98
|
</Menu.Portal>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var x=Object.create;var M=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(a,o)=>()=>(o||a((o={exports:{}}).exports,o),o.exports),w=(a,o)=>{for(var n in o)M(a,n,{get:o[n],enumerable:!0})},O=(a,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of k(o))!C.call(a,s)&&s!==n&&M(a,s,{get:()=>o[s],enumerable:!(r=T(o,s))||r.enumerable});return a};var I=(a,o,n)=>(n=a!=null?x(y(a)):{},O(o||!a||!a.__esModule?M(n,"default",{value:a,enumerable:!0}):n,a));var P=l((D,N)=>{N.exports=window.React});var b=l((A,g)=>{g.exports=window.Loomiere.Base});var h=l((z,R)=>{R.exports=window.Loomiere.Base});var d={};w(d,{Default:()=>F,WithCheckboxes:()=>L,WithDisabledItems:()=>W,WithRadioGroup:()=>_,WithSubmenu:()=>G,default:()=>p});var i=I(P(),1),u=I(b(),1),t=I(h(),1);var c=window.React;function e(a,o,n){let{children:r,...s}=o||{};return n!==void 0&&(s.key=n),r===void 0?c.createElement(a,s):Array.isArray(r)?c.createElement(a,s,...r):c.createElement(a,s,r)}var Z=c.Fragment;var E={title:"Components/Menubar",component:u.Menubar,parameters:{layout:"centered"},tags:["autodocs"]},p=E,F={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Open..."}),e(t.Menu.Item,{className:"MenuItem",children:"Save"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Undo"}),e(t.Menu.Item,{className:"MenuItem",children:"Redo"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Cut"}),e(t.Menu.Item,{className:"MenuItem",children:"Copy"}),e(t.Menu.Item,{className:"MenuItem",children:"Paste"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Zoom In"}),e(t.Menu.Item,{className:"MenuItem",children:"Zoom Out"}),e(t.Menu.Item,{className:"MenuItem",children:"Reset Zoom"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Full Screen"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Help"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Documentation"}),e(t.Menu.Item,{className:"MenuItem",children:"Keyboard Shortcuts"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"About"})]})})})]})]})},L={render:()=>{let[a,o]=i.useState(!0),[n,r]=i.useState(!0),[s,f]=i.useState(!1);return e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:a,onCheckedChange:o,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:n,onCheckedChange:r,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:s,onCheckedChange:f,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Status Bar"]})]})})})]})]})}},_={render:()=>{let[a,o]=i.useState("medium");return e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Format"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:e(t.Menu.Group,{className:"MenuGroup",children:[e(t.Menu.GroupLabel,{className:"MenuGroupLabel",children:"Text Size"}),e(t.Menu.RadioGroup,{value:a,onValueChange:o,children:[e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"small",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Small"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"medium",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Medium"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"large",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Large"]})]})]})})})})]})]})}},G={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{className:"MenuSubmenuTrigger",children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"project-1.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-2.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Undo"}),e(t.Menu.Item,{className:"MenuItem",children:"Redo"})]})})})]})]})},W={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Cut"}),e(t.Menu.Item,{className:"MenuItem",children:"Copy"}),e(t.Menu.Item,{className:"MenuItem",disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Select All"})]})})})]})]})};var m=window.React,S=p||{},v=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:a}){let o=d[a],n={...S.args||{},...o.args||{}};return(o.render||(s=>m.createElement(S.component,s)))(n,{args:n,id:a,name:a})}var V=v.map(a=>m.createElement("section",{key:a,className:"ds-story"},m.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),m.createElement("div",{className:"ds-story-body"},m.createElement(j,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(m.createElement(m.Fragment,null,V));})();
|
|
15
|
+
(()=>{var S=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var d=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),y=(o,n)=>{for(var r in n)c(o,r,{get:n[r],enumerable:!0})},N=(o,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of T(n))!k.call(o,a)&&a!==r&&c(o,a,{get:()=>n[a],enumerable:!(u=f(n,a))||u.enumerable});return o};var l=(o,n,r)=>(r=o!=null?S(x(o)):{},N(n||!o||!o.__esModule?c(r,"default",{value:o,enumerable:!0}):r,o));var g=d((j,p)=>{p.exports=window.React});var b=d((V,P)=>{P.exports=window.Loomiere});var I={};y(I,{Default:()=>C,WithCheckboxes:()=>O,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>F,default:()=>M});var s=l(g(),1),t=l(b(),1);var m=window.React;function e(o,n,r){let{children:u,...a}=n||{};return r!==void 0&&(a.key=r),u===void 0?m.createElement(o,a):Array.isArray(u)?m.createElement(o,a,...u):m.createElement(o,a,u)}var D=m.Fragment;var w={title:"Components/Lib/Menubar",component:t.Menubar,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},M=w,C={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Open..."}),e(t.Menu.Item,{children:"Save"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Undo"}),e(t.Menu.Item,{children:"Redo"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{children:"Paste"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Zoom In"}),e(t.Menu.Item,{children:"Zoom Out"}),e(t.Menu.Item,{children:"Reset Zoom"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Full Screen"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Help"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Documentation"}),e(t.Menu.Item,{children:"Keyboard Shortcuts"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"About"})]})})})]})]})},O={render:()=>{let[o,n]=s.useState(!0),[r,u]=s.useState(!0),[a,h]=s.useState(!1);return e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"}),e(t.Menu.Item,{children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{checked:r,onCheckedChange:u,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{checked:a,onCheckedChange:h,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Status Bar"]})]})})})]})]})}},E={render:()=>{let[o,n]=s.useState("medium");return e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Format"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:e(t.Menu.Group,{children:[e(t.Menu.GroupLabel,{children:"Text Size"}),e(t.Menu.RadioGroup,{value:o,onValueChange:n,children:[e(t.Menu.RadioItem,{value:"small",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Small"]}),e(t.Menu.RadioItem,{value:"medium",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Medium"]}),e(t.Menu.RadioItem,{value:"large",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Large"]})]})]})})})})]})]})}},F={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"project-1.txt"}),e(t.Menu.Item,{children:"project-2.txt"}),e(t.Menu.Item,{children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Undo"}),e(t.Menu.Item,{children:"Redo"})]})})})]})]})},_={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"}),e(t.Menu.Item,{children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Select All"})]})})})]})]})};var i=window.React,R=M||{},L=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function W({id:o}){let n=I[o],r={...R.args||{},...n.args||{}};return(n.render||(a=>i.createElement(R.component,a)))(r,{args:r,id:o,name:o})}var v=L.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(W,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,v));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Meter styled by the theme. A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette) to show a zone. Base UI doesn't map low/high/optimum, so the app picks the color.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Meter
|
|
5
|
+
Use `Loomiere.Meter`, this package's wrapper: it puts the class names on for you (`import { Meter } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Meter`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/meter
|
|
8
8
|
|
|
@@ -11,6 +11,7 @@ Base UI docs: https://base-ui.com/react/components/meter
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
13
|
| `MeterRoot` | |
|
|
14
|
+
| `MeterHeader` | |
|
|
14
15
|
| `MeterLabel` | |
|
|
15
16
|
| `MeterTrack` | `data-size`: `sm`, `lg` |
|
|
16
17
|
| `MeterIndicator` | |
|
|
@@ -26,13 +27,13 @@ From the Meter stories (`Default`):
|
|
|
26
27
|
export const Default: Story = {
|
|
27
28
|
render: () => (
|
|
28
29
|
<div style={{ width: '300px' }}>
|
|
29
|
-
<Meter.Root value={75} min={0} max={100}
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
<Meter.Value
|
|
33
|
-
</
|
|
34
|
-
<Meter.Track
|
|
35
|
-
<Meter.Indicator
|
|
30
|
+
<Meter.Root value={75} min={0} max={100}>
|
|
31
|
+
<Meter.Header>
|
|
32
|
+
<Meter.Label>Storage</Meter.Label>
|
|
33
|
+
<Meter.Value />
|
|
34
|
+
</Meter.Header>
|
|
35
|
+
<Meter.Track>
|
|
36
|
+
<Meter.Indicator />
|
|
36
37
|
</Meter.Track>
|
|
37
38
|
</Meter.Root>
|
|
38
39
|
</div>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var v=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var u=(a,r)=>()=>(r||a((r={exports:{}}).exports,r),r.exports),H=(a,r)=>{for(var o in r)i(a,o,{get:r[o],enumerable:!0})},h=(a,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of L(r))!T.call(a,d)&&d!==o&&i(a,d,{get:()=>r[d],enumerable:!(l=f(r,d))||l.enumerable});return a};var M=(a,r,o)=>(o=a!=null?v(g(a)):{},h(r||!a||!a.__esModule?i(o,"default",{value:a,enumerable:!0}):o,a));var x=u((_,p)=>{p.exports=window.React});var b=u((O,y)=>{y.exports=window.Loomiere});var m={};H(m,{BatteryLevel:()=>E,Default:()=>S,DiskUsage:()=>I,NetworkSpeed:()=>B,Sizes:()=>D,WithOptimumRange:()=>V,WithoutLabel:()=>C,default:()=>s});var R=M(x(),1),t=M(b(),1);var c=window.React;function e(a,r,o){let{children:l,...d}=r||{};return o!==void 0&&(d.key=o),l===void 0?c.createElement(a,d):Array.isArray(l)?c.createElement(a,d,...l):c.createElement(a,d,l)}var j=c.Fragment;var w={title:"Components/Lib/Meter",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},s=w,S={render:()=>e("div",{style:{width:"300px"},children:e(t.Meter.Root,{value:75,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Storage"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})})},V={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-tertiary)"},children:["Base UI Meter doesn't map ",e("code",{children:"low"}),"/",e("code",{children:"high"}),"/",e("code",{children:"optimum"}),", so pick the zone in the app and set ",e("code",{children:"data-color"})," on the root."]}),e(t.Meter.Root,{value:30,min:0,max:100,"data-color":"success",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (lower is calmer)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:60,min:0,max:100,"data-color":"warning",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (moderate)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:90,min:0,max:100,"data-color":"error",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (high)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},D={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:45,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Small"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{"data-size":"sm",children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:65,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Medium (default)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:85,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Large"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{"data-size":"lg",children:e(t.Meter.Indicator,{})})]})]})},I={render:()=>e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:45,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"System Drive (C:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:78,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Data Drive (D:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:95,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Backup Drive (E:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},E={render:()=>{let[a,r]=R.useState(85);return e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"16px"},children:[e(t.Meter.Root,{value:a,min:0,max:100,"data-color":a<=20?"error":a<=50?"warning":"success",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Battery Level"}),e(t.Meter.Value,{children:(o,l)=>`${l}%`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e("div",{style:{display:"flex",gap:"8px"},children:[e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.max(0,a-10)),children:"Drain -10%"}),e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.min(100,a+10)),children:"Charge +10%"})]})]})}},B={render:()=>e("div",{style:{width:"350px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:850,min:0,max:1e3,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Download Speed"}),e(t.Meter.Value,{children:(a,r)=>`${r} Mbps`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:450,min:0,max:1e3,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Upload Speed"}),e(t.Meter.Value,{children:(a,r)=>`${r} Mbps`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},C={render:()=>e("div",{style:{width:"300px"},children:e(t.Meter.Root,{value:60,min:0,max:100,children:e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})})})};var n=window.React,k=s||{},$=["Default","WithOptimumRange","Sizes","DiskUsage"];function z({id:a}){let r=m[a],o={...k.args||{},...r.args||{}};return(r.render||(d=>n.createElement(k.component,d)))(o,{args:o,id:a,name:a})}var U=$.map(a=>n.createElement("section",{key:a,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(z,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,U));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# MoneyField
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. An amount of money, built on Number field. The value is an integer in minor units (cents, yen, fils) so 0.1 + 0.2 and 1.005 * 100 cannot drift, and so the number matches what a payment API sends. Number field counts in major units; Money field converts at the edge and rounds half away from zero. The default maximum is 10^15 - 1 minor units, so the major amount stays inside 15 significant digits. Changing currency keeps the number the person typed and re-rounds it to the new currency's digits (12.50 USD becomes 13 JPY). There is no exchange rate. When the app controls both the value and the currency, it decides whether to apply that rounding: onValueChange still reports the re-rounded minor units. Keyboard is Number field's: ArrowUp and ArrowDown step one major unit, Shift steps 100 major units, Alt steps one minor unit, Home and End jump to the minimum and maximum. The currency symbol is not in the text, so the caret does not fight it. A fixed symbol is aria-hidden; the currency name is in the input's accessible description. A picker is its own tab stop, before the input when the locale puts the symbol first and after it when the locale puts the symbol last. State on the root: data-currency (USD), data-affix (start or end), data-affix-kind (symbol or picker), data-negative (below zero; set data-color on the field to color it, never on by default), data-align (start or end), data-size (xs, sm, md, lg), data-readonly, plus data-invalid, data-disabled, data-focused and data-scrubbing. The affix (symbol or picker) is drawn inside the field so it can later be lifted into a general Input affix for units, https://, or @. Position comes from the locale, with logical properties so RTL mirrors it. The group, not the input, carries the field border, hover, focus halo, invalid edge and disabled fill, so the affix reads as part of the field.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.MoneyField`, this package's component: it puts the class names on for you (`import { MoneyField } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
|
|
6
|
+
|
|
7
|
+
Not a Base UI part, so there is no base-ui.com page for it.
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `MoneyField` | `data-size`: `xs`, `sm`, `lg`; `data-invalid`; `data-disabled`; `data-affix-kind`: `symbol`; `data-affix`: `start`, `end`; `data-steppers`; `data-align`: `end`, `start`; `data-focused`; `data-readonly`; `data-negative`; `data-color`; `data-scrubbing` |
|
|
14
|
+
| `MoneyFieldGroup` | |
|
|
15
|
+
| `MoneyFieldInput` | |
|
|
16
|
+
| `MoneyFieldAffix` | |
|
|
17
|
+
| `MoneyFieldCurrencyTrigger` | `data-popup-open` |
|
|
18
|
+
| `MoneyFieldSign` | |
|
|
19
|
+
| `MoneyFieldCurrency` | |
|
|
20
|
+
| `MoneyFieldCurrencyField` | |
|
|
21
|
+
| `ComboboxRoot` | |
|
|
22
|
+
| `MoneyFieldCurrencyIcon` | |
|
|
23
|
+
| `MoneyFieldCurrencyPopup` | |
|
|
24
|
+
| `MoneyFieldCurrencyItem` | |
|
|
25
|
+
| `MoneyFieldCurrencySymbol` | |
|
|
26
|
+
| `ComboboxInput` | |
|
|
27
|
+
|
|
28
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
29
|
+
|
|
30
|
+
## Example
|
|
31
|
+
|
|
32
|
+
From the MoneyField stories (`Default`):
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
export const Default: Story = {
|
|
36
|
+
render: () => (
|
|
37
|
+
<Labeled>
|
|
38
|
+
<MoneyField currency="USD" defaultValue={123450} name="amount" />
|
|
39
|
+
</Labeled>
|
|
40
|
+
),
|
|
41
|
+
play: async ({ canvasElement }) => {
|
|
42
|
+
const canvas = within(canvasElement);
|
|
43
|
+
const input = canvas.getByRole('textbox');
|
|
44
|
+
await userEvent.clear(input);
|
|
45
|
+
await userEvent.type(input, '1234.5');
|
|
46
|
+
await userEvent.tab();
|
|
47
|
+
await expect(input).toHaveValue('1,234.50');
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
The preview also shows `Yen`, `Dinar`, `EuroInGerman`.
|