@webority/ui-react 0.78.1 → 0.79.0

package/dist/components/AppRadioGroup.js

@@ -1 +1 @@
-import e from"./warnUnknownProps.js";import t from"../lib/FieldMessage.js";import n from"./AppInfoTip.js";import r from"./AppRequiredMark.js";import{useId as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function s({label:s,options:c=[],name:l,value:u,defaultValue:d,onChange:f,inline:p=!1,required:m=!1,disabled:h=!1,error:g,hint:_,help:v,helpLabel:y=`More information`,id:b,className:x=``,fieldClassName:S=``,style:C,...w}){e(`AppRadioGroup`,w);let T=i(),E=b||T,D=l||E,O=`${E}-error`,k=`${E}-hint`,A=u!==void 0;return o(`div`,{className:`field${S?` ${S}`:``}`,children:[s!=null&&o(`span`,{className:`label`,id:`${E}-label`,children:[s,m&&a(r,{}),v&&a(n,{label:y,children:v})]}),a(`div`,{className:[`wui-radio-group`,p?`wui-radio-group-inline`:``,x].filter(Boolean).join(` `),style:C,id:E,role:`radiogroup`,"aria-labelledby":s==null?void 0:`${E}-label`,"aria-required":m?`true`:void 0,"aria-invalid":g?`true`:void 0,"aria-describedby":g?O:_?k:void 0,...w,children:c.map((e,t)=>{let n=`${E}-${t}`;return o(`div`,{className:`form-check`,children:[a(`input`,{type:`radio`,className:`form-check-input`,id:n,name:D,value:e.value,disabled:h||e.disabled||void 0,required:m||void 0,...A?{checked:u===e.value,onChange:()=>f?.(e.value)}:{defaultChecked:d===e.value,onChange:()=>f?.(e.value)}}),a(`label`,{className:`form-check-label`,htmlFor:n,children:e.label})]},e.value)})}),a(t,{error:g,hint:_,errorId:O,hintId:k})]})}export{s as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"../lib/FieldMessage.js";import r from"./AppInfoTip.js";import i from"./AppRequiredMark.js";import{useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";var c=[`default`,`card`];function l({label:l,options:u=[],name:d,value:f,defaultValue:p,onChange:m,variant:h=`default`,inline:g=!1,required:_=!1,disabled:v=!1,error:y,hint:b,help:x,helpLabel:S=`More information`,id:C,className:w=``,fieldClassName:T=``,style:E,...D}){t(`AppRadioGroup`,D),e(`AppRadioGroup`,`variant`,h,c);let O=a(),k=C||O,A=d||k,j=`${k}-error`,M=`${k}-hint`,N=f!==void 0;return s(`div`,{className:`field${T?` ${T}`:``}`,children:[l!=null&&s(`span`,{className:`label`,id:`${k}-label`,children:[l,_&&o(i,{}),x&&o(r,{label:S,children:x})]}),o(`div`,{className:[`wui-radio-group`,h===`card`?`wui-radio-group-card`:``,g?`wui-radio-group-inline`:``,w].filter(Boolean).join(` `),style:E,id:k,role:`radiogroup`,"aria-labelledby":l==null?void 0:`${k}-label`,"aria-required":_?`true`:void 0,"aria-invalid":y?`true`:void 0,"aria-describedby":y?j:b?M:void 0,...D,children:u.map((e,t)=>{let n=`${k}-${t}`,r=e.description==null?void 0:`${n}-desc`;return s(`div`,{className:`form-check`,children:[o(`input`,{type:`radio`,className:`form-check-input`,id:n,name:A,value:e.value,disabled:v||e.disabled||void 0,required:_||void 0,"aria-describedby":r,...N?{checked:f===e.value,onChange:()=>m?.(e.value)}:{defaultChecked:p===e.value,onChange:()=>m?.(e.value)}}),o(`label`,{className:`form-check-label`,htmlFor:n,children:e.label}),r&&o(`div`,{className:`wui-radio-option-desc`,id:r,children:e.description})]},e.value)})}),o(n,{error:y,hint:b,errorId:j,hintId:M})]})}export{l as default};

package/dist/components/AppWizard.js

@@ -1 +1 @@
-import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Children as r,forwardRef as i,useEffect as a,useRef as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/wizard";var l=[`steps`,`journey`,`icons`,`tiles`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`horizontal`,`vertical`],f=[`done`,`active`,`pending`,`error`],p=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],m=[`check`,`alert-triangle`,`minus`],h=[`sm`,`md`,`lg`],g={sm:14,md:16,lg:20},_=i(function({steps:i=[],children:_,active:v,defaultActive:y=0,onStepChange:b,onFinish:x,onSkip:S,beforeNext:C,onInvalid:w,onClose:T,variant:E=`steps`,tone:D,doneTone:O,orientation:k=`horizontal`,iconVariant:A,size:j=`md`,iconSize:M,skippable:N=!1,nonLinear:P=!1,hideStepper:F=!1,hideConnectors:I=!1,disabled:L=!1,label:R=`Progress`,backLabel:z=`Back`,nextLabel:B=`Next`,skipLabel:V=`Skip`,finishLabel:H=`Finish`,topBar:U=!1,barTitle:W,closeLabel:G=`Close`,className:K=``,...q},J){t(`AppWizard`,q),e(`AppWizard`,`variant`,E,l),e(`AppWizard`,`tone`,D,u),e(`AppWizard`,`doneTone`,O,u),e(`AppWizard`,`orientation`,k,d),e(`AppWizard`,`iconVariant`,A,p),e(`AppWizard`,`size`,j,h);let Y=M>0?M:g[j]??g.md;for(let t of i)e(`AppWizard`,`steps[].status`,t.status,f);let X=o(null),Z=e=>{X.current=e,typeof J==`function`?J(e):J&&(J.current=e)},Q=r.toArray(_),$=A&&A!==`linear`?[...new Set([...m,...i.map(e=>e.icon).filter(Boolean)])]:[],ee=[D&&`wui-step-tone-${D}`,O&&`wui-step-done-tone-${O}`,j!==`md`&&h.includes(j)&&`wui-step-size-${j}`,K].filter(Boolean).join(` `);return a(()=>{let e=X.current;if(!e)return;let t=v===void 0?y:v;t&&(e.active=t)},[]),a(()=>{let e=X.current;e&&v!==void 0&&Number(e.active)!==v&&(e.active=v)},[v]),a(()=>{let e=X.current;e&&(e.beforeNext=C??null)},[C]),a(()=>{let e=X.current;if(!e)return;let t=e=>b?.(e.detail.index,e.detail),n=e=>x?.(e.detail),r=e=>S?.(e.detail.index),i=e=>w?.(e.detail.index),a=e=>T?.(e.detail);return e.addEventListener(`wui-wizard:change`,t),e.addEventListener(`wui-wizard:finish`,n),e.addEventListener(`wui-wizard:skip`,r),e.addEventListener(`wui-wizard:invalid`,i),e.addEventListener(`wui-wizard:close`,a),()=>{e.removeEventListener(`wui-wizard:change`,t),e.removeEventListener(`wui-wizard:finish`,n),e.removeEventListener(`wui-wizard:skip`,r),e.removeEventListener(`wui-wizard:invalid`,i),e.removeEventListener(`wui-wizard:close`,a)}},[b,x,S,w,T]),c(`wui-wizard`,{ref:Z,variant:E,orientation:k,"icon-size":Y===16?void 0:Y,skippable:N?``:void 0,"non-linear":P?``:void 0,"hide-stepper":F?``:void 0,"hide-connectors":I?``:void 0,disabled:L?``:void 0,label:R,"back-label":z,"next-label":B,"skip-label":V,"finish-label":H,"top-bar":U?``:void 0,"bar-title":W||void 0,"close-label":G,className:ee||void 0,...q,children:[i.map((e,t)=>s(`wui-wizard-step`,{label:e.label,description:e.description||void 0,optional:e.optional?``:void 0,icon:e.icon||void 0,status:e.status||void 0,children:Q[t]},e.key??`${e.label}-${t}`)),$.length>0&&s(`span`,{hidden:!0,"data-wui-glyphs":``,children:$.map(e=>s(n,{name:e,size:Y,variant:A},e))})]})});export{_ as default};
+import e from"./warnInvalidValue.js";import t from"./warnUnknownProps.js";import n from"./AppIcon.js";import{Children as r,forwardRef as i,useEffect as a,useRef as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import"@webority/ui-elements/elements/wizard";var l=[`steps`,`journey`,`icons`,`tiles`],u=[`primary`,`success`,`warning`,`danger`,`info`],d=[`horizontal`,`vertical`],ee=[`center`,`start`],f=[`done`,`active`,`pending`,`error`],p=[`linear`,`outline`,`bold`,`bulk`,`broken`,`twotone`],m=[`check`,`alert-triangle`,`minus`],h=[`sm`,`md`,`lg`],g={sm:14,md:16,lg:20},_=i(function({steps:i=[],children:_,active:v,defaultActive:y=0,onStepChange:b,onFinish:x,onSkip:S,beforeNext:C,onInvalid:w,onClose:T,variant:E=`steps`,tone:D,doneTone:O,orientation:k=`horizontal`,align:A=`center`,iconVariant:j,size:M=`md`,iconSize:N,skippable:P=!1,nonLinear:F=!1,hideStepper:I=!1,hideConnectors:L=!1,disabled:R=!1,label:z=`Progress`,backLabel:B=`Back`,nextLabel:V=`Next`,skipLabel:H=`Skip`,finishLabel:U=`Finish`,topBar:W=!1,barTitle:G,closeLabel:K=`Close`,className:q=``,...J},Y){t(`AppWizard`,J),e(`AppWizard`,`variant`,E,l),e(`AppWizard`,`tone`,D,u),e(`AppWizard`,`doneTone`,O,u),e(`AppWizard`,`orientation`,k,d),e(`AppWizard`,`align`,A,ee),e(`AppWizard`,`iconVariant`,j,p),e(`AppWizard`,`size`,M,h);let X=N>0?N:g[M]??g.md;for(let t of i)e(`AppWizard`,`steps[].status`,t.status,f);let Z=o(null),Q=e=>{Z.current=e,typeof Y==`function`?Y(e):Y&&(Y.current=e)},te=r.toArray(_),$=j&&j!==`linear`?[...new Set([...m,...i.map(e=>e.icon).filter(Boolean)])]:[],ne=[D&&`wui-step-tone-${D}`,O&&`wui-step-done-tone-${O}`,M!==`md`&&h.includes(M)&&`wui-step-size-${M}`,q].filter(Boolean).join(` `);return a(()=>{let e=Z.current;if(!e)return;let t=v===void 0?y:v;t&&(e.active=t)},[]),a(()=>{let e=Z.current;e&&v!==void 0&&Number(e.active)!==v&&(e.active=v)},[v]),a(()=>{let e=Z.current;e&&(e.beforeNext=C??null)},[C]),a(()=>{let e=Z.current;if(!e)return;let t=e=>b?.(e.detail.index,e.detail),n=e=>x?.(e.detail),r=e=>S?.(e.detail.index),i=e=>w?.(e.detail.index),a=e=>T?.(e.detail);return e.addEventListener(`wui-wizard:change`,t),e.addEventListener(`wui-wizard:finish`,n),e.addEventListener(`wui-wizard:skip`,r),e.addEventListener(`wui-wizard:invalid`,i),e.addEventListener(`wui-wizard:close`,a),()=>{e.removeEventListener(`wui-wizard:change`,t),e.removeEventListener(`wui-wizard:finish`,n),e.removeEventListener(`wui-wizard:skip`,r),e.removeEventListener(`wui-wizard:invalid`,i),e.removeEventListener(`wui-wizard:close`,a)}},[b,x,S,w,T]),c(`wui-wizard`,{ref:Q,variant:E,orientation:k,align:A===`start`?`start`:void 0,"icon-size":X===16?void 0:X,skippable:P?``:void 0,"non-linear":F?``:void 0,"hide-stepper":I?``:void 0,"hide-connectors":L?``:void 0,disabled:R?``:void 0,label:z,"back-label":B,"next-label":V,"skip-label":H,"finish-label":U,"top-bar":W?``:void 0,"bar-title":G||void 0,"close-label":K,className:ne||void 0,...J,children:[i.map((e,t)=>s(`wui-wizard-step`,{label:e.label,description:e.description||void 0,optional:e.optional?``:void 0,icon:e.icon||void 0,status:e.status||void 0,children:te[t]},e.key??`${e.label}-${t}`)),$.length>0&&s(`span`,{hidden:!0,"data-wui-glyphs":``,children:$.map(e=>s(n,{name:e,size:X,variant:j},e))})]})});export{_ as default};

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

@@ -9,11 +9,14 @@
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.label Visible group label; also the group's accessible name.
- * @param {{ value: string, label: import('react').ReactNode, disabled?: boolean }[]} props.options
+ * @param {{ value: string, label: import('react').ReactNode, description?: import('react').ReactNode, disabled?: boolean }[]} props.options
+ *   `description` is a muted line under the option's label, read with the radio as its description.
  * @param {string} [props.name] Shared name of the radios. Defaults to a generated one.
  * @param {string} [props.value] Selected value (controlled).
  * @param {string} [props.defaultValue] Initially selected value (uncontrolled).
  * @param {(value: string) => void} [props.onChange]
+ * @param {'default'|'card'} [props.variant='default'] `card` draws each option as a bordered card
+ *   the whole of which selects it; the chosen card takes the primary border and a tinted fill.
  * @param {boolean} [props.inline=false] Options in a row (wrapping) instead of a column.
  * @param {boolean} [props.required=false]
  * @param {boolean} [props.disabled=false] Disables every option.
@@ -26,17 +29,19 @@
  * @param {import('react').CSSProperties} [props.style] Inline style; lands on the group with `className`.
  * @param {string} [props.fieldClassName] Class on the `.field` wrapper.
  */
-export default function AppRadioGroup({ label, options, name, value, defaultValue, onChange, inline, required, disabled, error, hint, help, helpLabel, id, className, fieldClassName, style, ...rest }: {
+export default function AppRadioGroup({ label, options, name, value, defaultValue, onChange, variant, inline, required, disabled, error, hint, help, helpLabel, id, className, fieldClassName, style, ...rest }: {
     label: import('react').ReactNode;
     options: {
         value: string;
         label: import('react').ReactNode;
+        description?: import('react').ReactNode;
         disabled?: boolean;
     }[];
     name?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (value: string) => void;
+    variant?: 'default' | 'card';
     inline?: boolean;
     required?: boolean;
     disabled?: boolean;

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

@@ -23,6 +23,7 @@ import "@webority/ui-elements/elements/wizard";
  * @param {'primary'|'success'|'warning'|'danger'|'info'} [props.tone] Recolour the whole stepper accent (active fill, done rail, ring, done tint) to a semantic ramp. Unset keeps the variant's default (primary for steps/journey, success/green for icons). For any other colour, override the `--wui-step-accent` / `--wui-step-soft` CSS variables via `style` or a `className` instead.
  * @param {'primary'|'success'|'warning'|'danger'|'info'} [props.doneTone] Recolour completed steps only (their badge, "STEP n" eyebrow and the filled line after them) to a semantic ramp; the current step keeps the `tone` accent. Unset, completed steps follow `tone`. For any other colour, override the `--wui-step-done-accent` / `--wui-step-done-soft` CSS variables via `style` or a `className` instead.
  * @param {'horizontal'|'vertical'} [props.orientation='horizontal']
+ * @param {'center'|'start'} [props.align='center'] Where each step's badge, label and description sit in its column on a horizontal stepper: centred, or at the start with the line running from badge to badge. Applies to the steps and icons variants; journey, tiles and vertical steps are start-aligned already.
  * @param {'linear'|'outline'|'bold'|'bulk'|'broken'|'twotone'} [props.iconVariant='linear'] The iconsax style of
  *   every header glyph: the done tick, the error alert, the skipped dash and each step's own `icon`.
  * @param {'sm'|'md'|'lg'} [props.size='md'] Scales the stepper header: the badge, its number, the labels and the glyphs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.78.1",
+  "version": "0.79.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.78.1",
-    "@webority/ui-elements": "0.78.1"
+    "@webority/theme": "0.79.0",
+    "@webority/ui-elements": "0.79.0"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.23.0",
@@ -45,7 +45,7 @@
     "@types/react": "^19.2.17",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "5.0.1",
-    "@webority/analytics": "0.23.2",
+    "@webority/analytics": "0.23.3",
     "bootstrap": "5.3.3",
     "jsdom": "30.1.1",
     "react": "^19.2.6",