@arbidocs/blocks 0.4.71 → 0.4.72

package/src/calendar/calendar.css

@@ -0,0 +1,316 @@
+/*
+ * @arbidocs/blocks/calendar.css — theme for the calendar block (FullCalendar v6 on ARBI tokens).
+ * Import once from the app stylesheet: `@import '@arbidocs/blocks/calendar.css';`.
+ * FullCalendar v6 injects its own structural CSS at runtime; this file only re-skins it through
+ * its `--fc-*` variables and styles the block's own event content. Plain CSS on the HSL triplet
+ * tokens, so light and dark themes follow automatically.
+ */
+
+.arbi-calendar {
+  --fc-border-color: hsl(var(--border));
+  --fc-page-bg-color: hsl(var(--background));
+  --fc-neutral-bg-color: hsl(var(--muted) / 0.6);
+  --fc-neutral-text-color: hsl(var(--muted-foreground));
+  --fc-today-bg-color: hsl(var(--primary) / 0.05);
+  --fc-now-indicator-color: hsl(var(--destructive));
+  --fc-non-business-color: hsl(var(--muted) / 0.55);
+  --fc-highlight-color: hsl(var(--primary) / 0.12);
+  --fc-list-event-hover-bg-color: hsl(var(--muted));
+  --fc-event-selected-overlay-color: hsl(var(--foreground) / 0.12);
+  --fc-small-font-size: 0.75rem;
+  color: hsl(var(--foreground));
+  font-size: 0.8125rem;
+}
+
+.arbi-calendar .fc {
+  height: 100%;
+}
+.arbi-calendar .fc-scrollgrid {
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.arbi-calendar .fc a {
+  color: inherit;
+  text-decoration: none;
+}
+.arbi-calendar .fc .fc-col-header-cell {
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+}
+.arbi-calendar .fc .fc-col-header-cell-cushion {
+  padding: 4px 2px;
+}
+.arbi-calendar .fc .fc-timegrid-slot {
+  height: 2.5em;
+}
+.arbi-calendar .fc .fc-timegrid-slot-minor {
+  border-top-style: dotted;
+}
+.arbi-calendar .fc .fc-timegrid-slot-label,
+.arbi-calendar .fc .fc-timegrid-axis {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.6875rem;
+}
+.arbi-calendar .fc .fc-timegrid-slot-label-cushion {
+  padding: 0 6px;
+}
+.arbi-calendar .fc .fc-daygrid-day-number {
+  font-size: 0.75rem;
+  padding: 4px 6px;
+}
+.arbi-calendar .fc .fc-day-today .fc-daygrid-day-number {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: 9999px;
+  min-width: 1.5rem;
+  text-align: center;
+  margin: 2px;
+  padding: 2px 6px;
+}
+.arbi-calendar .fc .fc-daygrid-week-number,
+.arbi-calendar .fc .fc-timegrid-axis-cushion {
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  font-size: 0.6875rem;
+}
+.arbi-calendar .fc .fc-timegrid-now-indicator-line {
+  border-width: 2px 0 0;
+}
+.arbi-calendar .fc .fc-list-day-cushion {
+  background: hsl(var(--muted) / 0.6);
+}
+.arbi-calendar .fc .fc-multimonth {
+  border: 0;
+}
+.arbi-calendar .fc .fc-multimonth-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+/* Day header in time grids: weekday over a big day number; today in a primary circle. */
+.arbi-cal-dayhead {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.1;
+}
+.arbi-cal-dayhead-dow {
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.arbi-cal-dayhead-num {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  min-width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+}
+.arbi-cal-dayhead-today .arbi-cal-dayhead-dow {
+  color: hsl(var(--primary));
+}
+.arbi-cal-dayhead-today .arbi-cal-dayhead-num {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+/* Secondary time zone: two label columns in the time axis. */
+.arbi-cal-slot-labels {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+.arbi-cal-slot-secondary {
+  color: hsl(var(--muted-foreground) / 0.75);
+  min-width: 2.75em;
+  text-align: right;
+}
+.arbi-cal-slot-primary {
+  min-width: 2.75em;
+  text-align: right;
+}
+.arbi-cal-zone-labels {
+  font-size: 0.625rem;
+}
+
+/* ── events ─────────────────────────────────────────────────────────────────── */
+
+.arbi-calendar .fc .arbi-cal-event {
+  border-radius: 4px;
+  box-shadow: none;
+  background: transparent;
+}
+.arbi-calendar .fc-timegrid-event.arbi-cal-event,
+.arbi-calendar .fc-daygrid-block-event.arbi-cal-event {
+  border-width: 0;
+}
+.arbi-calendar .fc .arbi-cal-event .fc-event-main {
+  padding: 0;
+  color: inherit;
+}
+.arbi-calendar .fc-timegrid-event-harness-inset .fc-timegrid-event {
+  box-shadow: 0 0 0 1px hsl(var(--background));
+}
+
+.arbi-cal-event-inner {
+  height: 100%;
+  overflow: hidden;
+  padding: 2px 4px;
+  border-radius: 4px;
+  background: var(--arbi-cal-color);
+  color: var(--arbi-cal-fg);
+  border-left: 3px solid color-mix(in srgb, var(--arbi-cal-color) 70%, black);
+  font-size: 0.75rem;
+  line-height: 1.25;
+}
+.arbi-cal-event-line {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-width: 0;
+}
+.arbi-cal-title {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.arbi-cal-time,
+.arbi-cal-location {
+  opacity: 0.85;
+  font-size: 0.6875rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.arbi-cal-location {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.arbi-cal-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+
+/* Month view timed events: dot + time + title, no fill. */
+.arbi-cal-dot-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 0 2px;
+  font-size: 0.75rem;
+  color: hsl(var(--foreground));
+}
+.arbi-cal-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: var(--arbi-cal-color);
+  flex-shrink: 0;
+}
+.arbi-cal-dot-item .arbi-cal-time {
+  opacity: 0.7;
+  flex-shrink: 0;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/* Agenda list. */
+.arbi-cal-list-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.arbi-cal-list-item .arbi-cal-location {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Free: a light tint. */
+.arbi-cal-free .arbi-cal-event-inner {
+  background: color-mix(in srgb, var(--arbi-cal-color) 22%, hsl(var(--background)));
+  color: hsl(var(--foreground));
+}
+/* Tentative: diagonal stripes. */
+.arbi-cal-tentative .arbi-cal-event-inner {
+  background: repeating-linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--arbi-cal-color) 38%, hsl(var(--background))) 0 6px,
+    color-mix(in srgb, var(--arbi-cal-color) 16%, hsl(var(--background))) 6px 12px
+  );
+  color: hsl(var(--foreground));
+}
+/* Needs a reply: outlined. */
+.arbi-cal-needs-action .arbi-cal-event-inner {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  border: 1px solid var(--arbi-cal-color);
+  border-left-width: 3px;
+}
+/* Declined (only when shown): faded, struck through. */
+.arbi-cal-declined .arbi-cal-event-inner,
+.arbi-cal-declined .arbi-cal-dot-item,
+.arbi-cal-declined .arbi-cal-list-item {
+  opacity: 0.5;
+  background: color-mix(in srgb, var(--arbi-cal-color) 14%, hsl(var(--background)));
+  color: hsl(var(--muted-foreground));
+}
+.arbi-cal-declined .arbi-cal-title,
+.arbi-cal-cancelled .arbi-cal-title {
+  text-decoration: line-through;
+}
+.arbi-cal-cancelled .arbi-cal-event-inner {
+  opacity: 0.65;
+}
+/* Out of office: hatched with the event colour. */
+.arbi-cal-oof .arbi-cal-event-inner {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--arbi-cal-color) 0 4px,
+    color-mix(in srgb, var(--arbi-cal-color) 75%, black) 4px 8px
+  );
+}
+/* Overlays (facts / workflows / tasks): read-only, dashed outline on a muted tint. */
+.arbi-cal-overlay .arbi-cal-event-inner {
+  background: color-mix(in srgb, var(--arbi-cal-color) 10%, hsl(var(--muted)));
+  color: hsl(var(--foreground));
+  border: 1px dashed var(--arbi-cal-color);
+  border-left-width: 1px;
+  font-style: italic;
+}
+.arbi-calendar .fc .arbi-cal-overlay {
+  cursor: pointer;
+}
+/* Restricted (free/busy only). */
+.arbi-cal-restricted .arbi-cal-event-inner {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  border-left-color: hsl(var(--muted-foreground) / 0.5);
+}
+.arbi-calendar .fc .fc-event-past .arbi-cal-event-inner {
+  filter: saturate(0.75);
+}
+
+/* Phone layout. */
+.arbi-calendar-narrow .arbi-cal-toolbar {
+  gap: 0.25rem;
+}
+.arbi-calendar-narrow .fc .fc-timegrid-slot-label-cushion {
+  padding: 0 3px;
+}
+.arbi-calendar-narrow .arbi-cal-dayhead-num {
+  font-size: 1rem;
+  min-width: 1.75rem;
+  height: 1.75rem;
+}

package/dist/chunk-2ZTONLT5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/settings/ModalScaffold.tsx"],"names":["jsx","DialogHeader","cn","DialogFooter","useRestoreFocus","Dialog","jsxs","DialogContent","DialogTitle","DialogDescription"],"mappings":"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","file":"chunk-2ZTONLT5.cjs","sourcesContent":["import type { ComponentProps, ReactNode, RefObject } from 'react'\nimport {\n  cn,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  type DialogPresentation,\n} from '@arbidocs/react/ui'\nimport { useRestoreFocus } from '../lib/useRestoreFocus'\n\n/** Tailwind classes for a modal section heading (also usable on a `Label`). */\nexport const MODAL_SECTION_TITLE_CLASS =\n  'mb-2 flex items-center gap-1 text-sm font-medium text-muted-foreground'\n\n/** Header of a hand-assembled modal: no tinted band, just space. */\nexport function ModalHeader({ className, ...props }: ComponentProps<typeof DialogHeader>) {\n  return (\n    <DialogHeader\n      data-slot=\"modal-header\"\n      className={cn('flex-shrink-0 rounded-t-lg bg-transparent p-6 pb-3 pr-12', className)}\n      {...props}\n    />\n  )\n}\n\n/** A padded group inside a modal body. */\nexport function ModalSection({ className, ...props }: ComponentProps<'div'>) {\n  return <div data-slot=\"modal-section\" className={cn('pt-4', className)} {...props} />\n}\n\n/** Muted label above the content of a {@link ModalSection}. */\nexport function ModalSectionTitle({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"modal-section-title\"\n      className={cn(MODAL_SECTION_TITLE_CLASS, className)}\n      {...props}\n    />\n  )\n}\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst SIZE_CLASS: Record<ModalSize, string> = {\n  sm: 'sm:max-w-sm',\n  md: 'sm:max-w-md',\n  lg: 'sm:max-w-2xl',\n  xl: 'sm:max-w-4xl',\n}\n\nexport interface ModalScaffoldProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title: ReactNode\n  /** Accessible description; visually hidden unless `showDescription`. */\n  description?: ReactNode\n  showDescription?: boolean\n  /** Icon shown before the title. */\n  icon?: ReactNode\n  size?: ModalSize\n  /** Phone presentation; defaults to a bottom sheet for `lg`/`xl`, a centred box otherwise. */\n  presentation?: DialogPresentation\n  className?: string\n  testId?: string\n  /**\n   * `alertdialog` for a destructive or blocking confirmation: announced as an alert, dismissed\n   * only through its own buttons or Escape (not by clicking outside).\n   */\n  role?: 'dialog' | 'alertdialog'\n  /**\n   * Block dismissal by outside click AND Escape; only the dialog's own buttons close it. For a\n   * dialog that shows a secret once (a new API key). Default false. An `alertdialog` already\n   * ignores outside clicks.\n   */\n  dismissible?: boolean\n  /** Called on a pointer/focus interaction outside; `preventDefault()` keeps the dialog open. */\n  onInteractOutside?: (event: Event) => void\n  /** Called on Escape; `preventDefault()` keeps the dialog open. */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /** Element that receives focus when the dialog opens (an alert dialog focuses its safe action). */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  children?: ReactNode\n}\n\nfunction ModalBody({ className, ...props }: ComponentProps<'div'>) {\n  return <div data-slot=\"modal-body\" className={cn('space-y-4', className)} {...props} />\n}\n\n/**\n * Action row. Stacked full-width on phones (primary action on top), right-aligned on wider\n * screens. Sticks to the bottom of the scrolling dialog body so the actions stay reachable.\n */\nfunction ModalFooter({ className, ...props }: ComponentProps<typeof DialogFooter>) {\n  return (\n    <DialogFooter\n      data-slot=\"modal-footer\"\n      className={cn(\n        'sticky bottom-0 -mx-6 -mb-6 mt-4 border-t border-border bg-background px-6 py-3',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Standard dialog: icon + title + description header, then the compound\n * `ModalScaffold.Body` / `ModalScaffold.Footer` slots.\n */\nexport function ModalScaffold({\n  open,\n  onOpenChange,\n  title,\n  description,\n  showDescription = false,\n  icon,\n  size = 'md',\n  presentation,\n  className,\n  testId,\n  role = 'dialog',\n  initialFocusRef,\n  dismissible = true,\n  onInteractOutside,\n  onEscapeKeyDown,\n  children,\n}: ModalScaffoldProps) {\n  const restoreFocus = useRestoreFocus()\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        role={role}\n        presentation={presentation ?? (size === 'lg' || size === 'xl' ? 'sheet' : 'center')}\n        className={cn(SIZE_CLASS[size], 'flex flex-col gap-0 overflow-hidden p-0', className)}\n        data-testid={testId}\n        onInteractOutside={(e) => {\n          if (role === 'alertdialog' || !dismissible) e.preventDefault()\n          onInteractOutside?.(e)\n        }}\n        onEscapeKeyDown={(e) => {\n          if (!dismissible) e.preventDefault()\n          onEscapeKeyDown?.(e)\n        }}\n        onOpenAutoFocus={(e) => {\n          restoreFocus.onOpenAutoFocus(e)\n          if (initialFocusRef?.current) {\n            e.preventDefault()\n            initialFocusRef.current.focus()\n          }\n        }}\n        onCloseAutoFocus={restoreFocus.onCloseAutoFocus}\n      >\n        <ModalHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            {icon}\n            {title}\n          </DialogTitle>\n          <DialogDescription className={showDescription ? undefined : 'sr-only'}>\n            {description ?? title}\n          </DialogDescription>\n        </ModalHeader>\n        <div\n          data-slot=\"modal-scroll\"\n          className=\"min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 pb-6\"\n        >\n          {children}\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nModalScaffold.Body = ModalBody\nModalScaffold.Footer = ModalFooter\n"]}