ods-ant 0.2.0 → 0.4.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","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/Calendar.cjs

@@ -0,0 +1,194 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../theme.cjs`),n=require(`../forms/Select.cjs`),r=require(`./Tooltip.cjs`),i=require(`./Segmented.cjs`);let a=require(`antd`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`dayjs`);c=e.t(c,1);var l=`ds-calendar-styles`,u=`ds-calendar`,d={scheduling:{density:`comfortable`,fullscreen:!1,showWeek:!1},availability:{density:`comfortable`,fullscreen:!1,showWeek:!0},clinical:{density:`comfortable`,fullscreen:!0,showWeek:!1},compact:{density:`compact`,fullscreen:!1,showWeek:!1}};function f(...e){return e.filter(Boolean).join(` `).trim()}function p(){if(typeof document>`u`)return;let{calendar:e}=t.dsSemanticTokens,n=document.getElementById(l);n||(n=document.createElement(`style`),n.id=l,document.head.appendChild(n)),n.textContent=`
+    .ant-picker-calendar.ds-calendar {
+      font-family: 'Nunito', sans-serif;
+      color: ${e.text.day};
+      background: ${e.surface.default};
+      border: 1px solid ${e.border.grid};
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .ant-picker-calendar .ant-picker-calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      height: auto;
+      min-height: 56px;
+      border-bottom: 1px solid ${e.border.grid};
+      background: ${e.surface.subtle};
+      padding: 12px 16px;
+    }
+
+    /* Hide Ant default header controls */
+    .ant-picker-calendar-header .ant-picker-calendar-year-select,
+    .ant-picker-calendar-header .ant-picker-calendar-month-select,
+    .ant-picker-calendar-header .ant-picker-calendar-mode-switch {
+      display: none !important;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex: 1;
+      margin: 8px 12px;
+      padding: 4px 0;
+      box-sizing: border-box;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-title {
+      flex: 0 1 auto;
+      color: ${e.text.heading};
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-select {
+      width: var(--ds-calendar-header-select-width, 92px);
+    }
+
+    .ant-picker-calendar .ds-calendar-header-select.ds-calendar-header-select--year {
+      --ds-calendar-header-select-width: 96px;
+    }
+
+    .ant-picker-calendar .ant-picker-content th {
+      color: ${e.text.muted};
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .ant-picker-calendar .ant-picker-content td {
+      border-top: 1px solid ${e.border.grid};
+    }
+
+    .ant-picker-calendar .ant-picker-cell .ant-picker-cell-inner {
+      display: block;
+      width: 100%;
+      min-height: var(--ds-calendar-cell-min-height);
+      padding: var(--ds-calendar-cell-padding);
+      border: 1px solid transparent;
+      border-radius: 6px;
+      transition: none !important;
+      box-sizing: border-box;
+    }
+
+    .ant-picker-calendar .ant-picker-cell .ant-picker-calendar-date {
+      width: 100%;
+      margin: 0;
+    }
+
+    .ant-picker-calendar .ant-picker-calendar-date-content {
+      text-align: left;
+    }
+
+    .ant-picker-calendar .ds-calendar-cell-content {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      min-width: 0;
+      text-align: left;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-cell-inner,
+    .ant-picker-calendar .ant-picker-cell-inner:hover {
+      background: ${e.surface.emphasized} !important;
+      border-color: ${e.border.selected} !important;
+      color: ${e.text.day} !important;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-date-value,
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-year-value {
+      color: ${e.text.current} !important;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-date-value,
+    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-year-value {
+      color: ${e.text.current};
+      font-weight: 700;
+    }
+
+    .ant-picker-calendar .ds-calendar-events {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 4px;
+    }
+
+    .ant-picker-calendar .ds-calendar-event {
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-event-marker {
+      width: var(--ds-calendar-marker-size);
+      height: var(--ds-calendar-marker-size);
+      min-width: var(--ds-calendar-marker-size);
+      min-height: var(--ds-calendar-marker-size);
+      border-radius: 999px;
+      margin-top: 4px;
+      background: var(--ds-calendar-event-color);
+    }
+
+    .ant-picker-calendar .ds-calendar-event-content {
+      min-width: 0;
+      font-size: var(--ds-calendar-title-font-size);
+      line-height: 1.25;
+      color: ${e.text.day};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ant-picker-calendar .ds-calendar-event-meta {
+      margin-top: 1px;
+      font-size: var(--ds-calendar-meta-font-size);
+      line-height: 1.2;
+      color: ${e.text.muted};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ant-picker-calendar .ds-calendar-overflow-trigger {
+      display: inline-flex;
+      width: fit-content;
+      max-width: 100%;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      color: ${e.text.current};
+      font: inherit;
+      cursor: help;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--compact .ant-picker-calendar-header {
+      padding: 6px 10px;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--compact .ds-calendar-header-title {
+      font-size: 14px;
+      line-height: 18px;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--clinical {
+      border-color: ${e.border.focus};
+      box-shadow: 0 0 0 1px ${e.border.focus};
+    }
+  `}var m=Array.from({length:12},(e,t)=>({value:t,label:(0,c.default)().month(t).format(`MMM`)}));function h(e,t){return t??d[e].density}function g(e){return(0,c.default)(e).format(`YYYY-MM-DD`)}function _(e){let t=new Map;if(!e)return t;for(let n of e){let e=g(n.date),r=t.get(e)??[];r.push(n),t.set(e,r)}return t}function v(e,n){let r=t.dsSemanticTokens.calendar.size[e];return{"--ds-calendar-cell-min-height":r.cellMinHeight,"--ds-calendar-cell-padding":r.cellPadding,"--ds-calendar-title-font-size":r.titleFontSize,"--ds-calendar-meta-font-size":r.metaFontSize,"--ds-calendar-marker-size":r.markerSize,...n}}function y(e){return t.dsSemanticTokens.calendar.status[e??`neutral`]}function b(e){let t=e.year();return Array.from({length:11},(e,n)=>{let r=t-5+n;return{value:r,label:String(r)}})}function x(e,t,n,i){if(t.type!==`date`)return null;let a=e.format(`YYYY-MM-DD`),o=n.slice(0,i),c=n.length-o.length;return(0,s.jsx)(`div`,{className:`ds-calendar-cell-content`,children:o.length>0?(0,s.jsxs)(`div`,{className:`ds-calendar-events`,children:[o.map((e,t)=>(0,s.jsxs)(`div`,{className:`ds-calendar-event`,children:[(0,s.jsx)(`span`,{className:`ds-calendar-event-marker`,style:{"--ds-calendar-event-color":y(e.dsStatus)}}),(0,s.jsxs)(`div`,{style:{minWidth:0},children:[(0,s.jsx)(`div`,{className:`ds-calendar-event-content`,children:e.label}),e.meta?(0,s.jsx)(`div`,{className:`ds-calendar-event-meta`,children:e.meta}):null]})]},`${a}-${t}`)),c>0?(0,s.jsx)(r.Tooltip,{dsSize:`mini`,dsBody:`${c} more calendar events`,children:(0,s.jsxs)(`button`,{type:`button`,className:`ds-calendar-event-meta ds-calendar-overflow-trigger`,children:[`+`,c,` more`]})}):null]}):null})}var S=({className:e,dsDensity:t,dsEventLimit:r=2,dsEvents:c,dsFullscreen:l,dsShowWeek:g,dsVariant:y=`scheduling`,style:S,...C})=>{(0,o.useEffect)(()=>{p()},[]);let w=d[y],T=h(y,t),E=_(c),D=T===`compact`?`small`:`middle`,O=T===`compact`?`sm`:`md`;return(0,s.jsx)(a.Calendar,{...C,className:f(u,`ds-calendar--${y}`,`ds-calendar--${T}`,e),fullscreen:l??w.fullscreen,showWeek:g??w.showWeek,style:v(T,S),headerRender:({value:e,type:t,onChange:r,onTypeChange:a})=>{let o=b(e),c=t;return(0,s.jsxs)(`div`,{className:`ds-calendar-header-wrapper`,children:[(0,s.jsx)(`div`,{className:`ds-calendar-header-title`,children:e.format(c===`year`?`YYYY`:`MMMM YYYY`)}),(0,s.jsxs)(`div`,{className:`ds-calendar-header-controls`,children:[(0,s.jsx)(n.Select,{"aria-label":`Calendar month`,className:`ds-calendar-header-select`,size:D,value:e.month(),options:m,disabled:c===`year`,onChange:t=>r(e.month(Number(t)))}),(0,s.jsx)(n.Select,{"aria-label":`Calendar year`,className:`ds-calendar-header-select ds-calendar-header-select--year`,size:D,value:e.year(),options:o,onChange:t=>r(e.year(Number(t)))}),(0,s.jsx)(i.Segmented,{"aria-label":`Calendar panel mode`,dsSize:O,value:c,options:[{label:`Month`,value:`month`},{label:`Year`,value:`year`}],onChange:e=>a(e)})]})]})},cellRender:(e,t)=>{let n=e.format(`YYYY-MM-DD`);return x(e,t,E.get(n)??[],r)}})};S.generateCalendar=a.Calendar.generateCalendar,S.displayName=`Calendar`,exports.Calendar=S;
+//# sourceMappingURL=Calendar.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.cjs","names":[],"sources":["../../src/ds/display/Calendar.tsx"],"sourcesContent":["import { Calendar as AntCalendar } from 'antd';\nimport type { CalendarProps as AntCalendarProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { Select } from '../forms/Select';\nimport { Segmented } from './Segmented';\nimport { Tooltip } from './Tooltip';\n\nexport type DSCalendarVariant = 'scheduling' | 'availability' | 'clinical' | 'compact';\nexport type DSCalendarDensity = 'comfortable' | 'compact';\nexport type DSCalendarEventStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral';\n\nexport type DSCalendarEvent = {\n  /** Day tied to this event marker. */\n  date: string | Dayjs;\n  /** Primary event label shown in the calendar cell. */\n  label: ReactNode;\n  /** Optional secondary line for owner/time details. */\n  meta?: ReactNode;\n  /** Semantic event status for marker color. */\n  dsStatus?: DSCalendarEventStatus;\n};\n\ntype AntCalendarPropsDayjs = AntCalendarProps<Dayjs>;\ntype RestrictedAntVisualProps = 'cellRender' | 'dateCellRender' | 'dateFullCellRender' | 'fullscreen' | 'headerRender' | 'showWeek';\ntype CalendarMode = 'month' | 'year';\n\nexport type CalendarProps = Omit<AntCalendarPropsDayjs, RestrictedAntVisualProps> & {\n  /** Semantic DS calendar variant. */\n  dsVariant?: DSCalendarVariant;\n  /** Optional density override. */\n  dsDensity?: DSCalendarDensity;\n  /** Toggle Ant fullscreen mode while preserving DS styling. */\n  dsFullscreen?: boolean;\n  /** Optional week-number display control. */\n  dsShowWeek?: boolean;\n  /** Calendar events rendered in the day cells. */\n  dsEvents?: DSCalendarEvent[];\n  /** Maximum visible events per day cell before overflow indicator. */\n  dsEventLimit?: number;\n};\n\ntype DSCalendarComponent = FC<CalendarProps> & {\n  generateCalendar?: unknown;\n};\n\nconst STYLE_ID = 'ds-calendar-styles';\nconst DS_CALENDAR_CLASS = 'ds-calendar';\n\nconst DEFAULTS_BY_VARIANT: Record<DSCalendarVariant, {\n  density: DSCalendarDensity;\n  fullscreen: boolean;\n  showWeek: boolean;\n}> = {\n  scheduling: { density: 'comfortable', fullscreen: false, showWeek: false },\n  availability: { density: 'comfortable', fullscreen: false, showWeek: true },\n  clinical: { density: 'comfortable', fullscreen: true, showWeek: false },\n  compact: { density: 'compact', fullscreen: false, showWeek: false },\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 { calendar } = 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    .ant-picker-calendar.ds-calendar {\n      font-family: 'Nunito', sans-serif;\n      color: ${calendar.text.day};\n      background: ${calendar.surface.default};\n      border: 1px solid ${calendar.border.grid};\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .ant-picker-calendar .ant-picker-calendar-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      height: auto;\n      min-height: 56px;\n      border-bottom: 1px solid ${calendar.border.grid};\n      background: ${calendar.surface.subtle};\n      padding: 12px 16px;\n    }\n\n    /* Hide Ant default header controls */\n    .ant-picker-calendar-header .ant-picker-calendar-year-select,\n    .ant-picker-calendar-header .ant-picker-calendar-month-select,\n    .ant-picker-calendar-header .ant-picker-calendar-mode-switch {\n      display: none !important;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      flex: 1;\n      margin: 8px 12px;\n      padding: 4px 0;\n      box-sizing: border-box;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-title {\n      flex: 0 1 auto;\n      color: ${calendar.text.heading};\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 22px;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-select {\n      width: var(--ds-calendar-header-select-width, 92px);\n    }\n\n    .ant-picker-calendar .ds-calendar-header-select.ds-calendar-header-select--year {\n      --ds-calendar-header-select-width: 96px;\n    }\n\n    .ant-picker-calendar .ant-picker-content th {\n      color: ${calendar.text.muted};\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n\n    .ant-picker-calendar .ant-picker-content td {\n      border-top: 1px solid ${calendar.border.grid};\n    }\n\n    .ant-picker-calendar .ant-picker-cell .ant-picker-cell-inner {\n      display: block;\n      width: 100%;\n      min-height: var(--ds-calendar-cell-min-height);\n      padding: var(--ds-calendar-cell-padding);\n      border: 1px solid transparent;\n      border-radius: 6px;\n      transition: none !important;\n      box-sizing: border-box;\n    }\n\n    .ant-picker-calendar .ant-picker-cell .ant-picker-calendar-date {\n      width: 100%;\n      margin: 0;\n    }\n\n    .ant-picker-calendar .ant-picker-calendar-date-content {\n      text-align: left;\n    }\n\n    .ant-picker-calendar .ds-calendar-cell-content {\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      min-width: 0;\n      text-align: left;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-cell-inner,\n    .ant-picker-calendar .ant-picker-cell-inner:hover {\n      background: ${calendar.surface.emphasized} !important;\n      border-color: ${calendar.border.selected} !important;\n      color: ${calendar.text.day} !important;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-date-value,\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-year-value {\n      color: ${calendar.text.current} !important;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-date-value,\n    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-year-value {\n      color: ${calendar.text.current};\n      font-weight: 700;\n    }\n\n    .ant-picker-calendar .ds-calendar-events {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      margin-top: 4px;\n    }\n\n    .ant-picker-calendar .ds-calendar-event {\n      display: flex;\n      align-items: flex-start;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-event-marker {\n      width: var(--ds-calendar-marker-size);\n      height: var(--ds-calendar-marker-size);\n      min-width: var(--ds-calendar-marker-size);\n      min-height: var(--ds-calendar-marker-size);\n      border-radius: 999px;\n      margin-top: 4px;\n      background: var(--ds-calendar-event-color);\n    }\n\n    .ant-picker-calendar .ds-calendar-event-content {\n      min-width: 0;\n      font-size: var(--ds-calendar-title-font-size);\n      line-height: 1.25;\n      color: ${calendar.text.day};\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ant-picker-calendar .ds-calendar-event-meta {\n      margin-top: 1px;\n      font-size: var(--ds-calendar-meta-font-size);\n      line-height: 1.2;\n      color: ${calendar.text.muted};\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ant-picker-calendar .ds-calendar-overflow-trigger {\n      display: inline-flex;\n      width: fit-content;\n      max-width: 100%;\n      border: 0;\n      background: transparent;\n      padding: 0;\n      color: ${calendar.text.current};\n      font: inherit;\n      cursor: help;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--compact .ant-picker-calendar-header {\n      padding: 6px 10px;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--compact .ds-calendar-header-title {\n      font-size: 14px;\n      line-height: 18px;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--clinical {\n      border-color: ${calendar.border.focus};\n      box-shadow: 0 0 0 1px ${calendar.border.focus};\n    }\n  `;\n}\n\nconst MONTH_OPTIONS = Array.from({ length: 12 }, (_, index) => ({\n  value: index,\n  label: dayjs().month(index).format('MMM'),\n}));\n\nfunction resolveDensity(dsVariant: DSCalendarVariant, dsDensity: DSCalendarDensity | undefined): DSCalendarDensity {\n  return dsDensity ?? DEFAULTS_BY_VARIANT[dsVariant].density;\n}\n\nfunction normalizeDateKey(date: string | Dayjs) {\n  return dayjs(date).format('YYYY-MM-DD');\n}\n\nfunction eventsByDate(events: DSCalendarEvent[] | undefined) {\n  const byDate = new Map<string, DSCalendarEvent[]>();\n  if (!events) return byDate;\n\n  for (const event of events) {\n    const key = normalizeDateKey(event.date);\n    const bucket = byDate.get(key) ?? [];\n    bucket.push(event);\n    byDate.set(key, bucket);\n  }\n\n  return byDate;\n}\n\nfunction getStyle(density: DSCalendarDensity, userStyle: CSSProperties | undefined) {\n  const size = dsSemanticTokens.calendar.size[density];\n\n  return {\n    '--ds-calendar-cell-min-height': size.cellMinHeight,\n    '--ds-calendar-cell-padding': size.cellPadding,\n    '--ds-calendar-title-font-size': size.titleFontSize,\n    '--ds-calendar-meta-font-size': size.metaFontSize,\n    '--ds-calendar-marker-size': size.markerSize,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nfunction getEventColor(status: DSCalendarEventStatus | undefined) {\n  return dsSemanticTokens.calendar.status[status ?? 'neutral'];\n}\n\nfunction getYearOptions(value: Dayjs) {\n  const currentYear = value.year();\n  return Array.from({ length: 11 }, (_, index) => {\n    const year = currentYear - 5 + index;\n    return { value: year, label: String(year) };\n  });\n}\n\nfunction renderCalendarCell(date: Dayjs, info: { type: string }, events: DSCalendarEvent[], dsEventLimit: number) {\n  if (info.type !== 'date') {\n    return null;\n  }\n\n  const key = date.format('YYYY-MM-DD');\n  const visibleEvents = events.slice(0, dsEventLimit);\n  const overflowCount = events.length - visibleEvents.length;\n\n  return (\n    <div className=\"ds-calendar-cell-content\">\n      {visibleEvents.length > 0 ? (\n        <div className=\"ds-calendar-events\">\n          {visibleEvents.map((event, index) => (\n            <div className=\"ds-calendar-event\" key={`${key}-${index}`}>\n              <span className=\"ds-calendar-event-marker\" style={{ '--ds-calendar-event-color': getEventColor(event.dsStatus) } as CSSProperties} />\n              <div style={{ minWidth: 0 }}>\n                <div className=\"ds-calendar-event-content\">{event.label}</div>\n                {event.meta ? <div className=\"ds-calendar-event-meta\">{event.meta}</div> : null}\n              </div>\n            </div>\n          ))}\n          {overflowCount > 0 ? (\n            <Tooltip dsSize=\"mini\" dsBody={`${overflowCount} more calendar events`}>\n              <button type=\"button\" className=\"ds-calendar-event-meta ds-calendar-overflow-trigger\">\n                +{overflowCount} more\n              </button>\n            </Tooltip>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport const Calendar: DSCalendarComponent = ({\n  className,\n  dsDensity,\n  dsEventLimit = 2,\n  dsEvents,\n  dsFullscreen,\n  dsShowWeek,\n  dsVariant = 'scheduling',\n  style,\n  ...props\n}: CalendarProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const eventsLookup = eventsByDate(dsEvents);\n  const controlSize = density === 'compact' ? 'small' : 'middle';\n  const segmentedSize = density === 'compact' ? 'sm' : 'md';\n\n  return (\n    <AntCalendar<Dayjs>\n      {...props}\n      className={mergeClassNames(DS_CALENDAR_CLASS, `ds-calendar--${dsVariant}`, `ds-calendar--${density}`, className)}\n      fullscreen={dsFullscreen ?? defaults.fullscreen}\n      showWeek={dsShowWeek ?? defaults.showWeek}\n      style={getStyle(density, style)}\n      headerRender={({ value, type, onChange, onTypeChange }) => {\n        const yearOptions = getYearOptions(value);\n        const mode = type as CalendarMode;\n\n        return (\n          <div className=\"ds-calendar-header-wrapper\">\n            <div className=\"ds-calendar-header-title\">{value.format(mode === 'year' ? 'YYYY' : 'MMMM YYYY')}</div>\n            <div className=\"ds-calendar-header-controls\">\n              <Select\n                aria-label=\"Calendar month\"\n                className=\"ds-calendar-header-select\"\n                size={controlSize}\n                value={value.month()}\n                options={MONTH_OPTIONS}\n                disabled={mode === 'year'}\n                onChange={(nextMonth) => onChange(value.month(Number(nextMonth)))}\n              />\n              <Select\n                aria-label=\"Calendar year\"\n                className=\"ds-calendar-header-select ds-calendar-header-select--year\"\n                size={controlSize}\n                value={value.year()}\n                options={yearOptions}\n                onChange={(nextYear) => onChange(value.year(Number(nextYear)))}\n              />\n              <Segmented\n                aria-label=\"Calendar panel mode\"\n                dsSize={segmentedSize}\n                value={mode}\n                options={[\n                  { label: 'Month', value: 'month' },\n                  { label: 'Year', value: 'year' },\n                ]}\n                onChange={(nextMode) => onTypeChange(nextMode as CalendarMode)}\n              />\n            </div>\n          </div>\n        );\n      }}\n      cellRender={(date, info) => {\n        const key = date.format('YYYY-MM-DD');\n        const events = eventsLookup.get(key) ?? [];\n        return renderCalendarCell(date, info, events, dsEventLimit);\n      }}\n    />\n  );\n};\n\n(Calendar as DSCalendarComponent).generateCalendar = (AntCalendar as any).generateCalendar;\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}

package/dist-lib/display/Calendar.js

@@ -0,0 +1,378 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Select as t } from "../forms/Select.js";
+import { Tooltip as n } from "./Tooltip.js";
+import { Segmented as r } from "./Segmented.js";
+import { Calendar as i } from "antd";
+import { useEffect as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "dayjs";
+//#region src/ds/display/Calendar.tsx
+var l = "ds-calendar-styles", u = "ds-calendar", d = {
+	scheduling: {
+		density: "comfortable",
+		fullscreen: !1,
+		showWeek: !1
+	},
+	availability: {
+		density: "comfortable",
+		fullscreen: !1,
+		showWeek: !0
+	},
+	clinical: {
+		density: "comfortable",
+		fullscreen: !0,
+		showWeek: !1
+	},
+	compact: {
+		density: "compact",
+		fullscreen: !1,
+		showWeek: !1
+	}
+};
+function f(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function p() {
+	if (typeof document > "u") return;
+	let { calendar: t } = e, n = document.getElementById(l);
+	n || (n = document.createElement("style"), n.id = l, document.head.appendChild(n)), n.textContent = `
+    .ant-picker-calendar.ds-calendar {
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.day};
+      background: ${t.surface.default};
+      border: 1px solid ${t.border.grid};
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .ant-picker-calendar .ant-picker-calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      height: auto;
+      min-height: 56px;
+      border-bottom: 1px solid ${t.border.grid};
+      background: ${t.surface.subtle};
+      padding: 12px 16px;
+    }
+
+    /* Hide Ant default header controls */
+    .ant-picker-calendar-header .ant-picker-calendar-year-select,
+    .ant-picker-calendar-header .ant-picker-calendar-month-select,
+    .ant-picker-calendar-header .ant-picker-calendar-mode-switch {
+      display: none !important;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex: 1;
+      margin: 8px 12px;
+      padding: 4px 0;
+      box-sizing: border-box;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-title {
+      flex: 0 1 auto;
+      color: ${t.text.heading};
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-header-select {
+      width: var(--ds-calendar-header-select-width, 92px);
+    }
+
+    .ant-picker-calendar .ds-calendar-header-select.ds-calendar-header-select--year {
+      --ds-calendar-header-select-width: 96px;
+    }
+
+    .ant-picker-calendar .ant-picker-content th {
+      color: ${t.text.muted};
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .ant-picker-calendar .ant-picker-content td {
+      border-top: 1px solid ${t.border.grid};
+    }
+
+    .ant-picker-calendar .ant-picker-cell .ant-picker-cell-inner {
+      display: block;
+      width: 100%;
+      min-height: var(--ds-calendar-cell-min-height);
+      padding: var(--ds-calendar-cell-padding);
+      border: 1px solid transparent;
+      border-radius: 6px;
+      transition: none !important;
+      box-sizing: border-box;
+    }
+
+    .ant-picker-calendar .ant-picker-cell .ant-picker-calendar-date {
+      width: 100%;
+      margin: 0;
+    }
+
+    .ant-picker-calendar .ant-picker-calendar-date-content {
+      text-align: left;
+    }
+
+    .ant-picker-calendar .ds-calendar-cell-content {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      min-width: 0;
+      text-align: left;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-cell-inner,
+    .ant-picker-calendar .ant-picker-cell-inner:hover {
+      background: ${t.surface.emphasized} !important;
+      border-color: ${t.border.selected} !important;
+      color: ${t.text.day} !important;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-date-value,
+    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-year-value {
+      color: ${t.text.current} !important;
+    }
+
+    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-date-value,
+    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-year-value {
+      color: ${t.text.current};
+      font-weight: 700;
+    }
+
+    .ant-picker-calendar .ds-calendar-events {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 4px;
+    }
+
+    .ant-picker-calendar .ds-calendar-event {
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .ant-picker-calendar .ds-calendar-event-marker {
+      width: var(--ds-calendar-marker-size);
+      height: var(--ds-calendar-marker-size);
+      min-width: var(--ds-calendar-marker-size);
+      min-height: var(--ds-calendar-marker-size);
+      border-radius: 999px;
+      margin-top: 4px;
+      background: var(--ds-calendar-event-color);
+    }
+
+    .ant-picker-calendar .ds-calendar-event-content {
+      min-width: 0;
+      font-size: var(--ds-calendar-title-font-size);
+      line-height: 1.25;
+      color: ${t.text.day};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ant-picker-calendar .ds-calendar-event-meta {
+      margin-top: 1px;
+      font-size: var(--ds-calendar-meta-font-size);
+      line-height: 1.2;
+      color: ${t.text.muted};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .ant-picker-calendar .ds-calendar-overflow-trigger {
+      display: inline-flex;
+      width: fit-content;
+      max-width: 100%;
+      border: 0;
+      background: transparent;
+      padding: 0;
+      color: ${t.text.current};
+      font: inherit;
+      cursor: help;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--compact .ant-picker-calendar-header {
+      padding: 6px 10px;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--compact .ds-calendar-header-title {
+      font-size: 14px;
+      line-height: 18px;
+    }
+
+    .${u}.ant-picker-calendar.ds-calendar--clinical {
+      border-color: ${t.border.focus};
+      box-shadow: 0 0 0 1px ${t.border.focus};
+    }
+  `;
+}
+var m = Array.from({ length: 12 }, (e, t) => ({
+	value: t,
+	label: c().month(t).format("MMM")
+}));
+function h(e, t) {
+	return t ?? d[e].density;
+}
+function g(e) {
+	return c(e).format("YYYY-MM-DD");
+}
+function _(e) {
+	let t = /* @__PURE__ */ new Map();
+	if (!e) return t;
+	for (let n of e) {
+		let e = g(n.date), r = t.get(e) ?? [];
+		r.push(n), t.set(e, r);
+	}
+	return t;
+}
+function v(t, n) {
+	let r = e.calendar.size[t];
+	return {
+		"--ds-calendar-cell-min-height": r.cellMinHeight,
+		"--ds-calendar-cell-padding": r.cellPadding,
+		"--ds-calendar-title-font-size": r.titleFontSize,
+		"--ds-calendar-meta-font-size": r.metaFontSize,
+		"--ds-calendar-marker-size": r.markerSize,
+		...n
+	};
+}
+function y(t) {
+	return e.calendar.status[t ?? "neutral"];
+}
+function b(e) {
+	let t = e.year();
+	return Array.from({ length: 11 }, (e, n) => {
+		let r = t - 5 + n;
+		return {
+			value: r,
+			label: String(r)
+		};
+	});
+}
+function x(e, t, r, i) {
+	if (t.type !== "date") return null;
+	let a = e.format("YYYY-MM-DD"), c = r.slice(0, i), l = r.length - c.length;
+	return /* @__PURE__ */ o("div", {
+		className: "ds-calendar-cell-content",
+		children: c.length > 0 ? /* @__PURE__ */ s("div", {
+			className: "ds-calendar-events",
+			children: [c.map((e, t) => /* @__PURE__ */ s("div", {
+				className: "ds-calendar-event",
+				children: [/* @__PURE__ */ o("span", {
+					className: "ds-calendar-event-marker",
+					style: { "--ds-calendar-event-color": y(e.dsStatus) }
+				}), /* @__PURE__ */ s("div", {
+					style: { minWidth: 0 },
+					children: [/* @__PURE__ */ o("div", {
+						className: "ds-calendar-event-content",
+						children: e.label
+					}), e.meta ? /* @__PURE__ */ o("div", {
+						className: "ds-calendar-event-meta",
+						children: e.meta
+					}) : null]
+				})]
+			}, `${a}-${t}`)), l > 0 ? /* @__PURE__ */ o(n, {
+				dsSize: "mini",
+				dsBody: `${l} more calendar events`,
+				children: /* @__PURE__ */ s("button", {
+					type: "button",
+					className: "ds-calendar-event-meta ds-calendar-overflow-trigger",
+					children: [
+						"+",
+						l,
+						" more"
+					]
+				})
+			}) : null]
+		}) : null
+	});
+}
+var S = ({ className: e, dsDensity: n, dsEventLimit: c = 2, dsEvents: l, dsFullscreen: g, dsShowWeek: y, dsVariant: S = "scheduling", style: C, ...w }) => {
+	a(() => {
+		p();
+	}, []);
+	let T = d[S], E = h(S, n), D = _(l), O = E === "compact" ? "small" : "middle", k = E === "compact" ? "sm" : "md";
+	return /* @__PURE__ */ o(i, {
+		...w,
+		className: f(u, `ds-calendar--${S}`, `ds-calendar--${E}`, e),
+		fullscreen: g ?? T.fullscreen,
+		showWeek: y ?? T.showWeek,
+		style: v(E, C),
+		headerRender: ({ value: e, type: n, onChange: i, onTypeChange: a }) => {
+			let c = b(e), l = n;
+			return /* @__PURE__ */ s("div", {
+				className: "ds-calendar-header-wrapper",
+				children: [/* @__PURE__ */ o("div", {
+					className: "ds-calendar-header-title",
+					children: e.format(l === "year" ? "YYYY" : "MMMM YYYY")
+				}), /* @__PURE__ */ s("div", {
+					className: "ds-calendar-header-controls",
+					children: [
+						/* @__PURE__ */ o(t, {
+							"aria-label": "Calendar month",
+							className: "ds-calendar-header-select",
+							size: O,
+							value: e.month(),
+							options: m,
+							disabled: l === "year",
+							onChange: (t) => i(e.month(Number(t)))
+						}),
+						/* @__PURE__ */ o(t, {
+							"aria-label": "Calendar year",
+							className: "ds-calendar-header-select ds-calendar-header-select--year",
+							size: O,
+							value: e.year(),
+							options: c,
+							onChange: (t) => i(e.year(Number(t)))
+						}),
+						/* @__PURE__ */ o(r, {
+							"aria-label": "Calendar panel mode",
+							dsSize: k,
+							value: l,
+							options: [{
+								label: "Month",
+								value: "month"
+							}, {
+								label: "Year",
+								value: "year"
+							}],
+							onChange: (e) => a(e)
+						})
+					]
+				})]
+			});
+		},
+		cellRender: (e, t) => {
+			let n = e.format("YYYY-MM-DD");
+			return x(e, t, D.get(n) ?? [], c);
+		}
+	});
+};
+S.generateCalendar = i.generateCalendar, S.displayName = "Calendar";
+//#endregion
+export { S as Calendar };
+
+//# sourceMappingURL=Calendar.js.map