{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-grid",
  "title": "Calendar Grid",
  "description": "Calendar Grid from the Get IT Done design system.",
  "dependencies": [
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/data-state-panel.json",
    "https://zero-design.itdone.de/r/edge.json",
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/recipes.json",
    "https://zero-design.itdone.de/r/use-scroll-region.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/calendar-grid.tsx",
      "content": "'use client';\n\nimport { Calendar, Plus } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  useContext,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type MutableRefObject,\n  type ReactNode,\n  type TdHTMLAttributes,\n} from 'react';\n\nimport { focusRing, scrollRegionFocusVisible, transitionBase } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\nimport { DataStatePanel, SkeletonBar } from '@/components/ui/data-state-panel';\nimport { edgeClass, useEdge } from '@/components/ui/edge';\nimport { useScrollRegion } from '@/components/ui/use-scroll-region';\nimport { useLabels, usePreset } from '@/components/ui/labels-context';\n\n// Full class strings so Tailwind's content scan finds every token.\nconst projectDot = {\n  1: 'bg-data-project-1',\n  2: 'bg-data-project-2',\n  3: 'bg-data-project-3',\n  4: 'bg-data-project-4',\n  5: 'bg-data-project-5',\n  6: 'bg-data-project-6',\n  7: 'bg-data-project-7',\n  8: 'bg-data-project-8',\n  internal: 'bg-data-internal',\n} as const;\n\nconst entryTone = {\n  default: 'border-transparent bg-muted text-foreground',\n  ok: 'border-transparent bg-general-success-container text-general-success-on-container',\n  warning: 'border-transparent bg-general-warning-container text-general-warning-on-container',\n  error: 'border-transparent bg-general-error-container text-general-error-on-container',\n  suggested: 'border-dashed border-hairline bg-transparent text-muted-foreground',\n} as const;\n\nexport interface WeekGridEntryProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  tone?: keyof typeof entryTone;\n  selected?: boolean;\n  // Project color slot 1 to 8 or `internal` (data tokens). Omit for no dot.\n  project?: keyof typeof projectDot;\n  // Custom dot colour (user data): a CSS colour or a token utility such as `bg-data-project-3`. Wins over `project`.\n  dotColor?: string;\n}\n\n// Time or shift entry inside a calendar cell. Renders a button when interactive, a plain chip otherwise.\nconst WeekGridEntry = forwardRef<HTMLButtonElement, WeekGridEntryProps>(\n  ({ className, tone = 'default', selected, project, dotColor, children, onClick, type = 'button', ...props }, ref) => {\n    const zero = usePreset() === 'zero';\n    const dotShape = zero ? 'h-2 w-2 rounded-hairline' : 'h-2 w-2 rounded-item';\n    const body = (\n      <>\n        {dotColor ? (\n          <span\n            aria-hidden=\"true\"\n            data-entry-dot=\"\"\n            className={cn('shrink-0', dotShape, dotColor.startsWith('bg-') ? dotColor : 'bg-current')}\n            style={dotColor.startsWith('bg-') ? undefined : { backgroundColor: dotColor }}\n          />\n        ) : project ? (\n          <span aria-hidden=\"true\" data-entry-dot=\"\" className={cn('shrink-0', dotShape, projectDot[project])} />\n        ) : null}\n        <span className=\"min-w-0 truncate\">{children}</span>\n      </>\n    );\n    const base = cn(\n      'flex w-full min-w-0 items-center rounded-item border border-solid text-left tabular-nums',\n      zero ? 'typography-detail gap-label px-label py-micro' : 'typography-ui gap-2 px-2 py-1',\n      entryTone[tone],\n      selected && 'ring-2 ring-ring',\n      className,\n    );\n    if (!onClick) {\n      return (\n        <span data-tone={tone} data-selected={selected || undefined} className={base}>\n          {body}\n        </span>\n      );\n    }\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={onClick}\n        aria-pressed={selected === undefined ? undefined : selected}\n        data-tone={tone}\n        data-selected={selected || undefined}\n        className={cn(base, 'cursor-pointer hover:brightness-95', transitionBase, focusRing)}\n        {...props}\n      >\n        {body}\n      </button>\n    );\n  },\n);\nWeekGridEntry.displayName = 'WeekGridEntry';\n\nexport type WeekGridLayout = 'rows' | 'day-columns';\n\n// Lets rows and cells follow the grid layout without prop drilling.\nconst WeekGridLayoutContext = createContext<WeekGridLayout>('rows');\n\nexport interface WeekGridColumn {\n  id: string;\n  label: ReactNode;\n  today?: boolean;\n  weekend?: boolean;\n}\n\nexport interface WeekGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  'aria-label': string;\n  columns: WeekGridColumn[];\n  // `rows` (default): one row per project or member with a sticky row header. `day-columns`: no row header, each day is a column whose cells stack their entries from the top.\n  layout?: WeekGridLayout;\n  // Header of the first column, e.g. \"Project\" or \"Member\".\n  rowHeaderLabel?: ReactNode;\n  // Header of the last column. Omit to render no total column.\n  totalLabel?: ReactNode;\n  state?: 'default' | 'loading' | 'empty' | 'error';\n  // Rows (WeekGridRow) and a WeekGridTotals row.\n  children?: ReactNode;\n  emptyTitle?: string;\n  emptyDescription?: string;\n  emptyAction?: ReactNode;\n  errorTitle?: string;\n  errorDescription?: string;\n  onRetry?: () => void;\n  loadingLabel?: string;\n  loadingRows?: number;\n}\n\nconst thClass = 'typography-text-extra-small whitespace-nowrap border-b border-l border-solid border-hairline bg-muted px-2 py-2 text-left font-medium text-muted-foreground first:border-l-0';\n// Zero: 12/500 subtle labels, the current day in the brand text colour.\nconst thClassZero = 'typography-detail whitespace-nowrap border-b border-l border-solid border-border-default bg-muted px-2 py-2 text-left text-text-subtle-on-muted first:border-l-0';\n// Sticky first column: stays visible while the day columns scroll inside the container.\nconst stickyHead = 'sticky left-0 z-sticky w-32 border-r';\n\nconst WeekGrid = forwardRef<HTMLDivElement, WeekGridProps>(\n  (\n    {\n      className,\n      'aria-label': ariaLabel,\n      columns,\n      layout = 'rows',\n      rowHeaderLabel: rowHeaderLabelProp,\n      totalLabel,\n      state = 'default',\n      children,\n      emptyTitle: emptyTitleProp,\n      emptyDescription,\n      emptyAction,\n      errorTitle: errorTitleProp,\n      errorDescription: errorDescriptionProp,\n      onRetry,\n      loadingLabel: loadingLabelProp,\n      loadingRows = 4,\n      ...props\n    },\n    ref,\n  ) => {\n    const l = useLabels();\n    const rowHeaderLabel = rowHeaderLabelProp ?? l.weekRowHeader;\n    const emptyTitle = emptyTitleProp ?? l.weekEmptyTitle;\n    const errorTitle = errorTitleProp ?? l.weekErrorTitle;\n    const errorDescription = errorDescriptionProp ?? l.serviceNotResponding;\n    const loadingLabel = loadingLabelProp ?? l.weekLoading;\n    const zero = usePreset() === 'zero';\n    const edge = edgeClass(zero);\n    const th = zero ? thClassZero : thClass;\n    const dayColumns = layout === 'day-columns';\n    const span = columns.length + (dayColumns ? 0 : 1) + (totalLabel != null ? 1 : 0);\n    const loading = state === 'loading';\n    const scroll = useScrollRegion<HTMLDivElement>();\n    return (\n      <div\n        ref={(node) => {\n          scroll.ref.current = node;\n          if (typeof ref === 'function') ref(node);\n          else if (ref) (ref as MutableRefObject<HTMLDivElement | null>).current = node;\n        }}\n        aria-busy={loading || undefined}\n        role={scroll.overflowing && ariaLabel ? 'region' : undefined}\n        aria-label={scroll.overflowing ? ariaLabel : undefined}\n        tabIndex={scroll.overflowing ? 0 : undefined}\n        className={cn('overflow-x-auto rounded-surface border border-solid bg-card', ...scrollRegionFocusVisible, edge, className)}\n        {...props}\n      >\n        <WeekGridLayoutContext.Provider value={layout}>\n        <table data-layout={layout} className=\"typography-ui w-full min-w-max table-auto border-collapse text-foreground\" aria-label={ariaLabel}>\n          <thead>\n            <tr>\n              {dayColumns ? null : (\n                <th scope=\"col\" className={cn(th, stickyHead)}>\n                  {rowHeaderLabel}\n                </th>\n              )}\n              {columns.map((c) => (\n                <th\n                  key={c.id}\n                  scope=\"col\"\n                  aria-current={c.today ? 'date' : undefined}\n                  className={cn(th, dayColumns ? 'w-32' : 'w-24', c.today && (zero ? 'text-text-brand-on-subtle' : 'font-semibold text-foreground'))}\n                >\n                  {c.label}\n                </th>\n              ))}\n              {totalLabel != null ? <th scope=\"col\" className={cn(th, 'w-20 text-right')}>{totalLabel}</th> : null}\n            </tr>\n          </thead>\n          <tbody>\n            {state === 'default' ? children : null}\n            {loading\n              ? Array.from({ length: loadingRows }).map((_, r) => (\n                  <tr key={r} className=\"h-row\">\n                    {Array.from({ length: span }).map((__, i) => (\n                      <td key={i} className={cn('border-l border-t border-solid px-2 first:border-l-0', edge)}>\n                        <SkeletonBar className=\"h-4 w-4/5\" />\n                      </td>\n                    ))}\n                  </tr>\n                ))\n              : null}\n            {state === 'empty' || state === 'error' ? (\n              <tr>\n                <td colSpan={span} className={cn('border-t border-solid', edge)}>\n                  {state === 'empty' ? (\n                    <DataStatePanel\n                      kind=\"empty\"\n                      icon={<Calendar className=\"h-icon-md w-icon-md\" />}\n                      title={emptyTitle}\n                      description={emptyDescription}\n                      action={emptyAction}\n                    />\n                  ) : (\n                    <DataStatePanel kind=\"error\" title={errorTitle} description={errorDescription} onRetry={onRetry} />\n                  )}\n                </td>\n              </tr>\n            ) : null}\n          </tbody>\n        </table>\n        </WeekGridLayoutContext.Provider>\n        {loading ? (\n          <span role=\"status\" className=\"sr-only\">\n            {loadingLabel}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\nWeekGrid.displayName = 'WeekGrid';\n\nexport interface WeekGridRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, 'children'> {\n  // Row header content (project name, or avatar plus member name). Not rendered in the `day-columns` layout.\n  header?: ReactNode;\n  // Right aligned total, e.g. \"26:00\".\n  total?: ReactNode;\n  // One WeekGridCell per column.\n  children?: ReactNode;\n}\n\nconst cellBase = 'border-l border-t border-solid px-2 py-1 align-middle';\n\nconst stickyCell = 'sticky left-0 z-sticky w-32 border-l-0 border-r';\n\nconst WeekGridRow = forwardRef<HTMLTableRowElement, WeekGridRowProps>(({ className, header, total, children, ...props }, ref) => {\n  const layout = useContext(WeekGridLayoutContext);\n  const edge = useEdge();\n  return (\n    <tr ref={ref} className={cn(layout === 'day-columns' ? 'h-auto' : 'h-row', className)} {...props}>\n      {layout === 'day-columns' ? null : (\n        <th scope=\"row\" className={cn(cellBase, edge, stickyCell, 'typography-ui bg-card text-left font-normal')}>\n          {header}\n        </th>\n      )}\n      {children}\n      {total != null ? <td className={cn(cellBase, edge, 'typography-ui-semibold text-right tabular-nums')}>{total}</td> : null}\n    </tr>\n  );\n});\nWeekGridRow.displayName = 'WeekGridRow';\n\nexport interface WeekGridCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  // Shows an add button while the cell has no children. Called when it is pressed.\n  onAdd?: () => void;\n  // Accessible name of the add button, e.g. \"Log time for DGTL, Mon 6\". Defaults to the provider text.\n  addLabel?: string;\n}\n\nconst WeekGridCell = forwardRef<HTMLTableCellElement, WeekGridCellProps>(({ className, onAdd, addLabel, children, ...props }, ref) => {\n  const l = useLabels();\n  const dayColumns = useContext(WeekGridLayoutContext) === 'day-columns';\n  const edge = useEdge();\n  return (\n    <td ref={ref} className={cn(cellBase, edge, dayColumns && 'align-top', className)} {...props}>\n      {dayColumns && Children.toArray(children).length > 0 ? <div className=\"flex flex-col gap-1\">{children}</div> : children}\n      {onAdd && Children.toArray(children).length === 0 ? (\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          aria-label={addLabel ?? l.addEntry}\n          className={cn(\n            'grid h-control-md w-full cursor-pointer place-items-center rounded-item border border-solid border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground',\n            transitionBase,\n            focusRing,\n          )}\n        >\n          <Plus aria-hidden=\"true\" className=\"h-icon-xs w-icon-xs\" />\n        </button>\n      ) : null}\n    </td>\n  );\n});\nWeekGridCell.displayName = 'WeekGridCell';\n\nexport interface WeekGridTotalsProps extends HTMLAttributes<HTMLTableRowElement> {\n  label?: ReactNode;\n  values?: ReactNode[];\n  total?: ReactNode;\n}\n\nconst WeekGridTotals = forwardRef<HTMLTableRowElement, WeekGridTotalsProps>(\n  ({ className, label: labelProp, values = [], total, ...props }, ref) => {\n    const l = useLabels();\n    const label = labelProp ?? l.total;\n    const dayColumns = useContext(WeekGridLayoutContext) === 'day-columns';\n    const edge = useEdge();\n    return (\n    <tr ref={ref} className={cn('h-row bg-muted', className)} {...props}>\n      {dayColumns ? null : (\n        <th scope=\"row\" className={cn(cellBase, edge, stickyCell, 'typography-ui-semibold bg-muted text-left')}>\n          {label}\n        </th>\n      )}\n      {values.map((v, i) => (\n        <td key={i} className={cn(cellBase, edge, 'typography-ui-semibold tabular-nums')}>\n          {v}\n        </td>\n      ))}\n      {total != null ? <td className={cn(cellBase, edge, 'typography-ui-semibold text-right tabular-nums')}>{total}</td> : null}\n    </tr>\n  );\n  },\n);\nWeekGridTotals.displayName = 'WeekGridTotals';\n\n// MonthGrid\n\nexport interface MonthGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  'aria-label': string;\n  weekdays?: string[];\n  state?: 'default' | 'loading' | 'empty' | 'error';\n  // MonthGridCell elements, in reading order. Chunked into rows of seven.\n  children?: ReactNode;\n  // One total per week row, e.g. \"32:00\". Adds a trailing total column; a missing entry renders an empty cell.\n  weekTotals?: ReactNode[];\n  // Header of the total column. Defaults to the provider text.\n  weekTotalLabel?: ReactNode;\n  emptyTitle?: string;\n  emptyDescription?: string;\n  emptyAction?: ReactNode;\n  errorTitle?: string;\n  errorDescription?: string;\n  onRetry?: () => void;\n  loadingLabel?: string;\n  // Number of week rows shown while loading or empty.\n  placeholderRows?: number;\n  // Five day layout: hides Saturday and Sunday. Pass cells as full Monday to Sunday weeks (seven per row); the weekend cells are dropped from the layout, so weekTotals computed by the caller stay correct.\n  weekdaysOnly?: boolean;\n}\n\nconst MonthGrid = forwardRef<HTMLDivElement, MonthGridProps>(\n  (\n    {\n      className,\n      weekdays: weekdaysProp,\n      state = 'default',\n      children,\n      weekTotals,\n      weekTotalLabel,\n      emptyTitle: emptyTitleProp,\n      emptyDescription,\n      emptyAction,\n      errorTitle: errorTitleProp,\n      errorDescription: errorDescriptionProp,\n      onRetry,\n      loadingLabel: loadingLabelProp,\n      placeholderRows = 5,\n      weekdaysOnly = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const l = useLabels();\n    const edge = useEdge();\n    const dayColumns = weekdaysOnly ? 5 : 7;\n    const emptyTitle = emptyTitleProp ?? l.monthEmptyTitle;\n    const errorTitle = errorTitleProp ?? l.monthErrorTitle;\n    const errorDescription = errorDescriptionProp ?? l.serviceNotResponding;\n    const loadingLabel = loadingLabelProp ?? l.monthLoading;\n    const weekdays = (weekdaysProp ?? l.weekdaysShort).slice(0, dayColumns);\n    const cells = Children.toArray(children);\n    const rows: ReactNode[][] = [];\n    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + dayColumns));\n    const withTotals = weekTotals != null;\n    // Seven equal day columns plus a fixed total column (width scale token).\n    const rowGrid = withTotals\n      ? weekdaysOnly\n        ? 'grid grid-cols-[repeat(5,minmax(0,1fr))_theme(width.24)]'\n        : 'grid grid-cols-[repeat(7,minmax(0,1fr))_theme(width.24)]'\n      : weekdaysOnly\n        ? 'grid grid-cols-5'\n        : 'grid grid-cols-7';\n    const totalCell = cn('typography-ui-semibold flex items-start justify-end border-l border-t border-solid bg-muted p-2 tabular-nums', edge);\n    const headerRow = (\n      <div role=\"row\" className={rowGrid}>\n        {weekdays.map((d) => (\n          <div\n            key={d}\n            role=\"columnheader\"\n            className={cn('typography-text-extra-small border-b border-l border-solid bg-muted px-2 py-2 font-medium text-muted-foreground first:border-l-0', edge)}\n          >\n            {d}\n          </div>\n        ))}\n        {withTotals ? (\n          <div\n            role=\"columnheader\"\n            className={cn('typography-text-extra-small border-b border-l border-solid bg-muted px-2 py-2 text-right font-medium text-muted-foreground', edge)}\n          >\n            {weekTotalLabel ?? l.weekTotal}\n          </div>\n        ) : null}\n      </div>\n    );\n    return (\n      <>\n      <div\n        ref={ref}\n        role=\"grid\"\n        aria-busy={state === 'loading' || undefined}\n        className={cn('overflow-hidden rounded-surface border border-solid bg-card', edge, className)}\n        {...props}\n      >\n        {headerRow}\n        {state === 'default'\n          ? rows.map((row, r) => (\n              <div key={r} role=\"row\" className={rowGrid}>\n                {row}\n                {withTotals ? (\n                  <div role=\"gridcell\" data-week-total=\"\" className={totalCell}>\n                    {weekTotals[r]}\n                  </div>\n                ) : null}\n              </div>\n            ))\n          : null}\n        {state === 'loading'\n          ? Array.from({ length: placeholderRows }).map((_, r) => (\n              <div key={r} role=\"row\" className={weekdaysOnly ? 'grid grid-cols-5' : 'grid grid-cols-7'}>\n                {Array.from({ length: dayColumns }).map((__, c) => (\n                  <div key={c} role=\"gridcell\" className={cn('h-month-cell border-l border-t border-solid p-2 first:border-l-0', edge)}>\n                    <SkeletonBar className=\"mb-2 h-3 w-4\" />\n                    <SkeletonBar className=\"h-4 w-4/5\" />\n                  </div>\n                ))}\n              </div>\n            ))\n          : null}\n        {state === 'empty' ? (\n          <div role=\"row\">\n            <div role=\"gridcell\" className={cn('border-t border-solid', edge)}>\n              <DataStatePanel\n                kind=\"empty\"\n                icon={<Calendar className=\"h-icon-md w-icon-md\" />}\n                title={emptyTitle}\n                description={emptyDescription}\n                action={emptyAction}\n              />\n            </div>\n          </div>\n        ) : null}\n        {state === 'error' ? (\n          <div role=\"row\">\n            <div role=\"gridcell\" className={cn('border-t border-solid', edge)}>\n              <DataStatePanel kind=\"error\" title={errorTitle} description={errorDescription} onRetry={onRetry} />\n            </div>\n          </div>\n        ) : null}\n      </div>\n      {state === 'loading' ? (\n        // A status is not allowed as a child of a grid, so it sits next to it.\n        <span role=\"status\" className=\"sr-only\">\n          {loadingLabel}\n        </span>\n      ) : null}\n      </>\n    );\n  },\n);\nMonthGrid.displayName = 'MonthGrid';\n\nexport interface MonthGridCellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  // Day number shown top left.\n  day: ReactNode;\n  // Full date for assistive tech, e.g. \"Thursday 14 March\".\n  label?: string;\n  // Day belongs to the previous or next month.\n  outside?: boolean;\n  // Weekend or non working day: muted surface.\n  nonWorking?: boolean;\n  // Public holiday: tinted surface and a visually hidden \"Holiday\" prefix (provider text) unless `note` already names it.\n  holiday?: boolean;\n  today?: boolean;\n  selected?: boolean;\n  disabled?: boolean;\n  // Short note instead of entries, e.g. \"Vacation\" or \"Holiday\".\n  note?: ReactNode;\n  // Makes the whole cell a button. Entries inside stay independently focusable.\n  onSelectDay?: () => void;\n  // Shows an add button in the cell corner. Called when it is pressed.\n  onAdd?: () => void;\n  // Accessible name of the add button. Defaults to the provider text plus the date label.\n  addLabel?: string;\n}\n\nconst MonthGridCell = forwardRef<HTMLDivElement, MonthGridCellProps>(\n  ({ className, day, label, outside, nonWorking, holiday, today, selected, disabled, note, onSelectDay, onAdd, addLabel, children, ...props }, ref) => {\n    const l = useLabels();\n    const edge = useEdge();\n    return (\n    <div\n      ref={ref}\n      role=\"gridcell\"\n      aria-selected={selected === undefined ? undefined : selected}\n      aria-current={today ? 'date' : undefined}\n      aria-disabled={disabled || undefined}\n      data-outside={outside || undefined}\n      data-holiday={holiday || undefined}\n      data-selected={selected || undefined}\n      className={cn(\n        // Min-height from the month-cell size token (no minHeight token exists yet) so content can grow the row\n        'relative flex min-h-[theme(height.month-cell)] flex-col gap-1 border-l border-t border-solid p-2 first:border-l-0',\n        edge,\n        (outside || nonWorking) && 'bg-muted',\n        holiday && !outside && 'bg-general-warning-container',\n        selected && 'z-raised bg-accent ring-2 ring-inset ring-ring',\n        disabled && 'pointer-events-none opacity-disabled',\n        className,\n      )}\n      {...props}\n    >\n      {onSelectDay ? (\n        <button\n          type=\"button\"\n          onClick={onSelectDay}\n          aria-label={label ?? (typeof day === 'string' || typeof day === 'number' ? String(day) : undefined)}\n          className={cn('absolute inset-0 rounded-item', focusRing)}\n        />\n      ) : null}\n      <span\n        className={cn(\n          'typography-text-extra-small tabular-nums',\n          !today && (outside ? 'text-muted-foreground' : 'text-foreground'),\n          // Today: filled circle around the number. The inverse pair holds >= 17:1 in every theme and mode, which the brand fill does not (bright brand colours stay below 4.5:1 with any text colour).\n          today && 'inline-flex h-6 w-6 items-center justify-center self-start rounded-full bg-background-inverse font-semibold text-text-inverse',\n          holiday && !outside && !today && 'font-semibold text-general-warning-on-container',\n          selected && 'font-semibold',\n        )}\n      >\n        {holiday && !note ? <span className=\"sr-only\">{l.holiday}, </span> : null}\n        {day}\n      </span>\n      {onAdd ? (\n        <button\n          type=\"button\"\n          onClick={onAdd}\n          aria-label={addLabel ?? (label ? `${l.addEntry}, ${label}` : l.addEntry)}\n          className={cn(\n            'absolute right-1 top-1 z-raised grid h-6 w-6 cursor-pointer place-items-center rounded-item border border-solid border-transparent bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground',\n            transitionBase,\n            focusRing,\n          )}\n        >\n          <Plus aria-hidden=\"true\" className=\"h-icon-xs w-icon-xs\" />\n        </button>\n      ) : null}\n      {note ? <span className={cn('typography-text-extra-small', holiday && !outside ? 'text-general-warning-on-container' : 'text-muted-foreground')}>{note}</span> : null}\n      {children ? <div className=\"relative flex min-w-0 flex-col gap-1\">{children}</div> : null}\n    </div>\n    );\n  },\n);\nMonthGridCell.displayName = 'MonthGridCell';\n\nexport { MonthGrid, MonthGridCell, WeekGrid, WeekGridCell, WeekGridEntry, WeekGridRow, WeekGridTotals };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}