@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 ScrollArea styled by the theme. The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until you reach for it, and a thumb in the strong fills. No component tokens.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.ScrollArea
|
|
5
|
+
Use `Loomiere.ScrollArea`, this package's wrapper: it puts the class names on for you (`import { ScrollArea } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.ScrollArea`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/scroll-area
|
|
8
8
|
|
|
@@ -25,8 +25,8 @@ From the ScrollArea stories (`Default`):
|
|
|
25
25
|
```tsx
|
|
26
26
|
export const Default: Story = {
|
|
27
27
|
render: () => (
|
|
28
|
-
<ScrollArea.Root
|
|
29
|
-
<ScrollArea.Viewport
|
|
28
|
+
<ScrollArea.Root style={{ width: '300px', height: '200px' }}>
|
|
29
|
+
<ScrollArea.Viewport>
|
|
30
30
|
<div style={{ padding: '16px' }}>
|
|
31
31
|
<h3 style={{ margin: '0 0 12px 0' }}>Scrollable Content</h3>
|
|
32
32
|
<p style={{ margin: '0 0 12px 0' }}>
|
|
@@ -50,10 +50,10 @@ export const Default: Story = {
|
|
|
50
50
|
</p>
|
|
51
51
|
</div>
|
|
52
52
|
</ScrollArea.Viewport>
|
|
53
|
-
<ScrollArea.Scrollbar orientation="vertical"
|
|
54
|
-
<ScrollArea.Thumb
|
|
53
|
+
<ScrollArea.Scrollbar orientation="vertical">
|
|
54
|
+
<ScrollArea.Thumb />
|
|
55
55
|
</ScrollArea.Scrollbar>
|
|
56
|
-
<ScrollArea.Corner
|
|
56
|
+
<ScrollArea.Corner />
|
|
57
57
|
</ScrollArea.Root>
|
|
58
58
|
),
|
|
59
59
|
};
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var x=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var v=(r,o)=>()=>(o||r((o={exports:{}}).exports,o),o.exports),f=(r,o)=>{for(var i in o)c(r,i,{get:o[i],enumerable:!0})},w=(r,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of y(o))!S.call(r,a)&&a!==i&&c(r,a,{get:()=>o[a],enumerable:!(l=h(o,a))||l.enumerable});return r};var A=(r,o,i)=>(i=r!=null?x(b(r)):{},w(o||!r||!r.__esModule?c(i,"default",{value:r,enumerable:!0}):i,r));var m=v((L,p)=>{p.exports=window.Loomiere});var d={};f(d,{BothDirections:()=>E,ChatMessages:()=>k,CodeBlock:()=>V,Default:()=>R,HorizontalScroll:()=>C,ListExample:()=>T,WithBorder:()=>M,default:()=>u});var t=A(m(),1);var s=window.React;function e(r,o,i){let{children:l,...a}=o||{};return i!==void 0&&(a.key=i),l===void 0?s.createElement(r,a):Array.isArray(l)?s.createElement(r,a,...l):s.createElement(r,a,l)}var F=s.Fragment;var q={title:"Components/Lib/ScrollArea",component:t.ScrollArea.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=q,R={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"200px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px"},children:[e("h3",{style:{margin:"0 0 12px 0"},children:"Scrollable Content"}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0"},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},C={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"100px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",width:"600px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"This content is wider than the container"}),e("p",{style:{margin:"0",whiteSpace:"nowrap"},children:"Scroll horizontally to see all the content. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},E={render:()=>e(t.ScrollArea.Root,{style:{width:"300px",height:"200px"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",width:"500px"},children:[e("h3",{style:{margin:"0 0 12px 0",whiteSpace:"nowrap"},children:"Scrollable in Both Directions"}),e("p",{style:{margin:"0 0 12px 0"},children:"This content is both wider and taller than the container, so you can scroll both vertically and horizontally."}),e("p",{style:{margin:"0 0 12px 0"},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),e("p",{style:{margin:"0 0 12px 0"},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."}),e("p",{style:{margin:"0 0 12px 0"},children:"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0"},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},M={render:()=>e(t.ScrollArea.Root,{style:{width:"400px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",overflow:"hidden"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"20px"},children:[e("h3",{style:{margin:"0 0 16px 0",fontSize:"18px",fontWeight:600},children:"Article Title"}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}),e("p",{style:{margin:"0 0 12px 0",lineHeight:1.6},children:"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."}),e("p",{style:{margin:"0",lineHeight:1.6},children:"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."})]})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},T={render:()=>{let r=Array.from({length:50},(o,i)=>`Item ${i+1}`);return e(t.ScrollArea.Root,{style:{width:"250px",height:"300px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"8px"},children:r.map(o=>e("div",{style:{padding:"12px",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",transition:"background-color 0.15s ease"},onMouseEnter:i=>{i.currentTarget.style.backgroundColor="var(--sl-surface-overlay)"},onMouseLeave:i=>{i.currentTarget.style.backgroundColor="transparent"},children:o},o))})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})}},V={render:()=>e(t.ScrollArea.Root,{style:{width:"500px",height:"250px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-raised)"},children:[e(t.ScrollArea.Viewport,{children:e("pre",{style:{margin:0,padding:"16px",fontFamily:"monospace",fontSize:"14px",lineHeight:1.5,whiteSpace:"pre"},children:`function exampleFunction() {
|
|
16
16
|
const message = "Hello, World!";
|
|
17
17
|
console.log(message);
|
|
18
18
|
|
|
@@ -33,7 +33,7 @@ console.log(result);
|
|
|
33
33
|
// More code to demonstrate scrolling
|
|
34
34
|
const anotherFunction = () => {
|
|
35
35
|
return "This is a longer code example";
|
|
36
|
-
};`})}),e(
|
|
36
|
+
};`})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Scrollbar,{orientation:"horizontal",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})},k={render:()=>{let r=[{id:1,user:"Alice",text:"Hey, how are you?",time:"10:30 AM"},{id:2,user:"Bob",text:"I'm good! How about you?",time:"10:31 AM"},{id:3,user:"Alice",text:"Doing great! Working on the new project.",time:"10:32 AM"},{id:4,user:"Bob",text:"Nice! How's it going?",time:"10:33 AM"},{id:5,user:"Alice",text:"Pretty well. Just implementing the scroll area component.",time:"10:34 AM"},{id:6,user:"Bob",text:"Cool! Let me know if you need any help.",time:"10:35 AM"},{id:7,user:"Alice",text:"Will do, thanks!",time:"10:36 AM"},{id:8,user:"Bob",text:"No problem \u{1F44D}",time:"10:37 AM"}];return e(t.ScrollArea.Root,{style:{width:"350px",height:"400px",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",backgroundColor:"var(--sl-surface-canvas)"},children:[e(t.ScrollArea.Viewport,{children:e("div",{style:{padding:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:r.map(o=>e("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:[e("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"baseline"},children:[e("span",{style:{fontWeight:600,fontSize:"14px"},children:o.user}),e("span",{style:{fontSize:"12px",color:"var(--sl-text-tertiary)"},children:o.time})]}),e("div",{style:{padding:"8px 12px",backgroundColor:o.user==="Alice"?"var(--sl-color-primary-100)":"var(--sl-surface-overlay)",borderRadius:"var(--sl-radius-md)",fontSize:"14px",lineHeight:1.5},children:o.text})]},o.id))})}),e(t.ScrollArea.Scrollbar,{orientation:"vertical",children:e(t.ScrollArea.Thumb,{})}),e(t.ScrollArea.Corner,{})]})}};var n=window.React,g=u||{},D=["Default","HorizontalScroll","BothDirections","WithBorder"];function z({id:r}){let o=d[r],i={...g.args||{},...o.args||{}};return(o.render||(a=>n.createElement(g.component,a)))(i,{args:i,id:r,name:r})}var H=D.map(r=>n.createElement("section",{key:r,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(z,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,H));})();
|
|
37
37
|
|
|
38
38
|
</script>
|
|
39
39
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Select styled by the theme. The trigger is a field (the field pattern, control sizes, the base text style); the list is a popup of item rows. Select keeps no tokens of its own.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Select
|
|
5
|
+
Use `Loomiere.Select`, this package's wrapper: it puts the class names on for you (`import { Select } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Select`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/select
|
|
8
8
|
|
|
@@ -13,6 +13,7 @@ Base UI docs: https://base-ui.com/react/components/select
|
|
|
13
13
|
| `SelectTrigger` | |
|
|
14
14
|
| `SelectValue` | |
|
|
15
15
|
| `SelectIcon` | |
|
|
16
|
+
| `Button` | |
|
|
16
17
|
| `SelectBackdrop` | |
|
|
17
18
|
| `SelectPositioner` | |
|
|
18
19
|
| `SelectPopup` | |
|
|
@@ -41,33 +42,33 @@ export const Default: Story = {
|
|
|
41
42
|
render: () => (
|
|
42
43
|
<div style={{ width: '300px' }}>
|
|
43
44
|
<Select.Root items={fruits}>
|
|
44
|
-
<Select.Trigger
|
|
45
|
-
<Select.Value
|
|
46
|
-
<Select.Icon
|
|
45
|
+
<Select.Trigger>
|
|
46
|
+
<Select.Value data-placeholder="Select a fruit" />
|
|
47
|
+
<Select.Icon>
|
|
47
48
|
<ChevronDownIcon />
|
|
48
49
|
</Select.Icon>
|
|
49
50
|
</Select.Trigger>
|
|
50
51
|
<Select.Portal>
|
|
51
|
-
<Select.Positioner
|
|
52
|
-
<Select.Popup
|
|
53
|
-
<Select.ScrollUpArrow
|
|
52
|
+
<Select.Positioner sideOffset={8}>
|
|
53
|
+
<Select.Popup>
|
|
54
|
+
<Select.ScrollUpArrow>
|
|
54
55
|
<svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
55
56
|
<path d="M9 5L5 1L1 5" />
|
|
56
57
|
</svg>
|
|
57
58
|
</Select.ScrollUpArrow>
|
|
58
|
-
<Select.List
|
|
59
|
+
<Select.List>
|
|
59
60
|
{fruits.map(({ label, value }) => (
|
|
60
|
-
<Select.Item key={value} value={value}
|
|
61
|
-
<Select.ItemIndicator
|
|
61
|
+
<Select.Item key={value} value={value}>
|
|
62
|
+
<Select.ItemIndicator>
|
|
62
63
|
<span className="material-symbols-outlined SelectItemIndicatorIcon">
|
|
63
64
|
check
|
|
64
65
|
</span>
|
|
65
66
|
</Select.ItemIndicator>
|
|
66
|
-
<Select.ItemText
|
|
67
|
+
<Select.ItemText>{label}</Select.ItemText>
|
|
67
68
|
</Select.Item>
|
|
68
69
|
))}
|
|
69
70
|
</Select.List>
|
|
70
|
-
<Select.ScrollDownArrow
|
|
71
|
+
<Select.ScrollDownArrow>
|
|
71
72
|
<svg className="SelectScrollArrowIcon" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
72
73
|
<path d="M1 1L5 5L9 1" />
|
|
73
74
|
</svg>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var b=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var u=(l,r)=>()=>(r||l((r={exports:{}}).exports,r),r.exports),k=(l,r)=>{for(var o in r)p(l,o,{get:r[o],enumerable:!0})},T=(l,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of A(r))!P.call(l,a)&&a!==o&&p(l,a,{get:()=>r[a],enumerable:!(c=x(r,a))||c.enumerable});return l};var w=(l,r,o)=>(o=l!=null?b(L(l)):{},T(r||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var g=u(($,N)=>{N.exports=window.React});var h=u((z,v)=>{v.exports=window.Loomiere.Base});var I={};k(I,{Controlled:()=>B,Default:()=>C,Disabled:()=>U,Grouped:()=>M,WithDefaultValue:()=>D,WithDisabledItems:()=>W,WithLabel:()=>E,WithScrollArrows:()=>V,default:()=>d});var S=w(g(),1),t=w(h(),1);var m=window.React;function e(l,r,o){let{children:c,...a}=r||{};return o!==void 0&&(a.key=o),c===void 0?m.createElement(l,a):Array.isArray(c)?m.createElement(l,a,...c):m.createElement(l,a,c)}var Z=m.Fragment;var R={title:"Components/Select",parameters:{layout:"centered"},tags:["autodocs"]},d=R,s=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"},{label:"Fig",value:"fig"},{label:"Grape",value:"grape"}];function n(l){return e("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...l,children:[e("path",{d:"M0.5 4.5L4 1.5L7.5 4.5"}),e("path",{d:"M0.5 7.5L4 10.5L7.5 7.5"})]})}var C={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},D={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,defaultValue:"banana",children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},B={render:()=>{let[l,r]=S.useState("apple");return e("div",{style:{width:"300px"},children:[e(t.Select.Root,{items:s,value:l,onValueChange:r,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:o,value:c})=>e(t.Select.Item,{value:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:o})]},c))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]}),e("div",{style:{marginTop:"12px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Selected: ",l||"none"]})]})}},y=[{label:"Citrus",items:[{label:"Lemon",value:"lemon"},{label:"Lime",value:"lime"},{label:"Orange",value:"orange"},{label:"Grapefruit",value:"grapefruit"}]},{label:"Berries",items:[{label:"Strawberry",value:"strawberry"},{label:"Blueberry",value:"blueberry"},{label:"Raspberry",value:"raspberry"},{label:"Blackberry",value:"blackberry"}]},{label:"Tropical",items:[{label:"Mango",value:"mango"},{label:"Pineapple",value:"pineapple"},{label:"Papaya",value:"papaya"},{label:"Coconut",value:"coconut"}]}],M={render:()=>{let l=y.flatMap(r=>r.items);return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:y.map((r,o)=>e(S.Fragment,{children:[o>0&&e(t.Select.Separator,{className:"SelectSeparator"}),e(t.Select.Group,{className:"SelectGroup",children:[e(t.Select.GroupLabel,{className:"SelectGroupLabel",children:r.label}),r.items.map(({label:c,value:a})=>e(t.Select.Item,{value:a,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:c})]},a))]})]},r.label))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},W={render:()=>{let l=[{label:"Apple",value:"apple"},{label:"Banana (out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}];return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o,disabled:c})=>e(t.Select.Item,{value:o,disabled:c,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},V={render:()=>{let l=Array.from({length:30},(r,o)=>({label:`Fruit ${o+1}`,value:`fruit-${o+1}`}));return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:l.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},U={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,disabled:!0,children:[e(t.Select.Trigger,{className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:l,value:r})=>e(t.Select.Item,{value:r,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:l})]},r))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},E={render:()=>{let l=S.useId();return e("div",{style:{width:"300px"},children:[e("label",{htmlFor:l,style:{display:"block",marginBottom:"8px",fontSize:"14px",fontWeight:500,color:"var(--sl-text-primary)"},children:"Choose your favorite fruit"}),e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{id:l,className:"SelectTrigger",children:[e(t.Select.Value,{className:"SelectValue","data-placeholder":"Select a fruit"}),e(t.Select.Icon,{className:"SelectIcon",children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{className:"SelectPositioner",sideOffset:8,children:e(t.Select.Popup,{className:"SelectPopup",children:[e(t.Select.ScrollUpArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{className:"SelectList",children:s.map(({label:r,value:o})=>e(t.Select.Item,{value:o,className:"SelectItem",children:[e(t.Select.ItemIndicator,{className:"SelectItemIndicator",children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{className:"SelectItemText",children:r})]},o))}),e(t.Select.ScrollDownArrow,{className:"SelectScrollArrow",children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})]})}};var i=window.React,f=d||{},O=["Default","WithDefaultValue","Controlled","Grouped"];function F({id:l}){let r=I[l],o={...f.args||{},...r.args||{}};return(r.render||(a=>i.createElement(f.component,a)))(o,{args:o,id:l,name:l})}var G=O.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
|
|
15
|
+
(()=>{var x=Object.create;var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var I=(l,o)=>()=>(o||l((o={exports:{}}).exports,o),o.exports),T=(l,o)=>{for(var r in o)p(l,r,{get:o[r],enumerable:!0})},R=(l,o,r,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of k(o))!P.call(l,a)&&a!==r&&p(l,a,{get:()=>o[a],enumerable:!(c=L(o,a))||c.enumerable});return l};var w=(l,o,r)=>(r=l!=null?x(A(l)):{},R(o||!l||!l.__esModule?p(r,"default",{value:l,enumerable:!0}):r,l));var g=I(($,v)=>{v.exports=window.React});var y=I((z,h)=>{h.exports=window.Loomiere});var u={};T(u,{Controlled:()=>B,Default:()=>D,Disabled:()=>V,Grouped:()=>M,WithDefaultValue:()=>N,WithDisabledItems:()=>W,WithLabel:()=>E,WithScrollArrows:()=>U,default:()=>m});var S=w(g(),1),t=w(y(),1);var d=window.React;function e(l,o,r){let{children:c,...a}=o||{};return r!==void 0&&(a.key=r),c===void 0?d.createElement(l,a):Array.isArray(c)?d.createElement(l,a,...c):d.createElement(l,a,c)}var Z=d.Fragment;var C={title:"Components/Lib/Select",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=C,s=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"},{label:"Fig",value:"fig"},{label:"Grape",value:"grape"}];function n(l){return e("svg",{width:"8",height:"12",viewBox:"0 0 8 12",fill:"none",stroke:"currentColor",strokeWidth:"1.5",...l,children:[e("path",{d:"M0.5 4.5L4 1.5L7.5 4.5"}),e("path",{d:"M0.5 7.5L4 10.5L7.5 7.5"})]})}var D={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},N={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,defaultValue:"banana",children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},B={render:()=>{let[l,o]=S.useState("apple");return e("div",{style:{width:"300px"},children:[e(t.Select.Root,{items:s,value:l,onValueChange:o,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:r,value:c})=>e(t.Select.Item,{value:c,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:r})]},c))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]}),e("div",{style:{marginTop:"12px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Selected: ",l||"none"]})]})}},f=[{label:"Citrus",items:[{label:"Lemon",value:"lemon"},{label:"Lime",value:"lime"},{label:"Orange",value:"orange"},{label:"Grapefruit",value:"grapefruit"}]},{label:"Berries",items:[{label:"Strawberry",value:"strawberry"},{label:"Blueberry",value:"blueberry"},{label:"Raspberry",value:"raspberry"},{label:"Blackberry",value:"blackberry"}]},{label:"Tropical",items:[{label:"Mango",value:"mango"},{label:"Pineapple",value:"pineapple"},{label:"Papaya",value:"papaya"},{label:"Coconut",value:"coconut"}]}],M={render:()=>{let l=f.flatMap(o=>o.items);return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:f.map((o,r)=>e(S.Fragment,{children:[r>0&&e(t.Select.Separator,{}),e(t.Select.Group,{children:[e(t.Select.GroupLabel,{children:o.label}),o.items.map(({label:c,value:a})=>e(t.Select.Item,{value:a,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:c})]},a))]})]},o.label))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},W={render:()=>{let l=[{label:"Apple",value:"apple"},{label:"Banana (out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}];return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:l.map(({label:o,value:r,disabled:c})=>e(t.Select.Item,{value:r,disabled:c,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},U={render:()=>{let l=Array.from({length:30},(o,r)=>({label:`Fruit ${r+1}`,value:`fruit-${r+1}`}));return e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:l,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:l.map(({label:o,value:r})=>e(t.Select.Item,{value:r,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})}},V={render:()=>e("div",{style:{width:"300px"},children:e(t.Select.Root,{items:s,disabled:!0,children:[e(t.Select.Trigger,{children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:l,value:o})=>e(t.Select.Item,{value:o,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:l})]},o))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})})},E={render:()=>{let l=S.useId();return e("div",{style:{width:"300px"},children:[e("label",{htmlFor:l,style:{display:"block",marginBottom:"8px",fontSize:"14px",fontWeight:500,color:"var(--sl-text-primary)"},children:"Choose your favorite fruit"}),e(t.Select.Root,{items:s,children:[e(t.Select.Trigger,{id:l,children:[e(t.Select.Value,{"data-placeholder":"Select a fruit"}),e(t.Select.Icon,{children:e(n,{})})]}),e(t.Select.Portal,{children:e(t.Select.Positioner,{sideOffset:8,children:e(t.Select.Popup,{children:[e(t.Select.ScrollUpArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M9 5L5 1L1 5"})})}),e(t.Select.List,{children:s.map(({label:o,value:r})=>e(t.Select.Item,{value:r,children:[e(t.Select.ItemIndicator,{children:e("span",{className:"material-symbols-outlined SelectItemIndicatorIcon",children:"check"})}),e(t.Select.ItemText,{children:o})]},r))}),e(t.Select.ScrollDownArrow,{children:e("svg",{className:"SelectScrollArrowIcon",viewBox:"0 0 10 6",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:e("path",{d:"M1 1L5 5L9 1"})})})]})})})]})]})}};var i=window.React,b=m||{},O=["Default","WithDefaultValue","Controlled","Grouped"];function F({id:l}){let o=u[l],r={...b.args||{},...o.args||{}};return(o.render||(a=>i.createElement(b.component,a)))(r,{args:r,id:l,name:l})}var G=O.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,G));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Separator styled by the theme. A hairline in the everyday divider color (border.default), one stroke thick, with a step of space on either side. No component tokens.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Separator
|
|
5
|
+
Use `Loomiere.Separator`, this package's wrapper: it puts the class names on for you (`import { Separator } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Separator`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/separator
|
|
8
8
|
|
|
@@ -25,7 +25,7 @@ export const Horizontal: Story = {
|
|
|
25
25
|
<div style={{ padding: '16px 0' }}>
|
|
26
26
|
<p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content above</p>
|
|
27
27
|
</div>
|
|
28
|
-
<Separator
|
|
28
|
+
<Separator />
|
|
29
29
|
<div style={{ padding: '16px 0' }}>
|
|
30
30
|
<p style={{ margin: 0, color: 'var(--sl-text-primary)' }}>Content below</p>
|
|
31
31
|
</div>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var g=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var
|
|
15
|
+
(()=>{var g=Object.create;var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),S=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},z=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!f.call(e,s)&&s!==a&&d(e,s,{get:()=>t[s],enumerable:!(n=u(t,s))||n.enumerable});return e};var w=(e,t,a)=>(a=e!=null?g(b(e)):{},z(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e));var m=h((H,v)=>{v.exports=window.Loomiere});var c={};S(c,{Horizontal:()=>k,InCard:()=>C,InMenu:()=>I,InToolbar:()=>B,Vertical:()=>E,WithCustomSpacing:()=>M,default:()=>p});var o=w(m(),1);var l=window.React;function r(e,t,a){let{children:n,...s}=t||{};return a!==void 0&&(s.key=a),n===void 0?l.createElement(e,s):Array.isArray(n)?l.createElement(e,s,...n):l.createElement(e,s,n)}var T=l.Fragment;var R={title:"Components/Lib/Separator",component:o.Separator,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},p=R,k={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content above"})}),r(o.Separator,{}),r("div",{style:{padding:"16px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content below"})})]})},E={render:()=>r("div",{style:{display:"flex",alignItems:"center",height:"100px"},children:[r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Left"})}),r(o.Separator,{orientation:"vertical"}),r("div",{style:{padding:"0 16px"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Right"})})]})},I={render:()=>r("div",{style:{width:"200px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-2)"},children:[r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New File"})}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"New Folder"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-1)"}}),r("div",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",cursor:"pointer",borderRadius:"var(--sl-radius-sm)"},children:r("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-primary)"},children:"Settings"})})]})},C={render:()=>r("div",{style:{width:"400px",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-lg)",padding:"var(--sl-space-6)"},children:[r("h3",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",color:"var(--sl-text-primary)"},children:"Card Title"}),r("p",{style:{margin:0,fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-secondary)",lineHeight:"var(--sl-line-height-sm)"},children:"This is a description that provides context about the card content."}),r(o.Separator,{}),r("div",{children:r("p",{style:{margin:"0 0 var(--sl-space-2) 0",fontSize:"var(--sl-font-size-md)",color:"var(--sl-text-primary)",lineHeight:"var(--sl-line-height-sm)"},children:"Main content goes here with additional details and information."})})]})},M={render:()=>r("div",{style:{width:"300px"},children:[r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Tight spacing"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-2)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Content"})}),r(o.Separator,{style:{marginBlock:"var(--sl-space-8)"}}),r("div",{style:{padding:"8px 0"},children:r("p",{style:{margin:0,color:"var(--sl-text-primary)"},children:"Loose spacing"})})]})},B={render:()=>r("div",{style:{display:"flex",alignItems:"center",padding:"var(--sl-space-2)",background:"var(--sl-surface-base)",border:"1px solid var(--sl-border-default)",borderRadius:"var(--sl-radius-md)",gap:"var(--sl-space-2)"},children:[r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Bold"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Italic"}),r(o.Separator,{orientation:"vertical",style:{marginInline:"var(--sl-space-1)",height:"24px"}}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Link"}),r("button",{style:{padding:"var(--sl-space-2) var(--sl-space-3)",background:"transparent",border:"none",borderRadius:"var(--sl-radius-sm)",cursor:"pointer",fontSize:"var(--sl-font-size-sm)",color:"var(--sl-text-primary)"},children:"Image"})]})};var i=window.React,y=p||{},F=["Horizontal","Vertical","InMenu","InCard"];function L({id:e}){let t=c[e],a={...y.args||{},...t.args||{}};return(t.render||(s=>i.createElement(y.component,s)))(a,{args:a,id:e,name:e})}var N=F.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(L,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,N));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Slider styled by the theme. A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as Meter and Progress, thin size), and the fill is the scope's solid color, so data-color on the root re-colors it. The thumb is a field-colored knob ringed in that color. Only the knob size and the vertical length are slider tokens.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Slider
|
|
5
|
+
Use `Loomiere.Slider`, this package's wrapper: it puts the class names on for you (`import { Slider } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Slider`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/slider
|
|
8
8
|
|
|
@@ -29,11 +29,11 @@ From the Slider stories (`Default`):
|
|
|
29
29
|
```tsx
|
|
30
30
|
export const Default: Story = {
|
|
31
31
|
render: () => (
|
|
32
|
-
<Slider.Root defaultValue={25}
|
|
33
|
-
<Slider.Control
|
|
34
|
-
<Slider.Track
|
|
35
|
-
<Slider.Indicator
|
|
36
|
-
<Slider.Thumb
|
|
32
|
+
<Slider.Root defaultValue={25}>
|
|
33
|
+
<Slider.Control>
|
|
34
|
+
<Slider.Track>
|
|
35
|
+
<Slider.Indicator />
|
|
36
|
+
<Slider.Thumb />
|
|
37
37
|
</Slider.Track>
|
|
38
38
|
</Slider.Control>
|
|
39
39
|
</Slider.Root>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var V=Object.create;var i=Object.defineProperty;var
|
|
15
|
+
(()=>{var V=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var S=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),C=(t,a)=>{for(var o in a)i(t,o,{get:a[o],enumerable:!0})},E=(t,a,o,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of T(a))!w.call(t,n)&&n!==o&&i(t,n,{get:()=>a[n],enumerable:!(l=g(a,n))||l.enumerable});return t};var p=(t,a,o)=>(o=t!=null?V(h(t)):{},E(a||!t||!t.__esModule?i(o,"default",{value:t,enumerable:!0}):o,t));var R=S((A,b)=>{b.exports=window.React});var f=S((F,y)=>{y.exports=window.Loomiere});var u={};C(u,{Default:()=>L,Disabled:()=>H,Range:()=>v,WithValue:()=>D,default:()=>m});var c=p(R(),1),r=p(f(),1);var s=window.React;function e(t,a,o){let{children:l,...n}=a||{};return o!==void 0&&(n.key=o),l===void 0?s.createElement(t,n):Array.isArray(l)?s.createElement(t,n,...l):s.createElement(t,n,l)}var N=s.Fragment;var k={title:"Components/Lib/Slider",component:r.Slider.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],decorators:[t=>e("div",{style:{width:"400px",padding:"40px"},children:e(t,{})})]},m=k,L={render:()=>e(r.Slider.Root,{defaultValue:25,children:e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})})},D={render:()=>{let[t,a]=c.useState(50);return e(r.Slider.Root,{value:t,onValueChange:a,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Volume"}),e(r.Slider.Value,{children:o=>e("span",{children:[o,"%"]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})]})}},v={render:()=>{let[t,a]=c.useState([25,75]);return e(r.Slider.Root,{value:t,onValueChange:a,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Price Range"}),e(r.Slider.Value,{children:o=>e("span",{children:["$",o[0]," - $",o[1]]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{index:0,"aria-label":"Minimum price"}),e(r.Slider.Thumb,{index:1,"aria-label":"Maximum price"})]})})]})}},H={render:()=>e(r.Slider.Root,{defaultValue:60,disabled:!0,children:[e(r.Slider.Header,{children:[e(r.Slider.Label,{children:"Disabled Slider"}),e(r.Slider.Value,{children:t=>e("span",{children:[t,"%"]})})]}),e(r.Slider.Control,{children:e(r.Slider.Track,{children:[e(r.Slider.Indicator,{}),e(r.Slider.Thumb,{})]})})]})};var d=window.React,x=m||{},I=["Default","WithValue","Range","Disabled"];function M({id:t}){let a=u[t],o={...x.args||{},...a.args||{}};return(a.render||(n=>d.createElement(x.component,n)))(o,{args:o,id:t,name:t})}var j=I.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(M,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,j));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
# Splitter
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. Two or more panels and a handle between them. Not a Base UI part. It follows the window splitter pattern: the handle is a separator you drag or move with the arrow keys. Each panel's size is --sl-splitter-panel-size, so a drag can update the line without rendering the tree again. The parent gives the root its height. One panel has no size and fills what the others leave (the last panel, when every panel has a size). Px and percent mix, so a workstation can pin its sides in pixels while a list keeps a percent. Arrow keys move one key step, 5% of the splitter; Shift uses the larger step. Home and End jump to that panel's min and max. Enter collapses a collapsible panel and restores the size it had. Double-click resets to the default size. In RTL, Left and Right swap. A panel collapsed to nothing is hidden, so its contents leave the tab order. data-orientation is on the root, the panel and the handle. data-dragging is on the root and the handle while the pointer is down. data-collapsed is on a collapsed panel and on the handle that resizes it. data-disabled is on the handle. data-grip draws the grip. data-fill marks the panel that takes the leftover space. The line is one stroke. The part you grab sits on the next panel's inline-start, not centered, so it does not cover the previous panel's scrollbar. A fine pointer gets a11y.min-target (24px). A coarse pointer gets the 44px touch target. The focus ring is drawn on that grab area: a ring around the 1px line reads as a second hairline. Collapse animates with duration.normal. A drag does not animate. Reduced motion is the shared reset, which finishes every transition at once.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Splitter`, this package's component: it puts the class names on for you (`import { Splitter } 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
|
+
| `Splitter` | `data-orientation`: `horizontal`, `vertical`; `data-dragging` |
|
|
14
|
+
| `SplitterPanel` | `data-orientation`: `horizontal`, `vertical`; `data-fill`; `data-collapsed` |
|
|
15
|
+
| `ScrollAreaScrollbar` | |
|
|
16
|
+
| `SplitterHandle` | `data-orientation`: `horizontal`, `vertical`; `data-dragging`; `data-collapsed`; `data-grip`; `data-disabled` |
|
|
17
|
+
|
|
18
|
+
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.
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
From the Splitter stories (`Default`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
export const Default: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<div style={frame}>
|
|
28
|
+
<Splitter.Root orientation="horizontal">
|
|
29
|
+
<Splitter.Panel id="list" defaultSize="35%" minSize="20%" maxSize="60%">
|
|
30
|
+
<div style={pane}>List</div>
|
|
31
|
+
</Splitter.Panel>
|
|
32
|
+
<Splitter.Handle aria-label="Resize list" />
|
|
33
|
+
<Splitter.Panel id="detail">
|
|
34
|
+
<div style={pane}>Detail</div>
|
|
35
|
+
</Splitter.Panel>
|
|
36
|
+
</Splitter.Root>
|
|
37
|
+
</div>
|
|
38
|
+
),
|
|
39
|
+
};
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
The preview also shows `Vertical`, `Workstation`, `Nested`.
|