@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/styles/components/radio-group.css

@@ -0,0 +1,240 @@
+/* BaseRadioGroup Component Styles */
+
+.mld-radio-group {
+  display: flex;
+  gap: 1rem;
+}
+
+.mld-radio-group--vertical {
+  flex-direction: column;
+}
+
+.mld-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.mld-radio-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mld-radio-option--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.mld-radio-option__input-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -0.25rem;
+}
+
+.mld-radio-option__input-wrapper--sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+.mld-radio-option__input-wrapper--md {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.mld-radio-option__input-wrapper--lg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.mld-radio-option__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.mld-radio-option__circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1.5px solid var(--border-color);
+  background-color: var(--bg-card);
+  flex-shrink: 0;
+  position: relative;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.mld-radio-option__circle--sm {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mld-radio-option__circle--md {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mld-radio-option__circle--lg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mld-radio-option__circle--checked {
+  border-color: var(--color-primary);
+}
+
+.mld-radio-option__native:focus-visible + .mld-radio-option__circle {
+  box-shadow: var(--focus-ring-soft);
+}
+
+.mld-radio-option__native:disabled + .mld-radio-option__circle {
+  background-color: var(--bg-secondary);
+  border-color: var(--border-color);
+  cursor: not-allowed;
+}
+
+.mld-radio-option__native:disabled + .mld-radio-option__circle.mld-radio-option__circle--checked {
+  border-color: var(--text-muted);
+}
+
+.mld-radio-option__native:disabled + .mld-radio-option__circle.mld-radio-option__circle--checked .mld-radio-option__dot {
+  background-color: var(--text-muted);
+}
+
+.mld-radio-option__dot {
+  border-radius: 9999px;
+  background-color: var(--color-primary);
+}
+
+.mld-radio-option__dot--sm {
+  width: 0.4375rem;
+  height: 0.4375rem;
+}
+
+.mld-radio-option__dot--md {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.mld-radio-option__dot--lg {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.mld-radio-option__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.mld-radio-option__label {
+  color: var(--text-primary);
+}
+
+.mld-radio-option__label--sm {
+  font-size: 0.875rem;
+}
+
+.mld-radio-option__label--md {
+  font-size: 0.875rem;
+}
+
+.mld-radio-option__label--lg {
+  font-size: 1rem;
+}
+
+.mld-radio-option__description {
+  color: var(--text-muted);
+}
+
+.mld-radio-option__description--sm {
+  font-size: 0.75rem;
+}
+
+.mld-radio-option__description--md {
+  font-size: 0.75rem;
+}
+
+.mld-radio-option__description--lg {
+  font-size: 0.875rem;
+}
+
+/* ========================================================================
+   Variant: Card Tile
+   ========================================================================
+   Each option is a full card with title + description; rad + title share
+   one flex row with align-items: center (circles locked to title's vertical
+   center, not at the top). Description sits below, indented to match the
+   title's left edge (rad width + gap).
+   ======================================================================== */
+
+.mld-radio-group--tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.mld-radio-group--tile .mld-radio-option {
+  display: block;
+  padding: 0.875rem 1rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.mld-radio-group--tile .mld-radio-option:hover:not(.mld-radio-option--disabled) {
+  border-color: var(--text-muted);
+}
+
+.mld-radio-group--tile .mld-radio-option--selected {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary-soft);
+}
+
+.mld-radio-group--tile .mld-radio-option__head {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.mld-radio-group--tile .mld-radio-option__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+
+.mld-radio-group--tile .mld-radio-option__description {
+  display: block;
+  /* md circle (1rem) + flex gap (0.75rem) = 28px — aligns with title's left edge. */
+  padding-left: calc(1rem + 0.75rem);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  line-height: 1.45;
+  margin-top: 0.25rem;
+}
+
+.mld-radio-group--tile .mld-radio-option--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.mld-radio-group--tile .mld-radio-option__native {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}