@entropix/react 0.3.0 → 1.0.1

package/dist/styles/button.css

@@ -1,135 +1 @@
-/* Button — @entropix/react */
-
-@layer entropix {
-  .entropix-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--entropix-button-gap);
-    border: 1px solid transparent;
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-button-font-size);
-    font-weight: var(--entropix-button-font-weight);
-    line-height: var(--entropix-button-line-height);
-    border-radius: var(--entropix-button-border-radius);
-    padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
-    cursor: pointer;
-    text-decoration: none;
-    user-select: none;
-    transition:
-      background var(--entropix-duration-fast) var(--entropix-easing-default),
-      color var(--entropix-duration-fast) var(--entropix-easing-default),
-      border-color var(--entropix-duration-fast) var(--entropix-easing-default),
-      box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
-  }
-
-  /* === Variants === */
-
-  .entropix-button--primary {
-    background: var(--entropix-button-primary-bg);
-    color: var(--entropix-button-primary-text);
-    border-color: var(--entropix-button-primary-border);
-  }
-  .entropix-button--primary:hover:not(:disabled) {
-    background: var(--entropix-button-primary-bg-hover);
-  }
-  .entropix-button--primary:active:not(:disabled) {
-    background: var(--entropix-button-primary-bg-active);
-  }
-
-  .entropix-button--secondary {
-    background: var(--entropix-button-secondary-bg);
-    color: var(--entropix-button-secondary-text);
-    border-color: var(--entropix-button-secondary-border);
-  }
-  .entropix-button--secondary:hover:not(:disabled) {
-    background: var(--entropix-button-secondary-bg-hover);
-  }
-  .entropix-button--secondary:active:not(:disabled) {
-    background: var(--entropix-button-secondary-bg-active);
-  }
-
-  .entropix-button--outline {
-    background: transparent;
-    color: var(--entropix-color-text-primary);
-    border-color: var(--entropix-color-border-default);
-  }
-  .entropix-button--outline:hover:not(:disabled) {
-    background: var(--entropix-color-action-secondary-hover);
-  }
-  .entropix-button--outline:active:not(:disabled) {
-    background: var(--entropix-color-action-secondary-active);
-  }
-
-  .entropix-button--ghost {
-    background: transparent;
-    color: var(--entropix-color-text-primary);
-    border-color: transparent;
-  }
-  .entropix-button--ghost:hover:not(:disabled) {
-    background: var(--entropix-color-action-secondary-default);
-  }
-  .entropix-button--ghost:active:not(:disabled) {
-    background: var(--entropix-color-action-secondary-hover);
-  }
-
-  .entropix-button--danger {
-    background: var(--entropix-button-danger-bg);
-    color: var(--entropix-button-danger-text);
-    border-color: var(--entropix-button-danger-border);
-  }
-  .entropix-button--danger:hover:not(:disabled) {
-    background: var(--entropix-button-danger-bg-hover);
-  }
-  .entropix-button--danger:active:not(:disabled) {
-    background: var(--entropix-button-danger-bg-active);
-  }
-
-  /* === Sizes === */
-
-  .entropix-button--sm {
-    padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
-    font-size: var(--entropix-font-size-xs);
-    border-radius: var(--entropix-radius-sm);
-  }
-
-  .entropix-button--md {
-    padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
-    font-size: var(--entropix-button-font-size);
-  }
-
-  .entropix-button--lg {
-    padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
-    font-size: var(--entropix-font-size-base);
-    border-radius: var(--entropix-radius-lg);
-  }
-
-  /* === States === */
-
-  .entropix-button:disabled,
-  .entropix-button[data-state="disabled"],
-  .entropix-button[data-state="loading"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .entropix-button:focus-visible {
-    outline: 2px solid var(--entropix-color-border-focus);
-    outline-offset: 2px;
-  }
-
-  /* === Responsive — Touch-friendly sizing on mobile === */
-
-  @media (max-width: 767px) {
-    .entropix-button {
-      min-height: 44px;
-    }
-
-    .entropix-button--sm {
-      min-height: 36px;
-      padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
-      font-size: var(--entropix-font-size-sm);
-    }
-  }
-}
+.entropix-button{justify-content:center;align-items:center;gap:var(--entropix-button-gap);font-family:var(--entropix-font-family-sans);font-size:var(--entropix-button-font-size);font-weight:var(--entropix-button-font-weight);line-height:var(--entropix-button-line-height);border-radius:var(--entropix-button-border-radius);padding:var(--entropix-button-padding-y) var(--entropix-button-padding-x);cursor:pointer;user-select:none;transition:background var(--entropix-duration-fast) var(--entropix-easing-default), color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);border:1px solid #0000;text-decoration:none;display:inline-flex}.entropix-button--primary{background:var(--entropix-button-primary-bg);color:var(--entropix-button-primary-text);border-color:var(--entropix-button-primary-border)}.entropix-button--primary:hover:not(:disabled){background:var(--entropix-button-primary-bg-hover)}.entropix-button--primary:active:not(:disabled){background:var(--entropix-button-primary-bg-active)}.entropix-button--secondary{background:var(--entropix-button-secondary-bg);color:var(--entropix-button-secondary-text);border-color:var(--entropix-button-secondary-border)}.entropix-button--secondary:hover:not(:disabled){background:var(--entropix-button-secondary-bg-hover)}.entropix-button--secondary:active:not(:disabled){background:var(--entropix-button-secondary-bg-active)}.entropix-button--outline{color:var(--entropix-color-text-primary);border-color:var(--entropix-color-border-default);background:0 0}.entropix-button--outline:hover:not(:disabled){background:var(--entropix-color-action-secondary-hover)}.entropix-button--outline:active:not(:disabled){background:var(--entropix-color-action-secondary-active)}.entropix-button--ghost{color:var(--entropix-color-text-primary);background:0 0;border-color:#0000}.entropix-button--ghost:hover:not(:disabled){background:var(--entropix-color-action-secondary-default)}.entropix-button--ghost:active:not(:disabled){background:var(--entropix-color-action-secondary-hover)}.entropix-button--danger{background:var(--entropix-button-danger-bg);color:var(--entropix-button-danger-text);border-color:var(--entropix-button-danger-border)}.entropix-button--danger:hover:not(:disabled){background:var(--entropix-button-danger-bg-hover)}.entropix-button--danger:active:not(:disabled){background:var(--entropix-button-danger-bg-active)}.entropix-button--sm{padding:var(--entropix-spacing-1) var(--entropix-spacing-3);font-size:var(--entropix-font-size-xs);border-radius:var(--entropix-radius-sm)}.entropix-button--md{padding:var(--entropix-button-padding-y) var(--entropix-button-padding-x);font-size:var(--entropix-button-font-size)}.entropix-button--lg{padding:var(--entropix-spacing-3) var(--entropix-spacing-6);font-size:var(--entropix-font-size-base);border-radius:var(--entropix-radius-lg)}.entropix-button:disabled,.entropix-button[data-state=disabled],.entropix-button[data-state=loading]{opacity:.5;cursor:not-allowed;pointer-events:none}.entropix-button:focus-visible{outline:2px solid var(--entropix-color-border-focus);outline-offset:2px}@media (width<=767px){.entropix-button{min-height:44px}.entropix-button--sm{min-height:36px;padding:var(--entropix-spacing-2) var(--entropix-spacing-3);font-size:var(--entropix-font-size-sm)}}

