ods-ant 0.2.0 → 0.4.1

package/dist-lib/core-bPY3ouxp.cjs

@@ -0,0 +1,2 @@
+var e={brand:{primary:`#007CC1`,primaryHover:`#00669E`,primaryPressed:`#005483`,brandTint:`#80BDE0`,deepBrand:`#163E5E`},text:{primary:`#1E394E`,secondary:`#3C5C6E`,disabled:`#BAC5CC`,strong:`#181818`,inverse:`#FFFFFF`,muted:`#627386`,iconMuted:`#7A8A95`},status:{success:`#36B35B`,successDark:`#277036`,successDeep:`#2E8540`,warning:`#D3722E`,warningDark:`#B05D23`,warningDeep:`#975220`,error:`#DB3A29`,errorDark:`#C53026`,errorDeep:`#AE2522`},surface:{layout:`#FBFBFA`,container:`#FFFFFF`,subtle:`#F2F6FA`,canvas:`#F3F2F1`,neutralSoft:`#E5E8EA`,divider:`#E5E7EB`,successSoft:`#E7F4E4`,warningSoft:`#F9E6CF`,errorSoft:`#F9E9E8`},accent:{highlight:`#F7C91E`,highlightBg:`#FAF5E2`,highlightSoft:`#FAF0C8`,signal:`#F6BE00`},semantic:{successBg:`#EBF7F0`,warningBg:`#FDF5EE`,errorBg:`#FEF1F0`,infoBg:`#F0F5FD`}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});
+//# sourceMappingURL=core-bPY3ouxp.cjs.map

package/dist-lib/core-bPY3ouxp.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-bPY3ouxp.cjs","names":[],"sources":["../src/tokens/core.ts"],"sourcesContent":["export const CORE_COLORS = {\n  brand: {\n    primary: '#007CC1',\n    primaryHover: '#00669E',\n    primaryPressed: '#005483',\n    brandTint: '#80BDE0',\n    deepBrand: '#163E5E',\n  },\n  text: {\n    primary: '#1E394E',\n    secondary: '#3C5C6E',\n    disabled: '#BAC5CC',\n    strong: '#181818',\n    inverse: '#FFFFFF',\n    muted: '#627386',\n    iconMuted: '#7A8A95',\n  },\n  status: {\n    success: '#36B35B',\n    successDark: '#277036',\n    successDeep: '#2E8540',\n    warning: '#D3722E',\n    warningDark: '#B05D23',\n    warningDeep: '#975220',\n    error: '#DB3A29',\n    errorDark: '#C53026',\n    errorDeep: '#AE2522',\n  },\n  surface: {\n    layout: '#FBFBFA',\n    container: '#FFFFFF',\n    subtle: '#F2F6FA',\n    canvas: '#F3F2F1',\n    neutralSoft: '#E5E8EA',\n    divider: '#E5E7EB',\n    successSoft: '#E7F4E4',\n    warningSoft: '#F9E6CF',\n    errorSoft: '#F9E9E8',\n  },\n  accent: {\n    highlight: '#F7C91E',\n    highlightBg: '#FAF5E2',\n    highlightSoft: '#FAF0C8',\n    signal: '#F6BE00',\n  },\n  semantic: {\n    successBg: '#EBF7F0',\n    warningBg: '#FDF5EE',\n    errorBg: '#FEF1F0',\n    infoBg: '#F0F5FD',\n  },\n} as const\n\nexport type CoreColors = typeof CORE_COLORS\n"],"mappings":"AAAA,IAAa,EAAc,CACzB,MAAO,CACL,QAAS,UACT,aAAc,UACd,eAAgB,UAChB,UAAW,UACX,UAAW,UACZ,CACD,KAAM,CACJ,QAAS,UACT,UAAW,UACX,SAAU,UACV,OAAQ,UACR,QAAS,UACT,MAAO,UACP,UAAW,UACZ,CACD,OAAQ,CACN,QAAS,UACT,YAAa,UACb,YAAa,UACb,QAAS,UACT,YAAa,UACb,YAAa,UACb,MAAO,UACP,UAAW,UACX,UAAW,UACZ,CACD,QAAS,CACP,OAAQ,UACR,UAAW,UACX,OAAQ,UACR,OAAQ,UACR,YAAa,UACb,QAAS,UACT,YAAa,UACb,YAAa,UACb,UAAW,UACZ,CACD,OAAQ,CACN,UAAW,UACX,YAAa,UACb,cAAe,UACf,OAAQ,UACT,CACD,SAAU,CACR,UAAW,UACX,UAAW,UACX,QAAS,UACT,OAAQ,UACT,CACF"}

package/dist-lib/display/Avatar.cjs

