@scattered-light/loomiere-base-ui 0.8.0 → 0.9.0

package/dist/custom/index.d.ts

@@ -1,4 +1,4 @@
-export { B as Badge, a as BadgeProps, ao as CURRENCY_SEARCH_THRESHOLD, C as Calendar, b as CalendarProps, c as CurrencyCode, ap as CurrencySelect, D as DatePicker, d as DatePickerProps, e as DatePresets, f as DatePresetsProps, g as DateRange, h as DateValue, i as DescriptionItem, j as DescriptionItemProps, k as DescriptionList, l as DescriptionListProps, E as EditableList, m as EditableListApi, n as EditableListRootProps, o as EmptyState, p as EmptyStateKind, q as EmptyStateProps, aq as KeyOptions, L as ListDetail, r as ListDetailCloseReason, ar as ListDetailDetail, s as ListDetailDetailProps, t as ListDetailLayout, as as ListDetailList, at as ListDetailRoot, u as ListDetailRootProps, v as ListDetailValue, au as MAX_MINOR_UNITS, av as MoneyChangeDetails, aw as MoneyDisplay, M as MoneyField, ax as MoneyFieldAffix, ay as MoneyFieldGroup, az as MoneyFieldInput, w as MoneyFieldProps, aA as MoneyFieldRoot, x as MoneyFieldRootProps, aB as MoneyFieldSteps, aC as NormalizedPaste, aD as PanelSpec, P as Preset, z as PresetValue, aE as RuntimePanel, S as Sheet, A as SheetProps, aF as Size, aG as SizeInput, F as Splitter, aH as SplitterHandle, G as SplitterHandleProps, aI as SplitterKey, aJ as SplitterPanel, H as SplitterPanelProps, aK as SplitterRoot, I as SplitterRootProps, J as StatFigure, K as StatFigureProps, aL as StoredLayout, aM as StoredPanel, O as addDays, Q as addMonths, aN as affixSide, aO as applyKey, aP as applyStored, aQ as ariaPercents, R as builtinPresets, T as clampDate, aR as createPanels, aS as cssSize, aT as currencyName, aU as currencySymbol, U as daysInMonth, V as defaultPresets, W as defaultWeekStartsOn, X as endOfWeek, aV as formatDay, aW as formatFull, Y as formatMoney, Z as fromMinorUnits, _ as getCurrencyDigits, aX as handleTarget, $ as inclusiveDays, a0 as isValidCurrency, a1 as isoWeek, a2 as last30Days, a3 as last7Days, a4 as lastMonth, a5 as lastWeek, aY as layoutOf, a6 as lengthBlockReason, aZ as measure, a_ as monthCells, a$ as moveFocusDate, a7 as nextMonth, a8 as nextWeek, b0 as normalizePaste, a9 as orderRange, b1 as parseDate, aa as parseDecimalString, b2 as parseSize, b3 as presetInBounds, b4 as resetToDefault, b5 as resizeByDelta, ab as resolvePreset, b6 as roundHalfExpand, b7 as roundingChangesValue, b8 as sameSelection, b9 as serializeSize, ba as settle, bb as sizeText, ac as startOfWeek, bc as syncPanels, ad as thisMonth, ae as thisQuarter, af as thisWeek, ag as toDecimalString, ah as toMinorUnits, ai as today, aj as todayDate, bd as toggleCollapsed, ak as tomorrow, al as useListDetail, be as valueText, am as yearToDate, an as yesterday } from '../index-CBAo353T.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, au as CURRENCY_SEARCH_THRESHOLD, C as Calendar, e as CalendarProps, f as CurrencyCode, av as CurrencySelect, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, aw as KeyOptions, L as ListDetail, u as ListDetailCloseReason, ax as ListDetailDetail, v as ListDetailDetailProps, w as ListDetailLayout, ay as ListDetailList, az as ListDetailRoot, x as ListDetailRootProps, y as ListDetailValue, aA as MAX_MINOR_UNITS, aB as MoneyChangeDetails, aC as MoneyDisplay, M as MoneyField, aD as MoneyFieldAffix, aE as MoneyFieldGroup, aF as MoneyFieldInput, z as MoneyFieldProps, aG as MoneyFieldRoot, F as MoneyFieldRootProps, aH as MoneyFieldSteps, aI as NormalizedPaste, aJ as PanelSpec, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, aK as RuntimePanel, S as Sheet, K as SheetProps, aL as Size, aM as SizeInput, O as Splitter, aN as SplitterHandle, Q as SplitterHandleProps, aO as SplitterKey, aP as SplitterPanel, R as SplitterPanelProps, aQ as SplitterRoot, T as SplitterRootProps, U as StatFigure, V as StatFigureProps, aR as StoredLayout, aS as StoredPanel, W as addDays, X as addMonths, aT as affixSide, aU as applyKey, aV as applyStored, aW as ariaPercents, Y as builtinPresets, Z as clampDate, aX as createPanels, aY as cssSize, aZ as currencyName, a_ as currencySymbol, _ as daysInMonth, $ as defaultPresets, a0 as defaultWeekStartsOn, a1 as endOfWeek, a$ as formatDay, b0 as formatFull, a2 as formatMoney, a3 as fromMinorUnits, a4 as getCurrencyDigits, b1 as handleTarget, a5 as inclusiveDays, a6 as isValidCurrency, a7 as isoWeek, a8 as last30Days, a9 as last7Days, aa as lastMonth, ab as lastWeek, b2 as layoutOf, ac as lengthBlockReason, b3 as measure, b4 as monthCells, b5 as moveFocusDate, ad as nextMonth, ae as nextWeek, b6 as normalizePaste, af as orderRange, b7 as parseDate, ag as parseDecimalString, b8 as parseSize, b9 as presetInBounds, ba as resetToDefault, bb as resizeByDelta, ah as resolvePreset, bc as roundHalfExpand, bd as roundingChangesValue, be as sameSelection, bf as serializeSize, bg as settle, bh as sizeText, ai as startOfWeek, bi as syncPanels, aj as thisMonth, ak as thisQuarter, al as thisWeek, am as toDecimalString, an as toMinorUnits, ao as today, ap as todayDate, bj as toggleCollapsed, aq as tomorrow, ar as useListDetail, bk as valueText, as as yearToDate, at as yesterday } from '../index-DdHpYalU.js';
 import 'react';
 import 'react/jsx-runtime';
 import '@base-ui/react';