package/dist/styles/checkbox.css

@@ -1,121 +1 @@
-/* Checkbox — @entropix/react */
-
-@layer entropix {
-  .entropix-checkbox {
-    --checkbox-size: 18px;
-    --checkbox-border-color: var(--entropix-color-border-default);
-    --checkbox-checked-bg: var(--entropix-color-action-primary-default);
-    --checkbox-checked-border: var(--entropix-color-action-primary-default);
-    --checkbox-border-radius: var(--entropix-radius-sm);
-
-    display: inline-flex;
-    align-items: center;
-    gap: var(--entropix-spacing-2);
-    padding: var(--entropix-spacing-1) 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    user-select: none;
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-font-size-sm);
-    color: var(--entropix-color-text-primary);
-    line-height: var(--entropix-line-height-normal);
-  }
-
-  /* === Indicator === */
-
-  .entropix-checkbox__indicator {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--checkbox-size);
-    height: var(--checkbox-size);
-    border: 2px solid var(--checkbox-border-color);
-    border-radius: var(--checkbox-border-radius);
-    background: var(--entropix-color-bg-primary);
-    flex-shrink: 0;
-    transition:
-      background var(--entropix-duration-fast) var(--entropix-easing-default),
-      border-color var(--entropix-duration-fast) var(--entropix-easing-default);
-  }
-
-  .entropix-checkbox__indicator[data-state="checked"],
-  .entropix-checkbox__indicator[data-state="indeterminate"] {
-    background: var(--checkbox-checked-bg);
-    border-color: var(--checkbox-checked-border);
-  }
-
-  /* Checkmark via ::after pseudo-element */
-  .entropix-checkbox__indicator[data-state="checked"]::after {
-    content: "";
-    display: block;
-    width: 5px;
-    height: 9px;
-    border: solid var(--entropix-color-text-inverse);
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    margin-top: -1px;
-  }
-
-  /* Indeterminate minus via ::after pseudo-element */
-  .entropix-checkbox__indicator[data-state="indeterminate"]::after {
-    content: "";
-    display: block;
-    width: 8px;
-    height: 2px;
-    background: var(--entropix-color-text-inverse);
-    border-radius: 1px;
-  }
-
-  /* === Label === */
-
-  .entropix-checkbox__label {
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-font-size-sm);
-    color: var(--entropix-color-text-primary);
-    line-height: var(--entropix-line-height-normal);
-  }
-
-  /* === Hover === */
-
-  .entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
-    border-color: var(--entropix-color-border-hover);
-  }
-
-  .entropix-checkbox:hover:not(:disabled)
-    .entropix-checkbox__indicator[data-state="checked"],
-  .entropix-checkbox:hover:not(:disabled)
-    .entropix-checkbox__indicator[data-state="indeterminate"] {
-    background: var(--entropix-color-action-primary-hover);
-    border-color: var(--entropix-color-action-primary-hover);
-  }
-
-  /* === Focus === */
-
-  .entropix-checkbox:focus-visible {
-    outline: 2px solid var(--entropix-color-border-focus);
-    outline-offset: 2px;
-    border-radius: var(--checkbox-border-radius);
-  }
-
-  /* === Disabled === */
-
-  .entropix-checkbox:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* === Responsive — Touch-friendly sizing on mobile === */
-
-  @media (max-width: 767px) {
-    .entropix-checkbox {
-      min-height: 44px;
-    }
-
-    .entropix-checkbox__indicator {
-      width: 22px;
-      height: 22px;
-    }
-  }
-}
+.entropix-checkbox{--checkbox-size:18px;--checkbox-border-color:var(--entropix-color-border-default);--checkbox-checked-bg:var(--entropix-color-action-primary-default);--checkbox-checked-border:var(--entropix-color-action-primary-default);--checkbox-border-radius:var(--entropix-radius-sm);align-items:center;gap:var(--entropix-spacing-2);padding:var(--entropix-spacing-1) 0;cursor:pointer;user-select:none;font-family:var(--entropix-font-family-sans);font-size:var(--entropix-font-size-sm);color:var(--entropix-color-text-primary);line-height:var(--entropix-line-height-normal);background:0 0;border:none;display:inline-flex}.entropix-checkbox__indicator{width:var(--checkbox-size);height:var(--checkbox-size);border:2px solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);background:var(--entropix-color-bg-primary);transition:background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.entropix-checkbox__indicator[data-state=checked],.entropix-checkbox__indicator[data-state=indeterminate]{background:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}.entropix-checkbox__indicator[data-state=checked]:after{content:"";border:solid var(--entropix-color-text-inverse);border-width:0 2px 2px 0;width:5px;height:9px;margin-top:-1px;display:block;transform:rotate(45deg)}.entropix-checkbox__indicator[data-state=indeterminate]:after{content:"";background:var(--entropix-color-text-inverse);border-radius:1px;width:8px;height:2px;display:block}.entropix-checkbox__label{font-family:var(--entropix-font-family-sans);font-size:var(--entropix-font-size-sm);color:var(--entropix-color-text-primary);line-height:var(--entropix-line-height-normal)}.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator{border-color:var(--entropix-color-border-hover)}.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate]{background:var(--entropix-color-action-primary-hover);border-color:var(--entropix-color-action-primary-hover)}.entropix-checkbox:focus-visible{outline:2px solid var(--entropix-color-border-focus);outline-offset:2px;border-radius:var(--checkbox-border-radius)}.entropix-checkbox:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}@media (width<=767px){.entropix-checkbox{min-height:44px}.entropix-checkbox__indicator{width:22px;height:22px}}

