@moduix/react 2.2.0 → 2.2.4

package/dist/components/drawer/Drawer.css

@@ -1,501 +0,0 @@
-@layer moduix.components {
-  ._uVP9W_trigger, ._uVP9W_closeTrigger {
-    box-sizing: border-box;
-    min-height: var(--moduix-drawer-control-height, var(--moduix-size-md));
-    padding: var(--moduix-drawer-control-padding-y, var(--moduix-spacing-1))
-      var(--moduix-drawer-control-padding-x, var(--moduix-spacing-3-5));
-    border: var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-drawer-control-border-color, var(--moduix-color-border));
-    border-radius: var(--moduix-drawer-control-radius, var(--moduix-radius-md));
-    background-color: var(--moduix-drawer-control-bg, var(--moduix-color-background));
-    color: var(--moduix-drawer-control-color, var(--moduix-color-foreground));
-    font: inherit;
-    font-size: var(--moduix-drawer-control-font-size, var(--moduix-text-md));
-    line-height: var(--moduix-drawer-control-line-height, var(--moduix-line-height-text-md));
-    cursor: pointer;
-    user-select: none;
-    transition: background-color var(--moduix-transition-default),
-      border-color var(--moduix-transition-default),
-      color var(--moduix-transition-default);
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    display: inline-flex;
-
-    @media (hover: hover) {
-      &:hover {
-        background-color: var(--moduix-drawer-control-bg-hover, var(--moduix-color-accent));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm)))
-        solid var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: calc(var(--moduix-drawer-focus-ring-width, var(--moduix-drawer-control-border-width, var(--moduix-border-width-sm))) *
-          -1);
-    }
-
-    &[data-disabled], &[disabled] {
-      pointer-events: none;
-      opacity: var(--moduix-opacity-disabled);
-    }
-  }
-
-  ._uVP9W_backdrop {
-    z-index: calc(var(--moduix-z-backdrop) + var(--layer-index, 0));
-    background-color: var(--moduix-drawer-backdrop-bg, var(--moduix-backdrop-bg, var(--moduix-color-overlay)));
-    min-height: 100dvh;
-    backdrop-filter: var(--moduix-backdrop-filter, blur(var(--moduix-drawer-backdrop-blur, 4px)));
-    opacity: calc(1 - var(--drawer-swipe-progress, 0));
-    transition: opacity calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
-        var(--moduix-ease-out),
-      backdrop-filter calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
-        var(--moduix-ease-out);
-    position: fixed;
-    inset: 0;
-
-    &[data-state="open"] {
-      animation: _uVP9W_drawer-backdrop-in
-        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
-    }
-
-    &[data-state="closed"] {
-      animation: _uVP9W_drawer-backdrop-out
-        var(--moduix-drawer-backdrop-transition, var(--moduix-transition-spring));
-      animation-fill-mode: forwards;
-    }
-
-    &[data-state="open"][data-swiping] {
-      transition-duration: 0s;
-    }
-
-    &[hidden]:has( ~ ._uVP9W_positioner:not([hidden])) {
-      display: block;
-    }
-  }
-
-  ._uVP9W_positioner {
-    box-sizing: border-box;
-    z-index: calc(var(--moduix-z-modal) + var(--layer-index, 0));
-    overscroll-behavior: contain;
-    padding: var(--moduix-drawer-positioner-padding, 0);
-    justify-content: center;
-    align-items: flex-end;
-    display: flex;
-    position: fixed;
-    inset: 0;
-    overflow: hidden;
-
-    &[data-swipe-direction="up"] {
-      align-items: flex-start;
-    }
-
-    &[data-swipe-direction="left"] {
-      justify-content: flex-start;
-      align-items: stretch;
-    }
-
-    &[data-swipe-direction="right"] {
-      justify-content: flex-end;
-      align-items: stretch;
-    }
-
-    &:not([hidden]) {
-      & ._uVP9W_content[hidden] {
-        display: flex;
-      }
-    }
-  }
-
-  ._uVP9W_content {
-    --moduix-drawer-bleed: var(--moduix-drawer-bleed-size, var(--moduix-size-xl));
-    box-sizing: border-box;
-    width: min(var(--moduix-drawer-width, 100%), 100vw);
-    height: var(--moduix-drawer-size, 100%);
-    max-height: var(--moduix-drawer-max-height, 80dvh);
-    padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-2))
-      var(--moduix-drawer-padding-x, var(--moduix-spacing-6))
-      calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-bottom, 0px));
-    border: var(--moduix-drawer-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-drawer-border-color, var(--moduix-color-border));
-    border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl))
-      var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0;
-    background-color: var(--moduix-drawer-bg, var(--moduix-color-popover));
-    color: var(--moduix-drawer-color, var(--moduix-color-popover-foreground));
-    box-shadow: var(--moduix-drawer-shadow, var(--moduix-shadow-lg));
-    overscroll-behavior: contain;
-    transform-origin: bottom;
-    transition: transform calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
-        var(--moduix-ease-out),
-      height calc(var(--drawer-swipe-strength, 1) * var(--moduix-duration-slower))
-        var(--moduix-ease-out),
-      scale
-        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring))),
-      translate
-        var(--moduix-drawer-nested-transition, var(--moduix-drawer-transition, var(--moduix-transition-spring)));
-    outline: 0;
-    flex-direction: column;
-    display: flex;
-    position: relative;
-    translate: 0;
-    scale: 1;
-
-    &:after {
-      inset-inline: 0;
-      height: var(--moduix-drawer-bleed);
-      background-color: inherit;
-      content: "";
-      pointer-events: none;
-      position: absolute;
-      top: 100%;
-    }
-
-    &[data-state="open"] {
-      animation: _uVP9W_drawer-content-in-down
-        var(--moduix-drawer-transition, var(--moduix-transition-spring));
-    }
-
-    &[data-state="closed"] {
-      animation: _uVP9W_drawer-content-out-down
-        var(--moduix-drawer-transition, var(--moduix-transition-spring));
-      animation-fill-mode: forwards;
-    }
-
-    &[data-state="open"][data-swiping], &[data-nested-drawer-swiping] {
-      transition-duration: 0s;
-    }
-
-    &[data-dragging] {
-      user-select: none;
-    }
-
-    &[data-swipe-direction="up"] {
-      transform-origin: top;
-      padding-top: calc(var(--moduix-drawer-padding-y, var(--moduix-spacing-4)) + env(safe-area-inset-top, 0px));
-      padding-bottom: var(--moduix-drawer-padding-y, var(--moduix-spacing-4));
-      border-radius: 0 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
-        var(--moduix-drawer-radius, var(--moduix-radius-xl));
-
-      &:after {
-        top: auto;
-        bottom: 100%;
-      }
-
-      &[data-state="open"] {
-        animation-name: _uVP9W_drawer-content-in-up;
-      }
-
-      &[data-state="closed"] {
-        animation-name: _uVP9W_drawer-content-out-up;
-      }
-    }
-
-    &[data-swipe-direction="left"], &[data-swipe-direction="right"] {
-      width: min(var(--moduix-drawer-side-width, 22rem), calc(100vw - var(--moduix-spacing-8)));
-      height: var(--moduix-drawer-side-height, 100%);
-      max-height: none;
-      padding: var(--moduix-drawer-padding-y, var(--moduix-spacing-6))
-        var(--moduix-drawer-padding-x, var(--moduix-spacing-6));
-
-      &:after {
-        inset-block: 0;
-        inset-inline: auto;
-        width: var(--moduix-drawer-bleed);
-        height: auto;
-        top: 0;
-      }
-    }
-
-    &[data-swipe-direction="left"] {
-      transform-origin: 0;
-      border-radius: 0 var(--moduix-drawer-radius, var(--moduix-radius-xl))
-        var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0;
-
-      &:after {
-        right: 100%;
-      }
-
-      &[data-state="open"] {
-        animation-name: _uVP9W_drawer-content-in-left;
-      }
-
-      &[data-state="closed"] {
-        animation-name: _uVP9W_drawer-content-out-left;
-      }
-    }
-
-    &[data-swipe-direction="right"] {
-      transform-origin: 100%;
-      border-radius: var(--moduix-drawer-radius, var(--moduix-radius-xl)) 0 0
-        var(--moduix-drawer-radius, var(--moduix-radius-xl));
-
-      &:after {
-        left: 100%;
-      }
-
-      &[data-state="open"] {
-        animation-name: _uVP9W_drawer-content-in-right;
-      }
-
-      &[data-state="closed"] {
-        animation-name: _uVP9W_drawer-content-out-right;
-      }
-    }
-
-    &[data-nested-drawer-open] {
-      scale: calc(1 - var(--moduix-drawer-nested-scale-step, .05) * var(--nested-drawers, 0));
-    }
-
-    &[data-swipe-direction="down"][data-nested-drawer-open] {
-      translate: 0
-        calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
-            var(--nested-drawers, 0));
-    }
-
-    &[data-swipe-direction="up"][data-nested-drawer-open] {
-      translate: 0
-        calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
-            var(--nested-drawers, 0));
-    }
-
-    &[data-swipe-direction="left"][data-nested-drawer-open] {
-      translate: calc(var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
-            var(--nested-drawers, 0))
-        0;
-    }
-
-    &[data-swipe-direction="right"][data-nested-drawer-open] {
-      translate: calc(-1 * var(--moduix-drawer-nested-translate-step, var(--moduix-spacing-10)) *
-            var(--nested-drawers, 0))
-        0;
-    }
-  }
-
-  ._uVP9W_grabber {
-    width: 100%;
-    padding: var(--moduix-drawer-grabber-padding, var(--moduix-spacing-3)) 0;
-    cursor: grab;
-    user-select: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-
-    &:active {
-      cursor: grabbing;
-    }
-
-    :where(._uVP9W_content[data-swipe-direction="left"], ._uVP9W_content[data-swipe-direction="right"]) & {
-      display: none;
-    }
-  }
-
-  ._uVP9W_grabberIndicator {
-    width: var(--moduix-drawer-grabber-indicator-width, 3rem);
-    height: var(--moduix-drawer-grabber-indicator-height, .25rem);
-    border-radius: var(--moduix-drawer-grabber-indicator-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-drawer-grabber-indicator-bg, var(--moduix-color-muted-foreground));
-    opacity: var(--moduix-drawer-grabber-indicator-opacity, .45);
-    transition: background-color var(--moduix-transition-default),
-      opacity var(--moduix-transition-default);
-
-    @media (hover: hover) {
-      ._uVP9W_grabber:hover & {
-        opacity: var(--moduix-drawer-grabber-indicator-opacity-hover, .7);
-      }
-    }
-  }
-
-  ._uVP9W_header {
-    align-items: start;
-    gap: var(--moduix-drawer-header-gap, var(--moduix-spacing-1));
-    grid-template-columns: minmax(0, 1fr) auto;
-    display: grid;
-
-    & > [data-slot="drawer-title"] {
-      grid-column: 1;
-    }
-
-    & > [data-slot="drawer-close-trigger"], & > [data-slot="drawer-close-icon"] {
-      grid-column: 2;
-      justify-self: end;
-    }
-
-    & > [data-slot="drawer-description"] {
-      grid-column: 1 / -1;
-    }
-  }
-
-  ._uVP9W_title {
-    color: var(--moduix-drawer-title-color, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
-    font-size: var(--moduix-drawer-title-font-size, var(--moduix-text-lg));
-    font-weight: var(--moduix-drawer-title-font-weight, var(--moduix-weight-semibold));
-    line-height: var(--moduix-drawer-title-line-height, var(--moduix-line-height-text-lg));
-    margin: 0;
-  }
-
-  ._uVP9W_description, ._uVP9W_body {
-    color: var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground));
-    font-size: var(--moduix-drawer-description-font-size, var(--moduix-text-md));
-    line-height: var(--moduix-drawer-description-line-height, var(--moduix-line-height-text-md));
-  }
-
-  ._uVP9W_description {
-    margin: 0;
-  }
-
-  ._uVP9W_body {
-    min-height: 0;
-    margin-top: var(--moduix-drawer-body-margin-top, var(--moduix-spacing-4));
-    overflow-y: auto;
-  }
-
-  ._uVP9W_footer {
-    justify-content: flex-end;
-    gap: var(--moduix-drawer-footer-gap, var(--moduix-spacing-2));
-    margin-top: var(--moduix-drawer-footer-margin-top, var(--moduix-spacing-6));
-    display: flex;
-  }
-
-  ._uVP9W_closeIcon {
-    --moduix-close-button-size: var(--moduix-drawer-close-icon-size, var(--moduix-spacing-7));
-    --moduix-close-button-radius: var(--moduix-drawer-close-icon-radius, var(--moduix-radius-md));
-    --moduix-close-button-color: var(--moduix-drawer-close-icon-color, var(--moduix-drawer-description-color, var(--moduix-color-muted-foreground)));
-    --moduix-close-button-color-hover: var(--moduix-drawer-close-icon-color-hover, var(--moduix-drawer-color, var(--moduix-color-popover-foreground)));
-    --moduix-close-button-bg: var(--moduix-drawer-close-icon-bg, transparent);
-    --moduix-close-button-bg-hover: var(--moduix-drawer-close-icon-bg-hover, var(--moduix-color-accent));
-    --moduix-close-button-focus-ring-color: var(--moduix-drawer-close-icon-focus-ring-color, var(--moduix-drawer-focus-ring-color, var(--moduix-color-ring)));
-    --moduix-close-button-icon-size: var(--moduix-drawer-close-icon-glyph-size, var(--moduix-spacing-3));
-  }
-
-  ._uVP9W_swipeArea {
-    z-index: var(--moduix-z-modal);
-    touch-action: none;
-    position: fixed;
-
-    &[data-swipe-direction="up"] {
-      height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-
-    &[data-swipe-direction="down"] {
-      height: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    &[data-swipe-direction="left"] {
-      width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
-      top: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    &[data-swipe-direction="right"] {
-      width: var(--moduix-drawer-swipe-area-size, var(--moduix-spacing-10));
-      top: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    &[data-disabled] {
-      pointer-events: none;
-    }
-  }
-
-  ._uVP9W_indentBackground {
-    background: var(--moduix-drawer-indent-background-bg, var(--moduix-color-foreground));
-    opacity: var(--moduix-drawer-indent-background-opacity, 0);
-    pointer-events: none;
-    transition: opacity var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
-    position: absolute;
-    inset: 0;
-
-    &[data-active] {
-      opacity: calc(var(--moduix-drawer-indent-background-opacity-active, 1) *
-          (1 - var(--drawer-swipe-progress, 0)));
-    }
-  }
-
-  ._uVP9W_indent {
-    transform-origin: top;
-    transition: transform var(--moduix-drawer-indent-transition, var(--moduix-transition-spring)),
-      border-radius var(--moduix-drawer-indent-transition, var(--moduix-transition-spring));
-    position: relative;
-    transform: translateY(0) scale(1);
-
-    &[data-active] {
-      border-radius: var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg))
-        var(--moduix-drawer-indent-radius-active, var(--moduix-radius-lg)) 0 0;
-      transform: translateY(calc(var(--moduix-drawer-indent-translate-y-active, var(--moduix-spacing-2)) *
-              (1 - var(--drawer-swipe-progress, 0))))
-        scale(calc(var(--moduix-drawer-indent-scale-active, .97) +
-              (1 - var(--moduix-drawer-indent-scale-active, .97)) * var(--drawer-swipe-progress, 0)));
-    }
-  }
-
-  @keyframes _uVP9W_drawer-backdrop-in {
-    from {
-      opacity: 0;
-      backdrop-filter: none;
-    }
-  }
-
-  @keyframes _uVP9W_drawer-backdrop-out {
-    to {
-      opacity: 0;
-      backdrop-filter: none;
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-in-down {
-    from {
-      transform: translate3d(0, 100%, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-out-down {
-    to {
-      transform: translate3d(0, 100%, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-in-up {
-    from {
-      transform: translate3d(0, -100%, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-out-up {
-    to {
-      transform: translate3d(0, -100%, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-in-left {
-    from {
-      transform: translate3d(-100%, 0, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-out-left {
-    to {
-      transform: translate3d(-100%, 0, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-in-right {
-    from {
-      transform: translate3d(100%, 0, 0);
-    }
-  }
-
-  @keyframes _uVP9W_drawer-content-out-right {
-    to {
-      transform: translate3d(100%, 0, 0);
-    }
-  }
-}

package/dist/components/heading/Heading.css

@@ -1,58 +0,0 @@
-@layer moduix.components {
-  .UnU3Mq_root {
-    --_heading-font-size: var(--moduix-heading-font-size-2xl, var(--moduix-text-3xl));
-    --_heading-line-height: var(--moduix-heading-line-height-2xl, var(--moduix-line-height-text-3xl));
-    --_heading-font-weight: var(--moduix-heading-font-weight-semibold, var(--moduix-weight-semibold));
-    color: var(--moduix-heading-color, var(--moduix-color-foreground));
-    font-family: var(--moduix-heading-font-family, inherit);
-    font-size: var(--moduix-heading-font-size, var(--_heading-font-size));
-    font-weight: var(--moduix-heading-font-weight, var(--_heading-font-weight));
-    line-height: var(--moduix-heading-line-height, var(--_heading-line-height));
-    letter-spacing: var(--moduix-heading-letter-spacing, 0);
-    text-wrap: var(--moduix-heading-text-wrap, balance);
-    overflow-wrap: break-word;
-    margin: 0;
-
-    &:is(h6):not([data-size]), &[data-size="xs"] {
-      --_heading-font-size: var(--moduix-heading-font-size-xs, var(--moduix-text-sm));
-      --_heading-line-height: var(--moduix-heading-line-height-xs, var(--moduix-line-height-text-sm));
-    }
-
-    &:is(h5):not([data-size]), &[data-size="sm"] {
-      --_heading-font-size: var(--moduix-heading-font-size-sm, var(--moduix-text-md));
-      --_heading-line-height: var(--moduix-heading-line-height-sm, var(--moduix-line-height-text-md));
-    }
-
-    &:is(h4):not([data-size]), &[data-size="md"] {
-      --_heading-font-size: var(--moduix-heading-font-size-md, var(--moduix-text-lg));
-      --_heading-line-height: var(--moduix-heading-line-height-md, var(--moduix-line-height-text-lg));
-    }
-
-    &:is(h3):not([data-size]), &[data-size="lg"] {
-      --_heading-font-size: var(--moduix-heading-font-size-lg, var(--moduix-text-xl));
-      --_heading-line-height: var(--moduix-heading-line-height-lg, var(--moduix-line-height-text-xl));
-    }
-
-    &:is(h2):not([data-size]), &[data-size="xl"] {
-      --_heading-font-size: var(--moduix-heading-font-size-xl, var(--moduix-text-2xl));
-      --_heading-line-height: var(--moduix-heading-line-height-xl, var(--moduix-line-height-text-2xl));
-    }
-
-    &[data-size="2xl"] {
-      --_heading-font-size: var(--moduix-heading-font-size-2xl, var(--moduix-text-3xl));
-      --_heading-line-height: var(--moduix-heading-line-height-2xl, var(--moduix-line-height-text-3xl));
-    }
-
-    &[data-weight="regular"] {
-      --_heading-font-weight: var(--moduix-heading-font-weight-regular, var(--moduix-weight-regular));
-    }
-
-    &[data-weight="medium"] {
-      --_heading-font-weight: var(--moduix-heading-font-weight-medium, var(--moduix-weight-medium));
-    }
-
-    &[data-weight="bold"] {
-      --_heading-font-weight: var(--moduix-heading-font-weight-bold, var(--moduix-weight-bold));
-    }
-  }
-}

package/dist/components/input/Input.css

@@ -1,84 +0,0 @@
-@layer moduix.components {
-  .wmyYha_root {
-    box-sizing: border-box;
-    width: var(--moduix-input-width, 100%);
-    max-width: var(--moduix-input-max-width, none);
-    min-height: var(--moduix-input-height, var(--moduix-input-height-md, var(--moduix-size-md)));
-    border: var(--moduix-input-border-width, var(--moduix-border-width-sm))
-      var(--moduix-input-border-style, solid)
-      var(--moduix-input-border-color, var(--moduix-color-border));
-    border-radius: var(--moduix-input-radius, var(--moduix-radius-md));
-    padding: var(--moduix-input-padding-y, var(--moduix-input-padding-y-md, var(--moduix-spacing-1)))
-      var(--moduix-input-padding-x, var(--moduix-input-padding-x-md, var(--moduix-spacing-3)));
-    background-color: var(--moduix-input-bg, var(--moduix-color-background));
-    color: var(--moduix-input-color, var(--moduix-color-foreground));
-    font: inherit;
-    font-size: var(--moduix-input-font-size, var(--moduix-input-font-size-md, var(--moduix-text-md)));
-    line-height: var(--moduix-input-line-height, var(--moduix-input-line-height-md, var(--moduix-line-height-text-md)));
-    outline: var(--moduix-input-focus-ring-width, var(--moduix-input-border-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))))
-      solid transparent;
-    outline-offset: var(--moduix-input-focus-ring-offset, calc(0px - var(--moduix-input-border-width, var(--moduix-border-width-sm))));
-    transition: border-color var(--moduix-input-transition, var(--moduix-transition-default)),
-      outline-color var(--moduix-input-transition, var(--moduix-transition-default)),
-      opacity var(--moduix-input-transition, var(--moduix-transition-default));
-    margin: 0;
-
-    &::placeholder {
-      color: var(--moduix-input-placeholder-color, var(--moduix-color-muted-foreground));
-    }
-
-    &:focus-visible {
-      outline-color: var(--moduix-input-focus-ring-color, var(--moduix-color-ring));
-    }
-
-    &:is([data-invalid], [aria-invalid="true"]) {
-      border-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
-
-      &:focus-visible {
-        outline-color: var(--moduix-input-border-color-invalid, var(--moduix-color-destructive));
-      }
-    }
-
-    &:is([data-disabled], :disabled) {
-      pointer-events: none;
-      opacity: var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled));
-    }
-
-    &:is(:read-only, [data-readonly]) {
-      background-color: var(--moduix-input-readonly-bg, var(--moduix-input-bg, var(--moduix-color-background)));
-      color: var(--moduix-input-readonly-color, var(--moduix-input-color, var(--moduix-color-foreground)));
-    }
-
-    &[data-size="xs"] {
-      --moduix-input-height: var(--moduix-input-height-xs, var(--moduix-size-xs));
-      --moduix-input-padding-x: var(--moduix-input-padding-x-xs, var(--moduix-spacing-2));
-      --moduix-input-padding-y: var(--moduix-input-padding-y-xs, var(--moduix-spacing-0-5));
-      --moduix-input-font-size: var(--moduix-input-font-size-xs, var(--moduix-text-xs));
-      --moduix-input-line-height: var(--moduix-input-line-height-xs, var(--moduix-line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      --moduix-input-height: var(--moduix-input-height-sm, var(--moduix-size-sm));
-      --moduix-input-padding-x: var(--moduix-input-padding-x-sm, var(--moduix-spacing-2));
-      --moduix-input-padding-y: var(--moduix-input-padding-y-sm, var(--moduix-spacing-1));
-      --moduix-input-font-size: var(--moduix-input-font-size-sm, var(--moduix-text-sm));
-      --moduix-input-line-height: var(--moduix-input-line-height-sm, var(--moduix-line-height-text-sm));
-    }
-
-    &[data-size="lg"] {
-      --moduix-input-height: var(--moduix-input-height-lg, var(--moduix-size-lg));
-      --moduix-input-padding-x: var(--moduix-input-padding-x-lg, var(--moduix-spacing-4));
-      --moduix-input-padding-y: var(--moduix-input-padding-y-lg, var(--moduix-spacing-1));
-      --moduix-input-font-size: var(--moduix-input-font-size-lg, var(--moduix-text-lg));
-      --moduix-input-line-height: var(--moduix-input-line-height-lg, var(--moduix-line-height-text-lg));
-    }
-
-    &[data-size="xl"] {
-      --moduix-input-height: var(--moduix-input-height-xl, var(--moduix-size-xl));
-      --moduix-input-padding-x: var(--moduix-input-padding-x-xl, var(--moduix-spacing-4));
-      --moduix-input-padding-y: var(--moduix-input-padding-y-xl, var(--moduix-spacing-2));
-      --moduix-input-font-size: var(--moduix-input-font-size-xl, var(--moduix-text-lg));
-      --moduix-input-line-height: var(--moduix-input-line-height-xl, var(--moduix-line-height-text-lg));
-    }
-  }
-}