@mich8060/unified-design-system 0.2.23 → 0.2.24

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.
@@ -1330,10 +1330,15 @@
1330
1330
  "fullWidth": {
1331
1331
  "type": "boolean",
1332
1332
  "default": false
1333
+ },
1334
+ "span": {
1335
+ "type": "boolean",
1336
+ "default": false
1333
1337
  }
1334
1338
  },
1335
1339
  "defaults": {
1336
- "fullWidth": false
1340
+ "fullWidth": false,
1341
+ "span": false
1337
1342
  },
1338
1343
  "composition": {
1339
1344
  "preferredParents": [
@@ -1987,10 +1992,15 @@
1987
1992
  "neutral"
1988
1993
  ],
1989
1994
  "default": "neutral"
1995
+ },
1996
+ "hideAccentRail": {
1997
+ "type": "boolean",
1998
+ "default": false
1990
1999
  }
1991
2000
  },
1992
2001
  "defaults": {
1993
- "trend": "neutral"
2002
+ "trend": "neutral",
2003
+ "hideAccentRail": false
1994
2004
  },
1995
2005
  "composition": {
1996
2006
  "preferredParents": [
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");;/* empty css */function s({appearance:e="transparent",padding:n="large",className:r="",children:a,...t}){const i=["ds-container",`ds-container--appearance-${e}`,`ds-container--padding-${n}`,r].filter(Boolean).join(" ");return o.jsx("div",{className:i,...t,children:a})}exports.Container=s;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");;/* empty css */function s({appearance:e="transparent",padding:n="large",className:r="",children:a,...t}){const i=["uds-container",`uds-container--appearance-${e}`,`uds-container--padding-${n}`,r].filter(Boolean).join(" ");return o.jsx("div",{className:i,...t,children:a})}exports.Container=s;
@@ -1 +1 @@
1
- import{jsx as i}from"react/jsx-runtime";/* empty css */function p({appearance:n="transparent",padding:a="large",className:r="",children:e,...o}){const t=["ds-container",`ds-container--appearance-${n}`,`ds-container--padding-${a}`,r].filter(Boolean).join(" ");return i("div",{className:t,...o,children:e})}export{p as Container};
1
+ import{jsx as i}from"react/jsx-runtime";/* empty css */function p({appearance:n="transparent",padding:a="large",className:r="",children:e,...o}){const t=["uds-container",`uds-container--appearance-${n}`,`uds-container--padding-${a}`,r].filter(Boolean).join(" ");return i("div",{className:t,...o,children:e})}export{p as Container};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),h=require("react");;/* empty css */const v=new Set(["0","2","4","6","8","10","12","14","16","18","24","32","48","64","80"]);function b(e){return e===!0?"wrap":e===!1||e==null?"nowrap":e}function a(e){return e.replace(/\s+/g,"-")}function G(e){var r;if(e==null)return;const i=String(e).trim();if(i==="auto")return;const t=((r=i.match(/^spacing-(\d+)$/))==null?void 0:r[1])??i;return v.has(t)?`var(--uds-spacing-${t})`:e}const j=h.forwardRef(function({as:i="div",direction:t="row",justifyContent:r,alignItems:l,wrap:s=!1,gap:o,fullWidth:f=!1,inline:c=!1,className:d,style:n,children:x,...p},m){const w=b(s),S=String(o).trim()==="auto"&&r==null,g=["ds-flex",`ds-flex--direction-${t}`,r&&`ds-flex--justify-${a(r)}`,l&&`ds-flex--align-${a(l)}`,`ds-flex--wrap-${a(w)}`,c&&"ds-flex--inline",f&&"ds-flex--full-width",S&&"ds-flex--gap-auto",d].filter(Boolean).join(" "),u={};return o!=null&&(n==null?void 0:n.gap)==null&&(u.gap=G(o)),f&&(n==null?void 0:n.width)==null&&(u.width="100%"),$.jsx(i,{ref:m,className:g,style:{...u,...n},...p,children:x})});exports.Flex=j;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),v=require("react");;/* empty css */const b=new Set(["0","2","4","6","8","10","12","14","16","18","24","32","48","64","80"]);function j(e){return e===!0?"wrap":e===!1||e==null?"nowrap":e}function u(e){return e.replace(/\s+/g,"-")}function G(e){var i;if(e==null)return;const r=String(e).trim();if(r==="auto")return;const t=((i=r.match(/^spacing-(\d+)$/))==null?void 0:i[1])??r;return b.has(t)?`var(--uds-spacing-${t})`:e}const q=v.forwardRef(function({as:r="div",direction:t="row",justifyContent:i,alignItems:f,wrap:s=!1,gap:o,fullWidth:l=!1,span:c=!1,inline:d=!1,className:x,style:n,children:p,...m},w){const S=j(s),g=String(o).trim()==="auto",$=["ds-flex",`ds-flex--direction-${t}`,i&&`ds-flex--justify-${u(i)}`,f&&`ds-flex--align-${u(f)}`,`ds-flex--wrap-${u(S)}`,d&&"ds-flex--inline",l&&"ds-flex--full-width",c&&"ds-flex--span",g&&"ds-flex--gap-auto",x].filter(Boolean).join(" "),a={};return o!=null&&(n==null?void 0:n.gap)==null&&(a.gap=G(o)),l&&(n==null?void 0:n.width)==null&&(a.width="100%"),h.jsx(r,{ref:w,className:$,style:{...a,...n},...m,children:p})});exports.Flex=q;
@@ -1 +1 @@
1
- import{jsx as h}from"react/jsx-runtime";import g from"react";/* empty css */const v=new Set(["0","2","4","6","8","10","12","14","16","18","24","32","48","64","80"]);function G(n){return n===!0?"wrap":n===!1||n==null?"nowrap":n}function f(n){return n.replace(/\s+/g,"-")}function A(n){var o;if(n==null)return;const i=String(n).trim();if(i==="auto")return;const e=((o=i.match(/^spacing-(\d+)$/))==null?void 0:o[1])??i;return v.has(e)?`var(--uds-spacing-${e})`:n}const F=g.forwardRef(function({as:i="div",direction:e="row",justifyContent:o,alignItems:l,wrap:s=!1,gap:a,fullWidth:u=!1,inline:c=!1,className:d,style:r,children:x,...p},m){const w=G(s),S=String(a).trim()==="auto"&&o==null,$=["ds-flex",`ds-flex--direction-${e}`,o&&`ds-flex--justify-${f(o)}`,l&&`ds-flex--align-${f(l)}`,`ds-flex--wrap-${f(w)}`,c&&"ds-flex--inline",u&&"ds-flex--full-width",S&&"ds-flex--gap-auto",d].filter(Boolean).join(" "),t={};return a!=null&&(r==null?void 0:r.gap)==null&&(t.gap=A(a)),u&&(r==null?void 0:r.width)==null&&(t.width="100%"),h(i,{ref:m,className:$,style:{...t,...r},...p,children:x})});export{F as Flex};
1
+ import{jsx as g}from"react/jsx-runtime";import v from"react";/* empty css */const G=new Set(["0","2","4","6","8","10","12","14","16","18","24","32","48","64","80"]);function A(n){return n===!0?"wrap":n===!1||n==null?"nowrap":n}function f(n){return n.replace(/\s+/g,"-")}function b(n){var o;if(n==null)return;const e=String(n).trim();if(e==="auto")return;const i=((o=e.match(/^spacing-(\d+)$/))==null?void 0:o[1])??e;return G.has(i)?`var(--uds-spacing-${i})`:n}const F=v.forwardRef(function({as:e="div",direction:i="row",justifyContent:o,alignItems:l,wrap:s=!1,gap:t,fullWidth:u=!1,span:c=!1,inline:d=!1,className:x,style:r,children:p,...m},w){const S=A(s),$=String(t).trim()==="auto",h=["ds-flex",`ds-flex--direction-${i}`,o&&`ds-flex--justify-${f(o)}`,l&&`ds-flex--align-${f(l)}`,`ds-flex--wrap-${f(S)}`,d&&"ds-flex--inline",u&&"ds-flex--full-width",c&&"ds-flex--span",$&&"ds-flex--gap-auto",x].filter(Boolean).join(" "),a={};return t!=null&&(r==null?void 0:r.gap)==null&&(a.gap=b(t)),u&&(r==null?void 0:r.width)==null&&(a.width="100%"),g(e,{ref:w,className:h,style:{...a,...r},...m,children:p})});export{F as Flex};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("../Icon/Icon.cjs"),i=require("../Text/Text.cjs"),S=require("../Status/Status.cjs");;/* empty css */const z=require("../ProgressIndicator/ProgressIndicator.cjs"),M={up:"TrendUp",down:"TrendDown",neutral:"Minus"};function B({label:e,value:c,helperText:u,statusLabel:o,changeText:h,trend:m="neutral",icon:l,actionIcon:n,showAccentRail:v=!0,accent:N="neutral",progressValue:d,progressLabel:x,progressDelta:_,className:p="",...b}){const a=t=>t!=null&&t!==!1&&t!=="",j=typeof d=="number"&&Number.isFinite(d)?Math.min(100,Math.max(0,d)):void 0,f=a(e)||!!l||!!n,w=a(c),T=a(o),y=a(u),g=a(h),q=["uds-statistics",v?"uds-statistics--with-rail":"uds-statistics--no-rail",`uds-statistics--accent-${N}`,g&&`uds-statistics--trend-${m}`,p].filter(Boolean).join(" ");return s.jsx("div",{className:q,...b,children:f?s.jsxs("div",{className:"uds-statistics__header",children:[s.jsx("div",{className:"uds-statistics__bar"}),s.jsxs("div",{className:"uds-statistics__main",children:[l?s.jsxs("div",{className:"uds-statistics__icon",children:[s.jsx("span",{className:"uds-statistics__icon-tile","aria-hidden":"true",children:s.jsx(r.default,{name:l,size:18})}),a(e)?s.jsx(i.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:e}):null]}):null,T?s.jsx("div",{className:"uds-statistics__status",children:s.jsx(S.default,{label:o,appearance:"transparent",variant:"blue"})}):null,s.jsxs("div",{className:"uds-statistics__text",children:[w?s.jsx("div",{className:"uds-statistics__value",children:s.jsx(i.Text,{as:"p",variant:"heading-32",weight:"bold",leading:"regular",children:c})}):null,y?s.jsx(i.Text,{as:"p",variant:"body-12",leading:"regular",children:u}):null,g?s.jsxs("div",{className:"uds-statistics__change",children:[s.jsx(r.default,{name:M[m],size:14}),s.jsx(i.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:h})]}):null]}),j!==void 0?s.jsxs("div",{className:"uds-statistics__progress-row",children:[s.jsx(z.default,{size:"large",value:j,className:"uds-statistics__progress-indicator"}),a(x)?s.jsx(i.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",className:"uds-statistics__progress-label",children:x}):null]}):null]}),s.jsxs("div",{className:"uds-statistics__meta",children:[n?s.jsx("span",{className:"uds-statistics__action-icon","aria-hidden":"true",children:s.jsx(r.default,{name:n,size:24})}):null,a(_)?s.jsx(i.Text,{as:"span",variant:"body-20",weight:"medium",leading:"regular",className:"uds-statistics__progress-delta",children:_}):null]})]}):null})}exports.Statistics=B;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../Icon/Icon.cjs"),t=require("../Text/Text.cjs"),C=require("../Status/Status.cjs");;/* empty css */const H=require("../ProgressIndicator/ProgressIndicator.cjs"),O={up:"TrendUp",down:"TrendDown",neutral:"Minus"};function $({label:e,value:u,helperText:o,statusLabel:h,changeText:m,trend:_="neutral",icon:n,actionIcon:l,labelBoxColor:d,showAccentRail:N=!0,hideAccentRail:p=!1,accent:f="neutral",progressValue:r,progressLabel:x,progressDelta:g,className:b="",style:y,...w}){const a=i=>i!=null&&i!==!1&&i!=="",j=typeof r=="number"&&Number.isFinite(r)?Math.min(100,Math.max(0,r)):void 0,T=a(e)||!!n||!!l,S=a(u),q=a(h),z=a(o),v=a(m),M=p?!1:N,P=typeof d=="string"&&d.trim().length>0?{backgroundColor:d.trim()}:void 0,R=["uds-statistics",M?"uds-statistics--with-rail":"uds-statistics--no-rail",`uds-statistics--accent-${f}`,v&&`uds-statistics--trend-${_}`,b].filter(Boolean).join(" ");return s.jsx("div",{className:R,style:y,...w,children:T?s.jsxs("div",{className:"uds-statistics__header",children:[s.jsx("div",{className:"uds-statistics__bar"}),s.jsxs("div",{className:"uds-statistics__main",children:[n?s.jsxs("div",{className:"uds-statistics__icon",children:[s.jsx("span",{className:"uds-statistics__icon-tile",style:P,"aria-hidden":"true",children:s.jsx(c.default,{name:n,size:18})}),a(e)?s.jsx(t.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:e}):null]}):null,q?s.jsx("div",{className:"uds-statistics__status",children:s.jsx(C.default,{label:h,appearance:"transparent",variant:"blue"})}):null,s.jsxs("div",{className:"uds-statistics__text",children:[S?s.jsx("div",{className:"uds-statistics__value",children:s.jsx(t.Text,{as:"p",variant:"heading-32",weight:"bold",leading:"regular",children:u})}):null,z?s.jsx(t.Text,{as:"p",variant:"body-12",leading:"regular",children:o}):null,v?s.jsxs("div",{className:"uds-statistics__change",children:[s.jsx(c.default,{name:O[_],size:14}),s.jsx(t.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:m})]}):null]}),j!==void 0?s.jsxs("div",{className:"uds-statistics__progress-row",children:[s.jsx(H.default,{size:"large",value:j,className:"uds-statistics__progress-indicator"}),a(x)?s.jsx(t.Text,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",className:"uds-statistics__progress-label",children:x}):null]}):null]}),s.jsxs("div",{className:"uds-statistics__meta",children:[l?s.jsx("span",{className:"uds-statistics__action-icon","aria-hidden":"true",children:s.jsx(c.default,{name:l,size:24})}):null,a(g)?s.jsx(t.Text,{as:"span",variant:"body-20",weight:"medium",leading:"regular",className:"uds-statistics__progress-delta",children:g}):null]})]}):null})}exports.Statistics=$;
@@ -1 +1 @@
1
- import{jsx as s,jsxs as i}from"react/jsx-runtime";import c from"../Icon/Icon.js";import{Text as t}from"../Text/Text.js";import M from"../Status/Status.js";/* empty css */import S from"../ProgressIndicator/ProgressIndicator.js";const H={up:"TrendUp",down:"TrendDown",neutral:"Minus"};function I({label:l,value:u,helperText:o,statusLabel:m,changeText:h,trend:_="neutral",icon:n,actionIcon:d,showAccentRail:b=!0,accent:f="neutral",progressValue:r,progressLabel:g,progressDelta:p,className:w="",...y}){const a=e=>e!=null&&e!==!1&&e!=="",v=typeof r=="number"&&Number.isFinite(r)?Math.min(100,Math.max(0,r)):void 0,x=a(l)||!!n||!!d,z=a(u),j=a(m),B=a(o),N=a(h),C=["uds-statistics",b?"uds-statistics--with-rail":"uds-statistics--no-rail",`uds-statistics--accent-${f}`,N&&`uds-statistics--trend-${_}`,w].filter(Boolean).join(" ");return s("div",{className:C,...y,children:x?i("div",{className:"uds-statistics__header",children:[s("div",{className:"uds-statistics__bar"}),i("div",{className:"uds-statistics__main",children:[n?i("div",{className:"uds-statistics__icon",children:[s("span",{className:"uds-statistics__icon-tile","aria-hidden":"true",children:s(c,{name:n,size:18})}),a(l)?s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:l}):null]}):null,j?s("div",{className:"uds-statistics__status",children:s(M,{label:m,appearance:"transparent",variant:"blue"})}):null,i("div",{className:"uds-statistics__text",children:[z?s("div",{className:"uds-statistics__value",children:s(t,{as:"p",variant:"heading-32",weight:"bold",leading:"regular",children:u})}):null,B?s(t,{as:"p",variant:"body-12",leading:"regular",children:o}):null,N?i("div",{className:"uds-statistics__change",children:[s(c,{name:H[_],size:14}),s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:h})]}):null]}),v!==void 0?i("div",{className:"uds-statistics__progress-row",children:[s(S,{size:"large",value:v,className:"uds-statistics__progress-indicator"}),a(g)?s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",className:"uds-statistics__progress-label",children:g}):null]}):null]}),i("div",{className:"uds-statistics__meta",children:[d?s("span",{className:"uds-statistics__action-icon","aria-hidden":"true",children:s(c,{name:d,size:24})}):null,a(p)?s(t,{as:"span",variant:"body-20",weight:"medium",leading:"regular",className:"uds-statistics__progress-delta",children:p}):null]})]}):null})}export{I as Statistics};
1
+ import{jsx as s,jsxs as i}from"react/jsx-runtime";import u from"../Icon/Icon.js";import{Text as t}from"../Text/Text.js";import $ from"../Status/Status.js";/* empty css */import k from"../ProgressIndicator/ProgressIndicator.js";const A={up:"TrendUp",down:"TrendDown",neutral:"Minus"};function U({label:n,value:o,helperText:m,statusLabel:h,changeText:_,trend:g="neutral",icon:l,actionIcon:d,labelBoxColor:r,showAccentRail:b=!0,hideAccentRail:w=!1,accent:y="neutral",progressValue:c,progressLabel:p,progressDelta:v,className:S="",style:z,...j}){const a=e=>e!=null&&e!==!1&&e!=="",N=typeof c=="number"&&Number.isFinite(c)?Math.min(100,Math.max(0,c)):void 0,M=a(n)||!!l||!!d,T=a(o),x=a(h),C=a(m),f=a(_),H=w?!1:b,P=typeof r=="string"&&r.trim().length>0?{backgroundColor:r.trim()}:void 0,R=["uds-statistics",H?"uds-statistics--with-rail":"uds-statistics--no-rail",`uds-statistics--accent-${y}`,f&&`uds-statistics--trend-${g}`,S].filter(Boolean).join(" ");return s("div",{className:R,style:z,...j,children:M?i("div",{className:"uds-statistics__header",children:[s("div",{className:"uds-statistics__bar"}),i("div",{className:"uds-statistics__main",children:[l?i("div",{className:"uds-statistics__icon",children:[s("span",{className:"uds-statistics__icon-tile",style:P,"aria-hidden":"true",children:s(u,{name:l,size:18})}),a(n)?s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:n}):null]}):null,x?s("div",{className:"uds-statistics__status",children:s($,{label:h,appearance:"transparent",variant:"blue"})}):null,i("div",{className:"uds-statistics__text",children:[T?s("div",{className:"uds-statistics__value",children:s(t,{as:"p",variant:"heading-32",weight:"bold",leading:"regular",children:o})}):null,C?s(t,{as:"p",variant:"body-12",leading:"regular",children:m}):null,f?i("div",{className:"uds-statistics__change",children:[s(u,{name:A[g],size:14}),s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",children:_})]}):null]}),N!==void 0?i("div",{className:"uds-statistics__progress-row",children:[s(k,{size:"large",value:N,className:"uds-statistics__progress-indicator"}),a(p)?s(t,{as:"span",variant:"body-12",weight:"semibold",leading:"regular",className:"uds-statistics__progress-label",children:p}):null]}):null]}),i("div",{className:"uds-statistics__meta",children:[d?s("span",{className:"uds-statistics__action-icon","aria-hidden":"true",children:s(u,{name:d,size:24})}):null,a(v)?s(t,{as:"span",variant:"body-20",weight:"medium",leading:"regular",className:"uds-statistics__progress-delta",children:v}):null]})]}):null})}export{U as Statistics};
@@ -14,5 +14,6 @@ export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
14
14
  wrap?: boolean | FlexWrap;
15
15
  gap?: FlexGapToken | FlexGapTokenName | FlexGapSpecial | number | string;
16
16
  fullWidth?: boolean;
17
+ span?: boolean;
17
18
  inline?: boolean;
18
19
  }
@@ -1,3 +1,3 @@
1
1
  import "./_statistics.scss";
2
2
  import type { StatisticsProps } from "./Statistics.types";
3
- export declare function Statistics({ label, value, helperText, statusLabel, changeText, trend, icon, actionIcon, showAccentRail, accent, progressValue, progressLabel, progressDelta, className, ...rest }: StatisticsProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function Statistics({ label, value, helperText, statusLabel, changeText, trend, icon, actionIcon, labelBoxColor, showAccentRail, hideAccentRail, accent, progressValue, progressLabel, progressDelta, className, style, ...rest }: StatisticsProps): import("react/jsx-runtime").JSX.Element;
@@ -10,7 +10,12 @@ export interface StatisticsProps extends HTMLAttributes<HTMLDivElement> {
10
10
  trend?: StatisticsTrend;
11
11
  icon?: string;
12
12
  actionIcon?: string;
13
+ /** Inline CSS color value for the label icon tile background. */
14
+ labelBoxColor?: string;
15
+ /** Legacy flag for accent rail visibility. */
13
16
  showAccentRail?: boolean;
17
+ /** When true, hides the left accent rail entirely. */
18
+ hideAccentRail?: boolean;
14
19
  accent?: StatisticsAccent;
15
20
  progressValue?: number;
16
21
  progressLabel?: ReactNode;