@@ -0,0 +1,84 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./Icon.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-avatar-styles`,o=`ds-avatar-wrap`,s=`ds-avatar`,c={user:`singleNeutralCircle`,provider:`patient`,team:`officeFileSheet`,system:`cog`,anonymous:`singleNeutralCircle`};function l(...e){return e.filter(Boolean).join(` `).trim()}function u(){if(typeof document>`u`)return;let{avatar:t}=e.dsSemanticTokens,n=document.getElementById(a);n||(n=document.createElement(`style`),n.id=a,document.head.appendChild(n)),n.textContent=`
+    .${o} {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ds-avatar-size);
+      height: var(--ds-avatar-size);
+      vertical-align: middle;
+      flex: 0 0 auto;
+      line-height: 0;
+    }
+
+    .${o},
+    .${o} * {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${s}.ant-avatar {
+      width: var(--ds-avatar-size);
+      height: var(--ds-avatar-size);
+      min-width: var(--ds-avatar-size);
+      background: var(--ds-avatar-bg);
+      border: ${t.border.width} solid var(--ds-avatar-border);
+      color: var(--ds-avatar-text);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'Nunito', sans-serif;
+      font-size: var(--ds-avatar-font-size) !important;
+      font-weight: ${t.typography.fontWeight};
+      line-height: var(--ds-avatar-line-height) !important;
+      letter-spacing: ${t.typography.letterSpacing};
+      box-sizing: border-box;
+    }
+
+    .${s}.ant-avatar-circle {
+      border-radius: 999px;
+    }
+
+    .${s}.ant-avatar-square {
+      border-radius: ${t.border.squareRadius};
+    }
+
+    .${s}.ant-avatar .ant-avatar-string {
+      position: static;
+      transform: none !important;
+      left: auto;
+      max-width: calc(100% - 6px);
+      color: inherit;
+      font-size: inherit !important;
+      line-height: var(--ds-avatar-line-height) !important;
+      overflow: hidden;
+      text-overflow: clip;
+      white-space: nowrap;
+    }
+
+    .${s}.ant-avatar .ant-avatar-image,
+    .${s}.ant-avatar > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ds-avatar-presence {
+      position: absolute;
+      right: var(--ds-avatar-status-offset);
+      bottom: var(--ds-avatar-status-offset);
+      width: var(--ds-avatar-status-size);
+      height: var(--ds-avatar-status-size);
+      border: ${t.border.statusWidth} solid ${t.border.statusColor};
+      border-radius: 999px;
+      background: var(--ds-avatar-presence-color);
+      box-sizing: border-box;
+    }
+
+    .ds-avatar-group.ant-avatar-group {
+      display: inline-flex;
+      align-items: center;
+      font-family: 'Nunito', sans-serif;
+    }
+  `}function d(e,t){let n=t??e;if(!n)return;let r=n.trim().split(/\s+/).filter(Boolean);if(r.length!==0)return t?t.trim().slice(0,3).toUpperCase():r.length===1?r[0].slice(0,2).toUpperCase():`${r[0][0]}${r[r.length-1][0]}`.toUpperCase()}function f(e,t,n,r){return t||n||r?!1:e===`system`||e===`anonymous`||!r}function p(t,n,r){let{avatar:i}=e.dsSemanticTokens,a=i.size[n],o=i.variant[t];return{"--ds-avatar-size":`${a.box}px`,"--ds-avatar-status-size":`${a.status}px`,"--ds-avatar-status-offset":`${a.statusOffset}px`,"--ds-avatar-font-size":a.fontSize,"--ds-avatar-line-height":a.lineHeight,"--ds-avatar-bg":o.bg,"--ds-avatar-text":o.text,"--ds-avatar-border":o.border,...r}}var m=({alt:a,children:m,className:h,dsInitials:g,dsName:_,dsPresence:v,dsShape:y=`circle`,dsShowPresence:b=!0,dsSize:x=`md`,dsVariant:S=`user`,rootClassName:C,src:w,style:T,...E})=>{(0,r.useEffect)(()=>{u()},[]);let D=d(_,g),O=e.dsSemanticTokens.avatar.size[x],k=f(S,w,m,D)?(0,i.jsx)(t.Icon,{dsGroup:S===`system`?`action`:`entity`,dsName:c[S],dsSize:O.iconSize,dsTone:S===`anonymous`?`muted`:`default`}):m??D,A=!!(v&&b),j={...p(S,x,void 0),"--ds-avatar-presence-color":v?e.dsSemanticTokens.avatar.presence[v]:`transparent`},M=p(S,x,T);return(0,i.jsxs)(`span`,{className:o,"data-ds-avatar-presence":A?v:void 0,"data-ds-avatar-shape":y,"data-ds-avatar-size":x,"data-ds-avatar-variant":S,style:j,children:[(0,i.jsx)(n.Avatar,{...E,alt:a??_,className:l(s,h),rootClassName:C,shape:y,size:O.box,src:w,style:M,children:k}),A?(0,i.jsx)(`span`,{"aria-hidden":`true`,className:`ds-avatar-presence`}):null]})},h=({className:t,dsShape:a,dsSize:o,...s})=>((0,r.useEffect)(()=>{u()},[]),(0,i.jsx)(n.Avatar.Group,{...s,className:l(`ds-avatar-group`,t),"data-ds-avatar-group-shape":a,"data-ds-avatar-group-size":o,shape:a??s.shape,size:o?e.dsSemanticTokens.avatar.size[o].box:s.size}));m.displayName=`Avatar`,h.displayName=`Avatar.Group`,m.Group=h,exports.Avatar=m;
+//# sourceMappingURL=Avatar.cjs.map

package/dist-lib/display/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.cjs","names":[],"sources":["../../src/ds/display/Avatar.tsx"],"sourcesContent":["import { Avatar as AntAvatar } from 'antd';\nimport type { AvatarProps as AntAvatarProps } from 'antd/es/avatar';\nimport type { AvatarGroupProps as AntAvatarGroupProps } from 'antd/es/avatar/AvatarGroup';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { Icon } from './Icon';\nimport type { DSIconName } from './Icon';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSAvatarVariant = 'user' | 'provider' | 'team' | 'system' | 'anonymous';\nexport type DSAvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type DSAvatarPresence = 'available' | 'away' | 'busy' | 'offline';\nexport type DSAvatarShape = 'circle' | 'square';\n\nexport type AvatarProps = Omit<AntAvatarProps, 'size' | 'shape' | 'icon' | 'children'> & {\n  /** Semantic entity represented by the avatar. */\n  dsVariant?: DSAvatarVariant;\n  /** DS size scale. */\n  dsSize?: DSAvatarSize;\n  /** DS avatar shape. */\n  dsShape?: DSAvatarShape;\n  /** Display name used to derive fallback initials and accessible labels. */\n  dsName?: string;\n  /** Explicit fallback initials. Overrides initials derived from `dsName`. */\n  dsInitials?: string;\n  /** Presence/status dot shown at the bottom-right edge. */\n  dsPresence?: DSAvatarPresence;\n  /** Hide the presence/status dot while preserving all other variant styling. */\n  dsShowPresence?: boolean;\n  /** Optional custom fallback content. Prefer `dsName` or `dsInitials` for standard initials. */\n  children?: ReactNode;\n};\n\nexport type AvatarGroupProps = AntAvatarGroupProps & {\n  /** DS size forwarded to grouped DS avatars through context styling only when children opt in. */\n  dsSize?: DSAvatarSize;\n  /** DS shape forwarded to grouped DS avatars through context styling only when children opt in. */\n  dsShape?: DSAvatarShape;\n};\n\ntype DSAvatarComponent = FC<AvatarProps> & {\n  Group: FC<AvatarGroupProps>;\n};\n\nconst STYLE_ID = 'ds-avatar-styles';\nconst DS_AVATAR_WRAP_CLASS = 'ds-avatar-wrap';\nconst DS_AVATAR_CLASS = 'ds-avatar';\n\nconst FALLBACK_ICON_BY_VARIANT: Record<DSAvatarVariant, DSIconName> = {\n  user: 'singleNeutralCircle',\n  provider: 'patient',\n  team: 'officeFileSheet',\n  system: 'cog',\n  anonymous: 'singleNeutralCircle',\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { avatar } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_AVATAR_WRAP_CLASS} {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--ds-avatar-size);\n      height: var(--ds-avatar-size);\n      vertical-align: middle;\n      flex: 0 0 auto;\n      line-height: 0;\n    }\n\n    .${DS_AVATAR_WRAP_CLASS},\n    .${DS_AVATAR_WRAP_CLASS} * {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar {\n      width: var(--ds-avatar-size);\n      height: var(--ds-avatar-size);\n      min-width: var(--ds-avatar-size);\n      background: var(--ds-avatar-bg);\n      border: ${avatar.border.width} solid var(--ds-avatar-border);\n      color: var(--ds-avatar-text);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: 'Nunito', sans-serif;\n      font-size: var(--ds-avatar-font-size) !important;\n      font-weight: ${avatar.typography.fontWeight};\n      line-height: var(--ds-avatar-line-height) !important;\n      letter-spacing: ${avatar.typography.letterSpacing};\n      box-sizing: border-box;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar-circle {\n      border-radius: 999px;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar-square {\n      border-radius: ${avatar.border.squareRadius};\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar .ant-avatar-string {\n      position: static;\n      transform: none !important;\n      left: auto;\n      max-width: calc(100% - 6px);\n      color: inherit;\n      font-size: inherit !important;\n      line-height: var(--ds-avatar-line-height) !important;\n      overflow: hidden;\n      text-overflow: clip;\n      white-space: nowrap;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar .ant-avatar-image,\n    .${DS_AVATAR_CLASS}.ant-avatar > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .ds-avatar-presence {\n      position: absolute;\n      right: var(--ds-avatar-status-offset);\n      bottom: var(--ds-avatar-status-offset);\n      width: var(--ds-avatar-status-size);\n      height: var(--ds-avatar-status-size);\n      border: ${avatar.border.statusWidth} solid ${avatar.border.statusColor};\n      border-radius: 999px;\n      background: var(--ds-avatar-presence-color);\n      box-sizing: border-box;\n    }\n\n    .ds-avatar-group.ant-avatar-group {\n      display: inline-flex;\n      align-items: center;\n      font-family: 'Nunito', sans-serif;\n    }\n  `;\n}\n\nfunction getInitials(name: string | undefined, explicitInitials: string | undefined) {\n  const source = explicitInitials ?? name;\n  if (!source) return undefined;\n\n  const parts = source.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return undefined;\n  if (explicitInitials) return explicitInitials.trim().slice(0, 3).toUpperCase();\n  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();\n}\n\nfunction shouldUseIcon(variant: DSAvatarVariant, src: AvatarProps['src'], children: ReactNode, initials: string | undefined) {\n  if (src || children || initials) return false;\n  return variant === 'system' || variant === 'anonymous' || !initials;\n}\n\nfunction getAvatarStyle(dsVariant: DSAvatarVariant, dsSize: DSAvatarSize, userStyle: CSSProperties | undefined) {\n  const { avatar } = dsSemanticTokens;\n  const sizeTokens = avatar.size[dsSize];\n  const palette = avatar.variant[dsVariant];\n\n  return {\n    '--ds-avatar-size': `${sizeTokens.box}px`,\n    '--ds-avatar-status-size': `${sizeTokens.status}px`,\n    '--ds-avatar-status-offset': `${sizeTokens.statusOffset}px`,\n    '--ds-avatar-font-size': sizeTokens.fontSize,\n    '--ds-avatar-line-height': sizeTokens.lineHeight,\n    '--ds-avatar-bg': palette.bg,\n    '--ds-avatar-text': palette.text,\n    '--ds-avatar-border': palette.border,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nexport const Avatar: DSAvatarComponent = ({\n  alt,\n  children,\n  className,\n  dsInitials,\n  dsName,\n  dsPresence,\n  dsShape = 'circle',\n  dsShowPresence = true,\n  dsSize = 'md',\n  dsVariant = 'user',\n  rootClassName,\n  src,\n  style,\n  ...props\n}: AvatarProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const initials = getInitials(dsName, dsInitials);\n  const sizeTokens = dsSemanticTokens.avatar.size[dsSize];\n  const useIcon = shouldUseIcon(dsVariant, src, children, initials);\n  const fallback = useIcon\n    ? <Icon dsGroup={dsVariant === 'system' ? 'action' : 'entity'} dsName={FALLBACK_ICON_BY_VARIANT[dsVariant]} dsSize={sizeTokens.iconSize} dsTone={dsVariant === 'anonymous' ? 'muted' : 'default'} />\n    : children ?? initials;\n  const showPresence = Boolean(dsPresence && dsShowPresence);\n  const wrapperStyle = {\n    ...getAvatarStyle(dsVariant, dsSize, undefined),\n    '--ds-avatar-presence-color': dsPresence ? dsSemanticTokens.avatar.presence[dsPresence] : 'transparent',\n  } as CSSProperties;\n  const avatarStyle = getAvatarStyle(dsVariant, dsSize, style);\n\n  return (\n    <span\n      className={DS_AVATAR_WRAP_CLASS}\n      data-ds-avatar-presence={showPresence ? dsPresence : undefined}\n      data-ds-avatar-shape={dsShape}\n      data-ds-avatar-size={dsSize}\n      data-ds-avatar-variant={dsVariant}\n      style={wrapperStyle}\n    >\n      <AntAvatar\n        {...props}\n        alt={alt ?? dsName}\n        className={mergeClassNames(DS_AVATAR_CLASS, className)}\n        rootClassName={rootClassName}\n        shape={dsShape}\n        size={sizeTokens.box}\n        src={src}\n        style={avatarStyle}\n      >\n        {fallback}\n      </AntAvatar>\n      {showPresence ? <span aria-hidden=\"true\" className=\"ds-avatar-presence\" /> : null}\n    </span>\n  );\n};\n\nconst AvatarGroup: FC<AvatarGroupProps> = ({ className, dsShape, dsSize, ...props }) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <AntAvatar.Group\n      {...props}\n      className={mergeClassNames('ds-avatar-group', className)}\n      data-ds-avatar-group-shape={dsShape}\n      data-ds-avatar-group-size={dsSize}\n      shape={dsShape ?? props.shape}\n      size={dsSize ? dsSemanticTokens.avatar.size[dsSize].box : props.size}\n    />\n  );\n};\n\nAvatar.displayName = 'Avatar';\nAvatarGroup.displayName = 'Avatar.Group';\nAvatar.Group = AvatarGroup;\n"],"mappings":"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"}

package/dist-lib/display/Avatar.js

@@ -0,0 +1,176 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Icon as t } from "./Icon.js";
+import { Avatar as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/ds/display/Avatar.tsx
+var o = "ds-avatar-styles", s = "ds-avatar-wrap", c = "ds-avatar", l = {
+	user: "singleNeutralCircle",
+	provider: "patient",
+	team: "officeFileSheet",
+	system: "cog",
+	anonymous: "singleNeutralCircle"
+};
+function u(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function d() {
+	if (typeof document > "u") return;
+	let { avatar: t } = e, n = document.getElementById(o);
+	n || (n = document.createElement("style"), n.id = o, document.head.appendChild(n)), n.textContent = `
+    .${s} {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ds-avatar-size);
+      height: var(--ds-avatar-size);
+      vertical-align: middle;
+      flex: 0 0 auto;
+      line-height: 0;
+    }
+
+    .${s},
+    .${s} * {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${c}.ant-avatar {
+      width: var(--ds-avatar-size);
+      height: var(--ds-avatar-size);
+      min-width: var(--ds-avatar-size);
+      background: var(--ds-avatar-bg);
+      border: ${t.border.width} solid var(--ds-avatar-border);
+      color: var(--ds-avatar-text);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'Nunito', sans-serif;
+      font-size: var(--ds-avatar-font-size) !important;
+      font-weight: ${t.typography.fontWeight};
+      line-height: var(--ds-avatar-line-height) !important;
+      letter-spacing: ${t.typography.letterSpacing};
+      box-sizing: border-box;
+    }
+
+    .${c}.ant-avatar-circle {
+      border-radius: 999px;
+    }
+
+    .${c}.ant-avatar-square {
+      border-radius: ${t.border.squareRadius};
+    }
+
+    .${c}.ant-avatar .ant-avatar-string {
+      position: static;
+      transform: none !important;
+      left: auto;
+      max-width: calc(100% - 6px);
+      color: inherit;
+      font-size: inherit !important;
+      line-height: var(--ds-avatar-line-height) !important;
+      overflow: hidden;
+      text-overflow: clip;
+      white-space: nowrap;
+    }
+
+    .${c}.ant-avatar .ant-avatar-image,
+    .${c}.ant-avatar > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ds-avatar-presence {
+      position: absolute;
+      right: var(--ds-avatar-status-offset);
+      bottom: var(--ds-avatar-status-offset);
+      width: var(--ds-avatar-status-size);
+      height: var(--ds-avatar-status-size);
+      border: ${t.border.statusWidth} solid ${t.border.statusColor};
+      border-radius: 999px;
+      background: var(--ds-avatar-presence-color);
+      box-sizing: border-box;
+    }
+
+    .ds-avatar-group.ant-avatar-group {
+      display: inline-flex;
+      align-items: center;
+      font-family: 'Nunito', sans-serif;
+    }
+  `;
+}
+function f(e, t) {
+	let n = t ?? e;
+	if (!n) return;
+	let r = n.trim().split(/\s+/).filter(Boolean);
+	if (r.length !== 0) return t ? t.trim().slice(0, 3).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : `${r[0][0]}${r[r.length - 1][0]}`.toUpperCase();
+}
+function p(e, t, n, r) {
+	return t || n || r ? !1 : e === "system" || e === "anonymous" || !r;
+}
+function m(t, n, r) {
+	let { avatar: i } = e, a = i.size[n], o = i.variant[t];
+	return {
+		"--ds-avatar-size": `${a.box}px`,
+		"--ds-avatar-status-size": `${a.status}px`,
+		"--ds-avatar-status-offset": `${a.statusOffset}px`,
+		"--ds-avatar-font-size": a.fontSize,
+		"--ds-avatar-line-height": a.lineHeight,
+		"--ds-avatar-bg": o.bg,
+		"--ds-avatar-text": o.text,
+		"--ds-avatar-border": o.border,
+		...r
+	};
+}
+var h = ({ alt: o, children: h, className: g, dsInitials: _, dsName: v, dsPresence: y, dsShape: b = "circle", dsShowPresence: x = !0, dsSize: S = "md", dsVariant: C = "user", rootClassName: w, src: T, style: E, ...D }) => {
+	r(() => {
+		d();
+	}, []);
+	let O = f(v, _), k = e.avatar.size[S], A = p(C, T, h, O) ? /* @__PURE__ */ i(t, {
+		dsGroup: C === "system" ? "action" : "entity",
+		dsName: l[C],
+		dsSize: k.iconSize,
+		dsTone: C === "anonymous" ? "muted" : "default"
+	}) : h ?? O, j = !!(y && x), M = {
+		...m(C, S, void 0),
+		"--ds-avatar-presence-color": y ? e.avatar.presence[y] : "transparent"
+	}, N = m(C, S, E);
+	return /* @__PURE__ */ a("span", {
+		className: s,
+		"data-ds-avatar-presence": j ? y : void 0,
+		"data-ds-avatar-shape": b,
+		"data-ds-avatar-size": S,
+		"data-ds-avatar-variant": C,
+		style: M,
+		children: [/* @__PURE__ */ i(n, {
+			...D,
+			alt: o ?? v,
+			className: u(c, g),
+			rootClassName: w,
+			shape: b,
+			size: k.box,
+			src: T,
+			style: N,
+			children: A
+		}), j ? /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			className: "ds-avatar-presence"
+		}) : null]
+	});
+}, g = ({ className: t, dsShape: a, dsSize: o, ...s }) => (r(() => {
+	d();
+}, []), /* @__PURE__ */ i(n.Group, {
+	...s,
+	className: u("ds-avatar-group", t),
+	"data-ds-avatar-group-shape": a,
+	"data-ds-avatar-group-size": o,
+	shape: a ?? s.shape,
+	size: o ? e.avatar.size[o].box : s.size
+}));
+h.displayName = "Avatar", g.displayName = "Avatar.Group", h.Group = g;
+//#endregion
+export { h as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist-lib/display/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../src/ds/display/Avatar.tsx"],"sourcesContent":["import { Avatar as AntAvatar } from 'antd';\nimport type { AvatarProps as AntAvatarProps } from 'antd/es/avatar';\nimport type { AvatarGroupProps as AntAvatarGroupProps } from 'antd/es/avatar/AvatarGroup';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { Icon } from './Icon';\nimport type { DSIconName } from './Icon';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSAvatarVariant = 'user' | 'provider' | 'team' | 'system' | 'anonymous';\nexport type DSAvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type DSAvatarPresence = 'available' | 'away' | 'busy' | 'offline';\nexport type DSAvatarShape = 'circle' | 'square';\n\nexport type AvatarProps = Omit<AntAvatarProps, 'size' | 'shape' | 'icon' | 'children'> & {\n  /** Semantic entity represented by the avatar. */\n  dsVariant?: DSAvatarVariant;\n  /** DS size scale. */\n  dsSize?: DSAvatarSize;\n  /** DS avatar shape. */\n  dsShape?: DSAvatarShape;\n  /** Display name used to derive fallback initials and accessible labels. */\n  dsName?: string;\n  /** Explicit fallback initials. Overrides initials derived from `dsName`. */\n  dsInitials?: string;\n  /** Presence/status dot shown at the bottom-right edge. */\n  dsPresence?: DSAvatarPresence;\n  /** Hide the presence/status dot while preserving all other variant styling. */\n  dsShowPresence?: boolean;\n  /** Optional custom fallback content. Prefer `dsName` or `dsInitials` for standard initials. */\n  children?: ReactNode;\n};\n\nexport type AvatarGroupProps = AntAvatarGroupProps & {\n  /** DS size forwarded to grouped DS avatars through context styling only when children opt in. */\n  dsSize?: DSAvatarSize;\n  /** DS shape forwarded to grouped DS avatars through context styling only when children opt in. */\n  dsShape?: DSAvatarShape;\n};\n\ntype DSAvatarComponent = FC<AvatarProps> & {\n  Group: FC<AvatarGroupProps>;\n};\n\nconst STYLE_ID = 'ds-avatar-styles';\nconst DS_AVATAR_WRAP_CLASS = 'ds-avatar-wrap';\nconst DS_AVATAR_CLASS = 'ds-avatar';\n\nconst FALLBACK_ICON_BY_VARIANT: Record<DSAvatarVariant, DSIconName> = {\n  user: 'singleNeutralCircle',\n  provider: 'patient',\n  team: 'officeFileSheet',\n  system: 'cog',\n  anonymous: 'singleNeutralCircle',\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { avatar } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_AVATAR_WRAP_CLASS} {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--ds-avatar-size);\n      height: var(--ds-avatar-size);\n      vertical-align: middle;\n      flex: 0 0 auto;\n      line-height: 0;\n    }\n\n    .${DS_AVATAR_WRAP_CLASS},\n    .${DS_AVATAR_WRAP_CLASS} * {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar {\n      width: var(--ds-avatar-size);\n      height: var(--ds-avatar-size);\n      min-width: var(--ds-avatar-size);\n      background: var(--ds-avatar-bg);\n      border: ${avatar.border.width} solid var(--ds-avatar-border);\n      color: var(--ds-avatar-text);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: 'Nunito', sans-serif;\n      font-size: var(--ds-avatar-font-size) !important;\n      font-weight: ${avatar.typography.fontWeight};\n      line-height: var(--ds-avatar-line-height) !important;\n      letter-spacing: ${avatar.typography.letterSpacing};\n      box-sizing: border-box;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar-circle {\n      border-radius: 999px;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar-square {\n      border-radius: ${avatar.border.squareRadius};\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar .ant-avatar-string {\n      position: static;\n      transform: none !important;\n      left: auto;\n      max-width: calc(100% - 6px);\n      color: inherit;\n      font-size: inherit !important;\n      line-height: var(--ds-avatar-line-height) !important;\n      overflow: hidden;\n      text-overflow: clip;\n      white-space: nowrap;\n    }\n\n    .${DS_AVATAR_CLASS}.ant-avatar .ant-avatar-image,\n    .${DS_AVATAR_CLASS}.ant-avatar > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .ds-avatar-presence {\n      position: absolute;\n      right: var(--ds-avatar-status-offset);\n      bottom: var(--ds-avatar-status-offset);\n      width: var(--ds-avatar-status-size);\n      height: var(--ds-avatar-status-size);\n      border: ${avatar.border.statusWidth} solid ${avatar.border.statusColor};\n      border-radius: 999px;\n      background: var(--ds-avatar-presence-color);\n      box-sizing: border-box;\n    }\n\n    .ds-avatar-group.ant-avatar-group {\n      display: inline-flex;\n      align-items: center;\n      font-family: 'Nunito', sans-serif;\n    }\n  `;\n}\n\nfunction getInitials(name: string | undefined, explicitInitials: string | undefined) {\n  const source = explicitInitials ?? name;\n  if (!source) return undefined;\n\n  const parts = source.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return undefined;\n  if (explicitInitials) return explicitInitials.trim().slice(0, 3).toUpperCase();\n  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();\n}\n\nfunction shouldUseIcon(variant: DSAvatarVariant, src: AvatarProps['src'], children: ReactNode, initials: string | undefined) {\n  if (src || children || initials) return false;\n  return variant === 'system' || variant === 'anonymous' || !initials;\n}\n\nfunction getAvatarStyle(dsVariant: DSAvatarVariant, dsSize: DSAvatarSize, userStyle: CSSProperties | undefined) {\n  const { avatar } = dsSemanticTokens;\n  const sizeTokens = avatar.size[dsSize];\n  const palette = avatar.variant[dsVariant];\n\n  return {\n    '--ds-avatar-size': `${sizeTokens.box}px`,\n    '--ds-avatar-status-size': `${sizeTokens.status}px`,\n    '--ds-avatar-status-offset': `${sizeTokens.statusOffset}px`,\n    '--ds-avatar-font-size': sizeTokens.fontSize,\n    '--ds-avatar-line-height': sizeTokens.lineHeight,\n    '--ds-avatar-bg': palette.bg,\n    '--ds-avatar-text': palette.text,\n    '--ds-avatar-border': palette.border,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nexport const Avatar: DSAvatarComponent = ({\n  alt,\n  children,\n  className,\n  dsInitials,\n  dsName,\n  dsPresence,\n  dsShape = 'circle',\n  dsShowPresence = true,\n  dsSize = 'md',\n  dsVariant = 'user',\n  rootClassName,\n  src,\n  style,\n  ...props\n}: AvatarProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const initials = getInitials(dsName, dsInitials);\n  const sizeTokens = dsSemanticTokens.avatar.size[dsSize];\n  const useIcon = shouldUseIcon(dsVariant, src, children, initials);\n  const fallback = useIcon\n    ? <Icon dsGroup={dsVariant === 'system' ? 'action' : 'entity'} dsName={FALLBACK_ICON_BY_VARIANT[dsVariant]} dsSize={sizeTokens.iconSize} dsTone={dsVariant === 'anonymous' ? 'muted' : 'default'} />\n    : children ?? initials;\n  const showPresence = Boolean(dsPresence && dsShowPresence);\n  const wrapperStyle = {\n    ...getAvatarStyle(dsVariant, dsSize, undefined),\n    '--ds-avatar-presence-color': dsPresence ? dsSemanticTokens.avatar.presence[dsPresence] : 'transparent',\n  } as CSSProperties;\n  const avatarStyle = getAvatarStyle(dsVariant, dsSize, style);\n\n  return (\n    <span\n      className={DS_AVATAR_WRAP_CLASS}\n      data-ds-avatar-presence={showPresence ? dsPresence : undefined}\n      data-ds-avatar-shape={dsShape}\n      data-ds-avatar-size={dsSize}\n      data-ds-avatar-variant={dsVariant}\n      style={wrapperStyle}\n    >\n      <AntAvatar\n        {...props}\n        alt={alt ?? dsName}\n        className={mergeClassNames(DS_AVATAR_CLASS, className)}\n        rootClassName={rootClassName}\n        shape={dsShape}\n        size={sizeTokens.box}\n        src={src}\n        style={avatarStyle}\n      >\n        {fallback}\n      </AntAvatar>\n      {showPresence ? <span aria-hidden=\"true\" className=\"ds-avatar-presence\" /> : null}\n    </span>\n  );\n};\n\nconst AvatarGroup: FC<AvatarGroupProps> = ({ className, dsShape, dsSize, ...props }) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <AntAvatar.Group\n      {...props}\n      className={mergeClassNames('ds-avatar-group', className)}\n      data-ds-avatar-group-shape={dsShape}\n      data-ds-avatar-group-size={dsSize}\n      shape={dsShape ?? props.shape}\n      size={dsSize ? dsSemanticTokens.avatar.size[dsSize].box : props.size}\n    />\n  );\n};\n\nAvatar.displayName = 'Avatar';\nAvatarGroup.displayName = 'Avatar.Group';\nAvatar.Group = AvatarGroup;\n"],"mappings":"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"}

package/dist-lib/display/Badge.cjs

@@ -0,0 +1,89 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-badge-styles`,a={neutral:`default`,success:`success`,warning:`warning`,error:`error`,processing:`processing`,inactive:`default`,new:`processing`,custom:`default`};function o(){if(typeof document>`u`)return;let{badge:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .ds-badge.ant-badge,
+    .ds-badge-ribbon.ant-ribbon-wrapper {
+      font-family: inherit;
+    }
+
+    .ds-badge.ant-badge .ant-badge-count,
+    .ds-badge.ant-badge .ant-scroll-number,
+    .ds-badge.ant-badge .ant-badge-dot,
+    .ds-badge.ant-badge .ant-badge-status-dot,
+    .ds-badge.ant-badge .ant-badge-status-text,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-text {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .ds-badge.ant-badge .ant-badge-count,
+    .ds-badge.ant-badge .ant-scroll-number {
+      min-width: var(--ds-badge-count-size);
+      height: var(--ds-badge-count-size);
+      padding: var(--ds-badge-count-padding);
+      border: var(--ds-badge-border-width) solid var(--ds-badge-border);
+      border-radius: ${t.count.radius};
+      background: var(--ds-badge-bg);
+      box-shadow: none;
+      color: var(--ds-badge-text);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--ds-badge-font-size);
+      font-weight: ${t.typography.fontWeight};
+      line-height: var(--ds-badge-line-height);
+      letter-spacing: var(--ds-badge-letter-spacing);
+      font-family: inherit;
+    }
+
+    .ds-badge.ant-badge .ant-badge-dot {
+      width: var(--ds-badge-dot-size);
+      min-width: var(--ds-badge-dot-size);
+      height: var(--ds-badge-dot-size);
+      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);
+      background: var(--ds-badge-bg);
+      box-shadow: none;
+    }
+
+    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-dot {
+      width: var(--ds-badge-status-dot-size);
+      height: var(--ds-badge-status-dot-size);
+      background: var(--ds-badge-bg);
+      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);
+    }
+
+    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-text {
+      color: ${t.statusText.color};
+      font-size: var(--ds-badge-status-font-size);
+      font-weight: ${t.statusText.fontWeight};
+      line-height: var(--ds-badge-status-line-height);
+      margin-inline-start: ${t.statusText.gap};
+      font-family: inherit;
+    }
+
+    .ds-badge-ribbon.ant-ribbon,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon {
+      background: var(--ds-badge-bg);
+      border: var(--ds-badge-border-width) solid var(--ds-badge-border);
+      border-radius: ${t.ribbon.radius};
+      color: var(--ds-badge-text);
+      font-size: ${t.ribbon.fontSize};
+      font-weight: ${t.typography.fontWeight};
+      line-height: ${t.ribbon.lineHeight};
+      letter-spacing: ${t.ribbon.letterSpacing};
+      box-shadow: none;
+      font-family: inherit;
+    }
+
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-text,
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-content,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-text,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-content {
+      color: var(--ds-badge-text);
+    }
+
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-corner,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-corner {
+      color: var(--ds-badge-border);
+    }
+  `}function s(t,n,r){let{badge:i}=e.dsSemanticTokens;return t===`custom`?{text:r.text??i.status.neutral.light.text,bg:r.background??i.status.neutral.light.bg,border:r.border??i.status.neutral.light.border}:i.status[t][n]}function c(t,n,r,i){let{badge:a}=e.dsSemanticTokens,o=s(t,n,i),c=a.size[r];return{"--ds-badge-bg":o.bg??`transparent`,"--ds-badge-text":o.text,"--ds-badge-border":o.border??o.bg??`transparent`,"--ds-badge-border-width":t===`custom`||n===`outline`||o.border?a.borderWidth:`0px`,"--ds-badge-count-size":c.countSize,"--ds-badge-count-padding":c.countPadding,"--ds-badge-dot-size":c.dotSize,"--ds-badge-status-dot-size":c.statusDotSize,"--ds-badge-dot-border":n===`outline`?o.border??o.text:a.dot.border,"--ds-badge-dot-border-width":n===`outline`?a.borderWidth:a.dot.borderWidth,"--ds-badge-font-size":c.typography.fontSize,"--ds-badge-line-height":c.typography.lineHeight,"--ds-badge-letter-spacing":c.typography.letterSpacing,"--ds-badge-status-font-size":c.statusTypography.fontSize,"--ds-badge-status-line-height":c.statusTypography.lineHeight}}function l(e){return e.text!==void 0&&e.count===void 0&&!e.dot&&e.children===void 0}var u=({dsStatus:e=`neutral`,dsVariant:i=`solid`,dsSize:s=`md`,dsCustomTextColor:u,dsCustomBackgroundColor:d,dsCustomBorderColor:f,className:p=``,rootClassName:m=``,style:h={},...g})=>{(0,n.useEffect)(()=>{o()},[]);let _=`ds-badge${p?` ${p}`:``}`,v=`ds-badge${m?` ${m}`:``}`,y=c(e,i,s,{text:u,background:d,border:f}),b=l(g)?a[e]:void 0;return(0,r.jsx)(t.Badge,{className:_,rootClassName:v,style:{...y,...h},status:b,"data-ds-status":e,"data-ds-variant":i,"data-ds-size":s,...g})},d=({dsStatus:e=`neutral`,dsVariant:i=`solid`,dsCustomTextColor:a,dsCustomBackgroundColor:s,dsCustomBorderColor:l,className:u=``,rootClassName:d=``,style:f={},...p})=>{(0,n.useEffect)(()=>{o()},[]);let m=`ds-badge-ribbon${u?` ${u}`:``}`,h=`ds-badge-ribbon${d?` ${d}`:``}`,g=c(e,i,`md`,{text:a,background:s,border:l});return(0,r.jsx)(t.Badge.Ribbon,{className:m,rootClassName:h,style:{...g,...f},...p})},f=u;f.displayName=`Badge`,d.displayName=`Badge.Ribbon`,f.Ribbon=d,exports.Badge=f;
+//# sourceMappingURL=Badge.cjs.map

package/dist-lib/display/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","names":[],"sources":["../../src/ds/display/Badge.tsx"],"sourcesContent":["import { Badge as AntBadge } from 'antd';\nimport type { BadgeProps as AntBadgeProps } from 'antd';\nimport type { CSSProperties, FC } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSBadgeStatus = 'neutral' | 'success' | 'warning' | 'error' | 'processing' | 'inactive' | 'new' | 'custom';\nexport type DSBadgeVariant = 'solid' | 'light' | 'outline';\nexport type DSBadgeSize = 'sm' | 'md' | 'lg';\n\ntype RestrictedAntBadgeProps = 'color' | 'status' | 'size';\ntype RestrictedAntRibbonProps = 'color';\ntype AntRibbonProps = Parameters<typeof AntBadge.Ribbon>[0];\n\ntype DSBadgePalette = {\n  bg?: string;\n  text: string;\n  border?: string;\n};\n\ntype DSBadgeCustomColors = {\n  text?: string;\n  background?: string;\n  border?: string;\n};\n\nexport type BadgeProps = Omit<AntBadgeProps, RestrictedAntBadgeProps> & {\n  /** DS semantic status — drives count, dot, status text, and ribbon colors. */\n  dsStatus?: DSBadgeStatus;\n  /** DS visual style — solid filled, light tinted, or outline only. */\n  dsVariant?: DSBadgeVariant;\n  /** DS size — sm, md, or lg. */\n  dsSize?: DSBadgeSize;\n  /** Custom text color applied when dsStatus is custom. */\n  dsCustomTextColor?: string;\n  /** Custom background color applied when dsStatus is custom. */\n  dsCustomBackgroundColor?: string;\n  /** Custom border color applied when dsStatus is custom. */\n  dsCustomBorderColor?: string;\n};\n\nexport type BadgeRibbonProps = Omit<AntRibbonProps, RestrictedAntRibbonProps> & {\n  /** DS semantic status — drives ribbon colors. */\n  dsStatus?: DSBadgeStatus;\n  /** DS visual style — solid filled, light tinted, or outline only. */\n  dsVariant?: DSBadgeVariant;\n  /** Custom text color applied when dsStatus is custom. */\n  dsCustomTextColor?: string;\n  /** Custom background color applied when dsStatus is custom. */\n  dsCustomBackgroundColor?: string;\n  /** Custom border color applied when dsStatus is custom. */\n  dsCustomBorderColor?: string;\n};\n\ntype DSBadgeComponent = FC<BadgeProps> & {\n  Ribbon: FC<BadgeRibbonProps>;\n};\n\nconst STYLE_ID = 'ds-badge-styles';\n\nconst ANT_STATUS_MAP: Record<DSBadgeStatus, AntBadgeProps['status']> = {\n  neutral: 'default',\n  success: 'success',\n  warning: 'warning',\n  error: 'error',\n  processing: 'processing',\n  inactive: 'default',\n  new: 'processing',\n  custom: 'default',\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { badge } = dsSemanticTokens;\n\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-badge.ant-badge,\n    .ds-badge-ribbon.ant-ribbon-wrapper {\n      font-family: inherit;\n    }\n\n    .ds-badge.ant-badge .ant-badge-count,\n    .ds-badge.ant-badge .ant-scroll-number,\n    .ds-badge.ant-badge .ant-badge-dot,\n    .ds-badge.ant-badge .ant-badge-status-dot,\n    .ds-badge.ant-badge .ant-badge-status-text,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-text {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .ds-badge.ant-badge .ant-badge-count,\n    .ds-badge.ant-badge .ant-scroll-number {\n      min-width: var(--ds-badge-count-size);\n      height: var(--ds-badge-count-size);\n      padding: var(--ds-badge-count-padding);\n      border: var(--ds-badge-border-width) solid var(--ds-badge-border);\n      border-radius: ${badge.count.radius};\n      background: var(--ds-badge-bg);\n      box-shadow: none;\n      color: var(--ds-badge-text);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--ds-badge-font-size);\n      font-weight: ${badge.typography.fontWeight};\n      line-height: var(--ds-badge-line-height);\n      letter-spacing: var(--ds-badge-letter-spacing);\n      font-family: inherit;\n    }\n\n    .ds-badge.ant-badge .ant-badge-dot {\n      width: var(--ds-badge-dot-size);\n      min-width: var(--ds-badge-dot-size);\n      height: var(--ds-badge-dot-size);\n      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);\n      background: var(--ds-badge-bg);\n      box-shadow: none;\n    }\n\n    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-dot {\n      width: var(--ds-badge-status-dot-size);\n      height: var(--ds-badge-status-dot-size);\n      background: var(--ds-badge-bg);\n      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);\n    }\n\n    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-text {\n      color: ${badge.statusText.color};\n      font-size: var(--ds-badge-status-font-size);\n      font-weight: ${badge.statusText.fontWeight};\n      line-height: var(--ds-badge-status-line-height);\n      margin-inline-start: ${badge.statusText.gap};\n      font-family: inherit;\n    }\n\n    .ds-badge-ribbon.ant-ribbon,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon {\n      background: var(--ds-badge-bg);\n      border: var(--ds-badge-border-width) solid var(--ds-badge-border);\n      border-radius: ${badge.ribbon.radius};\n      color: var(--ds-badge-text);\n      font-size: ${badge.ribbon.fontSize};\n      font-weight: ${badge.typography.fontWeight};\n      line-height: ${badge.ribbon.lineHeight};\n      letter-spacing: ${badge.ribbon.letterSpacing};\n      box-shadow: none;\n      font-family: inherit;\n    }\n\n    .ds-badge-ribbon.ant-ribbon .ant-ribbon-text,\n    .ds-badge-ribbon.ant-ribbon .ant-ribbon-content,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-text,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-content {\n      color: var(--ds-badge-text);\n    }\n\n    .ds-badge-ribbon.ant-ribbon .ant-ribbon-corner,\n    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-corner {\n      color: var(--ds-badge-border);\n    }\n  `;\n}\n\nfunction getPalette(status: DSBadgeStatus, variant: DSBadgeVariant, customColors: DSBadgeCustomColors): DSBadgePalette {\n  const { badge } = dsSemanticTokens;\n\n  if (status === 'custom') {\n    return {\n      text: customColors.text ?? badge.status.neutral.light.text,\n      bg: customColors.background ?? badge.status.neutral.light.bg,\n      border: customColors.border ?? badge.status.neutral.light.border,\n    };\n  }\n\n  return badge.status[status][variant] as DSBadgePalette;\n}\n\nfunction getCustomProperties(\n  status: DSBadgeStatus,\n  variant: DSBadgeVariant,\n  size: DSBadgeSize,\n  customColors: DSBadgeCustomColors,\n): CSSProperties {\n  const { badge } = dsSemanticTokens;\n  const palette = getPalette(status, variant, customColors);\n  const sizeTokens = badge.size[size];\n\n  return {\n    '--ds-badge-bg': palette.bg ?? 'transparent',\n    '--ds-badge-text': palette.text,\n    '--ds-badge-border': palette.border ?? palette.bg ?? 'transparent',\n    '--ds-badge-border-width': status === 'custom' || variant === 'outline' || palette.border ? badge.borderWidth : '0px',\n    '--ds-badge-count-size': sizeTokens.countSize,\n    '--ds-badge-count-padding': sizeTokens.countPadding,\n    '--ds-badge-dot-size': sizeTokens.dotSize,\n    '--ds-badge-status-dot-size': sizeTokens.statusDotSize,\n    '--ds-badge-dot-border': variant === 'outline' ? palette.border ?? palette.text : badge.dot.border,\n    '--ds-badge-dot-border-width': variant === 'outline' ? badge.borderWidth : badge.dot.borderWidth,\n    '--ds-badge-font-size': sizeTokens.typography.fontSize,\n    '--ds-badge-line-height': sizeTokens.typography.lineHeight,\n    '--ds-badge-letter-spacing': sizeTokens.typography.letterSpacing,\n    '--ds-badge-status-font-size': sizeTokens.statusTypography.fontSize,\n    '--ds-badge-status-line-height': sizeTokens.statusTypography.lineHeight,\n  } as CSSProperties;\n}\n\nfunction shouldRenderStatusBadge(props: Pick<BadgeProps, 'count' | 'dot' | 'text' | 'children'>) {\n  return props.text !== undefined && props.count === undefined && !props.dot && props.children === undefined;\n}\n\nconst BadgeBase: FC<BadgeProps> = ({\n  dsStatus = 'neutral',\n  dsVariant = 'solid',\n  dsSize = 'md',\n  dsCustomTextColor,\n  dsCustomBackgroundColor,\n  dsCustomBorderColor,\n  className: userClassName = '',\n  rootClassName: userRootClassName = '',\n  style: userStyle = {},\n  ...restProps\n}) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const className = `ds-badge${userClassName ? ` ${userClassName}` : ''}`;\n  const rootClassName = `ds-badge${userRootClassName ? ` ${userRootClassName}` : ''}`;\n  const customProperties = getCustomProperties(\n    dsStatus,\n    dsVariant,\n    dsSize,\n    {\n      text: dsCustomTextColor,\n      background: dsCustomBackgroundColor,\n      border: dsCustomBorderColor,\n    },\n  );\n  const status = shouldRenderStatusBadge(restProps) ? ANT_STATUS_MAP[dsStatus] : undefined;\n\n  return (\n    <AntBadge\n      className={className}\n      rootClassName={rootClassName}\n      style={{ ...customProperties, ...userStyle }}\n      status={status}\n      data-ds-status={dsStatus}\n      data-ds-variant={dsVariant}\n      data-ds-size={dsSize}\n      {...restProps}\n    />\n  );\n};\n\nconst BadgeRibbon: FC<BadgeRibbonProps> = ({\n  dsStatus = 'neutral',\n  dsVariant = 'solid',\n  dsCustomTextColor,\n  dsCustomBackgroundColor,\n  dsCustomBorderColor,\n  className: userClassName = '',\n  rootClassName: userRootClassName = '',\n  style: userStyle = {},\n  ...restProps\n}) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const className = `ds-badge-ribbon${userClassName ? ` ${userClassName}` : ''}`;\n  const rootClassName = `ds-badge-ribbon${userRootClassName ? ` ${userRootClassName}` : ''}`;\n  const customProperties = getCustomProperties(\n    dsStatus,\n    dsVariant,\n    'md',\n    {\n      text: dsCustomTextColor,\n      background: dsCustomBackgroundColor,\n      border: dsCustomBorderColor,\n    },\n  );\n\n  return (\n    <AntBadge.Ribbon\n      className={className}\n      rootClassName={rootClassName}\n      style={{ ...customProperties, ...userStyle }}\n      {...restProps}\n    />\n  );\n};\n\nexport const Badge = BadgeBase as DSBadgeComponent;\n\nBadge.displayName = 'Badge';\nBadgeRibbon.displayName = 'Badge.Ribbon';\nBadge.Ribbon = BadgeRibbon;\n"],"mappings":"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"}

package/dist-lib/display/Badge.js

@@ -0,0 +1,184 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Badge as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ds/display/Badge.tsx
+var i = "ds-badge-styles", a = {
+	neutral: "default",
+	success: "success",
+	warning: "warning",
+	error: "error",
+	processing: "processing",
+	inactive: "default",
+	new: "processing",
+	custom: "default"
+};
+function o() {
+	if (typeof document > "u") return;
+	let { badge: t } = e, n = document.getElementById(i);
+	n || (n = document.createElement("style"), n.id = i, document.head.appendChild(n)), n.textContent = `
+    .ds-badge.ant-badge,
+    .ds-badge-ribbon.ant-ribbon-wrapper {
+      font-family: inherit;
+    }
+
+    .ds-badge.ant-badge .ant-badge-count,
+    .ds-badge.ant-badge .ant-scroll-number,
+    .ds-badge.ant-badge .ant-badge-dot,
+    .ds-badge.ant-badge .ant-badge-status-dot,
+    .ds-badge.ant-badge .ant-badge-status-text,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-text {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .ds-badge.ant-badge .ant-badge-count,
+    .ds-badge.ant-badge .ant-scroll-number {
+      min-width: var(--ds-badge-count-size);
+      height: var(--ds-badge-count-size);
+      padding: var(--ds-badge-count-padding);
+      border: var(--ds-badge-border-width) solid var(--ds-badge-border);
+      border-radius: ${t.count.radius};
+      background: var(--ds-badge-bg);
+      box-shadow: none;
+      color: var(--ds-badge-text);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--ds-badge-font-size);
+      font-weight: ${t.typography.fontWeight};
+      line-height: var(--ds-badge-line-height);
+      letter-spacing: var(--ds-badge-letter-spacing);
+      font-family: inherit;
+    }
+
+    .ds-badge.ant-badge .ant-badge-dot {
+      width: var(--ds-badge-dot-size);
+      min-width: var(--ds-badge-dot-size);
+      height: var(--ds-badge-dot-size);
+      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);
+      background: var(--ds-badge-bg);
+      box-shadow: none;
+    }
+
+    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-dot {
+      width: var(--ds-badge-status-dot-size);
+      height: var(--ds-badge-status-dot-size);
+      background: var(--ds-badge-bg);
+      border: var(--ds-badge-dot-border-width) solid var(--ds-badge-dot-border);
+    }
+
+    .ds-badge.ant-badge.ant-badge-status .ant-badge-status-text {
+      color: ${t.statusText.color};
+      font-size: var(--ds-badge-status-font-size);
+      font-weight: ${t.statusText.fontWeight};
+      line-height: var(--ds-badge-status-line-height);
+      margin-inline-start: ${t.statusText.gap};
+      font-family: inherit;
+    }
+
+    .ds-badge-ribbon.ant-ribbon,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon {
+      background: var(--ds-badge-bg);
+      border: var(--ds-badge-border-width) solid var(--ds-badge-border);
+      border-radius: ${t.ribbon.radius};
+      color: var(--ds-badge-text);
+      font-size: ${t.ribbon.fontSize};
+      font-weight: ${t.typography.fontWeight};
+      line-height: ${t.ribbon.lineHeight};
+      letter-spacing: ${t.ribbon.letterSpacing};
+      box-shadow: none;
+      font-family: inherit;
+    }
+
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-text,
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-content,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-text,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon .ant-ribbon-content {
+      color: var(--ds-badge-text);
+    }
+
+    .ds-badge-ribbon.ant-ribbon .ant-ribbon-corner,
+    .ds-badge-ribbon.ant-ribbon-wrapper .ant-ribbon-corner {
+      color: var(--ds-badge-border);
+    }
+  `;
+}
+function s(t, n, r) {
+	let { badge: i } = e;
+	return t === "custom" ? {
+		text: r.text ?? i.status.neutral.light.text,
+		bg: r.background ?? i.status.neutral.light.bg,
+		border: r.border ?? i.status.neutral.light.border
+	} : i.status[t][n];
+}
+function c(t, n, r, i) {
+	let { badge: a } = e, o = s(t, n, i), c = a.size[r];
+	return {
+		"--ds-badge-bg": o.bg ?? "transparent",
+		"--ds-badge-text": o.text,
+		"--ds-badge-border": o.border ?? o.bg ?? "transparent",
+		"--ds-badge-border-width": t === "custom" || n === "outline" || o.border ? a.borderWidth : "0px",
+		"--ds-badge-count-size": c.countSize,
+		"--ds-badge-count-padding": c.countPadding,
+		"--ds-badge-dot-size": c.dotSize,
+		"--ds-badge-status-dot-size": c.statusDotSize,
+		"--ds-badge-dot-border": n === "outline" ? o.border ?? o.text : a.dot.border,
+		"--ds-badge-dot-border-width": n === "outline" ? a.borderWidth : a.dot.borderWidth,
+		"--ds-badge-font-size": c.typography.fontSize,
+		"--ds-badge-line-height": c.typography.lineHeight,
+		"--ds-badge-letter-spacing": c.typography.letterSpacing,
+		"--ds-badge-status-font-size": c.statusTypography.fontSize,
+		"--ds-badge-status-line-height": c.statusTypography.lineHeight
+	};
+}
+function l(e) {
+	return e.text !== void 0 && e.count === void 0 && !e.dot && e.children === void 0;
+}
+var u = ({ dsStatus: e = "neutral", dsVariant: i = "solid", dsSize: s = "md", dsCustomTextColor: u, dsCustomBackgroundColor: d, dsCustomBorderColor: f, className: p = "", rootClassName: m = "", style: h = {}, ...g }) => {
+	n(() => {
+		o();
+	}, []);
+	let _ = `ds-badge${p ? ` ${p}` : ""}`, v = `ds-badge${m ? ` ${m}` : ""}`, y = c(e, i, s, {
+		text: u,
+		background: d,
+		border: f
+	}), b = l(g) ? a[e] : void 0;
+	return /* @__PURE__ */ r(t, {
+		className: _,
+		rootClassName: v,
+		style: {
+			...y,
+			...h
+		},
+		status: b,
+		"data-ds-status": e,
+		"data-ds-variant": i,
+		"data-ds-size": s,
+		...g
+	});
+}, d = ({ dsStatus: e = "neutral", dsVariant: i = "solid", dsCustomTextColor: a, dsCustomBackgroundColor: s, dsCustomBorderColor: l, className: u = "", rootClassName: d = "", style: f = {}, ...p }) => {
+	n(() => {
+		o();
+	}, []);
+	let m = `ds-badge-ribbon${u ? ` ${u}` : ""}`, h = `ds-badge-ribbon${d ? ` ${d}` : ""}`, g = c(e, i, "md", {
+		text: a,
+		background: s,
+		border: l
+	});
+	return /* @__PURE__ */ r(t.Ribbon, {
+		className: m,
+		rootClassName: h,
+		style: {
+			...g,
+			...f
+		},
+		...p
+	});
+}, f = u;
+f.displayName = "Badge", d.displayName = "Badge.Ribbon", f.Ribbon = d;
+//#endregion
+export { f as Badge };
+
+//# sourceMappingURL=Badge.js.map