@marwes-ui/presets 0.0.4 → 1.0.1

package/src/firstEdition/slider.css

@@ -0,0 +1,228 @@
+/*
+ * Slider Component Styles
+ *
+ * Figma references:
+ * - .figma/marwes/components/slider.json
+ * - .figma/marwes/components/slider-field.json
+ * - .figma/marwes/pages/-v2-slider/component-container_1574-26984.json
+ */
+
+.mw-slider {
+  --mw-slider-fill-percentage: 50%;
+  --mw-slider-track-height: 5px;
+  --mw-slider-thumb-size: 16px;
+  --mw-slider-touch-area-size: 32px;
+  --mw-slider-tooltip-gap: 2px;
+  --mw-slider-track-background: var(--mw-color-border-subtle, #c2c2c2);
+  --mw-slider-track-fill: var(--mw-color-primary-base, #2f31fc);
+  --mw-slider-thumb-background: var(--mw-color-surface, #ffffff);
+  --mw-slider-thumb-border: var(--mw-color-primary-base, #2f31fc);
+  --mw-slider-touch-area-background: var(--mw-color-primary-base, #2f31fc);
+  --mw-slider-tooltip-background: var(--mw-color-text, #141414);
+  --mw-slider-tooltip-color: var(--mw-color-text-inverted, #ffffff);
+  --mw-slider-focus-ring-inner: var(--mw-color-surface, #ffffff);
+  --mw-slider-focus-ring-outer: var(--mw-color-primary-base, #2f31fc);
+
+  position: relative;
+  display: inline-grid;
+  width: 232px;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: var(--mw-font-primary, inherit);
+  overflow: visible;
+}
+
+.mw-slider__control {
+  position: relative;
+  width: 100%;
+  height: var(--mw-slider-touch-area-size);
+}
+
+.mw-slider__native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.mw-slider__visual {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mw-slider__track,
+.mw-slider__fill {
+  position: absolute;
+  top: 50%;
+  height: var(--mw-slider-track-height);
+  transform: translateY(-50%);
+}
+
+.mw-slider__track {
+  left: 0;
+  right: 0;
+  border-radius: 4px;
+  background: var(--mw-slider-track-background);
+}
+
+.mw-slider__fill {
+  left: 0;
+  width: var(--mw-slider-fill-percentage);
+  border-radius: 3px;
+  background: var(--mw-slider-track-fill);
+}
+
+.mw-slider__touch-area,
+.mw-slider__thumb,
+.mw-slider__tooltip {
+  position: absolute;
+  left: var(--mw-slider-fill-percentage);
+}
+
+.mw-slider__touch-area,
+.mw-slider__thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 999px;
+}
+
+.mw-slider__touch-area {
+  width: var(--mw-slider-touch-area-size);
+  height: var(--mw-slider-touch-area-size);
+  background: var(--mw-slider-touch-area-background);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.mw-slider__thumb {
+  box-sizing: border-box;
+  width: var(--mw-slider-thumb-size);
+  height: var(--mw-slider-thumb-size);
+  border: 1.5px solid var(--mw-slider-thumb-border);
+  background: var(--mw-slider-thumb-background);
+  transition: box-shadow 150ms ease, border-color 150ms ease;
+}
+
+.mw-slider__tooltip {
+  bottom: calc(100% + var(--mw-slider-tooltip-gap));
+  transform: translateX(-50%);
+  min-width: 2rem;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: var(--mw-slider-tooltip-background);
+  color: var(--mw-slider-tooltip-color);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  text-align: center;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+  z-index: 4;
+}
+
+.mw-slider__native:active ~ .mw-slider__tooltip,
+.mw-slider--state-pressed .mw-slider__tooltip {
+  opacity: 1;
+}
+
+.mw-slider--with-touch-area .mw-slider__touch-area {
+  opacity: 0.6;
+}
+
+.mw-slider__native:hover + .mw-slider__visual .mw-slider__touch-area,
+.mw-slider--state-hover .mw-slider__touch-area {
+  opacity: 0.36;
+}
+
+.mw-slider__native:active + .mw-slider__visual .mw-slider__touch-area,
+.mw-slider--state-pressed .mw-slider__touch-area {
+  opacity: 0.6;
+}
+
+.mw-slider__native:focus-visible + .mw-slider__visual .mw-slider__thumb,
+.mw-slider--state-focus .mw-slider__thumb {
+  box-shadow: 0 0 0 3px var(--mw-slider-focus-ring-inner), 0 0 0 5px
+    var(--mw-slider-focus-ring-outer);
+}
+
+.mw-slider--disabled {
+  --mw-slider-track-background: var(--mw-color-border-disabled, #d1d5db);
+  --mw-slider-track-fill: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
+  --mw-slider-thumb-border: var(--mw-color-primary-disabled, rgba(47, 49, 252, 0.5));
+
+  opacity: 0.72;
+}
+
+.mw-slider--disabled .mw-slider__native {
+  cursor: not-allowed;
+}
+
+.mw-slider--disabled .mw-slider__touch-area {
+  opacity: 0;
+}
+
+.mw-slider--vertical {
+  width: var(--mw-slider-touch-area-size);
+  height: 232px;
+}
+
+.mw-slider--vertical .mw-slider__control {
+  width: var(--mw-slider-touch-area-size);
+  height: 100%;
+}
+
+.mw-slider--vertical .mw-slider__native {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+
+.mw-slider--vertical .mw-slider__track,
+.mw-slider--vertical .mw-slider__fill {
+  left: 50%;
+  top: auto;
+  width: var(--mw-slider-track-height);
+  transform: translateX(-50%);
+}
+
+.mw-slider--vertical .mw-slider__track {
+  top: 0;
+  bottom: 0;
+  right: auto;
+}
+
+.mw-slider--vertical .mw-slider__fill {
+  bottom: 0;
+  height: var(--mw-slider-fill-percentage);
+}
+
+.mw-slider--vertical .mw-slider__touch-area,
+.mw-slider--vertical .mw-slider__thumb,
+.mw-slider--vertical .mw-slider__tooltip {
+  left: 50%;
+  top: calc(100% - var(--mw-slider-fill-percentage));
+}
+
+.mw-slider--vertical .mw-slider__touch-area,
+.mw-slider--vertical .mw-slider__thumb {
+  transform: translate(-50%, -50%);
+}
+
+.mw-slider--vertical .mw-slider__tooltip {
+  bottom: auto;
+  transform: translate(calc(-100% - var(--mw-slider-tooltip-gap)), -50%);
+}
+
+.mw-theme--dark .mw-slider {
+  --mw-slider-track-background: var(--mw-color-border-subtle);
+  --mw-slider-thumb-background: var(--mw-color-surface-inverted);
+  --mw-slider-tooltip-background: var(--mw-color-surface-inverted);
+  --mw-slider-tooltip-color: var(--mw-color-text-inverted);
+  --mw-slider-focus-ring-inner: var(--mw-color-surface-elevated);
+}

package/src/firstEdition/spacing.css

@@ -0,0 +1,6 @@
+.mw-spacing {
+  display: block;
+  width: 100%;
+  height: var(--mw-spacing-value, 24px);
+  flex-shrink: 0;
+}

package/src/firstEdition/spinner.css

@@ -0,0 +1,94 @@
+/*
+ * Spinner atom styles
+ * Figma references:
+ * - .figma/marwes/components/spinnerclassic.json
+ * - .figma/marwes/components/spinnerring.json
+ * - .figma/marwes/components/spinnerdual.json
+ * - .figma/marwes/components/spinnerdots-round.json
+ * - .figma/marwes/components/spinnerdots-square.json
+ * - .figma/marwes/components/spinnerlines.json
+ * - .figma/marwes/components/spinnercross.json
+ * - .figma/marwes/pages/-spinner/-spinner_1737-10635.json
+ * - .figma/marwes/pages/-spinner/-spinner-dark_1780-1543.json
+ */
+
+.mw-spinner {
+  --mw-spinner-size: 24px;
+  --mw-spinner-track-color: var(--mw-color-text-muted, #a3a3a3);
+  --mw-spinner-indicator-color: var(--mw-color-primary-base, #2f31fc);
+  --mw-spinner-rotation-duration: 800ms;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: var(--mw-spinner-size);
+  block-size: var(--mw-spinner-size);
+  line-height: 0;
+}
+
+.mw-spinner__svg {
+  inline-size: 100%;
+  block-size: 100%;
+  animation: mw-spinner-rotate var(--mw-spinner-rotation-duration) linear infinite;
+  transform-origin: center;
+}
+
+.mw-spinner--cross .mw-spinner__svg {
+  animation: none;
+}
+
+.mw-spinner--cross .mw-spinner__svg rect {
+  animation: mw-spinner-cross-shift var(--mw-spinner-rotation-duration) steps(4, end) infinite;
+}
+
+.mw-spinner--cross .mw-spinner__svg rect:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--cross .mw-spinner__svg rect:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--cross .mw-spinner__svg rect:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+@keyframes mw-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mw-spinner-cross-shift {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  25% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  75% {
+    opacity: 0.2;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-spinner__svg {
+    animation-duration: 1600ms;
+  }
+
+  .mw-spinner--cross .mw-spinner__svg rect {
+    animation-duration: 1600ms;
+  }
+}

package/src/firstEdition/styles.css

@@ -5,13 +5,40 @@
  * Each component has its own CSS file for better organization.
  */
 
+@import "./tokens.css";
+
+@import "./accordion.css";
+@import "./avatar.css";
+@import "./card.css";
+@import "./dialog.css";
+@import "./toast.css";
+@import "./tooltip.css";
+@import "./badge.css";
 @import "./button.css";
 @import "./input.css";
+@import "./input-otp.css";
+@import "./select.css";
+@import "./textarea.css";
+@import "./rich-text.css";
 @import "./icon.css";
 @import "./checkbox.css";
 @import "./divider.css";
+@import "./spinner.css";
+@import "./spacing.css";
+@import "./radio.css";
+@import "./switch.css";
+@import "./slider.css";
+@import "./tab.css";
 @import "./typography.css";
 
 /* Molecules */
+@import "./molecules/accordion-field.css";
 @import "./molecules/checkbox-field.css";
+@import "./molecules/checkbox-group-field.css";
+@import "./molecules/dialog-modal.css";
 @import "./molecules/input-field.css";
+@import "./molecules/radio-group-field.css";
+@import "./molecules/slider-field.css";
+@import "./molecules/switch-field.css";
+@import "./molecules/tab-group.css";
+@import "./molecules/toast-container.css";

package/src/firstEdition/switch.css

@@ -0,0 +1,156 @@
+/*
+ * Switch Component Styles
+ * Figma: 1364:11442 (light) / 1369:4001 (dark)
+ *
+ * Tokens (from Figma nodes.json):
+ *   switch/track-off  (light): #e5e7eb    (dark): #374151
+ *   switch/track-on   (light): #2f31fc    (dark): #2f31fc  (= primary-base)
+ *   switch/thumb-off  (light): #f9fafb    (dark): #141414
+ *   switch/thumb-on   (light): #ffffff    (dark): #ffffff
+ *   switch/label      (light): #141414    (dark): #f9fafb
+ *   Sizes: Compact 24×16 / 12px, Wide 30×16 / 12px, Rich 30×20 / 16px
+ */
+
+.mw-switch {
+  --mw-switch-track-off: var(--mw-color-border-subtle);
+  --mw-switch-track-off-hover: color-mix(in srgb, var(--mw-color-border) 60%, var(--mw-color-text));
+  --mw-switch-track-off-active: var(--mw-color-border);
+  --mw-switch-track-off-disabled: var(--mw-color-border-disabled);
+  --mw-switch-track-on: var(--mw-color-primary-base, #2f31fc);
+  --mw-switch-track-on-hover: var(--mw-color-primary-hover, #2527ca);
+  --mw-switch-track-on-active: var(--mw-color-primary-pressed, #1b1d97);
+  --mw-switch-track-on-disabled: var(--mw-color-primary-disabled, #8182fc);
+  --mw-switch-thumb-off: var(--mw-color-surface);
+  --mw-switch-thumb-off-disabled: var(--mw-color-surface-disabled);
+  --mw-switch-thumb-on: var(--mw-color-primary-label);
+  --mw-switch-thumb-on-disabled: var(--mw-color-primary-label-disabled);
+  --mw-switch-label: var(--mw-color-text);
+  --mw-switch-label-disabled: var(--mw-color-text-disabled);
+  --mw-switch-focus-ring: var(--mw-color-focus, #2f31fc);
+  --mw-switch-track-width: 24px;
+  --mw-switch-track-height: 16px;
+  --mw-switch-thumb-size: 12px;
+  --mw-switch-thumb-offset: 2px;
+  --mw-switch-thumb-translate: 8px;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-spacing-sp-8, 8px);
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--mw-switch-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.mw-switch__track {
+  position: relative;
+  width: var(--mw-switch-track-width);
+  height: var(--mw-switch-track-height);
+  border-radius: 9999px;
+  background: var(--mw-switch-track-off);
+  flex-shrink: 0;
+  transition: background 150ms ease;
+}
+
+.mw-switch__thumb {
+  position: absolute;
+  top: var(--mw-switch-thumb-offset);
+  left: var(--mw-switch-thumb-offset);
+  width: var(--mw-switch-thumb-size);
+  height: var(--mw-switch-thumb-size);
+  border-radius: 50%;
+  background: var(--mw-switch-thumb-off);
+  transition: transform 150ms ease, background 150ms ease;
+}
+
+.mw-switch--wide {
+  --mw-switch-track-width: 30px;
+  --mw-switch-thumb-translate: 14px;
+}
+
+.mw-switch--rich {
+  --mw-switch-track-width: 30px;
+  --mw-switch-track-height: 20px;
+  --mw-switch-thumb-size: 16px;
+  --mw-switch-thumb-translate: 10px;
+}
+
+.mw-switch--checked .mw-switch__track {
+  background: var(--mw-switch-track-on);
+}
+
+.mw-switch--checked .mw-switch__thumb {
+  transform: translateX(var(--mw-switch-thumb-translate));
+  background: var(--mw-switch-thumb-on);
+}
+
+.mw-switch:not(.mw-switch--disabled):hover .mw-switch__track {
+  background: var(--mw-switch-track-off-hover);
+}
+
+.mw-switch:not(.mw-switch--disabled).mw-switch--checked:hover .mw-switch__track {
+  background: var(--mw-switch-track-on-hover);
+}
+
+.mw-switch:not(.mw-switch--disabled):active .mw-switch__track {
+  background: var(--mw-switch-track-off-active);
+}
+
+.mw-switch:not(.mw-switch--disabled).mw-switch--checked:active .mw-switch__track {
+  background: var(--mw-switch-track-on-active);
+}
+
+.mw-switch--disabled {
+  cursor: not-allowed;
+  color: var(--mw-switch-label-disabled);
+  pointer-events: none;
+}
+
+.mw-switch--disabled .mw-switch__track {
+  background: var(--mw-switch-track-off-disabled);
+}
+
+.mw-switch--disabled .mw-switch__thumb {
+  background: var(--mw-switch-thumb-off-disabled);
+}
+
+.mw-switch--disabled.mw-switch--checked .mw-switch__track {
+  background: var(--mw-switch-track-on-disabled);
+}
+
+.mw-switch--disabled.mw-switch--checked .mw-switch__thumb {
+  background: var(--mw-switch-thumb-on-disabled);
+}
+
+.mw-switch:focus-visible {
+  outline: none;
+}
+
+.mw-switch:focus-visible .mw-switch__track {
+  outline: 2px solid var(--mw-switch-focus-ring);
+  outline-offset: 2px;
+  border-radius: 9999px;
+}
+
+.mw-theme--dark .mw-switch {
+  --mw-switch-track-off: var(--mw-color-border-subtle);
+  --mw-switch-track-off-hover: color-mix(in srgb, var(--mw-color-border) 60%, var(--mw-color-text));
+  --mw-switch-track-off-active: var(--mw-color-border);
+  --mw-switch-track-off-disabled: var(--mw-color-border-disabled);
+  --mw-switch-track-on: var(--mw-color-primary-base, #2f31fc);
+  --mw-switch-track-on-hover: var(--mw-color-primary-hover, #5859fc);
+  --mw-switch-track-on-active: var(--mw-color-primary-pressed, #8182fc);
+  --mw-switch-track-on-disabled: var(--mw-color-primary-disabled, #121365);
+  --mw-switch-thumb-off: var(--mw-color-surface);
+  --mw-switch-thumb-off-disabled: var(--mw-color-surface-disabled);
+  --mw-switch-thumb-on: var(--mw-color-primary-label);
+  --mw-switch-thumb-on-disabled: var(--mw-color-primary-label-disabled);
+  --mw-switch-label: var(--mw-color-text);
+  --mw-switch-label-disabled: var(--mw-color-text-disabled);
+  --mw-switch-focus-ring: var(--mw-color-focus, #5859fc);
+}

package/src/firstEdition/tab.css

@@ -0,0 +1,81 @@
+/*
+ * Tab Component Styles
+ * Figma refs: 1364:11703 (light) / 1368:6067 (dark)
+ *
+ * The live sync uses tab-specific state colours that do not map 1:1 to the
+ * shared theme tokens yet, so the preset keeps them component-scoped here.
+ */
+
+.mw-tab {
+  --mw-tab-surface: var(--mw-color-surface-elevated);
+  --mw-tab-surface-hover: var(--mw-color-surface-subtle);
+  --mw-tab-surface-pressed: var(--mw-color-border-subtle);
+  --mw-tab-label: var(--mw-color-text-muted);
+  --mw-tab-label-active: var(--mw-color-text, #141414);
+  --mw-tab-label-disabled: var(--mw-color-text-disabled);
+  --mw-tab-indicator: var(--mw-color-primary-base, #2f31fc);
+  --mw-tab-indicator-disabled: var(--mw-color-border-disabled);
+
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--mw-spacing-sp-8, 8px) var(--mw-spacing-sp-16, 16px);
+  background: var(--mw-tab-surface);
+  color: var(--mw-tab-label);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size, 14px);
+  font-weight: 500;
+  line-height: 16px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.mw-tab--selected {
+  border-bottom-color: var(--mw-tab-indicator);
+}
+
+.mw-tab:hover:not(:disabled):not(.mw-tab--disabled) {
+  background: var(--mw-tab-surface-hover);
+  color: var(--mw-tab-label-active);
+}
+
+.mw-tab:active:not(:disabled):not(.mw-tab--disabled) {
+  background: var(--mw-tab-surface-pressed);
+  color: var(--mw-tab-label-active);
+}
+
+.mw-tab--disabled,
+.mw-tab:disabled {
+  background: var(--mw-tab-surface);
+  color: var(--mw-tab-label-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.mw-tab--selected.mw-tab--disabled,
+.mw-tab--selected:disabled {
+  border-bottom-color: var(--mw-tab-indicator-disabled);
+}
+
+.mw-tab:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--mw-color-focus, #2684ff);
+  z-index: 1;
+}
+
+.mw-theme--dark .mw-tab {
+  --mw-tab-surface: var(--mw-color-surface-elevated);
+  --mw-tab-surface-hover: var(--mw-color-surface-subtle);
+  --mw-tab-surface-pressed: var(--mw-color-border);
+  --mw-tab-label: var(--mw-color-text-muted);
+  --mw-tab-label-active: var(--mw-color-text);
+  --mw-tab-label-disabled: var(--mw-color-text-disabled);
+  --mw-tab-indicator: var(--mw-color-primary-base, #5859fc);
+  --mw-tab-indicator-disabled: var(--mw-color-border-disabled);
+}

package/src/firstEdition/textarea.css

@@ -0,0 +1,63 @@
+/*
+ * Textarea Component Styles
+ * Multiline companion to the Input atom.
+ */
+
+.mw-textarea {
+  min-height: calc(var(--mw-density-height) * 3);
+  padding: var(--mw-density-padding-y) var(--mw-density-padding-x);
+  border-radius: var(--mw-ui-radius);
+  border: 1px solid var(--mw-color-border);
+  background: var(--mw-color-surface);
+  color: var(--mw-color-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size);
+  width: 260px;
+  line-height: 1.5;
+  resize: var(--mw-textarea-resize, vertical);
+  transition: border-color 150ms ease, outline 150ms ease;
+}
+
+.mw-textarea::placeholder {
+  color: var(--mw-color-text-muted);
+}
+
+.mw-textarea:hover:not(:disabled):not(:focus) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+.mw-textarea:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+.mw-textarea.is-invalid,
+.mw-textarea--danger {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-textarea.is-invalid:focus-visible,
+.mw-textarea--danger:focus-visible {
+  outline-color: var(--mw-color-danger-base);
+}
+
+.mw-textarea--success {
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-textarea--success:focus-visible {
+  outline-color: var(--mw-color-success-base);
+}
+
+.mw-textarea:disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: var(--mw-color-border-disabled);
+  background: var(--mw-color-surface-disabled);
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-theme--dark .mw-textarea {
+  background: var(--mw-color-surface);
+}