@marwes-ui/presets 0.0.4 → 1.0.0

package/src/firstEdition/checkbox.css

@@ -0,0 +1,214 @@
+/* FirstEdition - Checkbox
+   - Figma node: 82:1612 (Component - Checkbox)
+   - States: enabled, hover, disabled, error
+   - Selections: checked, unchecked
+   - Styles expect: <input type="checkbox" class="mw-checkbox ...">
+   - Theme tokens map to vars like --mw-color-primary-base, --mw-ui-radius, etc.
+*/
+
+.mw-checkbox {
+  /* Component-level CSS variables (overridden by modifiers) */
+  --mw-checkbox-size: var(--mw-density-checkbox-size);
+  --mw-checkbox-radius: var(--mw-ui-radius);
+  --mw-checkbox-border: var(--mw-color-border);
+  --mw-checkbox-bg: var(--mw-color-surface);
+  --mw-checkbox-checked-bg: var(--mw-color-primary-base);
+  --mw-checkbox-check: var(--mw-color-primary-label);
+
+  /* Size and layout */
+  inline-size: var(--mw-checkbox-size);
+  block-size: var(--mw-checkbox-size);
+
+  /* Reset native appearance */
+  appearance: none;
+  -webkit-appearance: none;
+
+  /* Flexbox for checkmark centering */
+  display: inline-grid;
+  place-content: center;
+
+  /* Visual styling - aligned with Figma design */
+  border-radius: max(2px, calc(var(--mw-checkbox-radius) * 0.4));
+  border: 1px solid var(--mw-checkbox-border);
+  background: var(--mw-checkbox-bg);
+
+  /* Interaction */
+  cursor: pointer;
+  vertical-align: middle;
+  transition: all 150ms ease;
+
+  /* Space Protection */
+  margin: var(--mw-density-field-gap);
+
+  /* Typography */
+  font-family: var(--mw-font-primary, inherit);
+}
+
+/* ============================================
+   SIZE VARIANTS - Figma node 82:1612
+   ============================================ */
+
+.mw-checkbox--sm {
+  --mw-checkbox-size: 16px;
+}
+
+.mw-checkbox--md {
+  --mw-checkbox-size: 18px;
+}
+
+.mw-checkbox--lg {
+  --mw-checkbox-size: 22px;
+}
+
+/* ============================================
+   FOCUS STATE - Figma node 120:927
+   ============================================ */
+
+.mw-checkbox:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   HOVER STATE - Light mode (nodes 120:1361, 122:943, 120:1326)
+   ============================================ */
+
+.mw-checkbox:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 60%, var(--mw-color-primary-base));
+}
+
+.mw-checkbox:checked:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* ============================================
+   CHECKED STATE - Figma node 82:1707
+   ============================================ */
+
+.mw-checkbox:checked {
+  background: var(--mw-checkbox-checked-bg);
+  border-color: var(--mw-checkbox-checked-bg);
+}
+
+/* ============================================
+   INDETERMINATE STATE
+   ============================================ */
+
+.mw-checkbox:indeterminate {
+  background: var(--mw-checkbox-checked-bg);
+  border-color: var(--mw-checkbox-checked-bg);
+}
+
+/* Checkmark / mixed mark */
+.mw-checkbox::before {
+  content: "";
+  inline-size: var(--mw-checkbox-size);
+  block-size: var(--mw-checkbox-size);
+  transform: scale(0);
+  transition: transform 180ms ease;
+
+  margin-top: 1px; /* visually center the check/mixed mark within the box */
+
+  /* “check” via mask so color can be controlled */
+  background: var(--mw-checkbox-check);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+}
+
+/* Check icon from icon registry - Figma aligned checkmark */
+.mw-checkbox:checked::before {
+  transform: scale(1);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+}
+
+/* mixed icon */
+.mw-checkbox:indeterminate::before {
+  margin-top: 0;
+  transform: scale(1);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline fill='none' stroke='black' stroke-width='2' stroke-linecap='round' x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline fill='none' stroke='black' stroke-width='2' stroke-linecap='round' x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E");
+}
+
+/* ============================================
+   DISABLED STATE - Light mode (nodes 120:1332, 122:945)
+   ============================================ */
+
+.mw-checkbox:disabled,
+.mw-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+
+/* ============================================
+   ERROR/INVALID STATE - Figma node 120:1336, 122:947
+   ============================================ */
+
+.mw-checkbox--invalid,
+.mw-checkbox[aria-invalid="true"] {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-checkbox:checked.mw-checkbox--invalid,
+.mw-checkbox:checked[aria-invalid="true"] {
+  background: var(--mw-color-danger-base);
+  border-color: var(--mw-color-danger-base);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+/* Dark mode override example:
+  .mw-theme--dark .mw-checkbox {
+    Kept for future reference
+  }
+*/
+
+.mw-theme--dark .mw-checkbox:not(:checked) {
+  background: transparent;
+}
+
+/* Dark mode: Hover state with subtle opacity */
+.mw-theme--dark .mw-checkbox:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--mw-color-text) 40%, var(--mw-color-primary-base));
+}
+
+.mw-theme--dark .mw-checkbox:checked:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+/* Dark mode: Disabled state (40% opacity, middle of 20-60% range) */
+.mw-theme--dark .mw-checkbox:disabled,
+.mw-theme--dark .mw-checkbox--disabled {
+  opacity: 0.4;
+}
+
+/* Dark mode: Error state maintains visibility on dark backgrounds */
+.mw-theme--dark .mw-checkbox--invalid,
+.mw-theme--dark .mw-checkbox[aria-invalid="true"] {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-theme--dark .mw-checkbox:checked.mw-checkbox--invalid,
+.mw-theme--dark .mw-checkbox:checked[aria-invalid="true"] {
+  background: var(--mw-color-danger-base);
+  border-color: var(--mw-color-danger-base);
+}
+
+/* ============================================
+   CHECKBOX FIELD COMPONENTS
+   ============================================ */
+
+.mw-checkbox-field__label {
+  cursor: pointer;
+  font-family: var(--mw-font-primary, inherit);
+}
+
+.mw-checkbox-field__description {
+  font-family: var(--mw-font-primary, inherit);
+}

package/src/firstEdition/dialog.css

@@ -0,0 +1,149 @@
+.mw-dialog {
+  --mw-dialog-surface: var(--mw-color-surface-elevated, #ffffff);
+  --mw-dialog-border: var(--mw-color-border-subtle, #e5e7eb);
+  --mw-dialog-divider: var(--mw-color-border-subtle, #00000033);
+  --mw-dialog-title: var(--mw-color-text, #141414);
+  --mw-dialog-description: color-mix(
+    in srgb,
+    var(--mw-color-text, #141414) 65%,
+    var(--mw-color-background, #ffffff)
+  );
+  --mw-dialog-radius: calc(var(--mw-ui-radius, 4px) * 3);
+  --mw-dialog-close-radius: calc(var(--mw-ui-radius, 4px) * 2);
+  --mw-dialog-width: 560px;
+
+  width: min(calc(100vw - var(--mw-spacing-sp-32)), var(--mw-dialog-width));
+  max-height: calc(100vh - var(--mw-spacing-sp-48));
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid var(--mw-dialog-border);
+  border-radius: var(--mw-dialog-radius);
+  background: var(--mw-dialog-surface);
+}
+
+.mw-dialog:focus-visible {
+  outline: 2px solid var(--mw-color-focus, #2f31fc);
+  outline-offset: 2px;
+}
+
+.mw-dialog--small {
+  --mw-dialog-width: 480px;
+}
+
+.mw-dialog--medium {
+  --mw-dialog-width: 560px;
+}
+
+.mw-dialog--large {
+  --mw-dialog-width: 720px;
+}
+
+.mw-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 16px 24px;
+}
+
+.mw-dialog__heading-group,
+.mw-dialog__spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+.mw-dialog__title {
+  margin: 0;
+  color: var(--mw-dialog-title);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: 0;
+}
+
+.mw-dialog__close {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--mw-dialog-close-radius);
+  background: transparent;
+  color: var(--mw-dialog-description);
+  cursor: pointer;
+}
+
+.mw-dialog__close:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.mw-dialog__close:focus-visible {
+  outline: 2px solid var(--mw-color-focus, #2f31fc);
+  outline-offset: 2px;
+}
+
+.mw-dialog__header-divider,
+.mw-dialog__footer-divider {
+  height: 1px;
+  background: var(--mw-dialog-divider);
+}
+
+.mw-dialog__content {
+  padding: 24px;
+}
+
+.mw-dialog__description,
+.mw-dialog__content .mw-p {
+  margin: 0;
+  color: var(--mw-dialog-description);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0;
+}
+
+.mw-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 24px;
+  flex-wrap: wrap;
+}
+
+.mw-theme--dark .mw-dialog {
+  --mw-dialog-surface: var(--mw-color-surface-elevated, #474747);
+  --mw-dialog-border: var(--mw-color-border-subtle, #474747);
+  --mw-dialog-divider: var(--mw-color-border-subtle, #ffffff33);
+  --mw-dialog-title: var(--mw-color-text, #f9fafb);
+  --mw-dialog-description: color-mix(
+    in srgb,
+    var(--mw-color-text, #f9fafb) 65%,
+    var(--mw-color-background, #141414)
+  );
+}
+
+@media (max-width: 640px) {
+  .mw-dialog {
+    width: min(calc(100vw - var(--mw-spacing-sp-24)), var(--mw-dialog-width));
+    max-height: calc(100vh - var(--mw-spacing-sp-24));
+  }
+
+  .mw-dialog__content {
+    padding: 20px; /* off-scale — no token */
+  }
+
+  .mw-dialog__footer {
+    padding: 16px 20px 20px; /* off-scale — no token */
+    justify-content: stretch;
+  }
+
+  .mw-dialog__footer > * {
+    flex: 1 1 auto;
+  }
+}

package/src/firstEdition/divider.css

@@ -0,0 +1,37 @@
+/*
+ * Divider styles
+ * Figma references:
+ * - component: 1574:21053
+ * - light showcase: 1574:24658
+ * - dark showcase: 1574:24738
+ *
+ * The design keeps a 1px line and changes the total spacing around it.
+ */
+
+.mw-divider {
+  --mw-divider-color: color-mix(in srgb, var(--mw-color-text, #141414) 20%, transparent);
+
+  border: 0;
+  margin: 0;
+  padding: 0;
+  flex: none;
+  box-sizing: content-box;
+  background-color: var(--mw-divider-color);
+  background-clip: content-box;
+}
+
+.mw-divider--horizontal {
+  display: block;
+  inline-size: 100%;
+  block-size: var(--mw-divider-line-thickness, 1px);
+  padding-block: calc((var(--mw-divider-spacing, 1px) - var(--mw-divider-line-thickness, 1px)) / 2);
+}
+
+.mw-divider--vertical {
+  display: inline-block;
+  inline-size: var(--mw-divider-line-thickness, 1px);
+  min-block-size: var(--mw-divider-line-thickness, 1px);
+  block-size: 100%;
+  padding-inline: calc((var(--mw-divider-spacing, 1px) - var(--mw-divider-line-thickness, 1px)) / 2);
+  vertical-align: middle;
+}

package/src/firstEdition/icon.css

@@ -0,0 +1,72 @@
+/* ============================================
+   Icon Component Styles - firstEdition
+   ============================================ */
+
+/* BASE */
+.mw-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  width: var(--mw-icon-size, var(--mw-density-icon-size));
+  height: var(--mw-icon-size, var(--mw-density-icon-size));
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--mw-icon-stroke-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* SIZES */
+.mw-icon--xs {
+  --mw-icon-size: 16px;
+}
+
+.mw-icon--sm {
+  --mw-icon-size: 24px;
+}
+
+.mw-icon--md {
+  --mw-icon-size: 32px;
+}
+
+.mw-icon--lg {
+  --mw-icon-size: 40px;
+}
+
+/* COLORS */
+.mw-icon--currentColor {
+  stroke: currentColor;
+}
+
+.mw-icon--primary {
+  stroke: var(--mw-color-primary-base);
+}
+
+.mw-icon--secondary {
+  stroke: var(--mw-color-secondary-base);
+}
+
+.mw-icon--muted {
+  stroke: var(--mw-color-text-muted);
+}
+
+/* CONTEXT-SPECIFIC: Icon in Button */
+.mw-btn .mw-icon {
+  pointer-events: none;
+}
+
+.mw-btn--xs .mw-icon {
+  --mw-icon-size: 16px;
+}
+
+.mw-btn--sm .mw-icon {
+  --mw-icon-size: 20px;
+}
+
+.mw-btn--md .mw-icon {
+  --mw-icon-size: 24px;
+}
+
+.mw-btn--lg .mw-icon {
+  --mw-icon-size: 28px;
+}

package/src/firstEdition/index.ts

@@ -0,0 +1,19 @@
+import type { ThemeInput } from "@marwes-ui/core"
+import "@fontsource/instrument-sans/400.css"
+import "@fontsource/instrument-sans/500.css"
+import "@fontsource/instrument-sans/600.css"
+
+// Explicit ThemeInput for consumers that still want to import the preset object.
+// MarwesProvider uses the same first edition baseline when no theme is provided.
+export const firstEditionTheme: ThemeInput = {
+  color: {
+    primary: {
+      base: "#2F31FC",
+      label: "#FFFFFF",
+      labelDisabled: "rgba(255,255,255,0.5)",
+    },
+    success: "#00875A",
+  },
+  font: { primary: "'Instrument Sans', Inter, system-ui, sans-serif" },
+  ui: { radius: 4, density: "comfortable" },
+}

package/src/firstEdition/input-otp.css

@@ -0,0 +1,107 @@
+/*
+ * Input OTP component styles
+ * Based on .figma/marwes/pages/-input-otp/
+ */
+
+.mw-input-otp {
+  --mw-input-otp-label-color: var(--mw-color-text);
+  --mw-input-otp-helper-color: var(--mw-color-text-muted);
+  --mw-input-otp-cell-border: var(--mw-color-border);
+  --mw-input-otp-cell-surface: var(--mw-color-surface);
+  --mw-input-otp-cell-text: var(--mw-color-text-muted);
+  --mw-input-otp-cell-filled-text: var(--mw-color-text);
+
+  display: grid;
+  gap: var(--mw-spacing-sp-4);
+  width: max-content;
+}
+
+.mw-input-otp__label {
+  color: var(--mw-input-otp-label-color);
+}
+
+.mw-input-otp__label .mw-p {
+  color: var(--mw-input-otp-label-color);
+}
+
+.mw-input-otp__cells {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--mw-input-otp-cell-count, 6), minmax(0, 40px));
+  gap: var(--mw-spacing-sp-8);
+}
+
+.mw-input-otp__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--mw-input-otp-cell-border);
+  border-radius: var(--mw-ui-radius, 4px);
+  background: var(--mw-input-otp-cell-surface);
+  color: var(--mw-input-otp-cell-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size);
+  font-weight: 500;
+  line-height: 1;
+  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
+}
+
+.mw-input-otp__cell--filled {
+  color: var(--mw-input-otp-cell-filled-text);
+}
+
+.mw-input-otp__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: transparent;
+  caret-color: transparent;
+  opacity: 0;
+}
+
+.mw-input-otp:not(.mw-input-otp--disabled):not(.mw-input-otp--invalid):hover .mw-input-otp__cell {
+  border-color: color-mix(in srgb, var(--mw-color-border) 55%, var(--mw-color-text));
+}
+
+.mw-input-otp:focus-within:not(.mw-input-otp--invalid) .mw-input-otp__cell {
+  border-color: var(--mw-color-focus);
+}
+
+.mw-input-otp__helper,
+.mw-input-otp__error {
+  color: var(--mw-input-otp-helper-color);
+}
+
+.mw-input-otp__helper .mw-p,
+.mw-input-otp__error .mw-p {
+  color: var(--mw-input-otp-helper-color);
+}
+
+.mw-input-otp--invalid {
+  --mw-input-otp-cell-border: var(--mw-color-danger-base);
+  --mw-input-otp-helper-color: var(--mw-color-danger-base);
+}
+
+.mw-input-otp--disabled {
+  --mw-input-otp-label-color: var(--mw-color-text-disabled);
+  --mw-input-otp-helper-color: var(--mw-color-text-disabled);
+  --mw-input-otp-cell-border: var(--mw-color-border-disabled);
+  --mw-input-otp-cell-surface: var(--mw-color-surface-disabled);
+  --mw-input-otp-cell-text: var(--mw-color-text-disabled);
+  --mw-input-otp-cell-filled-text: var(--mw-color-text-disabled);
+}
+
+.mw-input-otp--disabled .mw-input-otp__input {
+  cursor: not-allowed;
+}
+
+.mw-input-otp--readonly .mw-input-otp__input {
+  cursor: default;
+}

package/src/firstEdition/input.css

@@ -0,0 +1,73 @@
+/* 
+ * Input Component Styles
+ * Based on Figma node 1:969 (Component - Text field)
+ * States: default (1:984), pressed (1:989), active (1:994), error (1:999), disabled (1:1004)
+ * Focus state follows Figma node 120:927 specification
+ */
+
+.mw-input {
+  height: var(--mw-density-height);
+  padding: 0 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;
+  transition: border-color 150ms ease, outline 150ms ease;
+}
+
+.mw-input::placeholder {
+  color: var(--mw-color-text-muted);
+}
+
+/* Hover state (pressed in Figma) - node 1:989 */
+.mw-input:hover:not(:disabled):not(:focus) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+/* Focus/Active state - node 1:994, follows focus spec from node 120:927 */
+.mw-input:focus-visible {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+/* Error/Danger tone - node 1:999 */
+.mw-input.is-invalid,
+.mw-input--danger {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-input.is-invalid:focus-visible,
+.mw-input--danger:focus-visible {
+  outline-color: var(--mw-color-danger-base);
+}
+
+/* Success tone */
+.mw-input--success {
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-input--success:focus-visible {
+  outline-color: var(--mw-color-success-base);
+}
+
+/* Disabled state - node 1:1004 */
+.mw-input: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);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+/* Dark mode input styles */
+.mw-theme--dark .mw-input {
+  background: var(--mw-color-surface);
+}