@scattered-light/loomiere-mojave 0.23.0 → 0.24.1

package/dist/exports/design-system/components/Notice/README.md

@@ -0,0 +1,30 @@
+# Notice
+
+The Base UI Notice styled by the theme. A message in the page: a thick leading edge and a tinted ground. data-status picks the status palette (info, success, warning, error); without it the notice is neutral. data-technical sets the text in the code style on a neutral ground, for a rare technical message shown as it came. The corners stay square so the edge reads as a rule.
+
+Use `Loomiere.Notice` (`import { Notice } from '@base-ui/react/notice'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/notice
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Notice` | `data-status`: `error`, `warning`, `success`, `info`; `data-technical` |
+
+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.
+
+## Example
+
+From the Notice stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { status: 'error', children: 'Email or password is incorrect, or the account is temporarily locked.' },
+  render: (args) => <Notice {...args} style={{ maxWidth: 420 }} />,
+};
+
+/** Every status, the neutral notice, and the technical style. */
+```
+
+The preview also shows `Statuses`, `InAForm`.

package/dist/exports/design-system/components/Notice/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / Statuses / InAForm" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var f=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!w.call(e,r)&&r!==n&&l(e,r,{get:()=>t[r],enumerable:!(s=h(t,r))||s.enumerable});return e};var S=(e,t,n)=>(n=e!=null?f(b(e)):{},N(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var p=x((L,u)=>{u.exports=window.Loomiere});var d={};E(d,{Default:()=>F,InAForm:()=>k,Statuses:()=>R,default:()=>m});var o=S(p(),1);var i=window.React;function a(e,t,n){let{children:s,...r}=t||{};return n!==void 0&&(r.key=n),s===void 0?i.createElement(e,r):Array.isArray(s)?i.createElement(e,r,...s):i.createElement(e,r,s)}var B=i.Fragment;var v={title:"Components/Lib/Notice",component:o.Notice,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=v,F={args:{status:"error",children:"Email or password is incorrect, or the account is temporarily locked."},render:e=>a(o.Notice,{...e,style:{maxWidth:420}})},R={render:()=>a("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:420},children:[a(o.Notice,{announce:!1,children:"Neutral: a note about this page."}),a(o.Notice,{status:"info",announce:!1,children:"Info: the import runs overnight."}),a(o.Notice,{status:"success",announce:!1,children:"If that email has an account, we've sent a link to it."}),a(o.Notice,{status:"warning",announce:!1,children:"Two accounts have no opening balance."}),a(o.Notice,{status:"error",announce:!1,children:"Can't reach the server. Check the connection and try again."}),a(o.Notice,{technical:!0,announce:!1,children:"This computer's keychain is unavailable: access denied by the system"})]})},k={render:()=>a("form",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},onSubmit:e=>e.preventDefault(),children:[a(o.Field.Root,{children:[a(o.Field.Label,{children:"Email"}),a(o.Input,{type:"email",defaultValue:"jordan@example.com"})]}),a(o.Button,{type:"submit",children:"Sign in"}),a(o.Notice,{status:"error",announce:!1,children:"Enter your password"})]})};var c=window.React,y=m||{},I=["Default","Statuses","InAForm"];function j({id:e}){let t=d[e],n={...y.args||{},...t.args||{}};return(t.render||(r=>c.createElement(y.component,r)))(n,{args:n,id:e,name:e})}var A=I.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(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,A));})();
+
+</script>
+</body>
+</html>

package/dist/exports/design-system/components/Spinner/README.md

@@ -0,0 +1,29 @@
+# Spinner
+
+The Base UI Spinner styled by the theme. A ring that turns: the track in the subtle border, the moving arc in the accent border. Sizes are the icon tiers, so a spinner can stand in for an icon. Reduced motion slows it.
+
+Use `Loomiere.Spinner` (`import { Spinner } from '@base-ui/react/spinner'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/spinner
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Spinner` | `data-size`: `condense`, `base`, `magnify` |
+
+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.
+
+## Example
+
+From the Spinner stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { label: 'Loading clients' },
+};
+
+/** The icon tiers, so a spinner can stand in for an icon. */
+```
+
+The preview also shows `Sizes`, `WithText`.

package/dist/exports/design-system/components/Spinner/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / Sizes / WithText" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var g=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),w=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},v=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of x(t))!E.call(e,r)&&r!==n&&l(e,r,{get:()=>t[r],enumerable:!(o=u(t,r))||o.enumerable});return e};var h=(e,t,n)=>(n=e!=null?g(S(e)):{},v(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var y=b((I,p)=>{p.exports=window.Loomiere});var d={};w(d,{Default:()=>D,Sizes:()=>j,WithText:()=>k,default:()=>m});var i=h(y(),1);var c=window.React;function s(e,t,n){let{children:o,...r}=t||{};return n!==void 0&&(r.key=n),o===void 0?c.createElement(e,r):Array.isArray(o)?c.createElement(e,r,...o):c.createElement(e,r,o)}var M=c.Fragment;var R={title:"Components/Lib/Spinner",component:i.Spinner,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=R,D={args:{label:"Loading clients"}},j={render:()=>s("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-3)"},children:["condense","base","magnify","maximize"].map(e=>s(i.Spinner,{size:e,label:`Loading (${e})`},e))})},k={render:()=>s("div",{role:"status",style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--sl-space-2)"},children:[s(i.Spinner,{}),"Checking this computer for a saved sign-in\u2026"]})};var a=window.React,f=m||{},L=["Default","Sizes","WithText"];function z({id:e}){let t=d[e],n={...f.args||{},...t.args||{}};return(t.render||(r=>a.createElement(f.component,r)))(n,{args:n,id:e,name:e})}var A=L.map(e=>a.createElement("section",{key:e,className:"ds-story"},a.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),a.createElement("div",{className:"ds-story-body"},a.createElement(z,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(a.createElement(a.Fragment,null,A));})();
+
+</script>
+</body>
+</html>