@med-o/ui 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,80 @@
 {
   "name": "@med-o/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React components of the med.o Design System. Styles are plain CSS on top of @med-o/design-tokens and can be reused by other frameworks.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "@med-o/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/**/*.css"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "@med-o/design-tokens": "0.1.0",
+    "lucide-react": "^1.59.0",
+    "react-aria-components": "^1.22.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepack": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ahmeeedo/medo-design_system.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://design.med-o.de",
+  "bugs": {
+    "url": "https://github.com/ahmeeedo/medo-design_system/issues"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "react-aria",
+    "components",
+    "accessibility",
+    "wcag"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "esm"
+    ],
+    "target": "es2022",
+    "dts": true,
+    "sourcemap": true,
+    "clean": true,
+    "banner": {
+      "js": "\"use client\";"
+    },
+    "loader": {
+      ".css": "empty"
+    }
+  }
+}

package/src/accordion/accordion.css

@@ -0,0 +1,184 @@
+/**
+ * Accordion – med.o Design System
+ *
+ *   <div class="medo-accordion medo-accordion--md">                     surface/default · border/default · radius/lg · clips
+ *     <div class="medo-accordion__item" [data-expanded] [data-disabled]>  1 px divider between items, none after the last
+ *       <h3 class="medo-accordion__heading"><button class="medo-accordion__trigger" aria-expanded>icon · title/description · badge · chevron</button></h3>
+ *       <div class="medo-accordion__panel" role="group"><div class="medo-accordion__content">…</div></div>
+ *     </div>
+ *   </div>
+ * md: header min 48 · padding 12/16 · title label/md · icon 20 · panel padding 12 16 16
+ * lg: header min 64 · padding 20/24 · title heading/sm · icon 24 · panel padding 16 24 24
+ * Motion: height + chevron with spring/smooth, the content fades; reduced motion: content cross-fade only. Closed panels: hidden="until-found" (React Aria).
+ */
+
+.medo-accordion-wrap {
+  display: grid;
+  gap: var(--medo-space-2);
+}
+
+.medo-accordion__toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.medo-accordion {
+  --_pad-y: var(--medo-space-3);
+  --_pad-x: var(--medo-space-4);
+  --_min: var(--medo-space-12); /* 48 */
+  --_icon: var(--medo-size-icon-md);
+  --_title: var(--medo-typography-label-md);
+  --_desc: var(--medo-typography-body-sm);
+  --_panel: var(--medo-space-3) var(--medo-space-4) var(--medo-space-4);
+
+  overflow: hidden;
+  border: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--medo-color-surface-default);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-accordion--lg {
+  --_pad-y: var(--medo-space-5);
+  --_pad-x: var(--medo-space-6);
+  --_min: var(--medo-space-16); /* 64 */
+  --_icon: var(--medo-size-icon-lg);
+  --_title: var(--medo-typography-heading-sm);
+  --_desc: var(--medo-typography-body-md);
+  --_panel: var(--medo-space-4) var(--medo-space-6) var(--medo-space-6);
+}
+
+.medo-accordion__item + .medo-accordion__item {
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-accordion__heading {
+  margin: 0;
+  font: inherit;
+}
+
+/* The whole header is the target. */
+.medo-accordion__trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--medo-space-3);
+  inline-size: 100%;
+  min-block-size: var(--_min);
+  padding: var(--_pad-y) var(--_pad-x);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.medo-accordion__trigger[data-hovered] {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-accordion__trigger[data-pressed] {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-accordion__trigger[data-focus-visible] {
+  box-shadow: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-accordion__item[data-disabled] .medo-accordion__trigger {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.medo-accordion__icon {
+  display: inline-flex;
+  flex: none;
+  align-self: flex-start;
+  /* Centred on the title's first line. */
+  margin-block-start: calc((1lh - var(--_icon)) / 2);
+  color: var(--medo-color-text-secondary);
+  font: var(--_title);
+}
+
+.medo-accordion__icon > svg {
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+.medo-accordion__text {
+  display: grid;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.medo-accordion__title {
+  font: var(--_title);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-accordion__description {
+  font: var(--_desc);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-accordion__badge {
+  display: inline-flex;
+  flex: none;
+}
+
+.medo-accordion__chevron {
+  flex: none;
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+  color: var(--medo-color-text-secondary);
+  transition: rotate var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+
+.medo-accordion__item[data-expanded] .medo-accordion__chevron {
+  rotate: 180deg;
+}
+
+/* Panel: React Aria measures the height into --disclosure-panel-height, so it can animate. */
+.medo-accordion__panel {
+  block-size: var(--disclosure-panel-height);
+  overflow: clip;
+  transition: block-size var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+
+/* The content fades with the height, so it never pops in or is cut off hard. */
+.medo-accordion__content {
+  padding: var(--_panel);
+  transition: opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-standard);
+}
+
+.medo-accordion__item:not([data-expanded]) .medo-accordion__content {
+  opacity: 0;
+}
+
+/* The content lines up with the title when an icon is shown. */
+.medo-accordion__item--icon .medo-accordion__content {
+  padding-inline-start: calc(var(--_pad-x) + var(--_icon) + var(--medo-space-3));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Reduced motion: no growing height – the content cross-fades. */
+  .medo-accordion__panel {
+    transition: none;
+  }
+  .medo-accordion__chevron {
+    transition: rotate var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+  }
+  .medo-accordion__content {
+    transition-duration: var(--medo-motion-duration-fast);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-accordion__trigger[data-focus-visible] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/src/alert/alert.css

@@ -0,0 +1,147 @@
+/**
+ * Alert – med.o Design System
+ *
+ * Persistent message inside the page. Plain markup:
+ *   <div class="medo-alert medo-alert--info">
+ *     <svg class="medo-alert__icon" aria-hidden="true">…</svg>
+ *     <div class="medo-alert__content">
+ *       <p class="medo-alert__title">Title</p>
+ *       <div class="medo-alert__description">Description</div>
+ *       <div class="medo-alert__actions">…text buttons…</div>
+ *     </div>
+ *     <button class="medo-alert__close">…</button>
+ *   </div>
+ * Tones: info · success · warning · danger. Variants: inline (default) · banner (full width).
+ */
+
+.medo-alert {
+  --_bg: var(--medo-color-feedback-info-surface);
+  --_border: var(--medo-color-feedback-info-border);
+  --_icon: var(--medo-color-feedback-info-text);
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-3);
+  padding: var(--medo-space-4);
+  padding-inline-end: var(--medo-space-3);
+  border: var(--medo-border-width-thin) solid var(--_border);
+  border-radius: var(--medo-radius-md);
+  background-color: var(--_bg);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-alert--success {
+  --_bg: var(--medo-color-feedback-success-surface);
+  --_border: var(--medo-color-feedback-success-border);
+  --_icon: var(--medo-color-feedback-success-text);
+}
+.medo-alert--warning {
+  --_bg: var(--medo-color-feedback-warning-surface);
+  --_border: var(--medo-color-feedback-warning-border);
+  --_icon: var(--medo-color-feedback-warning-text);
+}
+.medo-alert--danger {
+  --_bg: var(--medo-color-feedback-danger-surface);
+  --_border: var(--medo-color-feedback-danger-border);
+  --_icon: var(--medo-color-feedback-danger-text);
+}
+
+.medo-alert__icon {
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+  color: var(--_icon);
+  stroke-width: 2; /* 1.67 px at 20 px */
+}
+
+.medo-alert__content {
+  display: grid;
+  gap: var(--medo-space-1);
+  flex: 1;
+  min-inline-size: 0;
+  /* Centre the first line with the 20 px icon (label/md has a 20 px line). */
+  padding-block-start: 0;
+}
+
+.medo-alert__title {
+  margin: 0;
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-alert__description {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-alert__description > :first-child {
+  margin-block-start: 0;
+}
+.medo-alert__description > :last-child {
+  margin-block-end: 0;
+}
+
+.medo-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--medo-space-4);
+  margin-block-start: var(--medo-space-2);
+}
+
+/* The close button (Icon Button ghost sm) sits in the top-right corner. */
+.medo-alert__close {
+  flex-shrink: 0;
+  margin-block: calc(-1 * var(--medo-space-1-5));
+}
+
+/* ---------- Banner: full width, bottom border only, one line ---------- */
+
+.medo-alert--banner {
+  align-items: center;
+  padding: var(--medo-space-2) var(--medo-space-6);
+  border-width: 0 0 var(--medo-border-width-thin);
+  border-radius: 0;
+}
+
+.medo-alert--banner .medo-alert__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--medo-space-3);
+}
+
+.medo-alert--banner .medo-alert__actions {
+  margin-block-start: 0;
+}
+
+.medo-alert--banner .medo-alert__close {
+  margin-block: 0;
+}
+
+@media (forced-colors: active) {
+  .medo-alert {
+    border-color: CanvasText;
+  }
+}
+
+/* An alert that appears (after an action) fades in and settles 4 px with a smooth spring. */
+.medo-alert {
+  transition:
+    opacity var(--medo-motion-duration-normal) var(--medo-motion-easing-enter),
+    translate var(--medo-motion-spring-smooth-duration) var(--medo-motion-spring-smooth);
+}
+@starting-style {
+  .medo-alert {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--medo-space-1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @starting-style {
+    .medo-alert {
+      translate: none;
+    }
+  }
+}

package/src/avatar/avatar.css

@@ -0,0 +1,221 @@
+/**
+ * Avatar – med.o Design System
+ *
+ * Fallback chain: image → initials → icon. Circle = person, square = organization.
+ *   <span class="medo-avatar medo-avatar--md medo-avatar--circle medo-avatar--teal" role="img" aria-label="Lea M.">
+ *     <span class="medo-avatar__initials" aria-hidden="true">LM</span>
+ *     <img class="medo-avatar__image" src="…" alt="">
+ *   </span>
+ *
+ * Sizes xs 20 · sm 24 · md 32 · lg 40 · xl 56 · 2xl 80
+ * Colours: blue · violet · pink · amber · green · teal (from the user id) · neutral (icon)
+ */
+
+.medo-avatar {
+  --_size: var(--medo-space-8);
+  --_bg: var(--medo-color-surface-subtle);
+  --_fg: var(--medo-color-text-secondary);
+  --_radius: var(--medo-radius-md);
+  --_status: calc(var(--medo-space-2) + var(--medo-space-0-5)); /* 10 */
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  border-radius: var(--medo-radius-full);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* Initials, image and icon share one grid cell: the image covers the initials once loaded. */
+.medo-avatar > * {
+  grid-area: 1 / 1;
+}
+
+.medo-avatar--square {
+  border-radius: var(--_radius);
+}
+
+/* Sizes. Initials use the avatar text styles. */
+.medo-avatar--xs {
+  --_size: var(--medo-space-5);
+  --_radius: var(--medo-radius-sm);
+  --_status: var(--medo-space-2);
+  font: var(--medo-typography-avatar-xs);
+}
+.medo-avatar--sm {
+  --_size: var(--medo-space-6);
+  --_radius: var(--medo-radius-sm);
+  --_status: var(--medo-space-2);
+  font: var(--medo-typography-avatar-sm);
+}
+.medo-avatar--md {
+  font: var(--medo-typography-avatar-md);
+}
+.medo-avatar--lg {
+  --_size: var(--medo-space-10);
+  font: var(--medo-typography-avatar-lg);
+}
+.medo-avatar--xl {
+  --_size: calc(var(--medo-space-12) + var(--medo-space-2)); /* 56 */
+  --_radius: var(--medo-radius-lg);
+  --_status: calc(var(--medo-space-3) + var(--medo-space-0-5)); /* 14 */
+  font: var(--medo-typography-avatar-xl);
+}
+.medo-avatar--2xl {
+  --_size: var(--medo-space-20);
+  --_radius: var(--medo-radius-lg);
+  --_status: calc(var(--medo-space-3) + var(--medo-space-0-5));
+  font: var(--medo-typography-avatar-2xl);
+}
+
+/* Tones: same person, same colour (picked from the id). */
+.medo-avatar--blue {
+  --_bg: var(--medo-color-avatar-blue-surface);
+  --_fg: var(--medo-color-avatar-blue-text);
+}
+.medo-avatar--violet {
+  --_bg: var(--medo-color-avatar-violet-surface);
+  --_fg: var(--medo-color-avatar-violet-text);
+}
+.medo-avatar--pink {
+  --_bg: var(--medo-color-avatar-pink-surface);
+  --_fg: var(--medo-color-avatar-pink-text);
+}
+.medo-avatar--amber {
+  --_bg: var(--medo-color-avatar-amber-surface);
+  --_fg: var(--medo-color-avatar-amber-text);
+}
+.medo-avatar--green {
+  --_bg: var(--medo-color-avatar-green-surface);
+  --_fg: var(--medo-color-avatar-green-text);
+}
+.medo-avatar--teal {
+  --_bg: var(--medo-color-avatar-teal-surface);
+  --_fg: var(--medo-color-avatar-teal-text);
+}
+
+.medo-avatar__initials {
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.medo-avatar__icon {
+  display: inline-flex;
+}
+
+/* Icon: 12 / 14 / 16 / 20 / 28 / 40 px = 60 % at xs, 58 % at sm, 50 % from md. */
+.medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 0.5);
+  block-size: calc(var(--_size) * 0.5);
+}
+.medo-avatar--xs .medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 0.6);
+  block-size: calc(var(--_size) * 0.6);
+}
+.medo-avatar--sm .medo-avatar__icon > svg {
+  inline-size: calc(var(--_size) * 7 / 12);
+  block-size: calc(var(--_size) * 7 / 12);
+}
+
+.medo-avatar__image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* 1 px inner border so light photos don't blend into the page. */
+.medo-avatar--has-image::after {
+  content: '';
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--medo-color-avatar-image-border);
+  pointer-events: none;
+}
+
+/* ---------- Status (bottom right, 2 px ring in the surface colour) ---------- */
+
+.medo-avatar__status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  inline-size: var(--_status);
+  block-size: var(--_status);
+  border-radius: var(--medo-radius-full);
+  box-shadow: 0 0 0 2px var(--medo-color-surface-default);
+}
+
+.medo-avatar__status--online {
+  background-color: var(--medo-color-feedback-success-solid);
+}
+.medo-avatar__status--away {
+  background-color: var(--medo-color-feedback-warning-solid);
+}
+.medo-avatar__status--busy {
+  background-color: var(--medo-color-feedback-danger-solid);
+}
+.medo-avatar__status--offline {
+  background-color: var(--medo-color-border-strong);
+}
+
+/* ---------- Group: max 4 + „+N“, 25 % overlap, 2 px ring ---------- */
+
+.medo-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  isolation: isolate;
+}
+
+.medo-avatar-group > .medo-avatar {
+  box-shadow: 0 0 0 2px var(--medo-color-surface-default);
+}
+
+.medo-avatar-group > .medo-avatar + .medo-avatar {
+  margin-inline-start: calc(var(--_size) * -0.25);
+}
+
+.medo-avatar--more {
+  font: var(--medo-typography-label-sm);
+  padding: 0;
+  border: 0;
+}
+
+.medo-avatar-group--xs .medo-avatar--more,
+.medo-avatar-group--sm .medo-avatar--more {
+  font: var(--medo-typography-label-xs);
+}
+
+button.medo-avatar--more {
+  cursor: pointer;
+  outline: none;
+}
+button.medo-avatar--more[data-hovered] {
+  background-image: linear-gradient(var(--medo-color-state-hover), var(--medo-color-state-hover));
+}
+button.medo-avatar--more[data-pressed] {
+  background-image: linear-gradient(var(--medo-color-state-pressed), var(--medo-color-state-pressed));
+}
+.medo-avatar-group > button.medo-avatar--more[data-focus-visible] {
+  box-shadow:
+    0 0 0 2px var(--medo-color-surface-default),
+    var(--medo-shadow-focus-ring);
+}
+
+@media (forced-colors: active) {
+  .medo-avatar {
+    border: var(--medo-border-width-thin) solid CanvasText;
+  }
+  .medo-avatar__status {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}