@scattered-light/loomiere-mojave 0.24.1 → 0.41.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 +1 -1
- package/dist/exports/base-ui.css +5574 -0
- package/dist/exports/base-ui.md +535 -0
- package/dist/exports/catalog.json +34 -0
- package/dist/exports/design-system/README.md +1 -1
- package/dist/exports/design-system/components/Badge/README.md +2 -1
- package/dist/exports/design-system/components/Badge/preview.html +457 -1
- package/dist/exports/design-system/components/ChecklistNotice/README.md +53 -0
- package/dist/exports/design-system/components/ChecklistNotice/preview.html +475 -0
- package/dist/exports/design-system/components/ChipPicker/README.md +43 -0
- package/dist/exports/design-system/components/ChipPicker/preview.html +475 -0
- package/dist/exports/design-system/components/DataTable/README.md +9 -2
- package/dist/exports/design-system/components/DataTable/preview.html +202 -202
- package/dist/exports/design-system/components/EmptyState/README.md +17 -3
- package/dist/exports/design-system/components/EmptyState/preview.html +170 -170
- package/dist/exports/design-system/components/FileDropZone/README.md +38 -0
- package/dist/exports/design-system/components/FileDropZone/preview.html +19 -0
- package/dist/exports/design-system/components/LineItemGrid/README.md +53 -0
- package/dist/exports/design-system/components/LineItemGrid/preview.html +475 -0
- package/dist/exports/design-system/components/MultiSelect/README.md +8 -2
- package/dist/exports/design-system/components/MultiSelect/preview.html +2 -2
- package/dist/exports/design-system/components/Notice/README.md +6 -2
- package/dist/exports/design-system/components/Notice/preview.html +2 -2
- package/dist/exports/design-system/components/ParameterBar/README.md +68 -0
- package/dist/exports/design-system/components/ParameterBar/preview.html +475 -0
- package/dist/exports/design-system/components/RadioCard/README.md +43 -0
- package/dist/exports/design-system/components/RadioCard/preview.html +19 -0
- package/dist/exports/design-system/components/Shortcuts/README.md +80 -0
- package/dist/exports/design-system/components/Shortcuts/preview.html +19 -0
- package/dist/exports/design-system/components/SourcePreview/README.md +45 -0
- package/dist/exports/design-system/components/SourcePreview/preview.html +19 -0
- package/dist/exports/design-system/components/SplitButton/README.md +2 -1
- package/dist/exports/design-system/components/SplitButton/preview.html +2 -2
- package/dist/exports/design-system/components/StatBand/README.md +34 -0
- package/dist/exports/design-system/components/StatBand/preview.html +475 -0
- package/dist/exports/design-system/components/Stepper/README.md +34 -0
- package/dist/exports/design-system/components/Stepper/preview.html +19 -0
- package/dist/exports/design-system/components/SummaryStrip/README.md +36 -0
- package/dist/exports/design-system/components/SummaryStrip/preview.html +19 -0
- package/dist/exports/design-system/components/Table/README.md +2 -1
- package/dist/exports/design-system/components/Tabs/README.md +2 -1
- package/dist/exports/design-system/components/Tabs/preview.html +1 -1
- package/dist/exports/design-system/components/Text/README.md +29 -0
- package/dist/exports/design-system/components/Text/preview.html +19 -0
- package/dist/exports/design-system/components/bundle.css +2851 -433
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +7 -24
- package/package.json +2 -2
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Stepper
|
|
2
|
+
|
|
3
|
+
The Base UI Stepper styled by the theme. Numbered steps in one row: a marker on a line, then the name and a short line under it. Done markers are filled dark with a check and the line after them is solid; the current marker is the accent fill; later markers are dashed rings on a quiet line.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Stepper` (`import { Stepper } from '@base-ui/react/stepper'` 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/stepper
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Stepper` | |
|
|
14
|
+
| `StepperStep` | `data-state`: `done`, `current`, `upcoming` |
|
|
15
|
+
| `StepperButton` | |
|
|
16
|
+
| `StepperLabel` | |
|
|
17
|
+
| `StepperMarker` | |
|
|
18
|
+
| `StepperText` | |
|
|
19
|
+
| `StepperDescription` | |
|
|
20
|
+
| `StepperStatus` | |
|
|
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 Stepper stories (`FirstStep`):
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
export const FirstStep: Story = { args: { steps, current: 0 } };
|
|
30
|
+
|
|
31
|
+
/** Step 3 with the done steps clickable to go back. */
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The preview also shows `GoBack`, `LabelsOnly`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Components" height=360 subtitle="FirstStep / GoBack / LabelsOnly" -->
|
|
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-label-minimize-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 E=Object.create;var c=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var d=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),O=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},j=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of k(t))!F.call(e,o)&&o!==r&&c(e,o,{get:()=>t[o],enumerable:!(s=R(t,o))||s.enumerable});return e};var y=(e,t,r)=>(r=e!=null?E(h(e)):{},j(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e));var S=d((G,u)=>{u.exports=window.React});var w=d(($,f)=>{f.exports=window.Loomiere});var m={};O(m,{FirstStep:()=>L,GoBack:()=>M,LabelsOnly:()=>v,default:()=>i});var g=y(S(),1),p=y(w(),1);var a=window.React;function b(e,t,r){let{children:s,...o}=t||{};return r!==void 0&&(o.key=r),s===void 0?a.createElement(e,o):Array.isArray(s)?a.createElement(e,o,...s):a.createElement(e,o,s)}var z=a.Fragment;var C={title:"Components/Lib/Stepper",component:p.Stepper,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},i=C,l=[{label:"Upload",description:"Choose the file"},{label:"Map columns",description:"Fields, dates and signs"},{label:"Review & import",description:"Pick the rows"},{label:"Review",description:"Work what you imported"}],L={args:{steps:l,current:0}},M={args:{steps:l,current:2},render:e=>{let[t,r]=g.useState(e.current);return b(p.Stepper,{steps:e.steps,current:t,onStepClick:r})}},v={args:{steps:l.map(({label:e})=>({label:e})),current:1}};var n=window.React,x=i||{},A=["FirstStep","GoBack","LabelsOnly"];function B({id:e}){let t=m[e],r={...x.args||{},...t.args||{}};return(t.render||(o=>n.createElement(x.component,o)))(r,{args:r,id:e,name:e})}var N=A.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(B,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,N));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# SummaryStrip
|
|
2
|
+
|
|
3
|
+
The Base UI SummaryStrip styled by the theme. A framed row of label / value / link items, divided by hairlines. Labels are caps; the link sits under the value. Items wrap on narrow screens.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.SummaryStrip` (`import { SummaryStrip } from '@base-ui/react/summary-strip'` 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/summary-strip
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `SummaryStrip` | |
|
|
14
|
+
| `SummaryStripItem` | |
|
|
15
|
+
| `SummaryStripLabel` | |
|
|
16
|
+
| `SummaryStripValue` | |
|
|
17
|
+
| `SummaryStripAction` | |
|
|
18
|
+
| `Button` | |
|
|
19
|
+
|
|
20
|
+
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.
|
|
21
|
+
|
|
22
|
+
## Example
|
|
23
|
+
|
|
24
|
+
From the SummaryStrip stories (`ImportSettings`):
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
export const ImportSettings: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
items: [
|
|
30
|
+
{ label: 'Source file', value: 'northwind-october-checking.csv · 15 rows', action: <Button emphasis="link">Change</Button> },
|
|
31
|
+
{ label: 'Settings', value: 'Comma · header on line 3', action: <Button emphasis="link">Edit</Button> },
|
|
32
|
+
{ label: 'Template', value: 'Chase checking' },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
```
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Components" height=160 subtitle="ImportSettings" -->
|
|
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-label-minimize-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 m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),h=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!w.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(n=g(t,r))||n.enumerable});return e};var k=(e,t,o)=>(o=e!=null?S(E(e)):{},x(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e));var u=b((F,d)=>{d.exports=window.Loomiere});var p={};h(p,{ImportSettings:()=>v,default:()=>l});var s=k(u(),1);var c=window.React;function i(e,t,o){let{children:n,...r}=t||{};return o!==void 0&&(r.key=o),n===void 0?c.createElement(e,r):Array.isArray(n)?c.createElement(e,r,...n):c.createElement(e,r,n)}var I=c.Fragment;var R={title:"Components/Lib/SummaryStrip",component:s.SummaryStrip,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},l=R,v={args:{items:[{label:"Source file",value:"northwind-october-checking.csv \xB7 15 rows",action:i(s.Button,{emphasis:"link",children:"Change"})},{label:"Settings",value:"Comma \xB7 header on line 3",action:i(s.Button,{emphasis:"link",children:"Edit"})},{label:"Template",value:"Chase checking"}]}};var a=window.React,y=l||{},j=["ImportSettings"];function B({id:e}){let t=p[e],o={...y.args||{},...t.args||{}};return(t.render||(r=>a.createElement(y.component,r)))(o,{args:o,id:e,name:e})}var C=j.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(B,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,C));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -10,9 +10,10 @@ Tokens: the table concept (--sl-table-*).
|
|
|
10
10
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
|
-
| `Table` | `data-header-style`: `caps`; `data-figures`; `data-sticky-header` |
|
|
13
|
+
| `Table` | `data-header-style`: `caps`; `data-figures`; `data-sticky-header`; `data-look`: `statement`; `data-density`: `compact`; `data-header`: `hidden`; `data-kind`: `section` |
|
|
14
14
|
| `TableFigure` | |
|
|
15
15
|
| `EmptyState` | |
|
|
16
|
+
| `TableSectionLabel` | |
|
|
16
17
|
|
|
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.
|
|
18
19
|
|
|
@@ -11,9 +11,10 @@ Base UI docs: https://base-ui.com/react/components/tabs
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
13
|
| `TabsRoot` | `data-orientation`: `vertical`; `data-size`: `sm`, `lg` |
|
|
14
|
-
| `TabsList` |
|
|
14
|
+
| `TabsList` | `data-variant`: `sheet` |
|
|
15
15
|
| `TabsTab` | `data-disabled`; `data-active` |
|
|
16
16
|
| `TabsPanel` | |
|
|
17
|
+
| `TabsTabCount` | |
|
|
17
18
|
|
|
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.
|
|
19
20
|
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var f=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var c=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),L=(t,n)=>{for(var b in n)r(t,b,{get:n[b],enumerable:!0})},w=(t,n,b,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of R(n))!x.call(t,l)&&l!==b&&r(t,l,{get:()=>n[l],enumerable:!(s=h(n,l))||s.enumerable});return t};var p=(t,n,b)=>(b=t!=null?f(S(t)):{},w(n||!t||!t.__esModule?r(b,"default",{value:t,enumerable:!0}):b,t));var d=c((
|
|
15
|
+
(()=>{var f=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var c=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),L=(t,n)=>{for(var b in n)r(t,b,{get:n[b],enumerable:!0})},w=(t,n,b,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of R(n))!x.call(t,l)&&l!==b&&r(t,l,{get:()=>n[l],enumerable:!(s=h(n,l))||s.enumerable});return t};var p=(t,n,b)=>(b=t!=null?f(S(t)):{},w(n||!t||!t.__esModule?r(b,"default",{value:t,enumerable:!0}):b,t));var d=c((F,v)=>{v.exports=window.React});var P=c((U,m)=>{m.exports=window.Loomiere});var u={};L(u,{Controlled:()=>A,Default:()=>M,ManyTabs:()=>B,SheetVariant:()=>z,Sizes:()=>C,Vertical:()=>E,WithDisabledTab:()=>D,default:()=>i});var g=p(d(),1),e=p(P(),1);var T=window.React;function a(t,n,b){let{children:s,...l}=n||{};return b!==void 0&&(l.key=b),s===void 0?T.createElement(t,l):Array.isArray(s)?T.createElement(t,l,...s):T.createElement(t,l,s)}var k=T.Fragment;var V={title:"Components/Lib/Tabs",component:e.Tabs.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],decorators:[t=>a("div",{style:{width:"600px",padding:"40px"},children:a(t,{})})]},i=V,M={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Account"}),a(e.Tabs.Tab,{value:"tab2",children:"Settings"}),a(e.Tabs.Tab,{value:"tab3",children:"Notifications"})]}),a(e.Tabs.Panel,{value:"tab1",children:[a("h3",{style:{marginTop:0},children:"Account Information"}),a("p",{children:"Manage your account settings and preferences."})]}),a(e.Tabs.Panel,{value:"tab2",children:[a("h3",{style:{marginTop:0},children:"Settings"}),a("p",{children:"Configure your application settings."})]}),a(e.Tabs.Panel,{value:"tab3",children:[a("h3",{style:{marginTop:0},children:"Notifications"}),a("p",{children:"Manage your notification preferences."})]})]})},A={render:()=>{let[t,n]=g.useState("tab1");return a("div",{children:[a(e.Tabs.Root,{value:t,onValueChange:n,children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Overview"}),a(e.Tabs.Tab,{value:"tab2",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",children:"Reports"})]}),a(e.Tabs.Panel,{value:"tab1",children:a("p",{children:["Overview content for ",t]})}),a(e.Tabs.Panel,{value:"tab2",children:a("p",{children:["Analytics content for ",t]})}),a(e.Tabs.Panel,{value:"tab3",children:a("p",{children:["Reports content for ",t]})})]}),a("div",{style:{marginTop:"16px",fontSize:"14px",color:"var(--sl-text-secondary)"},children:["Current tab: ",t]})]})}},D={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Available"}),a(e.Tabs.Tab,{value:"tab2",disabled:!0,children:"Disabled"}),a(e.Tabs.Tab,{value:"tab3",children:"Active"})]}),a(e.Tabs.Panel,{value:"tab1",children:a("p",{children:"This tab is available."})}),a(e.Tabs.Panel,{value:"tab2",children:a("p",{children:"This tab is disabled and cannot be accessed."})}),a(e.Tabs.Panel,{value:"tab3",children:a("p",{children:"This tab is active."})})]})},E={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",orientation:"vertical",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Profile"}),a(e.Tabs.Tab,{value:"tab2",children:"Security"}),a(e.Tabs.Tab,{value:"tab3",children:"Billing"}),a(e.Tabs.Tab,{value:"tab4",children:"Team"})]}),a(e.Tabs.Panel,{value:"tab1",children:[a("h3",{style:{marginTop:0},children:"Profile Settings"}),a("p",{children:"Update your profile information and photo."})]}),a(e.Tabs.Panel,{value:"tab2",children:[a("h3",{style:{marginTop:0},children:"Security Settings"}),a("p",{children:"Manage your password and two-factor authentication."})]}),a(e.Tabs.Panel,{value:"tab3",children:[a("h3",{style:{marginTop:0},children:"Billing Information"}),a("p",{children:"View and manage your billing details."})]}),a(e.Tabs.Panel,{value:"tab4",children:[a("h3",{style:{marginTop:0},children:"Team Management"}),a("p",{children:"Invite and manage team members."})]})]})},C={render:()=>a("div",{style:{display:"flex",flexDirection:"column",gap:"32px"},children:[a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Small"}),a(e.Tabs.Root,{defaultValue:"tab1","data-size":"sm",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Small tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Small tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Medium (Default)"}),a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Medium tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Medium tab panel content"})]})]}),a("div",{children:[a("h4",{style:{marginTop:0,marginBottom:"16px"},children:"Large"}),a(e.Tabs.Root,{defaultValue:"tab1","data-size":"lg",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Tab 1"}),a(e.Tabs.Tab,{value:"tab2",children:"Tab 2"}),a(e.Tabs.Tab,{value:"tab3",children:"Tab 3"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab2",children:"Large tab panel content"}),a(e.Tabs.Panel,{value:"tab3",children:"Large tab panel content"})]})]})]})},B={render:()=>a(e.Tabs.Root,{defaultValue:"tab1",children:[a(e.Tabs.List,{children:[a(e.Tabs.Tab,{value:"tab1",children:"Dashboard"}),a(e.Tabs.Tab,{value:"tab2",children:"Analytics"}),a(e.Tabs.Tab,{value:"tab3",children:"Reports"}),a(e.Tabs.Tab,{value:"tab4",children:"Settings"}),a(e.Tabs.Tab,{value:"tab5",children:"Users"}),a(e.Tabs.Tab,{value:"tab6",children:"Billing"})]}),a(e.Tabs.Panel,{value:"tab1",children:"Dashboard content"}),a(e.Tabs.Panel,{value:"tab2",children:"Analytics content"}),a(e.Tabs.Panel,{value:"tab3",children:"Reports content"}),a(e.Tabs.Panel,{value:"tab4",children:"Settings content"}),a(e.Tabs.Panel,{value:"tab5",children:"Users content"}),a(e.Tabs.Panel,{value:"tab6",children:"Billing content"})]})},z={render:()=>a(e.Tabs.Root,{defaultValue:"register",children:[a(e.Tabs.List,{"data-variant":"sheet",children:[a(e.Tabs.Tab,{value:"register",children:["Register ",a(e.Tabs.Count,{children:"7"})]}),a(e.Tabs.Tab,{value:"holdings",children:["Holdings ",a(e.Tabs.Count,{children:"2"})]}),a(e.Tabs.Tab,{value:"recs",children:"Reconciliations"})]}),a(e.Tabs.Panel,{value:"register",children:"Register content"}),a(e.Tabs.Panel,{value:"holdings",children:"Holdings content"}),a(e.Tabs.Panel,{value:"recs",children:"Reconciliations content"})]})};var o=window.React,y=i||{},N=["Default","Controlled","WithDisabledTab","Vertical"];function O({id:t}){let n=u[t],b={...y.args||{},...n.args||{}};return(n.render||(l=>o.createElement(y.component,l)))(b,{args:b,id:t,name:t})}var j=N.map(t=>o.createElement("section",{key:t,className:"ds-story"},o.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),o.createElement("div",{className:"ds-story-body"},o.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(o.createElement(o.Fragment,null,j));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# Text
|
|
2
|
+
|
|
3
|
+
The Base UI Text styled by the theme. A line of body text. md is body-base, sm body-condense, lg body-magnify: whole styles, not a font-size on its own. secondary is the quiet line under a heading or beside a control. No margin: the parent's gap spaces it.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Text` (`import { Text } from '@base-ui/react/text'` 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/text
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Text` | `data-size`: `sm`, `lg`; `data-tone`: `secondary` |
|
|
14
|
+
|
|
15
|
+
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.
|
|
16
|
+
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
From the Text stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
args: { children: 'Amounts are entered and shown in US dollars.' },
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/** The secondary tone is the quiet line under a heading or beside a control. */
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The preview also shows `Secondary`, `Sizes`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Components" height=360 subtitle="Default / Secondary / Sizes" -->
|
|
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-label-minimize-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 f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),h=(e,t)=>{for(var r in t)m(e,r,{get:t[r],enumerable:!0})},b=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of u(t))!w.call(e,o)&&o!==r&&m(e,o,{get:()=>t[o],enumerable:!(n=f(t,o))||n.enumerable});return e};var v=(e,t,r)=>(r=e!=null?x(S(e)):{},b(t||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e));var p=E((N,y)=>{y.exports=window.Loomiere});var i={};h(i,{Default:()=>A,Secondary:()=>T,Sizes:()=>j,default:()=>l});var d=v(p(),1);var c=window.React;function s(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?c.createElement(e,o):Array.isArray(n)?c.createElement(e,o,...n):c.createElement(e,o,n)}var O=c.Fragment;var R={title:"Components/Lib/Text",component:d.Text,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},l=R,A={args:{children:"Amounts are entered and shown in US dollars."}},T={args:{tone:"secondary",children:"Applies right away, on this computer only."}},j={render:()=>s("div",{style:{display:"grid",gap:"var(--sl-space-2)"},children:["sm","md","lg"].map(e=>s("div",{style:{display:"grid",gap:2},children:[s(d.Text,{size:e,children:["Primary text at ",e]}),s(d.Text,{size:e,tone:"secondary",children:["Secondary text at ",e]})]},e))})};var a=window.React,g=l||{},D=["Default","Secondary","Sizes"];function k({id:e}){let t=i[e],r={...g.args||{},...t.args||{}};return(t.render||(o=>a.createElement(g.component,o)))(r,{args:r,id:e,name:e})}var F=D.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,F));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|