@webority/ui-react 0.80.9 → 0.82.0

package/dist/components/AppChoiceChip.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";var i=[`sm`,`md`,`lg`];function a({multiple:a=!0,label:o,name:s,value:c,checked:l,onChange:u,children:d,count:f,size:p=`md`,className:m=``,...h}){return t(`AppChoiceChip`,h),e(`AppChoiceChip`,`size`,p,i),r(`label`,{className:`choice-chip${l?` checked`:``}${p===`sm`?` choice-chip-sm`:p===`lg`?` choice-chip-lg`:``}${m?` ${m}`:``}`,...h,children:[n(`input`,{type:a?`checkbox`:`radio`,name:s,value:c,checked:l,onChange:u}),n(`span`,{children:o??d}),f!=null&&n(`span`,{className:`count`,children:f})]})}export{a as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import{jsx as n,jsxs as r}from"react/jsx-runtime";var i=[`sm`,`md`,`lg`];function a({multiple:a=!0,label:o,name:s,value:c,checked:l,onChange:u,children:d,count:f,size:p=`md`,disabled:m=!1,className:h=``,...g}){return t(`AppChoiceChip`,g),e(`AppChoiceChip`,`size`,p,i),r(`label`,{className:`choice-chip${l?` checked`:``}${p===`sm`?` choice-chip-sm`:p===`lg`?` choice-chip-lg`:``}${h?` ${h}`:``}`,...g,children:[n(`input`,{type:a?`checkbox`:`radio`,name:s,value:c,checked:l,disabled:m,onChange:u}),n(`span`,{children:o??d}),f!=null&&n(`span`,{className:`count`,children:f})]})}export{a as default};

