@scattered-light/loomiere-mojave 0.1.1 → 0.3.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 +205 -0
- package/dist/exports/catalog.json +101 -1
- package/dist/exports/design-system/README.md +197 -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/IconButton/README.md +31 -0
- package/dist/exports/design-system/components/IconButton/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 +9954 -0
- package/dist/exports/design-system/components/bundle.js +5 -0
- package/dist/exports/design-system/components/index.d.ts +118 -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/dist/exports/tokens.dtcg.json +3 -3
- package/dist/tokens.css +1 -1
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.js +1 -1
- package/dist/tokens.json +5 -4
- package/package.json +4 -2
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Disclosure" height=480 subtitle="Default / SingleOpen / Separated / Bordered" -->
|
|
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 v=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(a,c)=>()=>(c||a((c={exports:{}}).exports,c),c.exports),S=(a,c)=>{for(var r in c)l(a,r,{get:c[r],enumerable:!0})},P=(a,c,r,s)=>{if(c&&typeof c=="object"||typeof c=="function")for(let n of I(c))!h.call(a,n)&&n!==r&&l(a,n,{get:()=>c[n],enumerable:!(s=y(c,n))||s.enumerable});return a};var T=(a,c,r)=>(r=a!=null?v(u(a)):{},P(c||!a||!a.__esModule?l(r,"default",{value:a,enumerable:!0}):r,a));var p=f((_,g)=>{g.exports=window.Loomiere.Base});var A={};S(A,{Bordered:()=>b,Default:()=>x,Separated:()=>w,SingleOpen:()=>z,default:()=>m});var o=T(p(),1);var t=window.React;function e(a,c,r){let{children:s,...n}=c||{};return r!==void 0&&(n.key=r),s===void 0?t.createElement(a,n):Array.isArray(s)?t.createElement(a,n,...s):t.createElement(a,n,s)}var k=t.Fragment;function i({name:a,className:c,...r}){let s=["material-symbols-outlined",c].filter(Boolean).join(" ");return e("span",{className:s,...r,children:a})}var H={title:"Components/Accordion",component:o.Accordion.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=H,x={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["What is Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI is a library of headless (unstyled) React components and low-level hooks. You gain complete control over your app's CSS and accessibility features."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Why use Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI gives you complete control over styling while handling all the complex accessibility and interaction logic for you."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["How do I style it?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"You apply class names to each component part and style them with CSS. Base UI handles all the accessibility and interaction logic automatically."})})]})]})})},z={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],multiple:!1,children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Only one section can be open at a time. Try opening another section - this one will close."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Opening this will automatically close Section 1."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This is a common pattern for FAQs and settings panels."})})]})]})})},w={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"separated",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Notice the gaps between items and individual borders. Each item looks like a separate card."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant is great for settings panels or feature lists."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Each item is visually distinct and separated."})})]})]})})},b={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"bordered",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Bordered Accordion",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant has a border around the entire accordion container."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Another Section",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"All items are contained within a single bordered container."})})]})]})})};var d=window.React,N=m||{},C=["Default","SingleOpen","Separated","Bordered"];function R({id:a}){let c=A[a],r={...N.args||{},...c.args||{}};return(c.render||(n=>d.createElement(N.component,n)))(r,{args:r,id:a,name:a})}var E=C.map(a=>d.createElement("section",{key:a,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(R,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,E));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# AlertDialog
|
|
2
|
+
|
|
3
|
+
The Base UI AlertDialog styled by the theme. No component tokens and no rules of its own. An alert dialog looks exactly like a dialog, so its backdrop, popup, title, description and actions are styled with the dialog's in Dialog.css. Its buttons are .Button elements: the confirming one bold, a cancel quiet, and a destructive one bold with data-color="error".
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.AlertDialog` (`import { AlertDialog } from '@base-ui/react/alert-dialog'` 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/alert-dialog
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
|
|
14
|
+
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.
|
|
15
|
+
|
|
16
|
+
## Example
|
|
17
|
+
|
|
18
|
+
From the AlertDialog stories (`Default`):
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
export const Default: Story = {
|
|
22
|
+
render: () => (
|
|
23
|
+
<AlertDialog.Root>
|
|
24
|
+
<AlertDialog.Trigger className="Button">
|
|
25
|
+
Delete Account
|
|
26
|
+
</AlertDialog.Trigger>
|
|
27
|
+
<AlertDialog.Portal>
|
|
28
|
+
<AlertDialog.Backdrop className="AlertDialogBackdrop" />
|
|
29
|
+
<AlertDialog.Popup className="AlertDialogPopup">
|
|
30
|
+
<AlertDialog.Title className="AlertDialogTitle">
|
|
31
|
+
Are you absolutely sure?
|
|
32
|
+
</AlertDialog.Title>
|
|
33
|
+
<AlertDialog.Description className="AlertDialogDescription">
|
|
34
|
+
This action cannot be undone. This will permanently delete your account
|
|
35
|
+
and remove your data from our servers.
|
|
36
|
+
</AlertDialog.Description>
|
|
37
|
+
<div className="AlertDialogActions">
|
|
38
|
+
<AlertDialog.Close className="Button" data-variant="ghost">
|
|
39
|
+
Cancel
|
|
40
|
+
</AlertDialog.Close>
|
|
41
|
+
<AlertDialog.Close className="Button" data-color="error">
|
|
42
|
+
Delete Account
|
|
43
|
+
</AlertDialog.Close>
|
|
44
|
+
</div>
|
|
45
|
+
</AlertDialog.Popup>
|
|
46
|
+
</AlertDialog.Portal>
|
|
47
|
+
</AlertDialog.Root>
|
|
48
|
+
),
|
|
49
|
+
};
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
The preview also shows `Warning`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Overlays" height=240 subtitle="Default / Warning" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var u=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),C=(e,o)=>{for(var r in o)c(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of y(o))!f.call(e,l)&&l!==r&&c(e,l,{get:()=>o[l],enumerable:!(s=A(o,l))||s.enumerable});return e};var B=(e,o,r)=>(r=e!=null?u(N(e)):{},T(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e));var D=v((b,p)=>{p.exports=window.Loomiere.Base});var m={};C(m,{Default:()=>w,Warning:()=>E,default:()=>g});var a=B(D(),1);var i=window.React;function t(e,o,r){let{children:s,...l}=o||{};return r!==void 0&&(l.key=r),s===void 0?i.createElement(e,l):Array.isArray(s)?i.createElement(e,l,...s):i.createElement(e,l,s)}var k=i.Fragment;var R={title:"Components/AlertDialog",component:a.AlertDialog.Root,parameters:{layout:"centered"},tags:["autodocs"]},g=R,w={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button",children:"Delete Account"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Are you absolutely sure?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This action cannot be undone. This will permanently delete your account and remove your data from our servers."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),t(a.AlertDialog.Close,{className:"Button","data-color":"error",children:"Delete Account"})]})]})]})]})},E={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button","data-variant":"outline",children:"Clear All Data"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Clear all data?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This will remove all your saved preferences and settings. You'll need to set everything up again."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Keep Data"}),t(a.AlertDialog.Close,{className:"Button",children:"Clear All"})]})]})]})]})};var n=window.React,d=g||{},P=["Default","Warning"];function x({id:e}){let o=m[e],r={...d.args||{},...o.args||{}};return(o.render||(l=>n.createElement(d.component,l)))(r,{args:r,id:e,name:e})}var h=P.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(x,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,h));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Autocomplete
|
|
2
|
+
|
|
3
|
+
The Base UI Autocomplete styled by the theme. No component tokens. The input is Input (Input.css), the clear button is an icon button, and the list is a popup of item rows with the shared group label, separator and empty message.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Autocomplete` (`import { Autocomplete } from '@base-ui/react/autocomplete'` 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/autocomplete
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `AutocompleteRoot` | |
|
|
14
|
+
| `AutocompleteInput` | |
|
|
15
|
+
| `AutocompleteClear` | |
|
|
16
|
+
| `AutocompletePositioner` | |
|
|
17
|
+
| `AutocompletePopup` | `data-ending-style` |
|
|
18
|
+
| `AutocompleteList` | |
|
|
19
|
+
| `AutocompleteItem` | `data-highlighted`; `data-selected`; `data-disabled` |
|
|
20
|
+
| `AutocompleteGroupLabel` | |
|
|
21
|
+
| `AutocompleteSeparator` | |
|
|
22
|
+
| `AutocompleteEmpty` | |
|
|
23
|
+
|
|
24
|
+
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.
|
|
25
|
+
|
|
26
|
+
## Example
|
|
27
|
+
|
|
28
|
+
From the Autocomplete stories (`Default`):
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
export const Default: Story = {
|
|
32
|
+
render: () => (
|
|
33
|
+
<div className="AutocompleteRoot" style={{ width: '300px' }}>
|
|
34
|
+
<Autocomplete.Root>
|
|
35
|
+
<div style={{ position: 'relative' }}>
|
|
36
|
+
<Autocomplete.Input
|
|
37
|
+
className="AutocompleteInput"
|
|
38
|
+
placeholder="Search fruits..."
|
|
39
|
+
/>
|
|
40
|
+
<Autocomplete.Clear className="AutocompleteClear">×</Autocomplete.Clear>
|
|
41
|
+
</div>
|
|
42
|
+
<Autocomplete.Portal>
|
|
43
|
+
<Autocomplete.Positioner className="AutocompletePositioner">
|
|
44
|
+
<Autocomplete.Popup className="AutocompletePopup">
|
|
45
|
+
<Autocomplete.List className="AutocompleteList">
|
|
46
|
+
{fruits.map((fruit) => (
|
|
47
|
+
<Autocomplete.Item
|
|
48
|
+
key={fruit}
|
|
49
|
+
value={fruit}
|
|
50
|
+
className="AutocompleteItem"
|
|
51
|
+
>
|
|
52
|
+
{fruit}
|
|
53
|
+
</Autocomplete.Item>
|
|
54
|
+
))}
|
|
55
|
+
<Autocomplete.Empty className="AutocompleteEmpty">
|
|
56
|
+
No results found
|
|
57
|
+
</Autocomplete.Empty>
|
|
58
|
+
</Autocomplete.List>
|
|
59
|
+
</Autocomplete.Popup>
|
|
60
|
+
</Autocomplete.Positioner>
|
|
61
|
+
</Autocomplete.Portal>
|
|
62
|
+
</Autocomplete.Root>
|
|
63
|
+
</div>
|
|
64
|
+
),
|
|
65
|
+
};
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The preview also shows `WithGroups`, `WithDisabledItems`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=360 subtitle="Default / WithGroups / WithDisabledItems" -->
|
|
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 I=Object.create;var r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var E=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),b=(o,a)=>{for(var l in a)r(o,l,{get:a[l],enumerable:!0})},h=(o,a,l,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let m of N(a))!P.call(o,m)&&m!==l&&r(o,m,{get:()=>a[m],enumerable:!(s=y(a,m))||s.enumerable});return o};var f=(o,a,l)=>(l=o!=null?I(v(o)):{},h(a||!o||!o.__esModule?r(l,"default",{value:o,enumerable:!0}):l,o));var A=E((D,i)=>{i.exports=window.Loomiere.Base});var n={};b(n,{Default:()=>S,WithDisabledItems:()=>g,WithGroups:()=>R,default:()=>u});var t=f(A(),1);var p=window.React;function e(o,a,l){let{children:s,...m}=a||{};return l!==void 0&&(m.key=l),s===void 0?p.createElement(o,m):Array.isArray(s)?p.createElement(o,m,...s):p.createElement(o,m,s)}var F=p.Fragment;var C={title:"Components/Autocomplete",parameters:{layout:"centered"},tags:["autodocs"]},u=C,L=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange","Papaya","Raspberry","Strawberry"],S={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search fruits..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[L.map(o=>e(t.Autocomplete.Item,{value:o,className:"AutocompleteItem",children:o},o)),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},R={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search produce..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Fruits"}),e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",children:"Banana"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"})]}),e(t.Autocomplete.Separator,{className:"AutocompleteSeparator"}),e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Vegetables"}),e(t.Autocomplete.Item,{value:"Carrot",className:"AutocompleteItem",children:"Carrot"}),e(t.Autocomplete.Item,{value:"Broccoli",className:"AutocompleteItem",children:"Broccoli"}),e(t.Autocomplete.Item,{value:"Spinach",className:"AutocompleteItem",children:"Spinach"})]}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},g={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Some items are disabled..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",disabled:!0,children:"Banana (Out of stock)"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"}),e(t.Autocomplete.Item,{value:"Date",className:"AutocompleteItem",disabled:!0,children:"Date (Out of stock)"}),e(t.Autocomplete.Item,{value:"Elderberry",className:"AutocompleteItem",children:"Elderberry"}),e(t.Autocomplete.Item,{value:"Fig",className:"AutocompleteItem",children:"Fig"}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})};var c=window.React,d=u||{},w=["Default","WithGroups","WithDisabledItems"];function G({id:o}){let a=n[o],l={...d.args||{},...a.args||{}};return(a.render||(m=>c.createElement(d.component,m)))(l,{args:l,id:o,name:o})}var x=w.map(o=>c.createElement("section",{key:o,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(G,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,x));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Avatar
|
|
2
|
+
|
|
3
|
+
The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials sit on the scope's solid fill in its on-solid text (the bold emphasis colors), so data-color re-colors them. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Avatar` (`import { Avatar } from '@base-ui/react/avatar'` 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/avatar
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `AvatarRoot` | `data-size`: `xs`, `sm`, `lg`, `xl` |
|
|
14
|
+
| `AvatarImage` | |
|
|
15
|
+
| `AvatarFallback` | |
|
|
16
|
+
| `AvatarGroup` | |
|
|
17
|
+
|
|
18
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
From the Avatar stories (`Default`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
export const Default: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<Avatar.Root className="AvatarRoot">
|
|
28
|
+
<Avatar.Image
|
|
29
|
+
className="AvatarImage"
|
|
30
|
+
src="https://i.pravatar.cc/150?img=1"
|
|
31
|
+
alt="User avatar"
|
|
32
|
+
/>
|
|
33
|
+
<Avatar.Fallback className="AvatarFallback">JD</Avatar.Fallback>
|
|
34
|
+
</Avatar.Root>
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The preview also shows `Fallback`, `Sizes`, `Group`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Display" height=480 subtitle="Default / Fallback / Sizes / Group" -->
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<style>
|
|
7
|
+
body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
|
|
8
|
+
#root { display: grid; gap: var(--sl-space-5, 20px); }
|
|
9
|
+
.ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root"></div>
|
|
14
|
+
<script>
|
|
15
|
+
(()=>{var F=Object.create;var v=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var d=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),y=(e,r)=>{for(var l in r)v(e,l,{get:r[l],enumerable:!0})},I=(e,r,l,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of p(r))!N.call(e,s)&&s!==l&&v(e,s,{get:()=>r[s],enumerable:!(o=k(r,s))||o.enumerable});return e};var x=(e,r,l)=>(l=e!=null?F(g(e)):{},I(r||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e));var R=d((j,i)=>{i.exports=window.Loomiere.Base});var n={};y(n,{Default:()=>f,Fallback:()=>S,FallbackOnly:()=>w,Group:()=>h,Sizes:()=>E,default:()=>A});var t=x(R(),1);var m=window.React;function a(e,r,l){let{children:o,...s}=r||{};return l!==void 0&&(s.key=l),o===void 0?m.createElement(e,s):Array.isArray(o)?m.createElement(e,s,...o):m.createElement(e,s,o)}var G=m.Fragment;var u={title:"Components/Avatar",component:t.Avatar.Root,parameters:{layout:"centered"},tags:["autodocs"]},A=u,f={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=1",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},S={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"invalid-url.jpg",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},E={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xs",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=2",alt:"Extra Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XS"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"sm",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=3",alt:"Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"SM"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"md",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=4",alt:"Medium"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"MD"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"lg",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=5",alt:"Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"LG"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xl",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=6",alt:"Extra Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XL"})]})]})},h={render:()=>a("div",{className:"AvatarGroup",children:[a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=7",alt:"User 1"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U1"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=8",alt:"User 2"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U2"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=9",alt:"User 3"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U3"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"+5"})})]})},w={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"AB"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"CD"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"EF"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"GH"})})]})};var c=window.React,b=A||{},z=["Default","Fallback","Sizes","Group"];function D({id:e}){let r=n[e],l={...b.args||{},...r.args||{}};return(r.render||(s=>c.createElement(b.component,s)))(l,{args:l,id:e,name:e})}var U=z.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(D,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,U));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# Button
|
|
2
|
+
|
|
3
|
+
The Base UI Button styled by the theme. Colors are the brand's emphasis levels, sizes are control.*, text is the trigger text style of each tier, and icons fill the button line (icon-size one tier up). Only the pill shape and disabled fade are Button's own (tokens/component/button.json).
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Button`, this package's wrapper: it puts the class names on for you (`import { Button } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Button`.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/button
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Button` | `data-icon-only`; `data-size`: `xs`, `sm`, `lg` |
|
|
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 Button stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
render: () => <Button type="button">Button</Button>,
|
|
24
|
+
};
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
The preview also shows `Variants`, `Sizes`, `WithIcon`.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<!-- @dsCard group="Actions" height=480 subtitle="Default / Variants / Sizes / WithIcon" -->
|
|
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 p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var w=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),h=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},S=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of g(a))!B.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=f(a,r))||s.enumerable});return e};var E=(e,a,n)=>(n=e!=null?b(v(e)):{},S(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=w((F,c)=>{c.exports=window.Loomiere});var y={};h(y,{Default:()=>D,Disabled:()=>k,Emphasis:()=>L,IconOnly:()=>W,Loading:()=>C,Sizes:()=>R,Variants:()=>I,WithIcon:()=>z,default:()=>u});var o=E(m(),1);var l=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?l.createElement(e,r):Array.isArray(s)?l.createElement(e,r,...s):l.createElement(e,r,s)}var N=l.Fragment;var A={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=A,i=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),D={render:()=>t(o.Button,{type:"button",children:"Button"})},I={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},z={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(i,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(i,{})})]})},k={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
|
|
16
|
+
@keyframes spin {
|
|
17
|
+
to { transform: rotate(360deg); }
|
|
18
|
+
}
|
|
19
|
+
`})]})},L={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var d=window.React,x=u||{},M=["Default","Variants","Sizes","WithIcon"];function O({id:e}){let a=y[e],n={...x.args||{},...a.args||{}};return(a.render||(r=>d.createElement(x.component,r)))(n,{args:n,id:e,name:e})}var j=M.map(e=>d.createElement("section",{key:e,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(O,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,j));})();
|
|
20
|
+
|
|
21
|
+
</script>
|
|
22
|
+
</body>
|
|
23
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# Checkbox
|
|
2
|
+
|
|
3
|
+
The Base UI Checkbox styled by the theme. Sizes follow the label: the box is the icon size one tier above the label's text tier (like a button's icon) and the check mark one tier below it.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Checkbox` (`import { Checkbox } from '@base-ui/react/checkbox'` 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/checkbox
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `CheckboxLabel` | `data-size`: `sm`, `lg`; `data-disabled` |
|
|
14
|
+
| `CheckboxRoot` | `data-size`: `sm`, `lg`; `data-checked`; `data-indeterminate`; `data-disabled`; `data-variant`: `outline`, `circular-outline`, `circular` |
|
|
15
|
+
| `CheckboxIndicator` | |
|
|
16
|
+
| `CheckboxIcon` | |
|
|
17
|
+
|
|
18
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
19
|
+
|
|
20
|
+
## Example
|
|
21
|
+
|
|
22
|
+
From the Checkbox stories (`Default`):
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
export const Default: Story = {
|
|
26
|
+
render: () => (
|
|
27
|
+
<label className="CheckboxLabel">
|
|
28
|
+
<Checkbox.Root className="CheckboxRoot">
|
|
29
|
+
<Checkbox.Indicator className="CheckboxIndicator">
|
|
30
|
+
<CheckIcon className="CheckboxIcon" />
|
|
31
|
+
</Checkbox.Indicator>
|
|
32
|
+
</Checkbox.Root>
|
|
33
|
+
Accept terms and conditions
|
|
34
|
+
</label>
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The preview also shows `Checked`, `Indeterminate`, `Disabled`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / Checked / Indeterminate / Disabled" -->
|
|
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 k=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var c in t)i(e,c,{get:t[c],enumerable:!0})},f=(e,t,c,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!u.call(e,r)&&r!==c&&i(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var g=(e,t,c)=>(c=e!=null?k(R(e)):{},f(t||!e||!e.__esModule?i(c,"default",{value:e,enumerable:!0}):c,e));var x=N((O,h)=>{h.exports=window.Loomiere.Base});var b={};y(b,{Checked:()=>v,Default:()=>S,Disabled:()=>D,Indeterminate:()=>E,WithoutLabel:()=>M,default:()=>m});var a=g(x(),1);var d=window.React;function o(e,t,c){let{children:s,...r}=t||{};return c!==void 0&&(r.key=c),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var P=d.Fragment;var w={title:"Components/Checkbox",component:a.Checkbox.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=w;function l(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}function L(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M1 5h8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}var S={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Accept terms and conditions"]})},v={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"I agree to the terms"]})},E={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",indeterminate:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(L,{className:"CheckboxIcon"})})}),"Select all items"]})},D={render:()=>o("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled unchecked"]}),o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled checked"]})]})},M={render:()=>o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})})};var n=window.React,C=m||{},j=["Default","Checked","Indeterminate","Disabled"];function A({id:e}){let t=b[e],c={...C.args||{},...t.args||{}};return(t.render||(r=>n.createElement(C.component,r)))(c,{args:c,id:e,name:e})}var B=j.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(A,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,B));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# CheckboxGroup
|
|
2
|
+
|
|
3
|
+
The Base UI CheckboxGroup styled by the theme.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.CheckboxGroup` (`import { CheckboxGroup } from '@base-ui/react/checkbox-group'` 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/checkbox-group
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `CheckboxGroup` | `data-disabled` |
|
|
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 CheckboxGroup stories (`Default`):
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
export const Default: Story = {
|
|
23
|
+
render: () => (
|
|
24
|
+
<CheckboxGroup className="CheckboxGroup" defaultValue={['design']}>
|
|
25
|
+
<label className="CheckboxLabel">
|
|
26
|
+
<Checkbox.Root className="CheckboxRoot" name="interests" value="design">
|
|
27
|
+
<Checkbox.Indicator className="CheckboxIndicator">
|
|
28
|
+
<CheckIcon className="CheckboxIcon" />
|
|
29
|
+
</Checkbox.Indicator>
|
|
30
|
+
</Checkbox.Root>
|
|
31
|
+
Design
|
|
32
|
+
</label>
|
|
33
|
+
|
|
34
|
+
<label className="CheckboxLabel">
|
|
35
|
+
<Checkbox.Root className="CheckboxRoot" name="interests" value="development">
|
|
36
|
+
<Checkbox.Indicator className="CheckboxIndicator">
|
|
37
|
+
<CheckIcon className="CheckboxIcon" />
|
|
38
|
+
</Checkbox.Indicator>
|
|
39
|
+
</Checkbox.Root>
|
|
40
|
+
Development
|
|
41
|
+
</label>
|
|
42
|
+
|
|
43
|
+
<label className="CheckboxLabel">
|
|
44
|
+
<Checkbox.Root className="CheckboxRoot" name="interests" value="marketing">
|
|
45
|
+
<Checkbox.Indicator className="CheckboxIndicator">
|
|
46
|
+
<CheckIcon className="CheckboxIcon" />
|
|
47
|
+
</Checkbox.Indicator>
|
|
48
|
+
</Checkbox.Root>
|
|
49
|
+
Marketing
|
|
50
|
+
</label>
|
|
51
|
+
</CheckboxGroup>
|
|
52
|
+
),
|
|
53
|
+
};
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
The preview also shows `WithLabel`, `Disabled`, `WithDefaultValues`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Forms" height=480 subtitle="Default / WithLabel / Disabled / WithDefaultValues" -->
|
|
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 R=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var k=(o,c)=>()=>(c||o((c={exports:{}}).exports,c),c.exports),L=(o,c)=>{for(var s in c)i(o,s,{get:c[s],enumerable:!0})},D=(o,c,s,n)=>{if(c&&typeof c=="object"||typeof c=="function")for(let l of v(c))!y.call(o,l)&&l!==s&&i(o,l,{get:()=>c[l],enumerable:!(n=g(c,l))||n.enumerable});return o};var C=(o,c,s)=>(s=o!=null?R(f(o)):{},D(c||!o||!o.__esModule?i(s,"default",{value:o,enumerable:!0}):s,o));var N=k((A,d)=>{d.exports=window.Loomiere.Base});var p=k((F,I)=>{I.exports=window.Loomiere.Base});var h={};L(h,{Default:()=>G,Disabled:()=>E,HorizontalLayout:()=>W,WithDefaultValues:()=>M,WithLabel:()=>S,default:()=>x});var a=C(N(),1),r=C(p(),1);var m=window.React;function e(o,c,s){let{children:n,...l}=c||{};return s!==void 0&&(l.key=s),n===void 0?m.createElement(o,l):Array.isArray(n)?m.createElement(o,l,...n):m.createElement(o,l,n)}var O=m.Fragment;var w={title:"Components/CheckboxGroup",component:r.CheckboxGroup,parameters:{layout:"centered"},tags:["autodocs"]},x=w;function t(o){return e("svg",{fill:"currentcolor",width:"14",height:"14",viewBox:"0 0 10 10",...o,children:e("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}var G={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},S={render:()=>{let o=`checkbox-group-${Math.random()}`;return e("div",{children:[e("div",{id:o,style:{fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",marginBottom:"var(--sl-space-3)",color:"var(--sl-text-primary)"},children:"Select your interests"}),e(r.CheckboxGroup,{className:"CheckboxGroup","aria-labelledby":o,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})]})}},E={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",disabled:!0,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},M={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design","development"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},W={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",style:{flexDirection:"row",flexWrap:"wrap",gap:"var(--sl-space-4)"},children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})};var b=window.React,u=x||{},B=["Default","WithLabel","Disabled","WithDefaultValues"];function V({id:o}){let c=h[o],s={...u.args||{},...c.args||{}};return(c.render||(l=>b.createElement(u.component,l)))(s,{args:s,id:o,name:o})}var j=B.map(o=>b.createElement("section",{key:o,className:"ds-story"},b.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),b.createElement("div",{className:"ds-story-body"},b.createElement(V,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(b.createElement(b.Fragment,null,j));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Collapsible
|
|
2
|
+
|
|
3
|
+
The Base UI Collapsible styled by the theme. No component tokens. Hover, press, chevron and motion are the disclosure concept (tokens/semantic/disclosure.json). The trigger is base-subtitle text with a base-size chevron; the panel lines up under the trigger's text and sits on the overlay surface.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Collapsible` (`import { Collapsible } from '@base-ui/react/collapsible'` 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/collapsible
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `Collapsible` | |
|
|
14
|
+
| `CollapsibleTrigger` | `data-panel-open` |
|
|
15
|
+
| `CollapsibleIcon` | |
|
|
16
|
+
| `CollapsiblePanel` | `data-starting-style`; `data-ending-style` |
|
|
17
|
+
| `CollapsibleContent` | |
|
|
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 Collapsible stories (`Default`):
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
export const Default: Story = {
|
|
27
|
+
render: () => (
|
|
28
|
+
<Collapsible.Root className="Collapsible">
|
|
29
|
+
<Collapsible.Trigger className="CollapsibleTrigger">
|
|
30
|
+
<span className="material-symbols-outlined CollapsibleIcon">
|
|
31
|
+
chevron_right
|
|
32
|
+
</span>
|
|
33
|
+
Show more information
|
|
34
|
+
</Collapsible.Trigger>
|
|
35
|
+
<Collapsible.Panel className="CollapsiblePanel">
|
|
36
|
+
<div className="CollapsibleContent">
|
|
37
|
+
<p>
|
|
38
|
+
This is additional content that can be collapsed and expanded.
|
|
39
|
+
It contains important information that users can choose to view.
|
|
40
|
+
</p>
|
|
41
|
+
</div>
|
|
42
|
+
</Collapsible.Panel>
|
|
43
|
+
</Collapsible.Root>
|
|
44
|
+
),
|
|
45
|
+
};
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
The preview also shows `DefaultOpen`, `FAQ`, `RecoveryKeys`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!-- @dsCard group="Disclosure" height=480 subtitle="Default / DefaultOpen / FAQ / RecoveryKeys" -->
|
|
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 g=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var h=(l,a)=>()=>(a||l((a={exports:{}}).exports,a),a.exports),f=(l,a)=>{for(var o in a)p(l,o,{get:a[o],enumerable:!0})},R=(l,a,o,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of u(a))!N.call(l,t)&&t!==o&&p(l,t,{get:()=>a[t],enumerable:!(n=y(a,t))||n.enumerable});return l};var T=(l,a,o)=>(o=l!=null?g(v(l)):{},R(a||!l||!l.__esModule?p(o,"default",{value:l,enumerable:!0}):o,l));var d=h((B,b)=>{b.exports=window.Loomiere.Base});var m={};f(m,{Default:()=>w,DefaultOpen:()=>x,FAQ:()=>I,RecoveryKeys:()=>S,default:()=>c});var s=T(d(),1);var r=window.React;function e(l,a,o){let{children:n,...t}=a||{};return o!==void 0&&(t.key=o),n===void 0?r.createElement(l,t):Array.isArray(n)?r.createElement(l,t,...n):r.createElement(l,t,n)}var O=r.Fragment;var P={title:"Components/Collapsible",component:s.Collapsible.Root,parameters:{layout:"centered"},tags:["autodocs"]},c=P,w={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Show more information"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This is additional content that can be collapsed and expanded. It contains important information that users can choose to view."})})})]})},x={render:()=>e(s.Collapsible.Root,{className:"Collapsible",defaultOpen:!0,children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Hide details"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"This collapsible starts in an open state by default. Click the trigger to collapse it."})})})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"What is Base UI?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`})})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"How do I install it?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("p",{children:"You can install Base UI using npm, yarn, or pnpm:"}),e("code",{children:"npm install @base-ui/react"})]})})]}),e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Is it accessible?"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:e("p",{children:"Yes! Base UI components follow WAI-ARIA authoring practices and are fully accessible out of the box with proper keyboard navigation and screen reader support."})})})]})]})},S={render:()=>e(s.Collapsible.Root,{className:"Collapsible",children:[e(s.Collapsible.Trigger,{className:"CollapsibleTrigger",children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Recovery keys"]}),e(s.Collapsible.Panel,{className:"CollapsiblePanel",children:e("div",{className:"CollapsibleContent",children:[e("div",{children:"alien-bean-pasta"}),e("div",{children:"wild-irish-burrito"}),e("div",{children:"horse-battery-staple"})]})})]})};var i=window.React,C=c||{},E=["Default","DefaultOpen","FAQ","RecoveryKeys"];function A({id:l}){let a=m[l],o={...C.args||{},...a.args||{}};return(a.render||(t=>i.createElement(C.component,t)))(o,{args:o,id:l,name:l})}var D=E.map(l=>i.createElement("section",{key:l,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},l.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(A,{id:l}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|