slexkit 0.2.0 → 0.3.0

package/src/styles/components/switch.css

@@ -1,114 +1,114 @@
-.slex-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.slex-switch-event-layer {
-  display: inline-flex;
-}
-
-.slex-choice-event-layer {
-  display: inline-flex;
-}
-
+.slex-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.slex-switch-event-layer {
+  display: inline-flex;
+}
+
+.slex-choice-event-layer {
+  display: inline-flex;
+}
+
 .slex-switch-label {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   min-width: 0;
   color: var(--foreground);
-  font-size: 0.8125rem;
-  font-weight: 500;
-}
-
-.slex-switch-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.slex-switch-control {
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  width: 2.75rem;
-  height: 1.5rem;
-  margin-inline-end: 0;
-  padding: 0;
-  border: 2px solid transparent;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.slex-switch-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.slex-switch-control {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  width: 2.75rem;
+  height: 1.5rem;
+  margin-inline-end: 0;
+  padding: 0;
+  border: 2px solid transparent;
   border-radius: 9999px;
-  background: var(--input);
-  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
-}
-
-.slex-switch-control::after {
-  content: "";
-  display: block;
-  width: 1.25rem;
-  height: 1.25rem;
-  border: 0;
+  background: var(--input);
+  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.slex-switch-control::after {
+  content: "";
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
   border-radius: 9999px;
-  background: var(--background);
-  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 12%, transparent);
-  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
-  transform: translateX(0);
-  will-change: transform;
-}
-
-.slex-switch:hover .slex-switch-control {
-  border-color: color-mix(in oklab, var(--primary) 42%, var(--input));
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
-}
-
-.slex-switch:hover .slex-switch-control::after {
-  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 10%, transparent);
-}
-
-.slex-switch:active .slex-switch-control::after {
-  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 16%, transparent);
-}
-
-.slex-switch-input:checked + .slex-switch-control {
-  border-color: var(--primary);
-  background: var(--primary);
-}
-
-.slex-switch:hover .slex-switch-input:checked + .slex-switch-control {
-  background: color-mix(in oklab, var(--primary) 88%, var(--background));
-}
-
-.slex-switch-input:checked + .slex-switch-control::after {
-  background: var(--background);
-  transform: translateX(1.25rem);
-}
-
-.slexkit-root[dir="rtl"] .slex-switch-input:checked + .slex-switch-control::after {
-  transform: translateX(-1.25rem);
-}
-
-.slex-switch-input:focus-visible + .slex-switch-control {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
-}
-
-.slex-switch-input:disabled + .slex-switch-control {
-  opacity: 0.55;
-}
-
-.slex-switch:has(.slex-switch-input:disabled) {
-  cursor: not-allowed;
-}
-
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
-.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
-  box-shadow: none;
+  background: var(--background);
+  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 12%, transparent);
+  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+  transform: translateX(0);
+  will-change: transform;
+}
+
+.slex-switch:hover .slex-switch-control {
+  border-color: color-mix(in oklab, var(--primary) 42%, var(--input));
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
+}
+
+.slex-switch:hover .slex-switch-control::after {
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 10%, transparent);
+}
+
+.slex-switch:active .slex-switch-control::after {
+  box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 16%, transparent);
+}
+
+.slex-switch-input:checked + .slex-switch-control {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+.slex-switch:hover .slex-switch-input:checked + .slex-switch-control {
+  background: color-mix(in oklab, var(--primary) 88%, var(--background));
+}
+
+.slex-switch-input:checked + .slex-switch-control::after {
+  background: var(--background);
+  transform: translateX(1.25rem);
+}
+
+.slexkit-root[dir="rtl"] .slex-switch-input:checked + .slex-switch-control::after {
+  transform: translateX(-1.25rem);
+}
+
+.slex-switch-input:focus-visible + .slex-switch-control {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent);
+}
+
+.slex-switch-input:disabled + .slex-switch-control {
+  opacity: 0.55;
+}
+
+.slex-switch:has(.slex-switch-input:disabled) {
+  cursor: not-allowed;
+}
+
+.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control,
+.slex-switch:has(.slex-switch-input:disabled):hover .slex-switch-control::after {
+  box-shadow: none;
 }

package/src/styles/components/tabs.css

