@entropix/react 1.0.0 → 1.0.1

package/dist/styles/button.css

@@ -1,133 +1 @@
-/* Button — @entropix/react */
-
-.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,119 +1 @@
-/* Checkbox — @entropix/react */
-
-.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,102 +1 @@
-/* Dialog — @entropix/react */
-
-.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,14 +1 @@
-/* Entropix Design System — All Component Styles */
-
-@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,176 +1 @@
-/* Input & Textarea — @entropix/react */
-
-.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)}}