package/dist/components/AppSegmented.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{useEffect as r,useId as i,useLayoutEffect as a,useRef as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l={sm:`segmented-sm`,md:``,lg:`segmented-lg`,xl:`wui-segmented-xl`};function u({options:u=[],value:d,onChange:f,label:p,name:m,size:h=`md`,fullWidth:g=!1,bordered:_=!0,disabled:v=!1,labelVisible:y=!1,className:b=``,...x}){t(`AppSegmented`,x),e(`AppSegmented`,`size`,h,Object.keys(l));let S=i(),C=m||S,w=o(null),T=o(null),E=[`segmented`,l[h]??``,g?`segmented-full`:``,_?``:`wui-segmented-borderless`,v?`is-disabled`:``,b].filter(Boolean).join(` `);a(()=>{let e=w.current,t=T.current;if(!e||!t)return;let n=n=>{let r=e.querySelector(`.segmented-option:has(.segmented-input:checked)`);if(!r||!e.offsetWidth){t.style.opacity=`0`;return}n||e.classList.remove(`is-animated`),t.style.width=`${r.offsetWidth}px`,t.style.transform=`translateX(${r.offsetLeft}px)`,t.style.opacity=`1`,n||requestAnimationFrame(()=>w.current?.classList.add(`is-animated`))};n(!0);let r=typeof ResizeObserver<`u`?new ResizeObserver(()=>n(!1)):null;return r?.observe(e),()=>r?.disconnect()},[d,u,h,g,y]),r(()=>{let e=requestAnimationFrame(()=>w.current?.classList.add(`is-animated`));return()=>cancelAnimationFrame(e)},[]);let D=c(`div`,{ref:w,className:E,role:`radiogroup`,"aria-label":p,"aria-disabled":v||void 0,...x,children:[s(`span`,{className:`segmented-thumb`,ref:T,"aria-hidden":`true`}),u.map(e=>c(`label`,{className:`segmented-option`,children:[s(`input`,{type:`radio`,className:`segmented-input`,name:C,value:e.value,checked:e.value===d,disabled:v||e.disabled,onChange:()=>f?.(e.value)}),e.icon&&s(n,{name:e.icon,size:13}),e.note?c(`span`,{className:`segmented-option-text`,children:[s(`span`,{className:`segmented-option-label`,children:e.label}),s(`span`,{className:`segmented-option-note`,children:e.note})]}):e.label,e.count!=null&&s(`span`,{className:`wui-segmented-option-count`,children:e.count})]},e.value))]});return!y||!p?D:c(`div`,{className:`field`,children:[s(`span`,{className:`label`,"aria-hidden":`true`,children:p}),D]})}export{u as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import r from"./warnDeprecatedValue.js";import{useEffect as i,useId as a,useLayoutEffect as o,useRef as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u={sm:`segmented-sm`,md:``,lg:`segmented-lg`},d={xl:{use:`lg`,removeIn:`0.83.0`}};function f({options:f=[],value:p,onChange:m,label:h,name:g,size:_=`md`,fullWidth:v=!1,bordered:y=!0,disabled:b=!1,labelVisible:x=!1,className:S=``,...C}){t(`AppSegmented`,C),r(`AppSegmented`,`size`,_,d);let w=d[_]?.use??_;e(`AppSegmented`,`size`,w,Object.keys(u));let T=a(),E=g||T,D=s(null),O=s(null),k=[`segmented`,u[w]??``,v?`segmented-full`:``,y?``:`wui-segmented-borderless`,b?`is-disabled`:``,S].filter(Boolean).join(` `);o(()=>{let e=D.current,t=O.current;if(!e||!t)return;let n=n=>{let r=e.querySelector(`.segmented-option:has(.segmented-input:checked)`);if(!r||!e.offsetWidth){t.style.opacity=`0`;return}n||e.classList.remove(`is-animated`),t.style.width=`${r.offsetWidth}px`,t.style.transform=`translateX(${r.offsetLeft}px)`,t.style.opacity=`1`,n||requestAnimationFrame(()=>D.current?.classList.add(`is-animated`))};n(!0);let r=typeof ResizeObserver<`u`?new ResizeObserver(()=>n(!1)):null;return r?.observe(e),()=>r?.disconnect()},[p,f,_,v,x]),i(()=>{let e=requestAnimationFrame(()=>D.current?.classList.add(`is-animated`));return()=>cancelAnimationFrame(e)},[]);let A=l(`div`,{ref:D,className:k,role:`radiogroup`,"aria-label":h,"aria-disabled":b||void 0,...C,children:[c(`span`,{className:`segmented-thumb`,ref:O,"aria-hidden":`true`}),f.map(e=>l(`label`,{className:`segmented-option`,children:[c(`input`,{type:`radio`,className:`segmented-input`,name:E,value:e.value,checked:e.value===p,disabled:b||e.disabled,onChange:()=>m?.(e.value)}),e.icon&&c(n,{name:e.icon,size:13}),e.note?l(`span`,{className:`segmented-option-text`,children:[c(`span`,{className:`segmented-option-label`,children:e.label}),c(`span`,{className:`segmented-option-note`,children:e.note})]}):e.label,e.count!=null&&c(`span`,{className:`wui-segmented-option-count`,children:e.count})]},e.value))]});return!x||!h?A:l(`div`,{className:`field`,children:[c(`span`,{className:`label`,"aria-hidden":`true`,children:h}),A]})}export{f as default};

package/dist/components/AppThemeToggle.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`monitor`},C={light:`light`,dark:`dark`,auto:`follows your device`},w=[`icon`,`segmented`],T={sm:16,md:20,lg:24,xl:28};function E({variant:E=`icon`,effect:D=i,includeAuto:O=!0,storageKey:k=a,duration:A,label:j=`Theme`,lightLabel:M=`Light`,darkLabel:N=`Dark`,autoLabel:P=`System`,name:F,size:I=`md`,tooltipPlacement:L=`auto`,onChange:R,className:z=``,...B}){t(`AppThemeToggle`,B),e(`AppThemeToggle`,`variant`,E,w),e(`AppThemeToggle`,`effect`,D,s),e(`AppThemeToggle`,`size`,I,Object.keys(T));let V=g(e=>e===`auto`&&!O?f(e):e,[O]),[H,U]=y(()=>V(typeof window>`u`?`auto`:d(k))),W=v(),G=F||W;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?U(V(e)):l(d(k))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&U(V(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[V]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let K=g((e,t)=>{let n=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},r={x:n.left+n.width/2,y:n.top+n.height/2};m(()=>{l(e),p(e,k),x(()=>U(e)),R?.(e)},{effect:D,to:f(e),origin:r,duration:A})},[k,D,A,R]);if(E===`segmented`){let e=[{value:`light`,label:M,icon:S.light},{value:`dark`,label:N,icon:S.dark}];return O&&e.push({value:`auto`,label:P,icon:S.auto}),b(r,{options:e,value:H,name:G,label:j,size:I,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,z].filter(Boolean).join(` `),onChange:e=>{if(e===H)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(G)}"][value="${e}"]`);K(e,t?.closest(`.segmented-option`)??t)}})}return b(n,{icon:S[H],label:`${j}: ${C[H]}`,size:T[I]??T.md,tooltipPlacement:L,onClick:e=>K(u(H,{includeAuto:O}),e.currentTarget),className:[`wui-theme-toggle`,z].filter(Boolean).join(` `)})}export{E as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppActionIcon.js";import r from"./AppSegmented.js";import{DEFAULT_THEME_EFFECT as i,DEFAULT_THEME_STORAGE_KEY as a,THEME_CHANGE_EVENT as o,THEME_EFFECTS as s,THEME_MODES as c,applyTheme as l,nextTheme as u,readStoredTheme as d,resolveTheme as f,storeTheme as p,transitionTheme as m,watchSystemTheme as h}from"@webority/ui-elements/helpers";import{useCallback as g,useEffect as _,useId as v,useState as y}from"react";import{jsx as b}from"react/jsx-runtime";import{flushSync as x}from"react-dom";var S={light:`sun`,dark:`moon`,auto:`monitor`},C={light:`light`,dark:`dark`,auto:`follows your device`},w=[`icon`,`segmented`],T={sm:16,md:20,lg:24,xl:28};function E({variant:E=`icon`,effect:D=i,includeAuto:O=!0,storageKey:k=a,duration:A,label:j=`Theme`,lightLabel:M=`Light`,darkLabel:N=`Dark`,autoLabel:P=`System`,name:F,size:I=`md`,tooltipPlacement:L=`auto`,onChange:R,className:z=``,...B}){t(`AppThemeToggle`,B),e(`AppThemeToggle`,`variant`,E,w),e(`AppThemeToggle`,`effect`,D,s),e(`AppThemeToggle`,`size`,I,Object.keys(T));let V=g(e=>e===`auto`&&!O?f(e):e,[O]),[H,U]=y(()=>V(typeof window>`u`?`auto`:d(k))),W=v(),G=F||W;_(()=>{let e=document.documentElement.getAttribute(`data-theme`);c.includes(e)?U(V(e)):l(d(k))},[]),_(()=>{let e=e=>{let t=e.detail?.preference;c.includes(t)&&U(V(t))};return document.addEventListener(o,e),()=>document.removeEventListener(o,e)},[V]),_(()=>h(()=>{document.documentElement.getAttribute(`data-theme`)===`auto`&&l(`auto`)}),[]);let K=g((e,t)=>{let n=t?.getBoundingClientRect?.()??{left:0,top:0,width:0,height:0},r={x:n.left+n.width/2,y:n.top+n.height/2};m(()=>{l(e),p(e,k),x(()=>U(e)),R?.(e)},{effect:D,to:f(e),origin:r,duration:A})},[k,D,A,R]);if(E===`segmented`){let e=[{value:`light`,label:M,icon:S.light},{value:`dark`,label:N,icon:S.dark}];return O&&e.push({value:`auto`,label:P,icon:S.auto}),b(r,{options:e,value:H,name:G,label:j,size:I===`xl`?`lg`:I,className:[`wui-theme-toggle`,`wui-theme-toggle-segmented`,z].filter(Boolean).join(` `),onChange:e=>{if(e===H)return;let t=document.querySelector(`.segmented-input[name="${CSS.escape(G)}"][value="${e}"]`);K(e,t?.closest(`.segmented-option`)??t)}})}return b(n,{icon:S[H],label:`${j}: ${C[H]}`,size:T[I]??T.md,tooltipPlacement:L,onClick:e=>K(u(H,{includeAuto:O}),e.currentTarget),className:[`wui-theme-toggle`,z].filter(Boolean).join(` `)})}export{E as default};

package/dist/types/components/AppChoiceChip.d.ts

@@ -12,9 +12,10 @@
  * @param {import('react').ReactNode} [props.count] A matching-row count, e.g. "Active 12".
  *   Shown as a small badge that inverts when the chip is selected.
  * @param {'sm'|'md'|'lg'} [props.size='md'] Pill size — padding, gap and font step together.
+ * @param {boolean} [props.disabled=false] The chip dims and cannot be picked.
  * @param {string} [props.className]
  */
-export default function AppChoiceChip({ multiple, label, name, value, checked, onChange, children, count, size, className, ...rest }: {
+export default function AppChoiceChip({ multiple, label, name, value, checked, onChange, children, count, size, disabled, className, ...rest }: {
     multiple?: boolean;
     label?: import('react').ReactNode;
     name?: string;
@@ -24,5 +25,6 @@ export default function AppChoiceChip({ multiple, label, name, value, checked, o
     children: import('react').ReactNode;
     count?: import('react').ReactNode;
     size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppFormSection.d.ts

@@ -14,7 +14,7 @@
  *   column beside the fields from lg up; below that it stacks.
  * @param {'top'|'start'} [props.labels='top'] `start` puts each field's label beside its control
  *   (one field per row) from md up; below that labels sit on top.
- * @param {'comfortable'|'compact'} [props.density='comfortable'] `compact` uses 36px controls and
+ * @param {'comfortable'|'compact'} [props.density='comfortable'] `compact` uses 32px controls and
  *   tighter gaps, for admin screens and dialogs.
  * @param {2|3|4} [props.headingLevel=3] Heading level of the section title, so it nests under the page or drawer heading.
  * @param {string} [props.className]

package/dist/types/components/AppSegmented.d.ts

@@ -1,14 +1,49 @@
+/**
+ * A segmented control — 2–4 mutually-exclusive options shown side by side, all
+ * visible at once. The canonical use is a theme switch (Light / Dark / System)
+ * or a compact view/range toggle above a chart.
+ *
+ * Past four options the row runs out of width — reach for `AppSelect` instead.
+ * For a boolean use `AppSwitch`; for a filter that can be off use `AppChoiceChip`.
+ *
+ * Built on real `<input type="radio">` elements inside labels, so arrow-key
+ * navigation, the single tab stop, and the "2 of 3" screen-reader announcement all
+ * come from the browser rather than hand-written key handling — and the control
+ * posts inside a plain form with no JavaScript.
+ *
+ * @param {object} props
+ * @param {{ value: string, label: string, note?: string, icon?: string, disabled?: boolean, count?: number }[]} props.options
+ *   `note` renders as a smaller, muted sub-line under the label — a supporting detail
+ *   ("Last 7 days") without shrinking the label itself. Optional; segments without one are
+ *   unaffected.
+ * @param {string} props.value The selected option's value.
+ * @param {(value: string) => void} props.onChange
+ * @param {string} props.label Accessible name for the group.
+ * @param {string} [props.name] Field name. Defaults to a generated one.
+ * @param {'sm'|'md'|'lg'|'xl'} [props.size='md'] Heights 32, 36 and 44px. xl is deprecated (use lg) and is removed in 0.83.0.
+ * @param {boolean} [props.fullWidth=false] Segments share the row equally, filling the container.
+ * @param {boolean} [props.bordered=true] Draws the edge and soft shadow of the selected thumb. `false` keeps a flat thumb.
+ * @param {boolean} [props.disabled=false] Disables the whole control.
+ * @param {boolean} [props.labelVisible=false] Shows the field label above the control. The accessible name stays either way.
+ * @param {string} [props.className]
+ */
 export default function AppSegmented({ options, value, onChange, label, name, size, fullWidth, bordered, disabled, labelVisible, className, ...rest }: {
-    [x: string]: any;
+    options: {
+        value: string;
+        label: string;
+        note?: string;
+        icon?: string;
+        disabled?: boolean;
+        count?: number;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    fullWidth?: boolean;
     bordered?: boolean;
-    className?: string;
     disabled?: boolean;
-    fullWidth?: boolean;
-    label: any;
     labelVisible?: boolean;
-    name: any;
-    onChange: any;
-    options?: any[];
-    size?: string;
-    value: any;
+    className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppThemeToggle.d.ts

@@ -30,7 +30,7 @@
  * @param {string} [props.darkLabel="Dark"] The segmented variant's option text for dark.
  * @param {string} [props.autoLabel="System"] The segmented variant's option text for auto.
  * @param {string} [props.name] The segmented variant's field name (what groups its radios). Defaults to a generated one.
- * @param {"sm"|"md"|"lg"|"xl"} [props.size="md"] The disc's glyph size (16/20/24/28px, the disc scales with it) or the segmented strip's size.
+ * @param {"sm"|"md"|"lg"|"xl"} [props.size="md"] The disc's glyph size (16/20/24/28px, the disc scales with it) or the segmented strip's size (xl draws the lg strip).
  * @param {"auto"|"top"|"bottom"|"start"|"end"} [props.tooltipPlacement="auto"] The disc's preferred tooltip side.
  * @param {(mode: "light"|"dark"|"auto") => void} [props.onChange] Fires with the new mode once it is applied.
  * @param {string} [props.className]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.80.9",
+  "version": "0.82.0",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -27,8 +27,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.80.9",
-    "@webority/ui-elements": "0.80.9"
+    "@webority/theme": "0.82.0",
+    "@webority/ui-elements": "0.82.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.25.0",