@morscherlab/mint-sdk 1.0.0-rc.5 → 1.0.0-rc.7

package/src/styles/components/app-sidebar.css

@@ -6,7 +6,7 @@
   height: 100%;
   overflow: hidden;
   background-color: var(--bg-secondary);
-  transition: width 180ms ease;
+  transition: width 180ms ease, background-color 150ms ease;
 }
 
 .mint-sidebar--hidden {
@@ -54,6 +54,11 @@
   gap: 0.75rem;
 }
 
+.mint-sidebar--analysis.mint-sidebar--dense .mint-sidebar__sections {
+  padding: 0.75rem;
+  gap: 0.75rem;
+}
+
 /* Header / Footer slots */
 .mint-sidebar__header {
   padding: 0.75rem;
@@ -182,6 +187,107 @@
   gap: 0.5rem;
 }
 
+.mint-sidebar__collapsed--default {
+  padding-top: 0.75rem;
+}
+
+.mint-sidebar__rail-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    transform 150ms ease;
+}
+
+.mint-sidebar__rail-item:hover {
+  background: var(--bg-tertiary);
+  transform: translateY(-1px);
+}
+
+.mint-sidebar__rail-item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mint-sidebar__rail-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-md);
+  transition: transform 150ms ease;
+}
+
+.mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
+  transform: scale(1.04);
+}
+
+.mint-sidebar__rail-svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+.mint-sidebar__rail-text-icon {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mint-sidebar__rail-badge {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: var(--mint-sidebar-rail-badge-color);
+  color: white;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.mint-sidebar__rail-badge--primary {
+  --mint-sidebar-rail-badge-color: var(--color-primary);
+}
+
+.mint-sidebar__rail-badge--cta {
+  --mint-sidebar-rail-badge-color: var(--color-cta);
+}
+
+.mint-sidebar__rail-badge--success {
+  --mint-sidebar-rail-badge-color: var(--mint-success);
+}
+
+.mint-sidebar__rail-badge--warning {
+  --mint-sidebar-rail-badge-color: var(--mint-warning);
+}
+
+.mint-sidebar__rail-badge--error {
+  --mint-sidebar-rail-badge-color: var(--mint-error);
+}
+
+.mint-sidebar__rail-badge--info {
+  --mint-sidebar-rail-badge-color: var(--mint-info);
+}
+
+.mint-sidebar__rail-badge--neutral {
+  --mint-sidebar-rail-badge-color: var(--text-secondary);
+}
+
 /* Dense sidebar variant — compact sections */
 .mint-sidebar--dense .mint-sidebar__sections {
   padding: 0.5rem;
@@ -202,24 +308,29 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
+.mint-sidebar--analysis .mint-sidebar__sections > .mint-collapsible-card {
+  border-color: var(--border-color);
+  border-radius: var(--radius-lg);
+}
+
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__header {
   padding: 0.625rem 0.75rem;
   min-height: auto;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon-badge {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-radius: var(--radius-md);
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon {
-  width: 1.125rem;
-  height: 1.125rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon-text {
-  font-size: 1.125rem;
+  font-size: 0.9375rem;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__title {
@@ -262,3 +373,20 @@
   flex-direction: column;
   gap: 0.75rem;
 }
+
+.mint-sidebar__footer--collapsed {
+  padding: 0.5rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-sidebar,
+  .mint-sidebar__rail-item,
+  .mint-sidebar__rail-icon {
+    transition: none;
+  }
+
+  .mint-sidebar__rail-item:hover,
+  .mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
+    transform: none;
+  }
+}

package/src/styles/components/checkbox.css

@@ -8,16 +8,90 @@
   user-select: none;
 }
 
+.mint-checkbox--default {
+  width: fit-content;
+}
+
+.mint-checkbox--row {
+  width: 100%;
+  min-height: 2rem;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  background: transparent;
+  box-sizing: border-box;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.mint-checkbox--row:hover {
+  background: var(--bg-hover);
+}
+
 .mint-checkbox--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
+.mint-checkbox--disabled.mint-checkbox--row:hover {
+  background: transparent;
+}
+
+.mint-checkbox__row-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  transition:
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.mint-checkbox--row:hover .mint-checkbox__row-icon {
+  transform: scale(1.04);
+}
+
+.mint-checkbox__row-svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mint-checkbox__row-text-icon {
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mint-checkbox__copy {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mint-checkbox__copy .mint-tooltip {
+  max-width: 100%;
+}
+
+.mint-checkbox--row .mint-checkbox__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-checkbox__label--tooltip {
+  cursor: help;
+}
+
 .mint-checkbox__input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .mint-checkbox__native {
@@ -108,6 +182,7 @@
 
 .mint-checkbox__label {
   color: var(--text-primary);
+  line-height: 1.25;
 }
 
 .mint-checkbox__label--sm {
@@ -121,3 +196,15 @@
 .mint-checkbox__label--lg {
   font-size: 1rem;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-checkbox--row,
+  .mint-checkbox__row-icon,
+  .mint-checkbox__box {
+    transition: none;
+  }
+
+  .mint-checkbox--row:hover .mint-checkbox__row-icon {
+    transform: none;
+  }
+}

package/src/styles/components/collapsible-card.css

@@ -5,27 +5,48 @@
   border-radius: var(--radius-lg);
   overflow: hidden;
   background-color: var(--bg-card);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
 }
 
+.mint-collapsible-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--border-color));
+  box-shadow: var(--shadow-sm);
+}
 
-.mint-collapsible-card__header {
+.mint-collapsible-card__header-shell {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
+  background-color: var(--bg-card);
+  transition: background-color 0.15s ease;
+}
+
+.mint-collapsible-card__header-shell:hover {
+  background-color: var(--bg-hover);
+}
+
+.mint-collapsible-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+  min-width: 0;
   padding: 0.75rem;
   text-align: left;
-  background-color: var(--bg-card);
+  background-color: transparent;
   border: none;
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: color 0.15s ease;
   gap: 0.75rem;
   font-family: inherit;
   min-height: 3rem;
 }
 
 .mint-collapsible-card__header:hover {
-  background-color: var(--bg-hover);
+  background-color: transparent;
 }
 
 .mint-collapsible-card__header:focus-visible {
@@ -54,6 +75,11 @@
   height: 2rem;
   border-radius: var(--radius-md);
   flex-shrink: 0;
+  transition: transform 180ms ease, background-color 150ms ease;
+}
+
+.mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge {
+  transform: scale(1.04);
 }
 
 .mint-collapsible-card__icon {
@@ -101,8 +127,109 @@
 .mint-collapsible-card__actions {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.375rem;
   flex-shrink: 0;
+  padding-right: 0.625rem;
+}
+
+.mint-collapsible-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--mint-sidebar-badge-color) 14%, transparent);
+  color: var(--mint-sidebar-badge-color);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.mint-collapsible-card__badge--primary,
+.mint-collapsible-card__action--primary {
+  --mint-sidebar-badge-color: var(--color-primary);
+}
+
+.mint-collapsible-card__badge--cta,
+.mint-collapsible-card__action--cta {
+  --mint-sidebar-badge-color: var(--color-cta);
+}
+
+.mint-collapsible-card__badge--success,
+.mint-collapsible-card__action--success {
+  --mint-sidebar-badge-color: var(--mint-success);
+}
+
+.mint-collapsible-card__badge--warning,
+.mint-collapsible-card__action--warning {
+  --mint-sidebar-badge-color: var(--mint-warning);
+}
+
+.mint-collapsible-card__badge--error,
+.mint-collapsible-card__action--error {
+  --mint-sidebar-badge-color: var(--mint-error);
+}
+
+.mint-collapsible-card__badge--info,
+.mint-collapsible-card__action--info {
+  --mint-sidebar-badge-color: var(--mint-info);
+}
+
+.mint-collapsible-card__badge--neutral,
+.mint-collapsible-card__action--neutral {
+  --mint-sidebar-badge-color: var(--text-secondary);
+}
+
+.mint-collapsible-card__action,
+.mint-collapsible-card__chevron-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--mint-sidebar-badge-color, var(--text-muted));
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease,
+    transform 150ms ease;
+}
+
+.mint-collapsible-card__action:hover,
+.mint-collapsible-card__chevron-button:hover {
+  color: var(--mint-sidebar-badge-color, var(--text-secondary));
+  background: color-mix(in srgb, var(--mint-sidebar-badge-color, var(--text-secondary)) 10%, transparent);
+  transform: translateY(-1px);
+}
+
+.mint-collapsible-card__action:focus-visible,
+.mint-collapsible-card__chevron-button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mint-collapsible-card__action:disabled,
+.mint-collapsible-card__action--disabled,
+.mint-collapsible-card__chevron-button:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+  transform: none;
+}
+
+.mint-collapsible-card__action-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mint-collapsible-card__action-text-icon {
+  font-size: 0.8125rem;
+  line-height: 1;
 }
 
 .mint-collapsible-card__toggle {
@@ -147,8 +274,8 @@
 }
 
 .mint-collapsible-card__chevron {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   color: var(--text-muted);
   transition: transform 0.2s ease;
   flex-shrink: 0;
@@ -158,7 +285,7 @@
   transform: rotate(180deg);
 }
 
-.mint-collapsible-card__header:hover .mint-collapsible-card__chevron {
+.mint-collapsible-card__header-shell:hover .mint-collapsible-card__chevron {
   color: var(--text-secondary);
 }
 
@@ -184,16 +311,14 @@
 }
 
 .mint-collapsible-card--dense .mint-collapsible-card__icon-badge {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-radius: var(--radius);
-  background: transparent !important;
 }
 
 .mint-collapsible-card--dense .mint-collapsible-card__icon {
   width: 0.875rem;
   height: 0.875rem;
-  opacity: 0.5;
 }
 
 .mint-collapsible-card--dense .mint-collapsible-card__title {
@@ -205,7 +330,8 @@
 }
 
 .mint-collapsible-card--dense .mint-collapsible-card__actions {
-  gap: 0.5rem;
+  gap: 0.25rem;
+  padding-right: 0.5rem;
 }
 
 .mint-collapsible-card--dense .mint-collapsible-card__chevron {
@@ -242,6 +368,20 @@
     transition: none;
   }
 
+  .mint-collapsible-card,
+  .mint-collapsible-card__icon-badge,
+  .mint-collapsible-card__action,
+  .mint-collapsible-card__chevron-button {
+    transition: none;
+  }
+
+  .mint-collapsible-card:hover,
+  .mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge,
+  .mint-collapsible-card__action:hover,
+  .mint-collapsible-card__chevron-button:hover {
+    transform: none;
+  }
+
   .mint-collapsible-card__toggle-knob {
     transition: none;
   }

package/src/styles/components/toggle.css

@@ -8,6 +8,27 @@
   user-select: none;
 }
 
+.mint-toggle--default {
+  width: fit-content;
+}
+
+.mint-toggle--row {
+  width: 100%;
+  min-height: 2rem;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  background: transparent;
+  box-sizing: border-box;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.mint-toggle--row:hover {
+  background: var(--bg-hover);
+}
+
 .mint-toggle--reverse {
   flex-direction: row-reverse;
   justify-content: space-between;
@@ -29,6 +50,58 @@
   cursor: not-allowed;
 }
 
+.mint-toggle--disabled.mint-toggle--row:hover {
+  background: transparent;
+}
+
+.mint-toggle__row-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  transition:
+    color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.mint-toggle--row:hover .mint-toggle__row-icon {
+  transform: scale(1.04);
+}
+
+.mint-toggle__row-svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mint-toggle__row-text-icon {
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mint-toggle__copy {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mint-toggle__copy .mint-tooltip {
+  max-width: 100%;
+}
+
+.mint-toggle--row .mint-toggle__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-toggle__label--tooltip {
+  cursor: help;
+}
+
 .mint-toggle__track {
   position: relative;
   display: inline-block;
@@ -125,6 +198,7 @@
 
 .mint-toggle__label {
   color: var(--text-primary);
+  line-height: 1.25;
 }
 
 .mint-toggle__label--sm {
@@ -140,7 +214,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .mint-toggle--row,
+  .mint-toggle__row-icon,
   .mint-toggle__knob {
     transition: none;
   }
+
+  .mint-toggle--row:hover .mint-toggle__row-icon {
+    transform: none;
+  }
 }

package/src/types/components.ts

@@ -67,6 +67,24 @@ export interface FormFieldProps {
 }
 
 // Sidebar types
+export type SidebarBadgeTone =
+  | 'primary'
+  | 'cta'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'neutral'
+
+export interface SidebarToolSectionAction {
+  id: string
+  label: string
+  icon?: string | string[]
+  iconColor?: string
+  tone?: SidebarBadgeTone
+  disabled?: boolean
+}
+
 export interface SidebarToolSection {
   id: string
   label: string
@@ -74,6 +92,9 @@ export interface SidebarToolSection {
   icon?: string | string[]
   iconColor?: string
   iconBg?: string
+  badge?: string | number
+  badgeTone?: SidebarBadgeTone
+  actions?: SidebarToolSectionAction[]
   defaultOpen?: boolean
   showToggle?: boolean
 }

package/src/types/form-builder.ts

@@ -79,6 +79,9 @@ export interface FormFieldSchema extends AccessControlled {
   defaultValue?: unknown
   placeholder?: string
   hint?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
   readonly?: boolean

package/src/types/index.ts

@@ -16,7 +16,9 @@ export type {
   RadioOption,
   RadioOptionInput,
   FormFieldProps,
+  SidebarBadgeTone,
   SidebarToolSection,
+  SidebarToolSectionAction,
   CollapsibleState,
   TopBarVariant,
   TopBarSettingsConfig,