package/dist/custom/index.js

@@ -1,4 +1,4 @@
-export { Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, Sheet, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-LJQ3RZDJ.js';
+export { AppBar, AppBarSpacer, Badge, CURRENCY_SEARCH_THRESHOLD, Calendar, CurrencySelect, DatePicker, DatePresets, DescriptionItem, DescriptionList, EditableList, ListDetail, ListDetailDetail, ListDetailList, ListDetailRoot, MAX_MINOR_UNITS, MoneyField, MoneyFieldAffix, MoneyFieldGroup, MoneyFieldInput, MoneyFieldRoot, PickerButton, Sheet, Splitter, SplitterHandle, SplitterPanel, SplitterRoot, StatFigure, addDays, addMonths, affixSide, applyKey, applyStored, ariaPercents, builtinPresets, clampDate, createPanels, cssSize, currencyName, currencySymbol, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatDay, formatFull, formatMoney, fromMinorUnits, getCurrencyDigits, handleTarget, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, layoutOf, lengthBlockReason, measure, monthCells, moveFocusDate, nextMonth, nextWeek, normalizePaste, orderRange, parseDate, parseDecimalString, parseSize, presetInBounds, resetToDefault, resizeByDelta, resolvePreset, roundHalfExpand, roundingChangesValue, sameSelection, serializeSize, settle, sizeText, startOfWeek, syncPanels, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, toggleCollapsed, tomorrow, useListDetail, valueText, yearToDate, yesterday } from '../chunk-LQWPDLLQ.js';
 export { EmptyState } from '../chunk-M7KJASGK.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/design-system/components/AppBar/README.md

@@ -0,0 +1,58 @@
+# AppBar
+
+Loomiere component, not part of Base UI. The bar across the top of an app window, one row on a line in the rule color. The line is app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the rule on, so an ink-rule brand gets the working-paper rule under its app bar. AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+
+Use `Loomiere.AppBar`, this package's component: it puts the class names on for you (`import { AppBar } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `AppBar` |   |
+| `AppBarSpacer` |   |
+| `Separator` | `data-orientation`: `vertical` |
+
+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 AppBar stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [module, setModule] = React.useState('accounting');
+    return (
+      <AppBar>
+        <strong style={{ fontSize: '1.5rem', fontWeight: 700 }}>Ledgerly</strong>
+        <Button emphasis="quiet">My Clients</Button>
+        <PickerButton label="Client" value="Alpha Services" />
+        <PickerButton label="Entity" value="North Company" />
+        <AppBarSpacer />
+        <ToggleGroup
+          data-variant="segmented"
+          aria-label="Modules"
+          value={[module]}
+          onValueChange={(next) => next[0] && setModule(next[0])}
+        >
+          <Toggle value="accounting">Accounting</Toggle>
+          <Toggle value="tax">Tax</Toggle>
+        </ToggleGroup>
+        <Button emphasis="quiet" aria-label="Documents">
+          <DocumentIcon />
+        </Button>
+        <Separator orientation="vertical" />
+        <Button emphasis="quiet" aria-label="More">
+          <MoreIcon />
+        </Button>
+      </AppBar>
+    );
+  },
+};
+
+/** Only a wordmark and actions, as on a home screen with no context chosen. */
+```
+
+The preview also shows `Minimal`.

package/dist/design-system/components/AppBar/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Layout" height=240 subtitle="Default / Minimal" -->
+<!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 S=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var p=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),R=(t,r)=>{for(var a in r)l(t,a,{get:r[a],enumerable:!0})},C=(t,r,a,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of M(r))!A.call(t,n)&&n!==a&&l(t,n,{get:()=>r[n],enumerable:!(s=b(r,n))||s.enumerable});return t};var d=(t,r,a)=>(a=t!=null?S(E(t)):{},C(r||!t||!t.__esModule?l(a,"default",{value:t,enumerable:!0}):a,t));var y=p((N,g)=>{g.exports=window.React});var f=p((F,h)=>{h.exports=window.Loomiere});var u={};R(u,{Default:()=>T,Minimal:()=>k,default:()=>m});var v=d(y(),1),o=d(f(),1);var i=window.React;function e(t,r,a){let{children:s,...n}=r||{};return a!==void 0&&(n.key=a),s===void 0?i.createElement(t,n):Array.isArray(s)?i.createElement(t,n,...s):i.createElement(t,n,s)}var I=i.Fragment;var D={title:"Components/Lib/AppBar",component:o.AppBar,parameters:{layout:"fullscreen"},tags:["autodocs","ds:lib"]},m=D,x=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8","aria-hidden":"true",children:[e("path",{d:"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"}),e("path",{d:"M14 3v5h5"})]}),B=()=>e("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("circle",{cx:"5",cy:"12",r:"1.8"}),e("circle",{cx:"12",cy:"12",r:"1.8"}),e("circle",{cx:"19",cy:"12",r:"1.8"})]}),T={render:function(){let[r,a]=v.useState("accounting");return e(o.AppBar,{children:[e("strong",{style:{fontSize:"1.5rem",fontWeight:700},children:"Ledgerly"}),e(o.Button,{emphasis:"quiet",children:"My Clients"}),e(o.PickerButton,{label:"Client",value:"Alpha Services"}),e(o.PickerButton,{label:"Entity",value:"North Company"}),e(o.AppBarSpacer,{}),e(o.ToggleGroup,{"data-variant":"segmented","aria-label":"Modules",value:[r],onValueChange:s=>s[0]&&a(s[0]),children:[e(o.Toggle,{value:"accounting",children:"Accounting"}),e(o.Toggle,{value:"tax",children:"Tax"})]}),e(o.Button,{emphasis:"quiet","aria-label":"Documents",children:e(x,{})}),e(o.Separator,{orientation:"vertical"}),e(o.Button,{emphasis:"quiet","aria-label":"More",children:e(B,{})})]})}},k={render:()=>e(o.AppBar,{children:[e("strong",{style:{fontSize:"1.5rem",fontWeight:700},children:"Ledgerly"}),e(o.AppBarSpacer,{}),e(o.Button,{emphasis:"quiet","aria-label":"Documents",children:e(x,{})}),e(o.Separator,{orientation:"vertical"}),e(o.Button,{emphasis:"quiet","aria-label":"More",children:e(B,{})})]})};var c=window.React,w=m||{},q=["Default","Minimal"];function j({id:t}){let r=u[t],a={...w.args||{},...r.args||{}};return(r.render||(n=>c.createElement(w.component,n)))(a,{args:a,id:t,name:t})}var z=q.map(t=>c.createElement("section",{key:t,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,z));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/PickerButton/README.md

@@ -0,0 +1,56 @@
+# PickerButton
+
+Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+
+Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `PickerButton` | `data-popup-open` |
+| `PickerButtonLabel` |   |
+| `PickerButtonValue` | `data-placeholder` |
+| `PickerButtonIcon` |   |
+
+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 PickerButton stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [entity, setEntity] = React.useState(entities[0]);
+    return (
+      <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <PickerButton label="Client" value="Alpha Services" />
+        <Menu.Root>
+          <Menu.Trigger render={(props) => <PickerButton {...props} label="Entity" value={entity} />} />
+          <Menu.Portal>
+            <Menu.Positioner align="start" sideOffset={6}>
+              <Menu.Popup aria-label="Entity">
+                <Menu.RadioGroup value={entity} onValueChange={(next: string) => setEntity(next)}>
+                  {entities.map((name) => (
+                    <Menu.RadioItem key={name} value={name}>
+                      <Menu.RadioItemIndicator />
+                      {name}
+                    </Menu.RadioItem>
+                  ))}
+                </Menu.RadioGroup>
+              </Menu.Popup>
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>
+      </div>
+    );
+  },
+};
+
+/** A long choice is cut with an ellipsis; the label never is. */
+```
+
+The preview also shows `LongValue`, `Placeholder`, `Disabled`.