@@ -1,43 +1,43 @@
-.slex-tabs {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.slex-tabs[data-orientation="vertical"] {
-  flex-direction: row;
-}
-
+.slex-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.slex-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
 .slex-tabs-list {
   --slex-tabs-indicator-inline-inset: 12px;
   --slex-tabs-indicator-block-inset: 8px;
   position: relative;
   display: flex;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: hidden;
-  border-bottom: 1px solid var(--border);
-}
-
-.slexkit-root .slex-tabs-list {
-  display: flex;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.slexkit-root .slex-tabs-list li {
-  margin: 0;
-  padding: 0;
-  color: inherit;
-  font: inherit;
-  line-height: inherit;
-  list-style: none;
-}
-
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+}
+
+.slexkit-root .slex-tabs-list {
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.slexkit-root .slex-tabs-list li {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  list-style: none;
+}
+
 .slex-tabs-selected-indicator {
   position: absolute;
   z-index: 20;
@@ -63,25 +63,25 @@
 .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
   flex-direction: column;
   border-right: 1px solid var(--border);
-  border-bottom: none;
-}
-
-.slex-tabs-trigger {
-  position: relative;
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: var(--muted-foreground);
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
+  border-bottom: none;
+}
+
+.slex-tabs-trigger {
+  position: relative;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
   cursor: pointer;
   outline: none;
   user-select: none;
 }
-
+
 .slex-tabs-trigger--icon {
   display: inline-grid;
   width: var(--slex-control-height, 2.25rem);
@@ -123,17 +123,17 @@
 .slex-tabs-trigger.slex-tabs-trigger--selected:hover:not([data-disabled]) {
   color: var(--primary);
 }
-
-.slex-tabs-trigger[data-disabled] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.slex-tabs-trigger:focus-visible {
-  outline: 2px solid var(--ring);
-  outline-offset: -2px;
-}
-
+
+.slex-tabs-trigger[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.slex-tabs-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
 .slex-tabs-content {
   margin-top: 0.75rem !important;
   border-radius: 0 !important;
@@ -155,38 +155,38 @@
 }
 
 @keyframes slex-tabs-content-in {
-  from {
-    opacity: 0;
-    transform: translateY(2px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.slex-tabs-content[hidden] {
-  display: none;
-}
-
-@media (max-width: 640px) {
-  .slex-tabs-list {
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .slex-tabs-list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .slex-tabs[data-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
-    flex-direction: row;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-  }
-
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slex-tabs-content[hidden] {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .slex-tabs-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .slex-tabs-list::-webkit-scrollbar {
+    display: none;
+  }
+
+  .slex-tabs[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .slex-tabs[data-orientation="vertical"] .slex-tabs-list {
+    flex-direction: row;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
 }

package/src/styles/components/text-input.css

@@ -25,10 +25,13 @@
 }
 
 .slex-input-control {
+  position: relative;
   display: flex;
   align-items: stretch;
   width: 100%;
   min-width: 0;
+  border-radius: var(--radius);
+  transition: box-shadow 150ms ease;
 }
 
 .slex-input {
@@ -82,11 +85,11 @@
 .slex-input-controls {
   box-sizing: border-box;
   display: inline-grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
   align-items: stretch;
   flex: 0 0 auto;
-  width: 3.75rem;
-  min-width: 3.75rem;
+  width: 1.875rem;
+  min-width: 1.875rem;
   min-height: 2.5625rem;
   overflow: hidden;
   border: 1px solid var(--input);
@@ -103,15 +106,15 @@
   justify-content: center;
   width: 100%;
   min-width: 0;
-  min-height: 100%;
+  min-height: 0;
   padding: 0;
   border: 0;
-  border-left: 1px solid var(--input);
+  border-top: 1px solid var(--input);
   border-radius: 0;
   background: transparent;
   color: var(--foreground);
   font: inherit;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   line-height: 1;
   cursor: pointer;
@@ -119,7 +122,7 @@
 }
 
 .slex-input-step:first-child {
-  border-left: 0;
+  border-top: 0;
 }
 
 .slex-input-step:last-child {
@@ -132,9 +135,9 @@
 
 .slex-input-step:focus-visible {
   z-index: 1;
-  border-color: var(--ring);
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+  background: color-mix(in oklab, var(--muted) 58%, var(--background));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ring) 34%, transparent);
 }
 
 .slex-input-step:disabled {
@@ -148,7 +151,7 @@
 
 .slex-input:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
+  box-shadow: none;
 }
 
 .slex-input[type="number"] {
@@ -172,21 +175,21 @@
 
 .slex-input-field[data-invalid="true"] .slex-input:focus {
   border-color: var(--destructive);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
+  box-shadow: none;
 }
 
-.slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--ring);
+.slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
-.slex-input-control:focus-within .slex-input-step {
+.slex-input-control:focus-within .slex-input,
+.slex-input-control:focus-within .slex-input-unit,
+.slex-input-control:focus-within .slex-input-controls {
   border-color: var(--ring);
 }
 
-.slex-input-control:focus-within .slex-input-controls {
+.slex-input-control:focus-within .slex-input-step {
   border-color: var(--ring);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 16%, transparent);
 }
 
 .slex-input-field[data-invalid="true"] .slex-input-unit {
@@ -202,20 +205,17 @@
   border-color: color-mix(in oklab, var(--destructive) 72%, var(--input));
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit {
-  border-color: var(--destructive);
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within {
   box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
 }
 
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input,
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-unit,
+.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls,
 .slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-step {
   border-color: var(--destructive);
 }
 
-.slex-input-field[data-invalid="true"] .slex-input-control:focus-within .slex-input-controls {
-  border-color: var(--destructive);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 18%, transparent);
-}
-
 .slex-input[disabled] {
   opacity: 0.5;
   cursor: not-allowed;