package/dist/styles/dialog.css

@@ -1,104 +1 @@
-/* Dialog — @entropix/react */
-
-@layer entropix {
-  .entropix-dialog-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 50;
-  }
-
-  .entropix-dialog-content {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--entropix-color-bg-primary);
-    border-radius: var(--entropix-radius-lg);
-    box-shadow: var(--entropix-shadow-xl);
-    padding: var(--entropix-spacing-6);
-    z-index: 51;
-    max-width: 480px;
-    width: 90vw;
-    max-height: 85vh;
-    overflow-y: auto;
-  }
-
-  .entropix-dialog-content:focus {
-    outline: none;
-  }
-
-  .entropix-dialog-title {
-    margin: 0;
-    margin-bottom: var(--entropix-spacing-2);
-    font-family: var(--entropix-text-heading-md-font-family);
-    font-size: var(--entropix-text-heading-md-font-size);
-    font-weight: var(--entropix-text-heading-md-font-weight);
-    line-height: var(--entropix-text-heading-md-line-height);
-    color: var(--entropix-color-text-primary);
-  }
-
-  .entropix-dialog-description {
-    margin: 0;
-    margin-bottom: var(--entropix-spacing-4);
-    font-family: var(--entropix-text-body-md-font-family);
-    font-size: var(--entropix-text-body-md-font-size);
-    font-weight: var(--entropix-text-body-md-font-weight);
-    line-height: var(--entropix-text-body-md-line-height);
-    color: var(--entropix-color-text-secondary);
-  }
-
-  .entropix-dialog-close {
-    position: absolute;
-    top: var(--entropix-spacing-3);
-    right: var(--entropix-spacing-3);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    border: none;
-    border-radius: var(--entropix-radius-sm);
-    background: transparent;
-    color: var(--entropix-color-text-secondary);
-    cursor: pointer;
-    transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
-  }
-
-  .entropix-dialog-close:hover {
-    background: var(--entropix-color-action-secondary-default);
-  }
-
-  .entropix-dialog-close:focus-visible {
-    outline: 2px solid var(--entropix-color-border-focus);
-    outline-offset: 2px;
-  }
-
-  .entropix-dialog-trigger {
-    /* Inherits button styles if also .entropix-button */
-  }
-
-  /* === Responsive — Full-width bottom sheet on mobile === */
-
-  @media (max-width: 767px) {
-    .entropix-dialog-content {
-      top: auto;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      transform: none;
-      width: 100%;
-      max-width: 100%;
-      border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
-      max-height: 90vh;
-      padding: var(--entropix-spacing-5);
-    }
-  }
-
-  @media (min-width: 768px) {
-    .entropix-dialog-content {
-      max-width: 560px;
-    }
-  }
-}
+.entropix-dialog-overlay{z-index:50;background:#00000080;position:fixed;inset:0}.entropix-dialog-content{background:var(--entropix-color-bg-primary);border-radius:var(--entropix-radius-lg);box-shadow:var(--entropix-shadow-xl);padding:var(--entropix-spacing-6);z-index:51;width:90vw;max-width:480px;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}.entropix-dialog-content:focus{outline:none}.entropix-dialog-title{margin:0;margin-bottom:var(--entropix-spacing-2);font-family:var(--entropix-text-heading-md-font-family);font-size:var(--entropix-text-heading-md-font-size);font-weight:var(--entropix-text-heading-md-font-weight);line-height:var(--entropix-text-heading-md-line-height);color:var(--entropix-color-text-primary)}.entropix-dialog-description{margin:0;margin-bottom:var(--entropix-spacing-4);font-family:var(--entropix-text-body-md-font-family);font-size:var(--entropix-text-body-md-font-size);font-weight:var(--entropix-text-body-md-font-weight);line-height:var(--entropix-text-body-md-line-height);color:var(--entropix-color-text-secondary)}.entropix-dialog-close{top:var(--entropix-spacing-3);right:var(--entropix-spacing-3);border-radius:var(--entropix-radius-sm);width:32px;height:32px;color:var(--entropix-color-text-secondary);cursor:pointer;transition:background var(--entropix-duration-fast) var(--entropix-easing-default);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}.entropix-dialog-close:hover{background:var(--entropix-color-action-secondary-default)}.entropix-dialog-close:focus-visible{outline:2px solid var(--entropix-color-border-focus);outline-offset:2px}@media (width<=767px){.entropix-dialog-content{border-radius:var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;width:100%;max-width:100%;max-height:90vh;padding:var(--entropix-spacing-5);inset:auto 0 0;transform:none}}@media (width>=768px){.entropix-dialog-content{max-width:560px}}

package/dist/styles/index.css

@@ -1,16 +1 @@
-/* Entropix Design System — All Component Styles */
-
-@layer entropix;
-
-@import "./button.css";
-@import "./toggle.css";
-@import "./switch.css";
-@import "./tabs.css";
-@import "./accordion.css";
-@import "./dialog.css";
-@import "./menu.css";
-@import "./input.css";
-@import "./checkbox.css";
-@import "./radio.css";
-@import "./select.css";
-@import "./layout.css";
+@import "./button.css";@import "./toggle.css";@import "./switch.css";@import "./tabs.css";@import "./accordion.css";@import "./dialog.css";@import "./menu.css";@import "./input.css";@import "./checkbox.css";@import "./radio.css";@import "./select.css";@import "./layout.css";

package/dist/styles/input.css

@@ -1,178 +1 @@
-/* Input & Textarea — @entropix/react */
-
-@layer entropix {
-  .entropix-input-wrapper {
-    --input-border-color: var(--entropix-color-border-default);
-    --input-border-radius: var(--entropix-radius-md);
-    --input-bg: var(--entropix-color-bg-primary);
-    --input-font-size: var(--entropix-font-size-sm);
-    --input-padding-y: var(--entropix-spacing-2);
-    --input-padding-x: var(--entropix-spacing-3);
-    --input-focus-color: var(--entropix-color-border-focus);
-    --input-error-color: var(--entropix-color-border-danger);
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--entropix-spacing-1);
-    width: 100%;
-  }
-
-  /* === Label === */
-
-  .entropix-input-label {
-    display: block;
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-font-size-sm);
-    font-weight: var(--entropix-font-weight-medium);
-    color: var(--entropix-color-text-primary);
-    line-height: var(--entropix-line-height-normal);
-  }
-
-  .entropix-input-required {
-    color: var(--entropix-color-text-danger);
-    margin-left: var(--entropix-spacing-1);
-  }
-
-  /* === Shared Input / Textarea base === */
-
-  .entropix-input,
-  .entropix-textarea {
-    display: block;
-    width: 100%;
-    border: 1px solid var(--input-border-color);
-    border-radius: var(--input-border-radius);
-    background: var(--input-bg);
-    color: var(--entropix-color-text-primary);
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--input-font-size);
-    line-height: var(--entropix-line-height-normal);
-    padding: var(--input-padding-y) var(--input-padding-x);
-    transition:
-      border-color var(--entropix-duration-fast) var(--entropix-easing-default),
-      box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
-      background var(--entropix-duration-fast) var(--entropix-easing-default);
-  }
-
-  .entropix-input::placeholder,
-  .entropix-textarea::placeholder {
-    color: var(--entropix-color-text-tertiary);
-  }
-
-  /* === Focus === */
-
-  .entropix-input:focus,
-  .entropix-textarea:focus {
-    outline: none;
-    border-color: var(--input-focus-color);
-    box-shadow: 0 0 0 1px var(--input-focus-color);
-  }
-
-  .entropix-input:focus-visible,
-  .entropix-textarea:focus-visible {
-    outline: 2px solid var(--input-focus-color);
-    outline-offset: 2px;
-  }
-
-  /* === Hover === */
-
-  .entropix-input:hover:not(:disabled):not(:focus),
-  .entropix-textarea:hover:not(:disabled):not(:focus) {
-    border-color: var(--entropix-color-border-hover);
-  }
-
-  /* === Variants === */
-
-  .entropix-input[data-variant="filled"],
-  .entropix-textarea[data-variant="filled"] {
-    background: var(--entropix-color-bg-secondary);
-    border-color: transparent;
-  }
-
-  .entropix-input[data-variant="filled"]:focus,
-  .entropix-textarea[data-variant="filled"]:focus {
-    background: var(--input-bg);
-    border-color: var(--input-focus-color);
-  }
-
-  /* === Sizes === */
-
-  .entropix-input[data-size="sm"],
-  .entropix-textarea[data-size="sm"] {
-    padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
-    font-size: var(--entropix-font-size-xs);
-    border-radius: var(--entropix-radius-sm);
-  }
-
-  .entropix-input[data-size="md"],
-  .entropix-textarea[data-size="md"] {
-    padding: var(--input-padding-y) var(--input-padding-x);
-    font-size: var(--input-font-size);
-  }
-
-  .entropix-input[data-size="lg"],
-  .entropix-textarea[data-size="lg"] {
-    padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
-    font-size: var(--entropix-font-size-base);
-    border-radius: var(--entropix-radius-lg);
-  }
-
-  /* === States === */
-
-  .entropix-input[data-state="invalid"],
-  .entropix-textarea[data-state="invalid"] {
-    border-color: var(--input-error-color);
-  }
-
-  .entropix-input[data-state="invalid"]:focus,
-  .entropix-textarea[data-state="invalid"]:focus {
-    border-color: var(--input-error-color);
-    box-shadow: 0 0 0 1px var(--input-error-color);
-  }
-
-  .entropix-input:disabled,
-  .entropix-textarea:disabled,
-  .entropix-input[data-state="disabled"],
-  .entropix-textarea[data-state="disabled"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* === Helper & Error text === */
-
-  .entropix-input-helper {
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-font-size-xs);
-    color: var(--entropix-color-text-secondary);
-    line-height: var(--entropix-line-height-normal);
-  }
-
-  .entropix-input-error {
-    font-family: var(--entropix-font-family-sans);
-    font-size: var(--entropix-font-size-xs);
-    color: var(--entropix-color-text-danger);
-    line-height: var(--entropix-line-height-normal);
-  }
-
-  /* === Textarea specific === */
-
-  .entropix-textarea {
-    min-height: 80px;
-  }
-
-  /* === Responsive — Touch-friendly sizing on mobile === */
-
-  @media (max-width: 767px) {
-    .entropix-input,
-    .entropix-textarea {
-      min-height: 44px;
-      font-size: var(--entropix-font-size-base);
-    }
-
-    .entropix-input[data-size="sm"],
-    .entropix-textarea[data-size="sm"] {
-      min-height: 36px;
-      font-size: var(--entropix-font-size-sm);
-    }
-  }
-}
+.entropix-input-wrapper{--input-border-color:var(--entropix-color-border-default);--input-border-radius:var(--entropix-radius-md);--input-bg:var(--entropix-color-bg-primary);--input-font-size:var(--entropix-font-size-sm);--input-padding-y:var(--entropix-spacing-2);--input-padding-x:var(--entropix-spacing-3);--input-focus-color:var(--entropix-color-border-focus);--input-error-color:var(--entropix-color-border-danger);gap:var(--entropix-spacing-1);flex-direction:column;width:100%;display:flex}.entropix-input-label{font-family:var(--entropix-font-family-sans);font-size:var(--entropix-font-size-sm);font-weight:var(--entropix-font-weight-medium);color:var(--entropix-color-text-primary);line-height:var(--entropix-line-height-normal);display:block}.entropix-input-required{color:var(--entropix-color-text-danger);margin-left:var(--entropix-spacing-1)}.entropix-input,.entropix-textarea{border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);background:var(--input-bg);width:100%;color:var(--entropix-color-text-primary);font-family:var(--entropix-font-family-sans);font-size:var(--input-font-size);line-height:var(--entropix-line-height-normal);padding:var(--input-padding-y) var(--input-padding-x);transition:border-color var(--entropix-duration-fast) var(--entropix-easing-default), box-shadow var(--entropix-duration-fast) var(--entropix-easing-default), background var(--entropix-duration-fast) var(--entropix-easing-default);display:block}.entropix-input::placeholder,.entropix-textarea::placeholder{color:var(--entropix-color-text-tertiary)}.entropix-input:focus,.entropix-textarea:focus{border-color:var(--input-focus-color);box-shadow:0 0 0 1px var(--input-focus-color);outline:none}.entropix-input:focus-visible,.entropix-textarea:focus-visible{outline:2px solid var(--input-focus-color);outline-offset:2px}.entropix-input:hover:not(:disabled):not(:focus),.entropix-textarea:hover:not(:disabled):not(:focus){border-color:var(--entropix-color-border-hover)}.entropix-input[data-variant=filled],.entropix-textarea[data-variant=filled]{background:var(--entropix-color-bg-secondary);border-color:#0000}.entropix-input[data-variant=filled]:focus,.entropix-textarea[data-variant=filled]:focus{background:var(--input-bg);border-color:var(--input-focus-color)}.entropix-input[data-size=sm],.entropix-textarea[data-size=sm]{padding:var(--entropix-spacing-1) var(--entropix-spacing-2);font-size:var(--entropix-font-size-xs);border-radius:var(--entropix-radius-sm)}.entropix-input[data-size=md],.entropix-textarea[data-size=md]{padding:var(--input-padding-y) var(--input-padding-x);font-size:var(--input-font-size)}.entropix-input[data-size=lg],.entropix-textarea[data-size=lg]{padding:var(--entropix-spacing-3) var(--entropix-spacing-4);font-size:var(--entropix-font-size-base);border-radius:var(--entropix-radius-lg)}.entropix-input[data-state=invalid],.entropix-textarea[data-state=invalid]{border-color:var(--input-error-color)}.entropix-input[data-state=invalid]:focus,.entropix-textarea[data-state=invalid]:focus{border-color:var(--input-error-color);box-shadow:0 0 0 1px var(--input-error-color)}.entropix-input:disabled,.entropix-textarea:disabled,.entropix-input[data-state=disabled],.entropix-textarea[data-state=disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.entropix-input-helper{font-family:var(--entropix-font-family-sans);font-size:var(--entropix-font-size-xs);color:var(--entropix-color-text-secondary);line-height:var(--entropix-line-height-normal)}.entropix-input-error{font-family:var(--entropix-font-family-sans);font-size:var(--entropix-font-size-xs);color:var(--entropix-color-text-danger);line-height:var(--entropix-line-height-normal)}.entropix-textarea{min-height:80px}@media (width<=767px){.entropix-input,.entropix-textarea{min-height:44px;font-size:var(--entropix-font-size-base)}.entropix-input[data-size=sm],.entropix-textarea[data-size=sm]{min-height:36px;font-size:var(--entropix-font-size-sm)}}