@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/NumberField.css

@@ -0,0 +1,49 @@
+@import './core.css';
+@layer greese.components {
+  .greese-NumberField .greese-Input-control {
+    font-variant-numeric: tabular-nums;
+  }
+  .greese-NumberField-steppers {
+    display: inline-flex;
+    gap: 2px;
+    margin-inline-end: calc(-1 * var(--greese-space-2));
+  }
+  @media (pointer: coarse) {
+    .greese-NumberField-step::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-NumberField-step {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-NumberField-step > svg {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+  @media (hover: hover) {
+    .greese-NumberField-step:hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+  }
+  .greese-NumberField-step:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+}

package/dist/css/OtpField.css

@@ -0,0 +1,90 @@
+@import './core.css';
+@layer greese.components {
+  .greese-OtpField {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    gap: var(--greese-space-2);
+    max-inline-size: 100%;
+  }
+  .greese-OtpField--size-xs {
+    --greese-otp-size: 1rem;
+    font-size: max(16px, var(--greese-type-p3-font-size));
+  }
+  .greese-OtpField--size-sm {
+    --greese-otp-size: 2rem;
+    font-size: max(16px, var(--greese-type-p3-font-size));
+  }
+  .greese-OtpField--size-md {
+    --greese-otp-size: 2.5rem;
+    font-size: max(16px, var(--greese-type-p2-font-size));
+  }
+  .greese-OtpField--size-lg {
+    --greese-otp-size: 3rem;
+    font-size: max(16px, var(--greese-type-p2-font-size));
+  }
+  .greese-OtpField--size-xl {
+    --greese-otp-size: 4rem;
+    font-size: max(16px, var(--greese-type-p1-font-size));
+  }
+  .greese-OtpField-input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    color: transparent;
+    letter-spacing: 1em;
+    caret-color: transparent;
+    cursor: text;
+    background: transparent;
+    border: 0;
+    outline: none;
+    opacity: 0;
+  }
+  .greese-OtpField-input:disabled {
+    cursor: not-allowed;
+  }
+  .greese-OtpField-slot {
+    display: grid;
+    flex: 0 1 var(--greese-otp-size);
+    place-items: center;
+    min-inline-size: 2rem;
+    block-size: calc(var(--greese-otp-size) * 1.15);
+    font-family: var(--greese-font-mono);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg);
+    pointer-events: none;
+    background-color: var(--greese-color-canvas);
+    border: 1px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-field);
+    transition: border-color var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-OtpField-slot--active {
+    border-color: var(--greese-color-focus-ring);
+    box-shadow: 0 0 0 1px var(--greese-color-focus-ring);
+  }
+  .greese-OtpField-slot--active:empty::after {
+    inline-size: 1px;
+    block-size: 1.2em;
+    content: "";
+    background-color: currentcolor;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-OtpField-slot--active:empty::after {
+      animation: greese-otp-caret 1s steps(1) infinite;
+    }
+  }
+  .greese-OtpField[data-invalid] .greese-OtpField-slot {
+    border-color: var(--greese-color-negative);
+  }
+  .greese-OtpField[data-disabled] .greese-OtpField-slot {
+    opacity: 0.55;
+  }
+  @keyframes greese-otp-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+}