@j2-health/design-system 0.5.4 → 0.6.0

package/dist/style.css

@@ -106,6 +106,34 @@
     }
   }
 }
+
+/* Extra small: 20px, for dense toolbars and bands. */
+.ant-btn.j2-btn-xs {
+  height: 20px;
+  padding-inline: 6px;
+  font-size: var(--j2-font-size-sm);
+  gap: 4px;
+
+  &.ant-btn-icon-only {
+    width: 20px;
+    padding-inline: 0;
+  }
+
+  .ant-btn-icon svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* Inline link: sits in a line of text. */
+.ant-btn.j2-btn-inline {
+  height: auto;
+  padding: 0;
+  border: 0;
+  font-size: inherit;
+  line-height: inherit;
+  vertical-align: baseline;
+}
 .ant-card:not(.ant-card-bordered) {
   box-shadow: none;
 
@@ -197,49 +225,117 @@
     }
   }
 }
-._default_1t61q_1 .ant-collapse-title,
-._warning_1t61q_2 .ant-collapse-title,
-._error_1t61q_3 .ant-collapse-title {
+
+/* Selected: the chosen card of a set. */
+.ant-card.j2-card-selected,
+.ant-card.j2-card-selected:hover {
+  border-color: var(--j2-color-primary);
+}
+
+.ant-card.j2-card-selectable {
+  cursor: pointer;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:focus-visible {
+    outline: 2px solid var(--j2-color-primary);
+    outline-offset: 2px;
+  }
+}
+._default_4jnb6_1 .ant-collapse-title,
+._warning_4jnb6_2 .ant-collapse-title,
+._error_4jnb6_3 .ant-collapse-title {
   display: flex;
   align-items: center;
   gap: var(--j2-size-xs);
 }
 
 /* Warning state */
-._warning_1t61q_2.ant-collapse {
+._warning_4jnb6_2.ant-collapse {
   border-color: var(--j2-color-warning-border);
   background-color: var(--j2-color-warning-bg);
 }
 
-._warning_1t61q_2 .ant-collapse-item {
+._warning_4jnb6_2 .ant-collapse-item {
   border-bottom-color: var(--j2-color-warning-border) !important;
 }
 
-._warning_1t61q_2 .ant-collapse-panel {
+._warning_4jnb6_2 .ant-collapse-panel {
   border-top-color: var(--j2-color-warning-border) !important;
 }
 
-._warning_1t61q_2 .ant-collapse-header {
+._warning_4jnb6_2 .ant-collapse-header {
   color: var(--j2-color-text) !important;
 }
 
 /* Error state */
-._error_1t61q_3.ant-collapse {
+._error_4jnb6_3.ant-collapse {
   border-color: var(--j2-color-error-border);
   background-color: var(--j2-color-error-bg);
 }
 
-._error_1t61q_3 .ant-collapse-item {
+._error_4jnb6_3 .ant-collapse-item {
   border-bottom-color: var(--j2-color-error-border) !important;
 }
 
-._error_1t61q_3 .ant-collapse-panel {
+._error_4jnb6_3 .ant-collapse-panel {
   border-top-color: var(--j2-color-error-border) !important;
 }
 
-._error_1t61q_3 .ant-collapse-header {
+._error_4jnb6_3 .ant-collapse-header {
   color: var(--j2-color-text) !important;
 }
+
+/*
+ * Section variant
+ * A 28px gray band with a rule above and below, a caption label, and the
+ * caret at the end. The body is flush and white so its content (a table, a
+ * list) draws its own edges.
+ */
+._section_4jnb6_51.ant-collapse > .ant-collapse-item {
+  border-bottom: 0;
+}
+
+._section_4jnb6_51 .ant-collapse-header {
+  min-height: 28px;
+  padding: 0 12px !important;
+  align-items: center !important;
+  background: var(--j2-gray-2);
+  border-top: 1px solid var(--j2-color-border-secondary);
+  border-bottom: 1px solid var(--j2-color-border-secondary);
+  border-radius: 0 !important;
+}
+
+._section_4jnb6_51 .ant-collapse-item + .ant-collapse-item .ant-collapse-header {
+  border-top: 0;
+}
+
+._section_4jnb6_51 .ant-collapse-title {
+  display: flex;
+  align-items: center;
+  font-size: var(--j2-font-size-xs);
+  line-height: var(--j2-line-height-xs);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--j2-color-text-secondary);
+}
+
+._section_4jnb6_51 .ant-collapse-expand-icon {
+  height: auto !important;
+  padding-inline-start: 8px !important;
+  color: var(--j2-color-text-secondary);
+}
+
+._section_4jnb6_51 .ant-collapse-body {
+  padding: 0 !important;
+  background: white;
+}
+
+._section_4jnb6_51 .ant-collapse-panel {
+  border-bottom: 1px solid var(--j2-color-border-secondary);
+}
 .j2-drawer {
   .ant-drawer-header {
     height: 64px;
@@ -336,29 +432,33 @@
     }
   }
 }
-._j2Popover_wjtre_1 {
+._j2Popover_r2pkr_1 {
   .ant-popover-container {
     padding: var(--j2-padding-lg);
   }
 
-  &._smallPadding_wjtre_6,
-  &._smPadding_wjtre_7 .ant-popover-container {
+  &._smallPadding_r2pkr_6,
+  &._smPadding_r2pkr_7 .ant-popover-container {
     padding: var(--j2-padding-sm);
   }
 
-  &._xxsPadding_wjtre_11 .ant-popover-container {
+  &._nonePadding_r2pkr_11 .ant-popover-container {
+    padding: 0;
+  }
+
+  &._xxsPadding_r2pkr_15 .ant-popover-container {
     padding: var(--j2-padding-xxs);
   }
 
-  &._xsPadding_wjtre_15 .ant-popover-container {
+  &._xsPadding_r2pkr_19 .ant-popover-container {
     padding: var(--j2-padding-xs);
   }
 
-  &._mdPadding_wjtre_19 .ant-popover-container {
+  &._mdPadding_r2pkr_23 .ant-popover-container {
     padding: var(--j2-padding-md);
   }
 
-  &._xlPadding_wjtre_23 .ant-popover-container {
+  &._xlPadding_r2pkr_27 .ant-popover-container {
     padding: var(--j2-padding-xl);
   }
 
@@ -369,13 +469,13 @@
   }
 }
 
-._popoverHeader_wjtre_34 {
+._popoverHeader_r2pkr_38 {
   box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
   border-radius: var(--j2-border-radius) var(--j2-border-radius) 0 0;
   font-weight: bold;
 }
 
-._scrollable_wjtre_40 {
+._scrollable_r2pkr_44 {
   .ant-popover-container {
     padding: 0;
   }
@@ -686,7 +786,13 @@
 .ant-tag .anticon + span {
   margin-inline-start: var(--j2-margin-xxs);
 }
-._hemisphericSelect_1ueaq_1 {
+
+/* Solid: a filled badge. White, bold text on the status color (or `color`). */
+.ant-tag.j2-tag-solid {
+  color: white;
+  font-weight: 700;
+}
+._hemisphericSelect_1jnt4_1 {
   border-radius: 9999px !important;
 
   .ant-select-placeholder {
@@ -694,7 +800,7 @@
   }
 }
 
-._summarizedSelect_1ueaq_9 {
+._summarizedSelect_1jnt4_9 {
   .ant-select-suffix {
     color: var(--j2-color-primary);
   }
@@ -731,7 +837,7 @@
   }
 }
 
-._isActive_1ueaq_46 {
+._isActive_1jnt4_46 {
   background: var(--j2-color-primary) !important;
 
   .ant-select-selection-item-content {
@@ -743,21 +849,21 @@
   }
 }
 
-._menuContainer_1ueaq_58 .ant-select-item-option-selected {
+._menuContainer_1jnt4_58 .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1ueaq_58
+._menuContainer_1jnt4_58
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._menuContainerMultiple_1ueaq_68 .ant-select-item-option-selected {
+._menuContainerMultiple_1jnt4_68 .ant-select-item-option-selected {
   background: var(--j2-color-primary-bg-hover) !important;
 }
 
-._menuContainerMultiple_1ueaq_68
+._menuContainerMultiple_1jnt4_68
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: inherit;
@@ -768,14 +874,14 @@
  * The select root owns its border and background in Ant Design 6.
  */
 
-._headlinedSelect_1ueaq_83.ant-select.ant-select-single {
+._headlinedSelect_1jnt4_83.ant-select.ant-select-single {
   font-size: var(--j2-font-size-heading-2);
   height: 40px;
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
 
-._headlinedSelect_1ueaq_83.ant-select {
+._headlinedSelect_1jnt4_83.ant-select {
   background: transparent;
   padding-left: 0;
   padding-right: 4px;
@@ -784,13 +890,13 @@
   border-radius: 0;
 }
 
-._headlinedSelect_1ueaq_83.ant-select .ant-select-suffix {
+._headlinedSelect_1jnt4_83.ant-select .ant-select-suffix {
   height: 16px;
   width: 16px;
   right: 0;
 }
 
-._headlinedSelect_1ueaq_83.ant-select .ant-select-content {
+._headlinedSelect_1jnt4_83.ant-select .ant-select-content {
   font-weight: 600;
   line-height: 1.3;
 }
@@ -800,45 +906,130 @@
    too, so every click boxed the headline. The underline below already marks
    focus. `!important` because antd's status variants of that rule reach
    (0,5,1) specificity. */
-._headlinedSelect_1ueaq_83.ant-select {
+._headlinedSelect_1jnt4_83.ant-select {
   outline: none !important;
 }
 
 /* Hover state - show underline */
-._headlinedSelect_1ueaq_83.ant-select:hover {
+._headlinedSelect_1jnt4_83.ant-select:hover {
   border-bottom-color: var(--j2-color-primary);
 }
 
 /* Open/focused state - keep underline and text color */
-._headlinedSelect_1ueaq_83.ant-select-open,
-._headlinedSelect_1ueaq_83.ant-select-focused {
+._headlinedSelect_1jnt4_83.ant-select-open,
+._headlinedSelect_1jnt4_83.ant-select-focused {
   border-bottom-color: var(--j2-color-primary);
 }
 
-._headlinedSelect_1ueaq_83.ant-select-open .ant-select-content,
-._headlinedSelect_1ueaq_83.ant-select-focused .ant-select-content {
+._headlinedSelect_1jnt4_83.ant-select-open .ant-select-content,
+._headlinedSelect_1jnt4_83.ant-select-focused .ant-select-content {
   color: inherit;
 }
 
 /* Headline dropdown styles - needs !important to override .menuContainer */
-._menuContainer_1ueaq_58._headlinedMenuContainer_1ueaq_135
+._menuContainer_1jnt4_58._headlinedMenuContainer_1jnt4_135
   .ant-select-item-option-selected {
   background: var(--j2-color-primary) !important;
 }
 
-._menuContainer_1ueaq_58._headlinedMenuContainer_1ueaq_135
+._menuContainer_1jnt4_58._headlinedMenuContainer_1jnt4_135
   .ant-select-item-option-selected
   .ant-select-item-option-content {
   color: white;
 }
 
-._clearAllButton_1ueaq_146 {
+._clearAllButton_1jnt4_146 {
   color: var(--j2-color-primary);
 }
 
-._clearAllButton_1ueaq_146:hover {
+._clearAllButton_1jnt4_146:hover {
   background-color: var(--j2-color-primary-bg-hover);
 }
+
+/*
+ * Dropdown trigger (`trigger="dropdown"`)
+ * Reads as emphasized text with an affordance, not as a link: semibold
+ * primary text, no underline, and a fade on hover instead of a color shift.
+ * Weight sits in the `components` layer so a consumer utility such as
+ * `font-normal` on `rootClassName` still wins: Tailwind 4 emits utilities in
+ * a later native layer, and Tailwind 3's are unlayered, which beats any layer.
+ * Color stays unlayered, with `.ant-typography`, to beat antd's link color.
+ */
+@layer components {
+  ._dropdownTrigger_1jnt4_164 {
+    font-weight: 600;
+  }
+}
+
+._dropdownTrigger_1jnt4_164.ant-typography,
+._dropdownTrigger_1jnt4_164.ant-typography:hover,
+._dropdownTrigger_1jnt4_164.ant-typography:focus {
+  color: var(--j2-color-primary);
+  text-decoration: none;
+}
+
+._dropdownTrigger_1jnt4_164.ant-typography:hover {
+  opacity: 0.7;
+}
+
+._dropdownTrigger_1jnt4_164.ant-typography-disabled,
+._dropdownTrigger_1jnt4_164.ant-typography-disabled:hover {
+  color: var(--j2-color-text-disabled);
+  opacity: 1;
+}
+
+/*
+ * Field variant (`variant="field"`)
+ * A form field: full width, the field's own text color, a muted caret.
+ */
+._fieldSelect_1jnt4_190 .ant-select-suffix {
+  color: var(--j2-color-text-secondary);
+}
+._pill_16f8w_1 {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--j2-color-border);
+  border-radius: var(--j2-border-radius-sm);
+  background: var(--j2-color-bg-elevated, white);
+  color: var(--j2-color-text);
+  font-size: var(--j2-font-size);
+  white-space: nowrap;
+}
+
+._warning_16f8w_15 {
+  background: var(--j2-color-warning-bg);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+._disabled_16f8w_20 {
+  color: var(--j2-color-text-disabled);
+  background: var(--j2-color-bg-container-disabled);
+  pointer-events: none;
+}
+
+._label_16f8w_26,
+._static_16f8w_27 {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+._label_16f8w_26 {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+._label_16f8w_26:hover {
+  opacity: 0.8;
+}
 .j2Steps {
   .ant-steps-item-icon {
     display: flex;
@@ -932,6 +1123,28 @@
     flex-shrink: 0 !important;
   }
 }
+
+/*
+ * Labelled: text inside the track (`checkedChildren` / `unCheckedChildren`,
+ * e.g. "Off"). The track grows to fit the word instead of clipping it.
+ */
+.j2-switch.j2-switch-labelled {
+  &.ant-switch {
+    width: auto !important;
+    min-width: 52px !important;
+  }
+
+  &.ant-switch-small {
+    min-width: 42px !important;
+  }
+
+  &.ant-switch-small .ant-switch-inner-checked,
+  &.ant-switch-small .ant-switch-inner-unchecked {
+    font-size: var(--j2-font-size-xs) !important;
+    line-height: 16px !important;
+    font-weight: 500;
+  }
+}
 /* antd 6 renamed the pinned-cell classes: fix-left/-right became
    fix-start/-end, and the last start-pinned cell carries fix-start-shadow
    (formerly fix-left-last). */
@@ -1000,6 +1213,98 @@
 .ant-table-column-sorters {
   margin-right: 1rem !important;
 }
+/* Flush: content sits against the tab bar and fills the remaining height. */
+._flush_1bifh_2 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+
+  .ant-tabs-content-holder {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .ant-tabs-content,
+  .ant-tabs-tabpane {
+    height: 100%;
+  }
+
+  .ant-tabs-tabpane {
+    padding: 0;
+  }
+}
+
+/* Justified: the tabs share the bar's width equally. */
+._justified_1bifh_27 {
+  .ant-tabs-nav-list {
+    flex: 1;
+  }
+
+  .ant-tabs-tab {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .ant-tabs-tab + .ant-tabs-tab {
+    margin-inline-start: 0;
+  }
+}
+._move_14qe5_1 {
+  transition: all 0.5s ease-out;
+}
+
+/*
+ * The projected segment: diagonal stripes that drift and pulse, so it reads
+ * as "could be" next to the solid "is". No background-size: the gradient
+ * already repeats, and a tile size would show seams.
+ */
+._stripes_14qe5_10 {
+  background-color: var(--j2-stripes-fill);
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--j2-stripes-stripe) 0,
+    var(--j2-stripes-stripe) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+  animation:
+    _stripeShimmer_14qe5_1 3s linear infinite,
+    _stripePulse_14qe5_1 2.6s ease-in-out infinite;
+  will-change: background-position, opacity;
+}
+
+/* One stripe period along x (8px × √2), so the loop reset is invisible. */
+@keyframes _stripeShimmer_14qe5_1 {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: calc(8px * 1.41421356);
+  }
+}
+
+@keyframes _stripePulse_14qe5_1 {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.82;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._stripes_14qe5_10,
+  ._move_14qe5_1 {
+    animation: none;
+    transition: none;
+    will-change: auto;
+  }
+}
 /* User section */
 ._userSection_r06sp_2 {
   padding: 12px 0;

package/dist/tailwind.cjs

@@ -70,6 +70,62 @@ var tailwindPreset = { theme: {
 			"red-10": "var(--j2-red-10)",
 			"red-11": "var(--j2-red-11)",
 			"red-12": "var(--j2-red-12)",
+			"interval-1-1": "var(--j2-color-interval-1-1)",
+			"interval-2-1": "var(--j2-color-interval-2-1)",
+			"interval-2-2": "var(--j2-color-interval-2-2)",
+			"interval-3-1": "var(--j2-color-interval-3-1)",
+			"interval-3-2": "var(--j2-color-interval-3-2)",
+			"interval-3-3": "var(--j2-color-interval-3-3)",
+			"interval-4-1": "var(--j2-color-interval-4-1)",
+			"interval-4-2": "var(--j2-color-interval-4-2)",
+			"interval-4-3": "var(--j2-color-interval-4-3)",
+			"interval-4-4": "var(--j2-color-interval-4-4)",
+			"interval-5-1": "var(--j2-color-interval-5-1)",
+			"interval-5-2": "var(--j2-color-interval-5-2)",
+			"interval-5-3": "var(--j2-color-interval-5-3)",
+			"interval-5-4": "var(--j2-color-interval-5-4)",
+			"interval-5-5": "var(--j2-color-interval-5-5)",
+			"interval-6-1": "var(--j2-color-interval-6-1)",
+			"interval-6-2": "var(--j2-color-interval-6-2)",
+			"interval-6-3": "var(--j2-color-interval-6-3)",
+			"interval-6-4": "var(--j2-color-interval-6-4)",
+			"interval-6-5": "var(--j2-color-interval-6-5)",
+			"interval-6-6": "var(--j2-color-interval-6-6)",
+			"interval-7-1": "var(--j2-color-interval-7-1)",
+			"interval-7-2": "var(--j2-color-interval-7-2)",
+			"interval-7-3": "var(--j2-color-interval-7-3)",
+			"interval-7-4": "var(--j2-color-interval-7-4)",
+			"interval-7-5": "var(--j2-color-interval-7-5)",
+			"interval-7-6": "var(--j2-color-interval-7-6)",
+			"interval-7-7": "var(--j2-color-interval-7-7)",
+			"ramp-orange-1": "var(--j2-color-ramp-orange-1)",
+			"ramp-orange-2": "var(--j2-color-ramp-orange-2)",
+			"ramp-orange-3": "var(--j2-color-ramp-orange-3)",
+			"ramp-orange-4": "var(--j2-color-ramp-orange-4)",
+			"ramp-orange-5": "var(--j2-color-ramp-orange-5)",
+			"ramp-blue-1": "var(--j2-color-ramp-blue-1)",
+			"ramp-blue-2": "var(--j2-color-ramp-blue-2)",
+			"ramp-blue-3": "var(--j2-color-ramp-blue-3)",
+			"ramp-blue-4": "var(--j2-color-ramp-blue-4)",
+			"ramp-blue-5": "var(--j2-color-ramp-blue-5)",
+			"ramp-green-1": "var(--j2-color-ramp-green-1)",
+			"ramp-green-2": "var(--j2-color-ramp-green-2)",
+			"ramp-green-3": "var(--j2-color-ramp-green-3)",
+			"ramp-green-4": "var(--j2-color-ramp-green-4)",
+			"ramp-green-5": "var(--j2-color-ramp-green-5)",
+			"binary-positive": "var(--j2-color-binary-positive)",
+			"binary-negative": "var(--j2-color-binary-negative)",
+			"binary-alt-positive": "var(--j2-color-binary-alt-positive)",
+			"binary-alt-negative": "var(--j2-color-binary-alt-negative)",
+			"categorical-1": "var(--j2-color-categorical-1)",
+			"categorical-2": "var(--j2-color-categorical-2)",
+			"categorical-3": "var(--j2-color-categorical-3)",
+			"categorical-4": "var(--j2-color-categorical-4)",
+			"categorical-5": "var(--j2-color-categorical-5)",
+			"categorical-6": "var(--j2-color-categorical-6)",
+			"categorical-7": "var(--j2-color-categorical-7)",
+			"categorical-8": "var(--j2-color-categorical-8)",
+			"categorical-other": "var(--j2-color-categorical-other)",
 			primary: "var(--j2-color-primary)",
 			"primary-hover": "var(--j2-color-primary-hover)",
 			"primary-active": "var(--j2-color-primary-active)",