opus-react 0.2.32 → 0.2.33

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;