opus-react 0.2.32 → 0.2.34

package/dist/index.css

@@ -1387,6 +1387,112 @@
   }
 }
 
+/* components/fields/ChoiceChipsField/ChoiceChipsField.module.css */
+.opus_X6xFEA_shell {
+  width: 100%;
+}
+
+.opus_X6xFEA_root {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  display: flex;
+}
+
+.opus_X6xFEA_chip {
+  --choice-chip-bg: var(--opus-input-bg);
+  --choice-chip-border: var(--opus-border-strong);
+  --choice-chip-color: var(--opus-text);
+  min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 14px);
+  border: 1px solid var(--choice-chip-border);
+  background: var(--choice-chip-bg);
+  color: var(--choice-chip-color);
+  font-family: inherit;
+  font-size: var(--opus-control-font-size);
+  cursor: pointer;
+  border-radius: 999px;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  font-weight: 700;
+  line-height: 1;
+  transition: background .16s, border-color .16s, box-shadow .16s, color .16s, transform .16s;
+  display: inline-flex;
+  box-shadow: 0 12px 26px #00000012;
+}
+
+.opus_X6xFEA_chip:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border-strong));
+  transform: translateY(-1px);
+}
+
+.opus_X6xFEA_chip:focus-visible {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--opus-accent) 22%, transparent),
+    0 12px 26px #00000012;
+  outline: 0;
+}
+
+.opus_X6xFEA_indicator {
+  background: color-mix(in srgb, var(--opus-muted) 52%, transparent);
+  width: .56rem;
+  height: .56rem;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opus-border-strong) 82%, transparent);
+  border-radius: 999px;
+  transition: background .16s, box-shadow .16s, transform .16s;
+}
+
+.opus_X6xFEA_selected .opus_X6xFEA_indicator {
+  background: var(--opus-accent-contrast);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent-contrast) 20%, transparent);
+  transform: scale(1.08);
+}
+
+.opus_X6xFEA_selected {
+  --choice-chip-bg: var(--opus-accent);
+  --choice-chip-border: color-mix(in srgb, var(--opus-accent) 82%, white);
+  --choice-chip-color: var(--opus-accent-contrast);
+  box-shadow: 0 14px 30px color-mix(in srgb, var(--opus-accent) 28%, transparent);
+}
+
+.opus_X6xFEA_disabled {
+  opacity: .62;
+}
+
+.opus_X6xFEA_optionDisabled {
+  cursor: not-allowed;
+}
+
+.opus_X6xFEA_root[data-choice-chip-variant="filled"] .opus_X6xFEA_chip:not(.opus_X6xFEA_selected) {
+  --choice-chip-bg: color-mix(in srgb, var(--opus-text) 8%, var(--opus-input-bg));
+}
+
+.opus_X6xFEA_root[data-choice-chip-variant="outlined"] .opus_X6xFEA_chip:not(.opus_X6xFEA_selected) {
+  --choice-chip-bg: transparent;
+}
+
+.opus_X6xFEA_root[data-choice-chip-variant="soft"] .opus_X6xFEA_chip:not(.opus_X6xFEA_selected) {
+  --choice-chip-bg: var(--opus-accent-soft);
+  --choice-chip-border: color-mix(in srgb, var(--opus-accent) 34%, var(--opus-border-strong));
+  --choice-chip-color: color-mix(in srgb, var(--opus-accent) 82%, var(--opus-text));
+}
+
+.opus_X6xFEA_root[data-choice-chip-variant="glass"] .opus_X6xFEA_chip:not(.opus_X6xFEA_selected) {
+  --choice-chip-bg: color-mix(in srgb, var(--opus-input-bg) 58%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_X6xFEA_chip, .opus_X6xFEA_indicator {
+    transition: none;
+  }
+
+  .opus_X6xFEA_chip:hover:not(:disabled) {
+    transform: none;
+  }
+}
+
 /* components/fields/RangeField/RangeField.module.css */
 .opus_iRHQuG_wrap {
   gap: 10px;
@@ -14023,9 +14129,7 @@
 
 /* components/Sidebar/Sidebar.module.css */
 .opus_4Pogux_layout {
-  border: 1px solid var(--opus-border);
-  border-radius: var(--opus-input-radius-large);
-  background: color-mix(in srgb, var(--opus-panel) 88%, transparent);
+  background: none;
   width: 100%;
   min-height: 280px;
   display: grid;
@@ -14033,11 +14137,11 @@
 }
 
 .opus_4Pogux_layout[data-side="left"] {
-  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
 }
 
 .opus_4Pogux_layout[data-side="right"] {
-  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
 }
 
 .opus_4Pogux_layout[data-collapsed="true"][data-side="left"] {
@@ -14049,16 +14153,18 @@
 }
 
 .opus_4Pogux_sidebar {
-  border-inline-end: 1px solid var(--opus-border);
-  background: color-mix(in srgb, var(--opus-panel) 94%, transparent);
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  --sidebar-pad: 14px;
+  --sidebar-gap: 4px;
+  --sidebar-row-pad-block: 8px;
+  --sidebar-row-pad-inline: 10px;
+  background: color-mix(in srgb, var(--opus-panel) 90%, transparent);
+  min-width: 0;
   min-height: 0;
-  display: grid;
-}
-
-.opus_4Pogux_layout[data-side="right"] .opus_4Pogux_sidebar {
-  border-inline-end: 0;
-  border-inline-start: 1px solid var(--opus-border);
+  color: var(--opus-text);
+  flex-direction: column;
+  transition: background .22s, color .22s;
+  display: flex;
+  overflow: hidden;
 }
 
 .opus_4Pogux_sidebar[data-collapsed="true"] {
@@ -14072,32 +14178,20 @@
   --sidebar-row-pad-inline: 8px;
 }
 
-.opus_4Pogux_sidebar[data-density="comfortable"] {
-  --sidebar-pad: 14px;
-  --sidebar-gap: 4px;
-  --sidebar-row-pad-block: 8px;
-  --sidebar-row-pad-inline: 10px;
-}
-
 .opus_4Pogux_header, .opus_4Pogux_footer, .opus_4Pogux_body {
   min-width: 0;
 }
 
-.opus_4Pogux_header, .opus_4Pogux_footer {
-  padding: var(--sidebar-pad);
-}
-
 .opus_4Pogux_header {
-  border-bottom: 1px solid var(--opus-border);
+  padding: 18px var(--sidebar-pad) 12px;
+  background: color-mix(in srgb, var(--opus-panel) 90%, transparent);
+  flex-shrink: 0;
 }
 
 .opus_4Pogux_footer {
-  border-top: 1px solid var(--opus-border);
-  padding: var(--sidebar-pad)
-    var(--sidebar-pad)
-    var(--sidebar-pad)
-    calc(var(--sidebar-pad) + var(--sidebar-row-pad-inline));
+  padding: 12px var(--sidebar-pad) 18px;
   color: var(--opus-muted);
+  flex-shrink: 0;
   font-size: .78rem;
   line-height: 1.4;
 }
@@ -14110,25 +14204,26 @@
 }
 
 .opus_4Pogux_headerTitle {
-  padding-inline: var(--sidebar-row-pad-inline);
-  color: var(--opus-text);
-  letter-spacing: .04em;
+  color: var(--opus-accent);
+  letter-spacing: .12em;
   text-transform: uppercase;
   margin: 0;
-  font-size: .82rem;
-  font-weight: 800;
+  font-size: .78rem;
+  font-weight: 700;
+  line-height: 1;
 }
 
 .opus_4Pogux_body {
-  padding: var(--sidebar-pad);
-  overflow: auto;
+  min-height: 0;
+  padding: 12px var(--sidebar-pad) 18px;
+  flex: 1;
+  overflow: hidden auto;
 }
 
 .opus_4Pogux_main {
   min-width: 0;
   color: var(--opus-muted);
-  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--opus-accent) 10%, transparent), transparent 40%),
-    color-mix(in srgb, var(--opus-panel) 82%, transparent);
+  background: none;
   place-items: center;
   padding: 24px;
   font-size: .88rem;
