@entropix/react 0.2.0 → 1.0.0

package/dist/styles/input.css

@@ -1,6 +1,15 @@
 /* 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);
@@ -29,14 +38,14 @@
 .entropix-textarea {
   display: block;
   width: 100%;
-  border: 1px solid var(--entropix-color-border-default);
-  border-radius: var(--entropix-radius-md);
-  background: var(--entropix-color-bg-primary);
+  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(--entropix-font-size-sm);
+  font-size: var(--input-font-size);
   line-height: var(--entropix-line-height-normal);
-  padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
+  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),
@@ -53,13 +62,13 @@
 .entropix-input:focus,
 .entropix-textarea:focus {
   outline: none;
-  border-color: var(--entropix-color-border-focus);
-  box-shadow: 0 0 0 1px var(--entropix-color-border-focus);
+  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(--entropix-color-border-focus);
+  outline: 2px solid var(--input-focus-color);
   outline-offset: 2px;
 }
 
@@ -80,8 +89,8 @@
 
 .entropix-input[data-variant="filled"]:focus,
 .entropix-textarea[data-variant="filled"]:focus {
-  background: var(--entropix-color-bg-primary);
-  border-color: var(--entropix-color-border-focus);
+  background: var(--input-bg);
+  border-color: var(--input-focus-color);
 }
 
 /* === Sizes === */
@@ -95,8 +104,8 @@
 
 .entropix-input[data-size="md"],
 .entropix-textarea[data-size="md"] {
-  padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
-  font-size: var(--entropix-font-size-sm);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  font-size: var(--input-font-size);
 }
 
 .entropix-input[data-size="lg"],
@@ -110,13 +119,13 @@
 
 .entropix-input[data-state="invalid"],
 .entropix-textarea[data-state="invalid"] {
-  border-color: var(--entropix-color-border-danger);
+  border-color: var(--input-error-color);
 }
 
 .entropix-input[data-state="invalid"]:focus,
 .entropix-textarea[data-state="invalid"]:focus {
-  border-color: var(--entropix-color-border-danger);
-  box-shadow: 0 0 0 1px var(--entropix-color-border-danger);
+  border-color: var(--input-error-color);
+  box-shadow: 0 0 0 1px var(--input-error-color);
 }
 
 .entropix-input:disabled,

package/dist/styles/layout.css

@@ -103,7 +103,7 @@
 .entropix-divider--vertical.entropix-divider--spacing-lg { margin: 0 var(--entropix-spacing-6); }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   RESPONSIVE — Tablet and up (≥768px)
+   RESPONSIVE — Tablet and up (>=768px)
    ═══════════════════════════════════════════════════════════════════════════ */
 
 @media (min-width: 768px) {
@@ -114,7 +114,7 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   RESPONSIVE — Desktop and up (≥1024px)
+   RESPONSIVE — Desktop and up (>=1024px)
    ═══════════════════════════════════════════════════════════════════════════ */
 
 @media (min-width: 1024px) {

package/dist/styles/radio.css

@@ -17,6 +17,11 @@
 /* === Radio Item === */
 
 .entropix-radio-item {
+  --radio-size: 20px;
+  --radio-border-color: var(--entropix-color-border-default);
+  --radio-checked-color: var(--entropix-color-action-primary-default);
+  --radio-dot-size: 10px;
+
   display: inline-flex;
   align-items: center;
   gap: var(--entropix-spacing-2);
@@ -37,9 +42,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--entropix-color-border-default);
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border: 2px solid var(--radio-border-color);
   border-radius: 50%;
   background: var(--entropix-color-bg-primary);
   flex-shrink: 0;
@@ -49,17 +54,17 @@
 }
 
 .entropix-radio-item__indicator[data-state="checked"] {
-  border-color: var(--entropix-color-action-primary-default);
+  border-color: var(--radio-checked-color);
 }
 
 /* Inner filled circle via ::after */
 .entropix-radio-item__indicator[data-state="checked"]::after {
   content: "";
   display: block;
-  width: 8px;
-  height: 8px;
+  width: var(--radio-dot-size);
+  height: var(--radio-dot-size);
   border-radius: 50%;
-  background: var(--entropix-color-action-primary-default);
+  background: var(--radio-checked-color);
 }
 
 /* === Label === */

package/dist/styles/select.css

@@ -1,6 +1,11 @@
 /* Select — @entropix/react */
 
 .entropix-select {
+  --select-border-color: var(--entropix-color-border-default);
+  --select-border-radius: var(--entropix-radius-md);
+  --select-bg: var(--entropix-color-bg-primary);
+  --select-dropdown-shadow: var(--entropix-shadow-lg);
+
   display: flex;
   flex-direction: column;
   gap: var(--entropix-spacing-1);
@@ -27,9 +32,9 @@
   justify-content: space-between;
   gap: var(--entropix-spacing-2);
   width: 100%;
-  border: 1px solid var(--entropix-color-border-default);
-  border-radius: var(--entropix-radius-md);
-  background: var(--entropix-color-bg-primary);
+  border: 1px solid var(--select-border-color);
+  border-radius: var(--select-border-radius);
+  background: var(--select-bg);
   color: var(--entropix-color-text-primary);
   font-family: var(--entropix-font-family-sans);
   font-size: var(--entropix-font-size-sm);
@@ -87,12 +92,10 @@
   right: 0;
   z-index: 50;
   margin-top: var(--entropix-spacing-1);
-  border: 1px solid var(--entropix-color-border-default);
-  border-radius: var(--entropix-radius-md);
-  background: var(--entropix-color-bg-primary);
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--select-border-color);
+  border-radius: var(--select-border-radius);
+  background: var(--select-bg);
+  box-shadow: var(--select-dropdown-shadow);
   padding: var(--entropix-spacing-1) 0;
   max-height: 240px;
   overflow-y: auto;

package/dist/styles/switch.css

@@ -12,6 +12,9 @@
   background: var(--entropix-color-gray-300);
   cursor: pointer;
   transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
+  font-size: 0;
+  color: transparent;
+  overflow: hidden;
 }
 
 .entropix-switch::after {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entropix/react",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "React (Web) components for the Entropix design system — styled with CSS custom properties and design tokens",
   "type": "module",
   "license": "MIT",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@entropix/core": "0.2.0"
+    "@entropix/core": "1.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",