package/dist/design-system/components/PickerButton/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Actions" height=480 subtitle="Default / LongValue / Placeholder / Disabled" -->
+<!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 S=Object.create;var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var m=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),M=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},C=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!h.call(e,s)&&s!==o&&c(e,s,{get:()=>t[s],enumerable:!(r=v(t,s))||r.enumerable});return e};var p=(e,t,o)=>(o=e!=null?S(P(e)):{},C(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e));var f=m((N,y)=>{y.exports=window.React});var b=m((V,g)=>{g.exports=window.Loomiere});var u={};M(u,{Default:()=>k,Disabled:()=>L,LongValue:()=>A,Placeholder:()=>D,default:()=>d});var R=p(f(),1),n=p(b(),1);var i=window.React;function a(e,t,o){let{children:r,...s}=t||{};return o!==void 0&&(s.key=o),r===void 0?i.createElement(e,s):Array.isArray(r)?i.createElement(e,s,...r):i.createElement(e,s,r)}var H=i.Fragment;var I={title:"Components/Lib/PickerButton",component:n.PickerButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Client",value:"Alpha Services"}},d=I,E=["North Company","South Company","Harbor Holdings LLC"],k={render:function(){let[t,o]=R.useState(E[0]);return a("div",{style:{display:"flex",gap:"10px",alignItems:"center"},children:[a(n.PickerButton,{label:"Client",value:"Alpha Services"}),a(n.Menu.Root,{children:[a(n.Menu.Trigger,{render:r=>a(n.PickerButton,{...r,label:"Entity",value:t})}),a(n.Menu.Portal,{children:a(n.Menu.Positioner,{align:"start",sideOffset:6,children:a(n.Menu.Popup,{"aria-label":"Entity",children:a(n.Menu.RadioGroup,{value:t,onValueChange:r=>o(r),children:E.map(r=>a(n.Menu.RadioItem,{value:r,children:[a(n.Menu.RadioItemIndicator,{}),r]},r))})})})})]})]})}},A={args:{label:"Entity",value:"Harbor Family Office Irrevocable Trust of 2009"}},D={args:{label:"Entity",value:void 0,placeholder:"All Entities"}},L={args:{disabled:!0}};var l=window.React,x=d||{},O=["Default","LongValue","Placeholder","Disabled"];function j({id:e}){let t=u[e],o={...x.args||{},...t.args||{}};return(t.render||(s=>l.createElement(x.component,s)))(o,{args:o,id:e,name:e})}var B=O.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,B));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/ToggleGroup/README.md

@@ -10,8 +10,8 @@ Base UI docs: https://base-ui.com/react/components/toggle-group
 
 | Class | Data attributes it answers to |
 |---|---|
-| `ToggleGroup` |   |
-| `Toggle` |   |
+| `ToggleGroup` | `data-variant`: `segmented` |
+| `Toggle` | `data-disabled`; `data-pressed` |
 
 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.
 

package/dist/design-system/components/ToggleGroup/preview.html

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var R=Object.create;var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var v=(t,l)=>()=>(l||t((l={exports:{}}).exports,l),l.exports),E=(t,l)=>{for(var a in l)g(t,a,{get:l[a],enumerable:!0})},V=(t,l,a,n)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of B(l))!A.call(t,r)&&r!==a&&g(t,r,{get:()=>l[r],enumerable:!(n=I(l,r))||n.enumerable});return t};var m=(t,l,a)=>(a=t!=null?R(k(t)):{},V(l||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t));var y=v((F,f)=>{f.exports=window.React});var b=v(($,x)=>{x.exports=window.Loomiere});var h={};E(h,{Default:()=>D,Disabled:()=>W,MultipleSelection:()=>j,SingleSelection:()=>P,WithText:()=>H,default:()=>c});var T=m(y(),1),o=m(b(),1);var s=window.React;function e(t,l,a){let{children:n,...r}=l||{};return a!==void 0&&(r.key=a),n===void 0?s.createElement(t,r):Array.isArray(n)?s.createElement(t,r,...n):s.createElement(t,r,n)}var J=s.Fragment;var z={title:"Components/Lib/ToggleGroup",component:o.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=z,d=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),u=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),w=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),S=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),G=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),D={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})},P={render:()=>{let[t,l]=T.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(o.ToggleGroup,{multiple:!1,value:t,onValueChange:l,children:[e(o.Toggle,{value:"left","aria-label":"Align left",children:e(w,{})}),e(o.Toggle,{value:"center","aria-label":"Align center",children:e(M,{})}),e(o.Toggle,{value:"right","aria-label":"Align right",children:e(S,{})}),e(o.Toggle,{value:"justify","aria-label":"Align justify",children:e(G,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",t[0]||"None"]})]})}},j={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(o.ToggleGroup,{multiple:!0,defaultValue:["bold","italic"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})]})},H={render:()=>e(o.ToggleGroup,{defaultValue:["left"],children:[e(o.Toggle,{value:"left",children:[e(w,{}),"Left"]}),e(o.Toggle,{value:"center",children:[e(M,{}),"Center"]}),e(o.Toggle,{value:"right",children:[e(S,{}),"Right"]})]})},W={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic",disabled:!0,"aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(u,{})})]})};var i=window.React,C=c||{},L=["Default","SingleSelection","MultipleSelection","WithText"];function N({id:t}){let l=h[t],a={...C.args||{},...l.args||{}};return(l.render||(r=>i.createElement(C.component,r)))(a,{args:a,id:t,name:t})}var O=L.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(N,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,O));})();
+(()=>{var C=Object.create;var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var m=(t,l)=>()=>(l||t((l={exports:{}}).exports,l),l.exports),k=(t,l)=>{for(var a in l)g(t,a,{get:l[a],enumerable:!0})},E=(t,l,a,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of V(l))!B.call(t,n)&&n!==a&&g(t,n,{get:()=>l[n],enumerable:!(r=I(l,n))||r.enumerable});return t};var f=(t,l,a)=>(a=t!=null?C(A(t)):{},E(l||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t));var x=m(($,y)=>{y.exports=window.React});var b=m((J,T)=>{T.exports=window.Loomiere});var v={};k(v,{Default:()=>D,Disabled:()=>W,MultipleSelection:()=>j,Segmented:()=>L,SingleSelection:()=>P,WithText:()=>H,default:()=>u});var c=f(x(),1),o=f(b(),1);var s=window.React;function e(t,l,a){let{children:r,...n}=l||{};return a!==void 0&&(n.key=a),r===void 0?s.createElement(t,n):Array.isArray(r)?s.createElement(t,n,...r):s.createElement(t,n,r)}var Z=s.Fragment;var z={title:"Components/Lib/ToggleGroup",component:o.ToggleGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},u=z,d=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M5 3h6a4 4 0 0 1 3 7 4 4 0 0 1-3 7H5V3zm6 6a2 2 0 0 0 0-4H7v4h4zm0 6a2 2 0 0 0 0-4H7v4h4z"})}),p=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M9 3h6v2h-2l-2 10h2v2H7v-2h2l2-10H9V3z"})}),h=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",...t,children:e("path",{d:"M10 15a5 5 0 0 1-5-5V3h2v7a3 3 0 0 0 6 0V3h2v7a5 5 0 0 1-5 5zm-6 1h12v2H4v-2z"})}),w=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h10M3 12h14M3 16h10"})}),M=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M5 8h10M3 12h14M5 16h10"})}),S=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M7 8h10M3 12h14M7 16h10"})}),G=t=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",stroke:"currentColor",strokeWidth:"2",...t,children:e("path",{d:"M3 4h14M3 8h14M3 12h14M3 16h14"})}),D={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})},P={render:()=>{let[t,l]=c.useState(["left"]);return e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Only one can be selected at a time"}),e(o.ToggleGroup,{multiple:!1,value:t,onValueChange:l,children:[e(o.Toggle,{value:"left","aria-label":"Align left",children:e(w,{})}),e(o.Toggle,{value:"center","aria-label":"Align center",children:e(M,{})}),e(o.Toggle,{value:"right","aria-label":"Align right",children:e(S,{})}),e(o.Toggle,{value:"justify","aria-label":"Align justify",children:e(G,{})})]}),e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:["Selected: ",t[0]||"None"]})]})}},j={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[e("p",{style:{fontSize:"14px",color:"var(--sl-text-secondary)",margin:0},children:"Click multiple buttons - they can all be active at once"}),e(o.ToggleGroup,{multiple:!0,defaultValue:["bold","italic"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic","aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})]})},H={render:()=>e(o.ToggleGroup,{defaultValue:["left"],children:[e(o.Toggle,{value:"left",children:[e(w,{}),"Left"]}),e(o.Toggle,{value:"center",children:[e(M,{}),"Center"]}),e(o.Toggle,{value:"right",children:[e(S,{}),"Right"]})]})},W={render:()=>e(o.ToggleGroup,{defaultValue:["bold"],children:[e(o.Toggle,{value:"bold","aria-label":"Bold",children:e(d,{})}),e(o.Toggle,{value:"italic",disabled:!0,"aria-label":"Italic",children:e(p,{})}),e(o.Toggle,{value:"underline","aria-label":"Underline",children:e(h,{})})]})},L={render:function(){let[l,a]=c.useState(["accounting"]);return e(o.ToggleGroup,{"data-variant":"segmented","aria-label":"Modules",value:l,onValueChange:r=>r.length&&a(r),children:[e(o.Toggle,{value:"accounting",children:"Accounting"}),e(o.Toggle,{value:"tax",children:"Tax"}),e(o.Toggle,{value:"reports",children:"Reports"})]})}};var i=window.React,R=u||{},N=["Default","SingleSelection","MultipleSelection","WithText"];function O({id:t}){let l=v[t],a={...R.args||{},...l.args||{}};return(l.render||(n=>i.createElement(R.component,n)))(a,{args:a,id:t,name:t})}var U=N.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(O,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,U));})();
 
 </script>
 </body>