@scattered-light/loomiere-mojave 0.1.0 → 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,58 @@
|
|
|
1
|
+
# NumberField
|
|
2
|
+
|
|
3
|
+
The Base UI NumberField styled by the theme. No component tokens. The input is Input (Input.css) and the label, description and error are Field's parts (Field.css). Only the stepper buttons are drawn here: two stacked halves of the field's height, as wide as the smallest control.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.NumberField` (`import { NumberField } from '@base-ui/react/number-field'` 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/number-field
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `NumberFieldRoot` | |
|
|
14
|
+
| `NumberFieldGroup` | |
|
|
15
|
+
| `NumberFieldInput` | |
|
|
16
|
+
| `NumberFieldIncrement` | |
|
|
17
|
+
| `NumberFieldDecrement` | |
|
|
18
|
+
| `NumberFieldScrubArea` | `data-scrubbing` |
|
|
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 NumberField stories (`Default`):
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
export const Default: Story = {
|
|
28
|
+
render: () => {
|
|
29
|
+
const id = React.useId();
|
|
30
|
+
return (
|
|
31
|
+
<div style={{ width: '200px' }}>
|
|
32
|
+
<NumberField.Root id={id} defaultValue={100} className="NumberFieldRoot">
|
|
33
|
+
<NumberField.ScrubArea className="NumberFieldScrubArea">
|
|
34
|
+
<label htmlFor={id} className="NumberFieldLabel">
|
|
35
|
+
Amount
|
|
36
|
+
</label>
|
|
37
|
+
<NumberField.ScrubAreaCursor className="NumberFieldScrubAreaCursor">
|
|
38
|
+
<CursorGrowIcon />
|
|
39
|
+
</NumberField.ScrubAreaCursor>
|
|
40
|
+
</NumberField.ScrubArea>
|
|
41
|
+
|
|
42
|
+
<NumberField.Group className="NumberFieldGroup">
|
|
43
|
+
<NumberField.Decrement className="NumberFieldDecrement">
|
|
44
|
+
<MinusIcon />
|
|
45
|
+
</NumberField.Decrement>
|
|
46
|
+
<NumberField.Input className="NumberFieldInput" />
|
|
47
|
+
<NumberField.Increment className="NumberFieldIncrement">
|
|
48
|
+
<PlusIcon />
|
|
49
|
+
</NumberField.Increment>
|
|
50
|
+
</NumberField.Group>
|
|
51
|
+
</NumberField.Root>
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The preview also shows `WithMinMax`, `WithStep`, `WithDecimals`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / WithMinMax / WithStep / WithDecimals" -->
|
|
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 b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var p=(r,l)=>()=>(l||r((l={exports:{}}).exports,l),l.exports),g=(r,l)=>{for(var a in l)b(r,a,{get:l[a],enumerable:!0})},C=(r,l,a,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let m of x(l))!D.call(r,m)&&m!==a&&b(r,m,{get:()=>l[m],enumerable:!(s=v(l,m))||s.enumerable});return r};var S=(r,l,a)=>(a=r!=null?y(f(r)):{},C(l||!r||!r.__esModule?b(a,"default",{value:r,enumerable:!0}):a,r));var A=p(($,I)=>{I.exports=window.React});var h=p((z,R)=>{R.exports=window.Loomiere.Base});var F={};g(F,{Default:()=>L,Disabled:()=>W,LargeStep:()=>O,ReadOnly:()=>B,WithDecimals:()=>E,WithMinMax:()=>V,WithStep:()=>M,WithoutScrubArea:()=>k,default:()=>N});var u=S(A(),1),t=S(h(),1);var i=window.React;function e(r,l,a){let{children:s,...m}=l||{};return a!==void 0&&(m.key=a),s===void 0?i.createElement(r,m):Array.isArray(s)?i.createElement(r,m,...s):i.createElement(r,m,s)}var q=i.Fragment;var G={title:"Components/NumberField",component:t.NumberField.Root,parameters:{layout:"centered"},tags:["autodocs"]},N=G;function n(r){return e("svg",{width:"26",height:"14",viewBox:"0 0 24 14",fill:"black",stroke:"white",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"})})}function o(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H5M10 5H5M5 5V0M5 5V10"})})}function c(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H10"})})}var L={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},V={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,min:0,max:10,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Rating (0-10)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},M={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:5,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount (increments of 5)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},E={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:.1,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Price"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},W={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,disabled:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Disabled field"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},k={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:50,className:"NumberFieldRoot",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Volume"}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},B={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,readOnly:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Read-only value"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},O={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Budget (hundreds)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}};var d=window.React,w=N||{},P=["Default","WithMinMax","WithStep","WithDecimals"];function j({id:r}){let l=F[r],a={...w.args||{},...l.args||{}};return(l.render||(m=>d.createElement(w.component,m)))(a,{args:a,id:r,name:r})}var H=P.map(r=>d.createElement("section",{key:r,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(j,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,H));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# OTPField
|
|
2
|
+
|
|
3
|
+
The Base UI OTPField styled by the theme. One-time code entry: a row of single-character inputs. Each slot is the same control as Input (Input.css styles .OTPFieldInput with the field pattern, hover, focus, disabled and error), cut into a square as tall as a control of the same size. data-size on the root picks the control size and the text tier of the same name, as on Input. No component tokens.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.OTPField` (`import { OTPField } from '@base-ui/react/otpfield'` 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/otpfield
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `OTPFieldRoot` | `data-size`: `sm`, `lg` |
|
|
14
|
+
| `OTPFieldInput` | |
|
|
15
|
+
| `OTPFieldSeparator` | |
|
|
16
|
+
|
|
17
|
+
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
|
+
## Example
|
|
20
|
+
|
|
21
|
+
From the OTPField stories (`Default`):
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
export const Default: Story = {
|
|
25
|
+
render: () => (
|
|
26
|
+
<Field.Root className="FieldRoot">
|
|
27
|
+
<Field.Label className="FieldLabel">Verification code</Field.Label>
|
|
28
|
+
<OTPField.Root length={6} className="OTPFieldRoot">
|
|
29
|
+
<Slots length={6} />
|
|
30
|
+
</OTPField.Root>
|
|
31
|
+
<Field.Description className="FieldDescription">
|
|
32
|
+
Enter the 6-digit code we sent to your phone.
|
|
33
|
+
</Field.Description>
|
|
34
|
+
</Field.Root>
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The preview also shows `Grouped`, `PlaceholderHints`, `Sizes`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / Grouped / PlaceholderHints / 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-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 P=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var F=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var l in o)m(t,l,{get:o[l],enumerable:!0})},D=(t,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of S(o))!E.call(t,s)&&s!==l&&m(t,s,{get:()=>o[s],enumerable:!(r=T(o,s))||r.enumerable});return t};var R=(t,o,l)=>(l=t!=null?P(x(t)):{},D(o||!t||!t.__esModule?m(l,"default",{value:t,enumerable:!0}):l,t));var h=F((H,g)=>{g.exports=window.React});var y=F((_,f)=>{f.exports=window.Loomiere.Base});var N=F((Z,b)=>{b.exports=window.Loomiere.Base});var u={};w(u,{Controlled:()=>j,Default:()=>v,Disabled:()=>$,Grouped:()=>C,Invalid:()=>A,PlaceholderHints:()=>k,Sizes:()=>I,default:()=>p});var L=R(h(),1),a=R(y(),1),n=R(N(),1);var c=window.React;function e(t,o,l){let{children:r,...s}=o||{};return l!==void 0&&(s.key=l),r===void 0?c.createElement(t,s):Array.isArray(r)?c.createElement(t,s,...r):c.createElement(t,s,r)}var q=c.Fragment;var V={title:"Components/OTPField",component:n.OTPField.Root,args:{length:6},parameters:{layout:"centered"},tags:["autodocs"]},p=V;function i({length:t,from:o=0}){return Array.from({length:t},(l,r)=>e(n.OTPField.Input,{className:"OTPFieldInput","aria-label":o+r===0?void 0:`Character ${o+r+1}`},o+r))}var v={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:"Enter the 6-digit code we sent to your phone."})]})},C={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Backup code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:[e(i,{length:3}),e(n.OTPField.Separator,{className:"OTPFieldSeparator"}),e(i,{length:3,from:3})]})]})},k={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot",children:Array.from({length:4},(t,o)=>e(n.OTPField.Input,{className:"OTPFieldInput",placeholder:"\u2022","aria-label":o===0?void 0:`Character ${o+1}`},o))})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"var(--sl-space-6)"},children:["sm","md","lg"].map(t=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:["Size ",t]}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot","data-size":t,children:e(i,{length:4})})]},t))})},A={render:()=>e(a.Field.Root,{className:"FieldRoot",invalid:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"482",children:e(i,{length:6})}),e(a.Field.Error,{className:"FieldError",match:!0,children:"That code didn't match. Check the message and try again."})]})},$={render:()=>e(a.Field.Root,{className:"FieldRoot",disabled:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"4821",children:e(i,{length:6})})]})},j={render:function(){let[o,l]=L.useState("");return e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",value:o,onValueChange:l,children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:o.length===6?"Code complete.":`${6-o.length} characters left.`})]})}};var d=window.React,O=p||{},B=["Default","Grouped","PlaceholderHints","Sizes"];function z({id:t}){let o=u[t],l={...O.args||{},...o.args||{}};return(o.render||(s=>d.createElement(O.component,s)))(l,{args:l,id:t,name:t})}var M=B.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(z,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,M));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# Popover
|
|
2
|
+
|
|
3
|
+
The Base UI Popover styled by the theme.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Popover` (`import { Popover } from '@base-ui/react/popover'` 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/popover
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `PopoverTrigger` | |
|
|
14
|
+
| `PopoverBackdrop` | |
|
|
15
|
+
| `PopoverPositioner` | |
|
|
16
|
+
| `PopoverPopup` | `data-starting-style`; `data-ending-style` |
|
|
17
|
+
| `PopoverTitle` | |
|
|
18
|
+
| `PopoverDescription` | |
|
|
19
|
+
| `PopoverClose` | |
|
|
20
|
+
| `PopoverArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
|
|
21
|
+
| `PopoverArrowFill` | |
|
|
22
|
+
| `PopoverArrowOuterStroke` | |
|
|
23
|
+
| `PopoverArrowInnerStroke` | |
|
|
24
|
+
|
|
25
|
+
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.
|
|
26
|
+
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
From the Popover stories (`Default`):
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
export const Default: Story = {
|
|
33
|
+
render: () => (
|
|
34
|
+
<Popover.Root>
|
|
35
|
+
<Popover.Trigger className="PopoverTrigger Button">
|
|
36
|
+
<BellIcon aria-label="Notifications" />
|
|
37
|
+
</Popover.Trigger>
|
|
38
|
+
<Popover.Portal>
|
|
39
|
+
<Popover.Positioner className="PopoverPositioner" sideOffset={8}>
|
|
40
|
+
<Popover.Popup className="PopoverPopup">
|
|
41
|
+
<Popover.Arrow className="PopoverArrow">
|
|
42
|
+
<ArrowSvg />
|
|
43
|
+
</Popover.Arrow>
|
|
44
|
+
<Popover.Title className="PopoverTitle">Notifications</Popover.Title>
|
|
45
|
+
<Popover.Description className="PopoverDescription">
|
|
46
|
+
You are all caught up. Good job!
|
|
47
|
+
</Popover.Description>
|
|
48
|
+
</Popover.Popup>
|
|
49
|
+
</Popover.Positioner>
|
|
50
|
+
</Popover.Portal>
|
|
51
|
+
</Popover.Root>
|
|
52
|
+
),
|
|
53
|
+
};
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
The preview also shows `WithCloseButton`, `WithForm`, `Placement`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Overlays" height=480 subtitle="Default / WithCloseButton / WithForm / Placement" -->
|
|
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 c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("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:"PopoverArrowFill"}),o("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:"PopoverArrowOuterStroke"}),o("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:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:o(D,{"aria-label":"Notifications"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Notifications"}),o(e.Popover.Description,{className:"PopoverDescription",children:"You are all caught up. Good job!"})]})})})]})},S={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Close,{className:"PopoverClose","aria-label":"Close",children:o(k,{})}),o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Settings"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let r=P.useId(),t=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Get in touch"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:r,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:t,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(r=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:r}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",side:r,sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Description,{className:"PopoverDescription",children:["Popover on the ",r]})]})})})]},r))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{className:"PopoverBackdrop",style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Modal-like popover"}),o(e.Popover.Description,{className:"PopoverDescription",children:"This popover has a backdrop to focus attention."})]})})]})]})};var i=window.React,N=v||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:r}){let t=m[r],s={...N.args||{},...t.args||{}};return(t.render||(a=>i.createElement(N.component,a)))(s,{args:s,id:r,name:r})}var j=I.map(r=>i.createElement("section",{key:r,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# PreviewCard
|
|
2
|
+
|
|
3
|
+
The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a maximize-lg title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` 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/preview-card
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `PreviewCardTrigger` | |
|
|
14
|
+
| `PreviewCardPositioner` | |
|
|
15
|
+
| `PreviewCardPopup` | `data-starting-style`; `data-ending-style` |
|
|
16
|
+
| `PreviewCardImage` | |
|
|
17
|
+
| `PreviewCardContent` | |
|
|
18
|
+
| `PreviewCardTitle` | |
|
|
19
|
+
| `PreviewCardDescription` | |
|
|
20
|
+
| `PreviewCardArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
|
|
21
|
+
| `PreviewCardArrowFill` | |
|
|
22
|
+
| `PreviewCardArrowOuterStroke` | |
|
|
23
|
+
| `PreviewCardArrowInnerStroke` | |
|
|
24
|
+
|
|
25
|
+
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.
|
|
26
|
+
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
From the PreviewCard stories (`Default`):
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
export const Default: Story = {
|
|
33
|
+
render: () => (
|
|
34
|
+
<div style={{ padding: '100px' }}>
|
|
35
|
+
<p style={{ fontSize: '16px', lineHeight: '1.6', maxWidth: '600px' }}>
|
|
36
|
+
The principles of good{' '}
|
|
37
|
+
<PreviewCard.Root>
|
|
38
|
+
<PreviewCard.Trigger
|
|
39
|
+
className="PreviewCardTrigger"
|
|
40
|
+
href="https://en.wikipedia.org/wiki/Typography"
|
|
41
|
+
>
|
|
42
|
+
typography
|
|
43
|
+
</PreviewCard.Trigger>
|
|
44
|
+
<PreviewCard.Portal>
|
|
45
|
+
<PreviewCard.Positioner className="PreviewCardPositioner" sideOffset={8}>
|
|
46
|
+
<PreviewCard.Popup className="PreviewCardPopup">
|
|
47
|
+
<PreviewCard.Arrow className="PreviewCardArrow">
|
|
48
|
+
<ArrowSvg />
|
|
49
|
+
</PreviewCard.Arrow>
|
|
50
|
+
<img
|
|
51
|
+
width="448"
|
|
52
|
+
height="300"
|
|
53
|
+
className="PreviewCardImage"
|
|
54
|
+
src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
|
|
55
|
+
alt="Station Hofplein signage in Rotterdam, Netherlands"
|
|
56
|
+
/>
|
|
57
|
+
<div className="PreviewCardContent">
|
|
58
|
+
<p className="PreviewCardDescription">
|
|
59
|
+
<strong>Typography</strong> is the art and science of arranging type to make written
|
|
60
|
+
language clear, visually appealing, and effective in communication.
|
|
61
|
+
</p>
|
|
62
|
+
</div>
|
|
63
|
+
</PreviewCard.Popup>
|
|
64
|
+
</PreviewCard.Positioner>
|
|
65
|
+
</PreviewCard.Portal>
|
|
66
|
+
</PreviewCard.Root>{' '}
|
|
67
|
+
remain into the digital age.
|
|
68
|
+
</p>
|
|
69
|
+
</div>
|
|
70
|
+
),
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The preview also shows `WithTitle`, `TextOnly`, `MultipleLinks`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Overlays" height=480 subtitle="Default / WithTitle / TextOnly / MultipleLinks" -->
|
|
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 C=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var N=(i,a)=>()=>(a||i((a={exports:{}}).exports,a),a.exports),y=(i,a)=>{for(var t in a)l(i,t,{get:a[t],enumerable:!0})},T=(i,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of h(a))!f.call(i,o)&&o!==t&&l(i,o,{get:()=>a[o],enumerable:!(s=g(a,o))||s.enumerable});return i};var x=(i,a,t)=>(t=i!=null?C(u(i)):{},T(a||!i||!i.__esModule?l(t,"default",{value:i,enumerable:!0}):t,i));var c=N((E,v)=>{v.exports=window.Loomiere.Base});var w={};y(w,{Default:()=>S,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>R,default:()=>P});var r=x(c(),1);var p=window.React;function e(i,a,t){let{children:s,...o}=a||{};return t!==void 0&&(o.key=t),s===void 0?p.createElement(i,o):Array.isArray(s)?p.createElement(i,o,...s):p.createElement(i,o,s)}var W=p.Fragment;var A={title:"Components/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs"]},P=A;function d(i){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...i,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:"PreviewCardArrowFill"}),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:"PreviewCardArrowOuterStroke"}),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:"PreviewCardArrowInnerStroke"})]})}var S={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300",alt:"Station Hofplein signage in Rotterdam, Netherlands"}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},R={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Design Principles"}),e("p",{className:"PreviewCardDescription",children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Documentation"}),e("p",{className:"PreviewCardDescription",children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"HTML"}),e("p",{className:"PreviewCardDescription",children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"CSS"}),e("p",{className:"PreviewCardDescription",children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"JavaScript"}),e("p",{className:"PreviewCardDescription",children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears below the link."})})]})})})]})]})]})};var n=window.React,m=P||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function D({id:i}){let a=w[i],t={...m.args||{},...a.args||{}};return(a.render||(o=>n.createElement(m.component,o)))(t,{args:t,id:i,name:i})}var M=H.map(i=>n.createElement("section",{key:i,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},i.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(D,{id:i}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,M));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Progress
|
|
2
|
+
|
|
3
|
+
The Base UI Progress styled by the theme. A gauge (tokens/semantic/gauge.json), the same bar as Meter. 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).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Progress` (`import { Progress } from '@base-ui/react/progress'` 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/progress
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `ProgressRoot` | `data-indeterminate`; `data-size`: `sm`, `lg` |
|
|
14
|
+
| `ProgressHeader` | |
|
|
15
|
+
| `ProgressLabel` | |
|
|
16
|
+
| `ProgressValue` | |
|
|
17
|
+
| `ProgressTrack` | |
|
|
18
|
+
| `ProgressIndicator` | |
|
|
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 Progress stories (`Default`):
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
export const Default: Story = {
|
|
28
|
+
render: () => {
|
|
29
|
+
const [value, setValue] = React.useState(20);
|
|
30
|
+
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
const interval = setInterval(() => {
|
|
33
|
+
setValue((current) => {
|
|
34
|
+
const next = current + Math.random() * 25;
|
|
35
|
+
return next >= 100 ? 100 : Math.round(next);
|
|
36
|
+
});
|
|
37
|
+
}, 1000);
|
|
38
|
+
return () => clearInterval(interval);
|
|
39
|
+
}, []);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div style={{ width: '400px' }}>
|
|
43
|
+
<Progress.Root className="ProgressRoot" value={value}>
|
|
44
|
+
<div className="ProgressHeader">
|
|
45
|
+
<Progress.Label className="ProgressLabel">Export data</Progress.Label>
|
|
46
|
+
<Progress.Value className="ProgressValue" />
|
|
47
|
+
</div>
|
|
48
|
+
<Progress.Track className="ProgressTrack">
|
|
49
|
+
<Progress.Indicator className="ProgressIndicator" />
|
|
50
|
+
</Progress.Track>
|
|
51
|
+
</Progress.Root>
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The preview also shows `Static`, `Indeterminate`, `WithoutLabel`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Feedback" height=480 subtitle="Default / Static / Indeterminate / WithoutLabel" -->
|
|
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 b=Object.create;var g=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var P=(r,a)=>()=>(a||r((a={exports:{}}).exports,a),a.exports),I=(r,a)=>{for(var o in a)g(r,o,{get:a[o],enumerable:!0})},S=(r,a,o,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of L(a))!T.call(r,t)&&t!==o&&g(r,t,{get:()=>a[t],enumerable:!(c=k(a,t))||c.enumerable});return r};var u=(r,a,o)=>(o=r!=null?b(x(r)):{},S(a||!r||!r.__esModule?g(o,"default",{value:r,enumerable:!0}):o,r));var p=P(($,N)=>{N.exports=window.React});var R=P((U,v)=>{v.exports=window.Loomiere.Base});var m={};I(m,{Default:()=>V,ErrorVariant:()=>W,Indeterminate:()=>h,LargeSize:()=>D,MultipleProgress:()=>A,SmallSize:()=>M,Static:()=>w,SuccessVariant:()=>j,WarningVariant:()=>z,WithoutLabel:()=>E,WithoutValue:()=>H,default:()=>i});var n=u(p(),1),s=u(R(),1);var d=window.React;function e(r,a,o){let{children:c,...t}=a||{};return o!==void 0&&(t.key=o),c===void 0?d.createElement(r,t):Array.isArray(c)?d.createElement(r,t,...c):d.createElement(r,t,c)}var Z=d.Fragment;var f={title:"Components/Progress",parameters:{layout:"centered"},tags:["autodocs"]},i=f,V={render:()=>{let[r,a]=n.useState(20);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>{let t=c+Math.random()*25;return t>=100?100:Math.round(t)})},1e3);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:r,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Export data"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})}},w={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:65,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Upload progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},h={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:null,children:[e("div",{className:"ProgressHeader",children:e(s.Progress.Label,{className:"ProgressLabel",children:"Loading..."})}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},E={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:45,children:e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})})})},H={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:75,children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Installation progress"}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},M={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:60,"data-size":"sm",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Small progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},D={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:80,"data-size":"lg",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Large progress"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},j={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:100,"data-color":"success",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Complete!"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},z={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:85,"data-color":"warning",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage almost full"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},W={render:()=>e("div",{style:{width:"400px"},children:e(s.Progress.Root,{className:"ProgressRoot",value:95,"data-color":"error",children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:"Storage critical"}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]})})},A={render:()=>{let[r,a]=n.useState([{id:1,name:"Document.pdf",progress:45},{id:2,name:"Image.jpg",progress:78},{id:3,name:"Video.mp4",progress:12}]);return n.useEffect(()=>{let o=setInterval(()=>{a(c=>c.map(t=>({...t,progress:Math.min(100,t.progress+Math.random()*15)})))},800);return()=>clearInterval(o)},[]),e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"16px"},children:r.map(o=>e(s.Progress.Root,{className:"ProgressRoot",value:o.progress,children:[e("div",{className:"ProgressHeader",children:[e(s.Progress.Label,{className:"ProgressLabel",children:o.name}),e(s.Progress.Value,{className:"ProgressValue"})]}),e(s.Progress.Track,{className:"ProgressTrack",children:e(s.Progress.Indicator,{className:"ProgressIndicator"})})]},o.id))})}};var l=window.React,y=i||{},F=["Default","Static","Indeterminate","WithoutLabel"];function O({id:r}){let a=m[r],o={...y.args||{},...a.args||{}};return(a.render||(t=>l.createElement(y.component,t)))(o,{args:o,id:r,name:r})}var B=F.map(r=>l.createElement("section",{key:r,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(O,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Radio
|
|
2
|
+
|
|
3
|
+
The Base UI Radio styled by the theme. Same box as Checkbox, always round. Sizes follow the label the same way, and the dot is a share of the circle (check.dot-scale).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Radio` (`import { Radio } from '@base-ui/react/radio'` 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/radio
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `RadioRoot` | `data-size`: `sm`, `lg`; `data-disabled` |
|
|
14
|
+
| `RadioButton` | `data-unchecked`; `data-checked` |
|
|
15
|
+
| `RadioIndicator` | `data-unchecked` |
|
|
16
|
+
| `RadioLabel` | |
|
|
17
|
+
| `RadioGroup` | |
|
|
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 Radio stories (`Default`):
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
export const Default: Story = {
|
|
27
|
+
render: () => {
|
|
28
|
+
const id = React.useId();
|
|
29
|
+
const [value, setValue] = React.useState('apple');
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<RadioGroup
|
|
33
|
+
className="RadioGroup"
|
|
34
|
+
value={value}
|
|
35
|
+
onValueChange={setValue}
|
|
36
|
+
aria-labelledby={id}
|
|
37
|
+
>
|
|
38
|
+
<div id={id} style={{ marginBottom: '12px', fontWeight: 600 }}>
|
|
39
|
+
Choose a fruit
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<label className="RadioRoot">
|
|
43
|
+
<Radio.Root value="apple" className="RadioButton">
|
|
44
|
+
<Radio.Indicator className="RadioIndicator">
|
|
45
|
+
<span className="RadioIcon" />
|
|
46
|
+
</Radio.Indicator>
|
|
47
|
+
</Radio.Root>
|
|
48
|
+
<span className="RadioLabel">Apple</span>
|
|
49
|
+
</label>
|
|
50
|
+
|
|
51
|
+
<label className="RadioRoot">
|
|
52
|
+
<Radio.Root value="banana" className="RadioButton">
|
|
53
|
+
<Radio.Indicator className="RadioIndicator">
|
|
54
|
+
<span className="RadioIcon" />
|
|
55
|
+
</Radio.Indicator>
|
|
56
|
+
</Radio.Root>
|
|
57
|
+
<span className="RadioLabel">Banana</span>
|
|
58
|
+
</label>
|
|
59
|
+
|
|
60
|
+
<label className="RadioRoot">
|
|
61
|
+
<Radio.Root value="cherry" className="RadioButton">
|
|
62
|
+
<Radio.Indicator className="RadioIndicator">
|
|
63
|
+
<span className="RadioIcon" />
|
|
64
|
+
</Radio.Indicator>
|
|
65
|
+
</Radio.Root>
|
|
66
|
+
<span className="RadioLabel">Cherry</span>
|
|
67
|
+
</label>
|
|
68
|
+
</RadioGroup>
|
|
69
|
+
);
|
|
70
|
+
},
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The preview also shows `Uncontrolled`, `WithDisabled`, `SmallSize`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / Uncontrolled / WithDisabled / SmallSize" -->
|
|
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 B=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var p=(e,s)=>()=>(s||e((s={exports:{}}).exports,s),s.exports),V=(e,s)=>{for(var t in s)m(e,t,{get:s[t],enumerable:!0})},C=(e,s,t,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of L(s))!G.call(e,d)&&d!==t&&m(e,d,{get:()=>s[d],enumerable:!(l=h(s,d))||l.enumerable});return e};var u=(e,s,t)=>(t=e!=null?B(z(e)):{},C(s||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e));var v=p((Y,I)=>{I.exports=window.React});var g=p((Z,y)=>{y.exports=window.Loomiere.Base});var f=p((q,x)=>{x.exports=window.Loomiere.Base});var b={};V(b,{Default:()=>D,FormExample:()=>j,HorizontalLayout:()=>A,LargeSize:()=>O,SmallSize:()=>F,Uncontrolled:()=>E,WithDescriptions:()=>M,WithDisabled:()=>W,WithoutLabels:()=>P,default:()=>N});var i=u(v(),1),o=u(g(),1),n=u(f(),1);var r=window.React;function a(e,s,t){let{children:l,...d}=s||{};return t!==void 0&&(d.key=t),l===void 0?r.createElement(e,d):Array.isArray(l)?r.createElement(e,d,...l):r.createElement(e,d,l)}var J=r.Fragment;var w={title:"Components/Radio",parameters:{layout:"centered"},tags:["autodocs"]},N=w,D={render:()=>{let e=i.useId(),[s,t]=i.useState("apple");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a fruit"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"apple",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Apple"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"banana",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Banana"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"cherry",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Cherry"})]})]})}},E={render:()=>{let e=i.useId();return a(n.RadioGroup,{className:"RadioGroup",defaultValue:"medium","aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}},W={render:()=>{let e=i.useId(),[s,t]=i.useState("option1");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose an option"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option1",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Available option"})]}),a("label",{className:"RadioRoot","data-disabled":!0,children:[a(o.Radio.Root,{value:"option2",className:"RadioButton",disabled:!0,children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Disabled option"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"option3",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Another available option"})]})]})}},F={render:()=>{let e=i.useId(),[s,t]=i.useState("email");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"14px"},children:"Notification method"}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"email",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Email"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"sms",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"SMS"})]}),a("label",{className:"RadioRoot","data-size":"sm",children:[a(o.Radio.Root,{value:"push",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Push notification"})]})]})}},O={render:()=>{let e=i.useId(),[s,t]=i.useState("credit");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600,fontSize:"18px"},children:"Payment method"}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"credit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Credit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"debit",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Debit card"})]}),a("label",{className:"RadioRoot","data-size":"lg",children:[a(o.Radio.Root,{value:"paypal",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"PayPal"})]})]})}},A={render:()=>{let e=i.useId(),[s,t]=i.useState("yes");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Do you agree?"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"24px"},children:[a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"yes",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Yes"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"no",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"No"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"maybe",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Maybe"})]})]})]})}},M={render:()=>{let e=i.useId(),[s,t]=i.useState("starter");return a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Choose a plan"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"starter",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Starter"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Perfect for individuals and small projects"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"professional",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Professional"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"For growing teams and businesses"})]})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"enterprise",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("div",{children:[a("span",{className:"RadioLabel",children:"Enterprise"}),a("div",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",marginTop:"4px"},children:"Advanced features for large organizations"})]})]})]})}},P={render:()=>{let e=i.useId(),[s,t]=i.useState("1");return a("div",{children:[a("div",{id:e,style:{marginBottom:"12px",fontWeight:600},children:"Select option"}),a(n.RadioGroup,{className:"RadioGroup",value:s,onValueChange:t,"aria-labelledby":e,style:{flexDirection:"row",gap:"16px"},children:[a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"1",className:"RadioButton","aria-label":"Option 1",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"2",className:"RadioButton","aria-label":"Option 2",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})}),a("label",{className:"RadioRoot",children:a(o.Radio.Root,{value:"3",className:"RadioButton","aria-label":"Option 3",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})})})]})]})}},j={render:()=>{let e=i.useId(),s=i.useId(),t=i.useId(),[l,d]=i.useState({size:"medium",color:"blue",delivery:"standard"});return a("form",{onSubmit:c=>{c.preventDefault(),console.log("Form submitted:",l),alert(`Selected: Size ${l.size}, Color ${l.color}, Delivery ${l.delivery}`)},style:{width:"300px"},children:[a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.size,onValueChange:c=>d({...l,size:c}),"aria-labelledby":e,children:[a("h3",{id:e,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Size"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"small",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Small"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"medium",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Medium"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"large",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Large"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.color,onValueChange:c=>d({...l,color:c}),"aria-labelledby":s,children:[a("h3",{id:s,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Color"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"blue",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Blue"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"red",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Red"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"green",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Green"})]})]})}),a("div",{style:{marginBottom:"24px"},children:a(n.RadioGroup,{className:"RadioGroup",value:l.delivery,onValueChange:c=>d({...l,delivery:c}),"aria-labelledby":t,children:[a("h3",{id:t,style:{margin:"0 0 12px 0",fontSize:"16px",fontWeight:600},children:"Delivery"}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"standard",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Standard (5-7 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"express",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Express (2-3 days)"})]}),a("label",{className:"RadioRoot",children:[a(o.Radio.Root,{value:"overnight",className:"RadioButton",children:a(o.Radio.Indicator,{className:"RadioIndicator",children:a("span",{className:"RadioIcon"})})}),a("span",{className:"RadioLabel",children:"Overnight"})]})]})}),a("button",{type:"submit",className:"Button",children:"Submit Order"})]})}};var R=window.React,S=N||{},$=["Default","Uncontrolled","WithDisabled","SmallSize"];function T({id:e}){let s=b[e],t={...S.args||{},...s.args||{}};return(s.render||(d=>R.createElement(S.component,d)))(t,{args:t,id:e,name:e})}var k=$.map(e=>R.createElement("section",{key:e,className:"ds-story"},R.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),R.createElement("div",{className:"ds-story-body"},R.createElement(T,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(R.createElement(R.Fragment,null,k));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|