@@ -14136,7 +14231,9 @@
 }
 
 .opus_4Pogux_nav {
+  align-content: start;
   gap: var(--sidebar-gap);
+  min-height: 0;
   display: grid;
 }
 
@@ -14145,31 +14242,52 @@
   padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
   border-radius: var(--opus-input-radius);
   color: var(--opus-muted);
+  font: inherit;
   text-align: left;
   cursor: pointer;
   background: none;
-  border: 0;
-  font-size: .86rem;
+  border: 1px solid #0000;
+  align-items: center;
+  gap: 8px;
+  font-size: .84rem;
   font-weight: 600;
   line-height: 1.3;
   text-decoration: none;
-  transition: background .16s, color .16s;
-  display: block;
+  transition: background .16s, border-color .16s, color .16s;
+  display: inline-flex;
 }
 
 .opus_4Pogux_sidebar[data-collapsed="true"] .opus_4Pogux_link {
-  text-align: center;
+  justify-content: center;
   padding-inline: 8px;
 }
 
 .opus_4Pogux_link:hover {
-  background: color-mix(in srgb, var(--opus-accent) 10%, transparent);
+  border-color: var(--opus-border);
+  background: color-mix(in srgb, var(--opus-accent-soft) 70%, transparent);
   color: var(--opus-text);
 }
 
 .opus_4Pogux_linkActive {
-  background: color-mix(in srgb, var(--opus-accent) 16%, transparent);
-  color: var(--opus-text);
+  border-color: color-mix(in srgb, var(--opus-accent) 45%, transparent);
+  background: var(--opus-accent-soft);
+  color: var(--opus-accent);
+}
+
+.opus_4Pogux_icon {
+  width: 14px;
+  color: inherit;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.opus_4Pogux_icon svg {
+  width: 1em;
+  height: 1em;
+  display: block;
 }
 
 .opus_4Pogux_group {
@@ -14178,36 +14296,55 @@
 }
 
 .opus_4Pogux_groupHeader {
-  padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
-  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   display: flex;
 }
 
 .opus_4Pogux_groupLabel {
-  color: var(--opus-text);
-  font-size: .82rem;
-  font-weight: 750;
+  min-width: 0;
+  padding: var(--sidebar-row-pad-block) var(--sidebar-row-pad-inline);
+  border-radius: var(--opus-input-radius);
+  color: var(--opus-accent);
+  letter-spacing: .04em;
+  border: 1px solid #0000;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  font-size: .84rem;
+  font-weight: 700;
+  line-height: 1.3;
+  display: inline-flex;
 }
 
 .opus_4Pogux_groupToggle {
-  border-radius: var(--opus-input-radius-small);
+  border-radius: var(--opus-input-radius);
+  width: 32px;
+  height: 32px;
+  color: var(--opus-muted);
   cursor: pointer;
   background: none;
-  border: 0;
-  place-items: center;
-  width: 24px;
-  height: 24px;
+  border: 1px solid #0000;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
   padding: 0;
-  display: grid;
+  transition: background .16s, border-color .16s;
+  display: inline-flex;
+}
+
+.opus_4Pogux_groupToggle:hover {
+  border-color: var(--opus-border);
+  background: color-mix(in srgb, var(--opus-accent-soft) 50%, transparent);
 }
 
 .opus_4Pogux_groupChevron, .opus_4Pogux_groupChevronOpen {
-  border-right: 1.5px solid var(--opus-muted);
-  border-bottom: 1.5px solid var(--opus-muted);
+  border-bottom: 1.5px solid;
+  border-right: 1.5px solid;
+  flex-shrink: 0;
   width: 7px;
   height: 7px;
+  margin-top: 1px;
   transition: transform .16s;
   transform: rotate(-45deg);
 }
@@ -14218,7 +14355,7 @@
 
 .opus_4Pogux_groupItemsWrap {
   grid-template-rows: 0fr;
-  transition: grid-template-rows .2s;
+  transition: grid-template-rows .24s;
   display: grid;
 }
 
@@ -14227,13 +14364,13 @@
 }
 
 .opus_4Pogux_groupItems {
-  gap: var(--sidebar-gap);
-  min-height: 0;
-  margin-left: var(--sidebar-row-pad-inline);
-  padding-left: calc(var(--sidebar-row-pad-inline) + 6px);
   opacity: 0;
   border-left: 1px solid #0000;
-  transition: opacity .18s, border-color .2s;
+  gap: 2px;
+  min-height: 0;
+  margin-left: 10px;
+  padding-left: 10px;
+  transition: opacity .2s, border-color .24s;
   display: grid;
   overflow: hidden;
 }
@@ -14260,13 +14397,16 @@
 }
 
 @media (width <= 640px) {
-  .opus_4Pogux_layout {
+  .opus_4Pogux_layout, .opus_4Pogux_layout[data-side="left"], .opus_4Pogux_layout[data-side="right"] {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .opus_4Pogux_layout[data-side="right"] .opus_4Pogux_sidebar {
+    grid-row: 1;
+  }
+
   .opus_4Pogux_sidebar {
-    border-inline: 0;
-    border-bottom: 1px solid var(--opus-border);
+    max-height: 42vh;
   }
 }