@scattered-light/loomiere-mojave 0.1.1 → 0.2.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/README.md +6 -1
- package/dist/exports/AGENTS.md +150 -0
- package/dist/exports/catalog.json +99 -1
- package/dist/exports/design-system/README.md +142 -0
- package/dist/exports/design-system/components/Accordion/README.md +97 -0
- package/dist/exports/design-system/components/Accordion/preview.html +19 -0
- package/dist/exports/design-system/components/AlertDialog/README.md +52 -0
- package/dist/exports/design-system/components/AlertDialog/preview.html +19 -0
- package/dist/exports/design-system/components/Autocomplete/README.md +68 -0
- package/dist/exports/design-system/components/Autocomplete/preview.html +19 -0
- package/dist/exports/design-system/components/Avatar/README.md +39 -0
- package/dist/exports/design-system/components/Avatar/preview.html +19 -0
- package/dist/exports/design-system/components/Button/README.md +27 -0
- package/dist/exports/design-system/components/Button/preview.html +23 -0
- package/dist/exports/design-system/components/Checkbox/README.md +39 -0
- package/dist/exports/design-system/components/Checkbox/preview.html +19 -0
- package/dist/exports/design-system/components/CheckboxGroup/README.md +56 -0
- package/dist/exports/design-system/components/CheckboxGroup/preview.html +19 -0
- package/dist/exports/design-system/components/Collapsible/README.md +48 -0
- package/dist/exports/design-system/components/Collapsible/preview.html +19 -0
- package/dist/exports/design-system/components/Combobox/README.md +105 -0
- package/dist/exports/design-system/components/Combobox/preview.html +19 -0
- package/dist/exports/design-system/components/ContextMenu/README.md +70 -0
- package/dist/exports/design-system/components/ContextMenu/preview.html +19 -0
- package/dist/exports/design-system/components/Cover/preview.html +39 -0
- package/dist/exports/design-system/components/Dialog/README.md +62 -0
- package/dist/exports/design-system/components/Dialog/preview.html +19 -0
- package/dist/exports/design-system/components/Drawer/README.md +32 -0
- package/dist/exports/design-system/components/Drawer/preview.html +19 -0
- package/dist/exports/design-system/components/Field/README.md +41 -0
- package/dist/exports/design-system/components/Field/preview.html +19 -0
- package/dist/exports/design-system/components/Fieldset/README.md +45 -0
- package/dist/exports/design-system/components/Fieldset/preview.html +19 -0
- package/dist/exports/design-system/components/Form/README.md +57 -0
- package/dist/exports/design-system/components/Form/preview.html +19 -0
- package/dist/exports/design-system/components/Input/README.md +38 -0
- package/dist/exports/design-system/components/Input/preview.html +19 -0
- package/dist/exports/design-system/components/Menu/README.md +58 -0
- package/dist/exports/design-system/components/Menu/preview.html +19 -0
- package/dist/exports/design-system/components/Menubar/README.md +105 -0
- package/dist/exports/design-system/components/Menubar/preview.html +19 -0
- package/dist/exports/design-system/components/Meter/README.md +43 -0
- package/dist/exports/design-system/components/Meter/preview.html +19 -0
- package/dist/exports/design-system/components/NavigationMenu/README.md +148 -0
- package/dist/exports/design-system/components/NavigationMenu/preview.html +19 -0
- package/dist/exports/design-system/components/NumberField/README.md +58 -0
- package/dist/exports/design-system/components/NumberField/preview.html +19 -0
- package/dist/exports/design-system/components/OTPField/README.md +39 -0
- package/dist/exports/design-system/components/OTPField/preview.html +19 -0
- package/dist/exports/design-system/components/Popover/README.md +56 -0
- package/dist/exports/design-system/components/Popover/preview.html +19 -0
- package/dist/exports/design-system/components/PreviewCard/README.md +74 -0
- package/dist/exports/design-system/components/PreviewCard/preview.html +19 -0
- package/dist/exports/design-system/components/Progress/README.md +58 -0
- package/dist/exports/design-system/components/Progress/preview.html +19 -0
- package/dist/exports/design-system/components/Radio/README.md +74 -0
- package/dist/exports/design-system/components/Radio/preview.html +19 -0
- package/dist/exports/design-system/components/ScrollArea/README.md +62 -0
- package/dist/exports/design-system/components/ScrollArea/preview.html +40 -0
- package/dist/exports/design-system/components/Select/README.md +84 -0
- package/dist/exports/design-system/components/Select/preview.html +19 -0
- package/dist/exports/design-system/components/Separator/README.md +37 -0
- package/dist/exports/design-system/components/Separator/preview.html +19 -0
- package/dist/exports/design-system/components/Slider/README.md +44 -0
- package/dist/exports/design-system/components/Slider/preview.html +19 -0
- package/dist/exports/design-system/components/Switch/README.md +34 -0
- package/dist/exports/design-system/components/Switch/preview.html +19 -0
- package/dist/exports/design-system/components/Tabs/README.md +56 -0
- package/dist/exports/design-system/components/Tabs/preview.html +19 -0
- package/dist/exports/design-system/components/Toast/README.md +78 -0
- package/dist/exports/design-system/components/Toast/preview.html +19 -0
- package/dist/exports/design-system/components/Toggle/README.md +32 -0
- package/dist/exports/design-system/components/Toggle/preview.html +19 -0
- package/dist/exports/design-system/components/ToggleGroup/README.md +40 -0
- package/dist/exports/design-system/components/ToggleGroup/preview.html +19 -0
- package/dist/exports/design-system/components/Toolbar/README.md +65 -0
- package/dist/exports/design-system/components/Toolbar/preview.html +19 -0
- package/dist/exports/design-system/components/Tooltip/README.md +46 -0
- package/dist/exports/design-system/components/Tooltip/preview.html +19 -0
- package/dist/exports/design-system/components/bundle.css +9881 -0
- package/dist/exports/design-system/components/bundle.js +5 -0
- package/dist/exports/design-system/components/index.d.ts +107 -0
- package/dist/exports/design-system/tokens.json +3063 -0
- package/dist/exports/shadcn.css +111 -0
- package/dist/exports/tailwind.css +1230 -36
- package/package.json +4 -2
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Input
|
|
2
|
+
|
|
3
|
+
The Base UI Input styled by the theme. No component tokens: the look is the field concept (tokens/semantic/field.json), sizes are control.*, and text is a whole text style. Field.Control is the same control inside a Field, and Number field's, Autocomplete's and Combobox's inputs are the same control with buttons at the end, and an OTP field's slots are the same control cut into squares (OTPField.css sizes them), so they share these rules.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Input`, this package's wrapper: it puts the class names on for you (`import { Input } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Input`.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/input
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Input` | `data-error`; `data-size`: `xs`, `sm`, `lg` |
|
|
14
|
+
| `FieldControl` | |
|
|
15
|
+
| `NumberFieldInput` | |
|
|
16
|
+
| `AutocompleteInput` | |
|
|
17
|
+
| `ComboboxInput` | |
|
|
18
|
+
| `OTPFieldInput` | `data-invalid` |
|
|
19
|
+
| `FieldRoot` | `data-invalid` |
|
|
20
|
+
| `NumberFieldRoot` | `data-invalid` |
|
|
21
|
+
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
## Example
|
|
25
|
+
|
|
26
|
+
From the Input stories (`Default`):
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
export const Default: Story = {
|
|
30
|
+
render: () => (
|
|
31
|
+
<div style={{ width: '400px' }}>
|
|
32
|
+
<Input type="text" placeholder="Enter your name" />
|
|
33
|
+
</div>
|
|
34
|
+
),
|
|
35
|
+
};
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The preview also shows `WithValue`, `Disabled`, `Warning`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / WithValue / Disabled / Warning" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var u=Object.create;var l=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},E=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!v.call(e,o)&&o!==a&&l(e,o,{get:()=>t[o],enumerable:!(s=S(t,o))||s.enumerable});return e};var b=(e,t,a)=>(a=e!=null?u(h(e)):{},E(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e));var y=w((O,m)=>{m.exports=window.Loomiere});var p={};g(p,{Default:()=>z,Disabled:()=>V,SizeLarge:()=>W,SizeSmall:()=>L,SizeXSmall:()=>I,Warning:()=>j,WithValue:()=>R,default:()=>c});var n=b(y(),1);var i=window.React;function r(e,t,a){let{children:s,...o}=t||{};return a!==void 0&&(o.key=a),s===void 0?i.createElement(e,o):Array.isArray(s)?i.createElement(e,o,...s):i.createElement(e,o,s)}var k=i.Fragment;var D={title:"Components/Lib/Input",component:n.Input,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=D,z={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text",placeholder:"Enter your name"})})},R={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text",defaultValue:"John Doe"})})},V={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text",placeholder:"Disabled input",disabled:!0})})},j={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"email","data-warning":!0,"aria-invalid":"true",defaultValue:"invalid-email"})})},I={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text","data-size":"xs",placeholder:"Extra small input"})})},L={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text","data-size":"sm",placeholder:"Small input"})})},W={render:()=>r("div",{style:{width:"400px"},children:r(n.Input,{type:"text","data-size":"lg",placeholder:"Large input"})})};var d=window.React,x=c||{},A=["Default","WithValue","Disabled","Warning"];function F({id:e}){let t=p[e],a={...x.args||{},...t.args||{}};return(t.render||(o=>d.createElement(x.component,o)))(a,{args:a,id:e,name:e})}var M=A.map(e=>d.createElement("section",{key:e,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(F,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,M));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Menu
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
Use `Loomiere.Menu` (`import { Menu } from '@base-ui/react/menu'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/menu
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `MenuPositioner` | |
|
|
14
|
+
| `MenuPopup` | |
|
|
15
|
+
| `MenuItem` | `data-highlighted`; `data-disabled` |
|
|
16
|
+
| `MenuCheckboxItem` | `data-highlighted`; `data-disabled` |
|
|
17
|
+
| `MenuRadioItem` | `data-highlighted`; `data-disabled` |
|
|
18
|
+
| `MenuSubmenuTrigger` | `data-highlighted`; `data-disabled` |
|
|
19
|
+
| `MenuCheckboxItemIndicator` | |
|
|
20
|
+
| `MenuRadioItemIndicator` | `data-unchecked` |
|
|
21
|
+
| `MenuCheckboxItemIndicatorIcon` | |
|
|
22
|
+
| `MenuRadioItemIndicatorIcon` | |
|
|
23
|
+
| `MenuGroup` | |
|
|
24
|
+
| `MenuGroupLabel` | |
|
|
25
|
+
| `MenuSeparator` | |
|
|
26
|
+
|
|
27
|
+
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.
|
|
28
|
+
|
|
29
|
+
## Example
|
|
30
|
+
|
|
31
|
+
From the Menu stories (`Default`):
|
|
32
|
+
|
|
33
|
+
```tsx
|
|
34
|
+
export const Default: Story = {
|
|
35
|
+
render: () => (
|
|
36
|
+
<Menu.Root>
|
|
37
|
+
<Menu.Trigger className="Button">
|
|
38
|
+
Open Menu
|
|
39
|
+
</Menu.Trigger>
|
|
40
|
+
<Menu.Portal>
|
|
41
|
+
<Menu.Positioner className="MenuPositioner">
|
|
42
|
+
<Menu.Popup className="MenuPopup">
|
|
43
|
+
<Menu.Item className="MenuItem">New File</Menu.Item>
|
|
44
|
+
<Menu.Item className="MenuItem">New Window</Menu.Item>
|
|
45
|
+
<Menu.Separator className="MenuSeparator" />
|
|
46
|
+
<Menu.Item className="MenuItem">Save</Menu.Item>
|
|
47
|
+
<Menu.Item className="MenuItem">Save As...</Menu.Item>
|
|
48
|
+
<Menu.Separator className="MenuSeparator" />
|
|
49
|
+
<Menu.Item className="MenuItem">Exit</Menu.Item>
|
|
50
|
+
</Menu.Popup>
|
|
51
|
+
</Menu.Positioner>
|
|
52
|
+
</Menu.Portal>
|
|
53
|
+
</Menu.Root>
|
|
54
|
+
),
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The preview also shows `WithCheckboxes`, `WithRadioGroup`, `WithSubmenu`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Navigation" height=480 subtitle="Default / WithCheckboxes / WithRadioGroup / WithSubmenu" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var S=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var d=(a,o)=>()=>(o||a((o={exports:{}}).exports,o),o.exports),C=(a,o)=>{for(var n in o)i(a,n,{get:o[n],enumerable:!0})},w=(a,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of k(o))!y.call(a,s)&&s!==n&&i(a,s,{get:()=>o[s],enumerable:!(r=g(o,s))||r.enumerable});return a};var M=(a,o,n)=>(n=a!=null?S(x(a)):{},w(o||!a||!a.__esModule?i(n,"default",{value:a,enumerable:!0}):n,a));var h=d((D,p)=>{p.exports=window.React});var R=d((O,N)=>{N.exports=window.Loomiere.Base});var I={};C(I,{Default:()=>T,WithCheckboxes:()=>E,WithDisabledItems:()=>v,WithRadioGroup:()=>F,WithSubmenu:()=>_,default:()=>l});var c=M(h(),1),t=M(R(),1);var u=window.React;function e(a,o,n){let{children:r,...s}=o||{};return n!==void 0&&(s.key=n),r===void 0?u.createElement(a,s):Array.isArray(r)?u.createElement(a,s,...r):u.createElement(a,s,r)}var V=u.Fragment;var f={title:"Components/Menu",component:t.Menu.Root,parameters:{layout:"centered"},tags:["autodocs"]},l=f,T={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"Open Menu"}),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:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"}),e(t.Menu.Item,{className:"MenuItem",children:"Save As..."}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]})},E={render:()=>{let[a,o]=c.useState(!1),[n,r]=c.useState(!0),[s,P]=c.useState(!1);return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button","data-variant":"outline",children:"View Options"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",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:P,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Footer"]})]})})})]})}},F={render:()=>{let[a,o]=c.useState("light");return e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button","data-variant":"ghost",children:"Theme"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:e(t.Menu.RadioGroup,{value:a,onValueChange:o,children:[e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"light",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"})}),"Light"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"dark",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"})}),"Dark"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"system",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"})}),"System"]})]})})})})]})}},_={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"File"}),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:"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"})]})})})]})},v={render:()=>e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"Button",children:"Edit"}),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:"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,b=l||{},W=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function L({id:a}){let o=I[a],n={...b.args||{},...o.args||{}};return(o.render||(s=>m.createElement(b.component,s)))(n,{args:n,id:a,name:a})}var j=W.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(L,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(m.createElement(m.Fragment,null,j));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Menubar
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
Use `Loomiere.Menubar` (`import { Menubar } from '@base-ui/react/menubar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/menubar
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `MenubarRoot` | |
|
|
14
|
+
| `MenubarTrigger` | `data-popup-open` |
|
|
15
|
+
| `MenubarPositioner` | |
|
|
16
|
+
| `MenubarPopup` | |
|
|
17
|
+
| `MenubarItem` | `data-highlighted`; `data-disabled` |
|
|
18
|
+
| `MenubarCheckboxItem` | `data-highlighted`; `data-disabled` |
|
|
19
|
+
| `MenubarRadioItem` | `data-highlighted`; `data-disabled` |
|
|
20
|
+
| `MenubarSubmenuTrigger` | `data-highlighted`; `data-disabled` |
|
|
21
|
+
| `MenubarCheckboxItemIndicator` | |
|
|
22
|
+
| `MenubarRadioItemIndicator` | `data-unchecked` |
|
|
23
|
+
| `MenubarCheckboxItemIndicatorIcon` | |
|
|
24
|
+
| `MenubarRadioItemIndicatorIcon` | |
|
|
25
|
+
| `MenubarGroup` | |
|
|
26
|
+
| `MenubarGroupLabel` | |
|
|
27
|
+
| `MenubarSeparator` | |
|
|
28
|
+
|
|
29
|
+
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.
|
|
30
|
+
|
|
31
|
+
## Example
|
|
32
|
+
|
|
33
|
+
From the Menubar stories (`Default`):
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
export const Default: Story = {
|
|
37
|
+
render: () => (
|
|
38
|
+
<Menubar className="MenubarRoot">
|
|
39
|
+
<Menu.Root>
|
|
40
|
+
<Menu.Trigger className="MenubarTrigger">File</Menu.Trigger>
|
|
41
|
+
<Menu.Portal>
|
|
42
|
+
<Menu.Positioner className="MenuPositioner" sideOffset={6}>
|
|
43
|
+
<Menu.Popup className="MenuPopup">
|
|
44
|
+
<Menu.Item className="MenuItem">New File</Menu.Item>
|
|
45
|
+
<Menu.Item className="MenuItem">New Window</Menu.Item>
|
|
46
|
+
<Menu.Separator className="MenuSeparator" />
|
|
47
|
+
<Menu.Item className="MenuItem">Open...</Menu.Item>
|
|
48
|
+
<Menu.Item className="MenuItem">Save</Menu.Item>
|
|
49
|
+
<Menu.Separator className="MenuSeparator" />
|
|
50
|
+
<Menu.Item className="MenuItem">Exit</Menu.Item>
|
|
51
|
+
</Menu.Popup>
|
|
52
|
+
</Menu.Positioner>
|
|
53
|
+
</Menu.Portal>
|
|
54
|
+
</Menu.Root>
|
|
55
|
+
|
|
56
|
+
<Menu.Root>
|
|
57
|
+
<Menu.Trigger className="MenubarTrigger">Edit</Menu.Trigger>
|
|
58
|
+
<Menu.Portal>
|
|
59
|
+
<Menu.Positioner className="MenuPositioner" sideOffset={6}>
|
|
60
|
+
<Menu.Popup className="MenuPopup">
|
|
61
|
+
<Menu.Item className="MenuItem">Undo</Menu.Item>
|
|
62
|
+
<Menu.Item className="MenuItem">Redo</Menu.Item>
|
|
63
|
+
<Menu.Separator className="MenuSeparator" />
|
|
64
|
+
<Menu.Item className="MenuItem">Cut</Menu.Item>
|
|
65
|
+
<Menu.Item className="MenuItem">Copy</Menu.Item>
|
|
66
|
+
<Menu.Item className="MenuItem">Paste</Menu.Item>
|
|
67
|
+
</Menu.Popup>
|
|
68
|
+
</Menu.Positioner>
|
|
69
|
+
</Menu.Portal>
|
|
70
|
+
</Menu.Root>
|
|
71
|
+
|
|
72
|
+
<Menu.Root>
|
|
73
|
+
<Menu.Trigger className="MenubarTrigger">View</Menu.Trigger>
|
|
74
|
+
<Menu.Portal>
|
|
75
|
+
<Menu.Positioner className="MenuPositioner" sideOffset={6}>
|
|
76
|
+
<Menu.Popup className="MenuPopup">
|
|
77
|
+
<Menu.Item className="MenuItem">Zoom In</Menu.Item>
|
|
78
|
+
<Menu.Item className="MenuItem">Zoom Out</Menu.Item>
|
|
79
|
+
<Menu.Item className="MenuItem">Reset Zoom</Menu.Item>
|
|
80
|
+
<Menu.Separator className="MenuSeparator" />
|
|
81
|
+
<Menu.Item className="MenuItem">Full Screen</Menu.Item>
|
|
82
|
+
</Menu.Popup>
|
|
83
|
+
</Menu.Positioner>
|
|
84
|
+
</Menu.Portal>
|
|
85
|
+
</Menu.Root>
|
|
86
|
+
|
|
87
|
+
<Menu.Root>
|
|
88
|
+
<Menu.Trigger className="MenubarTrigger">Help</Menu.Trigger>
|
|
89
|
+
<Menu.Portal>
|
|
90
|
+
<Menu.Positioner className="MenuPositioner" sideOffset={6}>
|
|
91
|
+
<Menu.Popup className="MenuPopup">
|
|
92
|
+
<Menu.Item className="MenuItem">Documentation</Menu.Item>
|
|
93
|
+
<Menu.Item className="MenuItem">Keyboard Shortcuts</Menu.Item>
|
|
94
|
+
<Menu.Separator className="MenuSeparator" />
|
|
95
|
+
<Menu.Item className="MenuItem">About</Menu.Item>
|
|
96
|
+
</Menu.Popup>
|
|
97
|
+
</Menu.Positioner>
|
|
98
|
+
</Menu.Portal>
|
|
99
|
+
</Menu.Root>
|
|
100
|
+
</Menubar>
|
|
101
|
+
),
|
|
102
|
+
};
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
The preview also shows `WithCheckboxes`, `WithRadioGroup`, `WithSubmenu`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Navigation" height=480 subtitle="Default / WithCheckboxes / WithRadioGroup / WithSubmenu" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
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));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Meter
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
Use `Loomiere.Meter` (`import { Meter } from '@base-ui/react/meter'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/meter
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `MeterRoot` | |
|
|
14
|
+
| `MeterLabel` | |
|
|
15
|
+
| `MeterTrack` | `data-size`: `sm`, `lg` |
|
|
16
|
+
| `MeterIndicator` | |
|
|
17
|
+
| `MeterValue` | |
|
|
18
|
+
|
|
19
|
+
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.
|
|
20
|
+
|
|
21
|
+
## Example
|
|
22
|
+
|
|
23
|
+
From the Meter stories (`Default`):
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
export const Default: Story = {
|
|
27
|
+
render: () => (
|
|
28
|
+
<div style={{ width: '300px' }}>
|
|
29
|
+
<Meter.Root value={75} min={0} max={100} className="MeterRoot">
|
|
30
|
+
<div className="MeterLabel">
|
|
31
|
+
<span>Storage</span>
|
|
32
|
+
<Meter.Value className="MeterValue" />
|
|
33
|
+
</div>
|
|
34
|
+
<Meter.Track className="MeterTrack">
|
|
35
|
+
<Meter.Indicator className="MeterIndicator" />
|
|
36
|
+
</Meter.Track>
|
|
37
|
+
</Meter.Root>
|
|
38
|
+
</div>
|
|
39
|
+
),
|
|
40
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
The preview also shows `WithOptimumRange`, `Sizes`, `DiskUsage`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Feedback" height=480 subtitle="Default / WithOptimumRange / Sizes / DiskUsage" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var y=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var M=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),g=(t,r)=>{for(var s in r)m(t,s,{get:r[s],enumerable:!0})},b=(t,r,s,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of f(r))!I.call(t,o)&&o!==s&&m(t,o,{get:()=>r[o],enumerable:!(c=T(r,o))||c.enumerable});return t};var p=(t,r,s)=>(s=t!=null?y(V(t)):{},b(r||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t));var N=M((O,u)=>{u.exports=window.React});var x=M((j,v)=>{v.exports=window.Loomiere.Base});var d={};g(d,{BatteryLevel:()=>E,Default:()=>w,DiskUsage:()=>L,NetworkSpeed:()=>B,Sizes:()=>D,WithOptimumRange:()=>S,WithoutLabel:()=>C,default:()=>i});var R=p(N(),1),a=p(x(),1);var n=window.React;function e(t,r,s){let{children:c,...o}=r||{};return s!==void 0&&(o.key=s),c===void 0?n.createElement(t,o):Array.isArray(c)?n.createElement(t,o,...c):n.createElement(t,o,c)}var A=n.Fragment;var h={title:"Components/Meter",parameters:{layout:"centered"},tags:["autodocs"]},i=h,w={render:()=>e("div",{style:{width:"300px"},children:e(a.Meter.Root,{value:75,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Storage"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})})},S={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(a.Meter.Root,{value:30,min:0,max:100,className:"MeterRoot","data-color":"success",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (lower is calmer)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:60,min:0,max:100,className:"MeterRoot","data-color":"warning",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (moderate)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:90,min:0,max:100,className:"MeterRoot","data-color":"error",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (high)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},D={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:45,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Small"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack","data-size":"sm",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:65,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Medium (default)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:85,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Large"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack","data-size":"lg",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},L={render:()=>e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:45,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"System Drive (C:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:78,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Data Drive (D:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:95,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Backup Drive (E:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},E={render:()=>{let[t,r]=R.useState(85);return e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"16px"},children:[e(a.Meter.Root,{value:t,min:0,max:100,className:"MeterRoot","data-color":t<=20?"error":t<=50?"warning":"success",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Battery Level"}),e(a.Meter.Value,{className:"MeterValue",children:(s,c)=>`${c}%`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e("div",{style:{display:"flex",gap:"8px"},children:[e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.max(0,t-10)),children:"Drain -10%"}),e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.min(100,t+10)),children:"Charge +10%"})]})]})}},B={render:()=>e("div",{style:{width:"350px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:850,min:0,max:1e3,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Download Speed"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r} Mbps`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:450,min:0,max:1e3,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Upload Speed"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r} Mbps`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},C={render:()=>e("div",{style:{width:"300px"},children:e(a.Meter.Root,{value:60,min:0,max:100,className:"MeterRoot",children:e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})})})};var l=window.React,k=i||{},$=["Default","WithOptimumRange","Sizes","DiskUsage"];function z({id:t}){let r=d[t],s={...k.args||{},...r.args||{}};return(r.render||(o=>l.createElement(k.component,o)))(s,{args:s,id:t,name:t})}var U=$.map(t=>l.createElement("section",{key:t,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(z,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,U));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# NavigationMenu
|
|
2
|
+
|
|
3
|
+
The Base UI NavigationMenu styled by the theme. The strip is the bar concept, the panel is the popup concept and each link is an item row with a title and description. Only the panel sizes are its own (tokens/component/navigation-menu.json). The panel slides between triggers on the slow duration with the out easing.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.NavigationMenu`, this package's wrapper: it puts the class names on for you (`import { NavigationMenu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.NavigationMenu`.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/navigation-menu
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `NavigationMenuRoot` | |
|
|
14
|
+
| `NavigationMenuList` | |
|
|
15
|
+
| `NavigationMenuTrigger` | `data-popup-open` |
|
|
16
|
+
| `NavigationMenuIcon` | `data-popup-open` |
|
|
17
|
+
| `NavigationMenuPositioner` | `data-side`: `top`, `bottom`, `left`, `right`; `data-instant` |
|
|
18
|
+
| `NavigationMenuPopup` | `data-starting-style`; `data-ending-style` |
|
|
19
|
+
| `NavigationMenuViewport` | |
|
|
20
|
+
| `NavigationMenuContent` | `data-starting-style`; `data-ending-style`; `data-activation-direction`: `left`, `right` |
|
|
21
|
+
| `NavigationMenuLinkList` | `data-columns`: `1`, `2`, `3` |
|
|
22
|
+
| `NavigationMenuSections` | `data-columns`: `2`, `3` |
|
|
23
|
+
| `NavigationMenuLink` | |
|
|
24
|
+
| `NavigationMenuLinkTitle` | |
|
|
25
|
+
| `NavigationMenuLinkDescription` | |
|
|
26
|
+
| `NavigationMenuSection` | |
|
|
27
|
+
| `NavigationMenuSectionHeading` | |
|
|
28
|
+
| `NavigationMenuArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
|
|
29
|
+
| `NavigationMenuArrowFill` | |
|
|
30
|
+
| `NavigationMenuArrowOuterStroke` | |
|
|
31
|
+
| `NavigationMenuArrowInnerStroke` | |
|
|
32
|
+
| `NavigationMenuSeparator` | |
|
|
33
|
+
|
|
34
|
+
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.
|
|
35
|
+
|
|
36
|
+
## Example
|
|
37
|
+
|
|
38
|
+
From the NavigationMenu stories (`Default`):
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
export const Default: Story = {
|
|
42
|
+
render: () => (
|
|
43
|
+
<NavigationMenu.Root>
|
|
44
|
+
<NavigationMenu.List>
|
|
45
|
+
<NavigationMenu.Item>
|
|
46
|
+
<NavigationMenu.Trigger>
|
|
47
|
+
Products
|
|
48
|
+
<NavigationMenu.Icon>
|
|
49
|
+
<ChevronDownIcon />
|
|
50
|
+
</NavigationMenu.Icon>
|
|
51
|
+
</NavigationMenu.Trigger>
|
|
52
|
+
<NavigationMenu.Content>
|
|
53
|
+
<ul className="NavigationMenuLinkList" data-columns="2">
|
|
54
|
+
{productLinks.map((item) => (
|
|
55
|
+
<li key={item.href}>
|
|
56
|
+
<Link href={item.href}>
|
|
57
|
+
<h3 className="NavigationMenuLinkTitle">{item.title}</h3>
|
|
58
|
+
<p className="NavigationMenuLinkDescription">{item.description}</p>
|
|
59
|
+
</Link>
|
|
60
|
+
</li>
|
|
61
|
+
))}
|
|
62
|
+
</ul>
|
|
63
|
+
</NavigationMenu.Content>
|
|
64
|
+
</NavigationMenu.Item>
|
|
65
|
+
|
|
66
|
+
<NavigationMenu.Item>
|
|
67
|
+
<NavigationMenu.Trigger>
|
|
68
|
+
Resources
|
|
69
|
+
<NavigationMenu.Icon>
|
|
70
|
+
<ChevronDownIcon />
|
|
71
|
+
</NavigationMenu.Icon>
|
|
72
|
+
</NavigationMenu.Trigger>
|
|
73
|
+
<NavigationMenu.Content>
|
|
74
|
+
<ul className="NavigationMenuLinkList" data-columns="1">
|
|
75
|
+
{resourceLinks.map((item) => (
|
|
76
|
+
<li key={item.href}>
|
|
77
|
+
<Link href={item.href}>
|
|
78
|
+
<h3 className="NavigationMenuLinkTitle">{item.title}</h3>
|
|
79
|
+
<p className="NavigationMenuLinkDescription">{item.description}</p>
|
|
80
|
+
</Link>
|
|
81
|
+
</li>
|
|
82
|
+
))}
|
|
83
|
+
</ul>
|
|
84
|
+
</NavigationMenu.Content>
|
|
85
|
+
</NavigationMenu.Item>
|
|
86
|
+
|
|
87
|
+
<NavigationMenu.Item>
|
|
88
|
+
<Link className="NavigationMenuTrigger" href="#pricing">
|
|
89
|
+
Pricing
|
|
90
|
+
</Link>
|
|
91
|
+
</NavigationMenu.Item>
|
|
92
|
+
</NavigationMenu.List>
|
|
93
|
+
|
|
94
|
+
<NavigationMenu.Portal>
|
|
95
|
+
<NavigationMenu.Positioner
|
|
96
|
+
sideOffset={10}
|
|
97
|
+
collisionPadding={{ top: 10, bottom: 10, left: 20, right: 20 }}
|
|
98
|
+
>
|
|
99
|
+
<NavigationMenu.Popup>
|
|
100
|
+
<NavigationMenu.Arrow>
|
|
101
|
+
<ArrowSvg />
|
|
102
|
+
</NavigationMenu.Arrow>
|
|
103
|
+
<NavigationMenu.Viewport />
|
|
104
|
+
</NavigationMenu.Popup>
|
|
105
|
+
</NavigationMenu.Positioner>
|
|
106
|
+
</NavigationMenu.Portal>
|
|
107
|
+
</NavigationMenu.Root>
|
|
108
|
+
),
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
const companyAboutLinks = [
|
|
112
|
+
{
|
|
113
|
+
href: '#story',
|
|
114
|
+
title: 'Our Story',
|
|
115
|
+
description: 'Learn about our mission and values',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
href: '#team',
|
|
119
|
+
title: 'Team',
|
|
120
|
+
description: 'Meet the people behind the product',
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
href: '#careers',
|
|
124
|
+
title: 'Careers',
|
|
125
|
+
description: 'Join our growing team',
|
|
126
|
+
},
|
|
127
|
+
] as const;
|
|
128
|
+
|
|
129
|
+
const companyConnectLinks = [
|
|
130
|
+
{
|
|
131
|
+
href: '#contact',
|
|
132
|
+
title: 'Contact',
|
|
133
|
+
description: 'Get in touch with us',
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
href: '#support',
|
|
137
|
+
title: 'Support',
|
|
138
|
+
description: "We're here to help",
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
href: '#community',
|
|
142
|
+
title: 'Community',
|
|
143
|
+
description: 'Join our community forum',
|
|
144
|
+
},
|
|
145
|
+
] as const;
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
The preview also shows `WithSections`, `ThreeColumns`, `WithSeparator`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Navigation" height=480 subtitle="Default / WithSections / ThreeColumns / WithSeparator" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var f=Object.create;var N=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),I=(t,n)=>{for(var a in n)N(t,a,{get:n[a],enumerable:!0})},P=(t,n,a,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!w.call(t,r)&&r!==a&&N(t,r,{get:()=>n[r],enumerable:!(l=L(n,r))||l.enumerable});return t};var S=(t,n,a)=>(a=t!=null?f(y(t)):{},P(n||!t||!t.__esModule?N(a,"default",{value:t,enumerable:!0}):a,t));var M=C((J,h)=>{h.exports=window.Loomiere});var v={};I(v,{Default:()=>D,MixedItems:()=>F,ThreeColumns:()=>W,WithSections:()=>H,WithSeparator:()=>B,default:()=>m});var i=S(M(),1);var p=window.React;function e(t,n,a){let{children:l,...r}=n||{};return a!==void 0&&(r.key=a),l===void 0?p.createElement(t,r):Array.isArray(l)?p.createElement(t,r,...l):p.createElement(t,r,l)}var K=p.Fragment;var T={title:"Components/Lib/NavigationMenu",component:i.NavigationMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=T;function o(t){return e(i.NavigationMenu.Link,{render:e("a",{}),...t})}function c(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",...t,children:e("path",{d:"M1 3.5L5 7.5L9 3.5",stroke:"currentcolor",strokeWidth:"1.5"})})}function g(t){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...t,children:[e("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"NavigationMenuArrowFill"}),e("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"NavigationMenuArrowOuterStroke"}),e("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"NavigationMenuArrowInnerStroke"})]})}var R=[{href:"#analytics",title:"Analytics",description:"Get insights into your data with powerful analytics tools"},{href:"#automation",title:"Automation",description:"Automate your workflows and save time"},{href:"#collaboration",title:"Collaboration",description:"Work together seamlessly with your team"},{href:"#security",title:"Security",description:"Enterprise-grade security for your peace of mind"}],A=[{href:"#documentation",title:"Documentation",description:"Learn how to integrate our tools"},{href:"#api",title:"API Reference",description:"Complete API documentation"},{href:"#guides",title:"Guides",description:"Step-by-step tutorials"}],D={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:[e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Products",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"2",children:R.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})})]}),e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Resources",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:A.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})})]}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#pricing",children:"Pricing"})})]}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,collisionPadding:{top:10,bottom:10,left:20,right:20},children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},b=[{href:"#story",title:"Our Story",description:"Learn about our mission and values"},{href:"#team",title:"Team",description:"Meet the people behind the product"},{href:"#careers",title:"Careers",description:"Join our growing team"}],x=[{href:"#contact",title:"Contact",description:"Get in touch with us"},{href:"#support",title:"Support",description:"We're here to help"},{href:"#community",title:"Community",description:"Join our community forum"}],H={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Company",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("div",{className:"NavigationMenuSections","data-columns":"2",children:[e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"About"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:b.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"Connect"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:x.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},E=[{href:"#enterprise",title:"Enterprise",description:"Solutions for large organizations"},{href:"#small-business",title:"Small Business",description:"Perfect for growing teams"}],O=[{href:"#api",title:"API",description:"Build custom integrations"},{href:"#sdks",title:"SDKs",description:"Tools for every platform"}],V=[{href:"#collaboration",title:"Collaboration",description:"Work together effectively"},{href:"#project-management",title:"Project Management",description:"Keep projects on track"}],W={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Solutions",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("div",{className:"NavigationMenuSections","data-columns":"3",children:[e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Business"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:E.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Developers"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:O.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Teams"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:V.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},s=[{href:"#help-center",title:"Help Center",description:"Find answers to common questions"},{href:"#tutorials",title:"Video Tutorials",description:"Watch and learn"},{href:"#support",title:"Contact Support",description:"Get help from our team"},{href:"#bug",title:"Report a Bug",description:"Help us improve"}],B={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Help",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:[e("li",{children:e(o,{href:s[0].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[0].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[0].description})]})}),e("li",{children:e(o,{href:s[1].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[1].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[1].description})]})}),e("li",{children:e("hr",{className:"NavigationMenuSeparator"})}),e("li",{children:e(o,{href:s[2].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[2].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[2].description})]})}),e("li",{children:e(o,{href:s[3].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[3].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[3].description})]})})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},F={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:[e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Features",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"2",children:[e("li",{children:e(o,{href:"#dashboard",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Dashboard"}),e("p",{className:"NavigationMenuLinkDescription",children:"Overview of your workspace"})]})}),e("li",{children:e(o,{href:"#reports",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Reports"}),e("p",{className:"NavigationMenuLinkDescription",children:"Generate detailed reports"})]})})]})})]}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#about",children:"About"})}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#blog",children:"Blog"})}),e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["More",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:[e("li",{children:e(o,{href:"#changelog",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Changelog"}),e("p",{className:"NavigationMenuLinkDescription",children:"See what's new"})]})}),e("li",{children:e(o,{href:"#roadmap",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Roadmap"}),e("p",{className:"NavigationMenuLinkDescription",children:"What we're building next"})]})})]})})]})]}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})};var u=window.React,d=m||{},j=["Default","WithSections","ThreeColumns","WithSeparator"];function G({id:t}){let n=v[t],a={...d.args||{},...n.args||{}};return(n.render||(r=>u.createElement(d.component,r)))(a,{args:a,id:t,name:t})}var Z=j.map(t=>u.createElement("section",{key:t,className:"ds-story"},u.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),u.createElement("div",{className:"ds-story-body"},u.createElement(G,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(u.createElement(u.Fragment,null,Z));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|