@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/core/inputs.css

@@ -0,0 +1,117 @@
+/* ============================================
+   Text Inputs - Core UI Element
+
+   This is the authoritative source for all text input styles.
+   Usage: Apply .semiont-input to <input type="text">, <input type="email">, etc.
+
+   Available modifiers:
+   - .semiont-input--small (reduced padding)
+   - .semiont-input--large (increased padding)
+   ============================================ */
+
+/* Base Input Styling */
+.semiont-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: var(--semiont-radius-md);
+  font-size: var(--semiont-text-sm);
+  font-family: inherit;
+  line-height: 1.5;
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+[data-theme="dark"] .semiont-input {
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  border-color: var(--semiont-color-gray-700);
+}
+
+/* Focus State - keyboard navigation */
+.semiont-input:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -1px;
+  border-color: var(--semiont-color-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .semiont-input:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+  border-color: var(--semiont-color-primary-400);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* Remove default focus for mouse users */
+.semiont-input:focus:not(:focus-visible) {
+  outline: none;
+  border-color: var(--semiont-color-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .semiont-input:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .semiont-input:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Invalid State */
+.semiont-input[aria-invalid="true"] {
+  border-color: var(--semiont-color-red-500);
+}
+
+[data-theme="dark"] .semiont-input[aria-invalid="true"] {
+  border-color: var(--semiont-color-red-400);
+}
+
+.semiont-input[aria-invalid="true"]:focus-visible {
+  outline: 2px solid var(--semiont-color-red-500);
+  outline-offset: -1px;
+  border-color: var(--semiont-color-red-500);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+[data-theme="dark"] .semiont-input[aria-invalid="true"]:focus-visible {
+  outline-color: var(--semiont-color-red-400);
+  border-color: var(--semiont-color-red-400);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+/* Disabled State */
+.semiont-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-input:disabled {
+  background-color: var(--semiont-color-gray-800);
+}
+
+/* Size Variants */
+.semiont-input--small {
+  padding: 0.375rem 0.5rem;
+  font-size: var(--semiont-text-xs);
+}
+
+.semiont-input--large {
+  padding: 0.75rem 1rem;
+  font-size: var(--semiont-text-base);
+}
+
+/* Placeholder */
+.semiont-input::placeholder {
+  color: var(--semiont-text-tertiary);
+  opacity: 0.6;
+}
+
+[data-theme="dark"] .semiont-input::placeholder {
+  color: var(--semiont-text-tertiary);
+  opacity: 0.5;
+}

package/src/styles/core/progress.css

@@ -0,0 +1,170 @@
+/* ============================================
+   Progress Bars - Core UI Element
+
+   This is the authoritative source for all progress bar styles.
+   Usage: Apply .semiont-progress to container and .semiont-progress__fill to the fill element.
+
+   Available modifiers:
+   - .semiont-progress--small (height: 0.25rem)
+   - .semiont-progress--large (height: 1rem)
+   - .semiont-progress--striped (animated stripes)
+   ============================================ */
+
+/* Base Progress Bar Container */
+.semiont-progress {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-full);
+  overflow: hidden;
+}
+
+[data-theme="dark"] .semiont-progress {
+  background-color: var(--semiont-bg-tertiary);
+}
+
+/* Progress Fill */
+.semiont-progress__fill {
+  height: 100%;
+  background-color: var(--semiont-color-primary-500);
+  transition: width 0.3s ease;
+}
+
+[data-theme="dark"] .semiont-progress__fill {
+  background-color: var(--semiont-color-primary-500);
+}
+
+/* Size Variants */
+.semiont-progress--small {
+  height: 0.25rem;
+}
+
+.semiont-progress--large {
+  height: 1rem;
+}
+
+/* Striped Variant */
+.semiont-progress--striped .semiont-progress__fill {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+  animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Color Variants */
+.semiont-progress__fill--success {
+  background-color: var(--semiont-color-success);
+}
+
+[data-theme="dark"] .semiont-progress__fill--success {
+  background-color: var(--semiont-color-success);
+}
+
+.semiont-progress__fill--warning {
+  background-color: var(--semiont-color-warning);
+}
+
+[data-theme="dark"] .semiont-progress__fill--warning {
+  background-color: var(--semiont-color-warning);
+}
+
+.semiont-progress__fill--error {
+  background-color: var(--semiont-color-error);
+}
+
+[data-theme="dark"] .semiont-progress__fill--error {
+  background-color: var(--semiont-color-error);
+}
+
+/* With Label */
+.semiont-progress-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.semiont-progress__label {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-secondary);
+}
+
+[data-theme="dark"] .semiont-progress__label {
+  color: var(--semiont-text-secondary);
+}
+
+/* Indeterminate Progress */
+.semiont-progress--indeterminate .semiont-progress__fill {
+  width: 30%;
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(333%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .semiont-progress__fill,
+  .semiont-progress--striped .semiont-progress__fill,
+  .semiont-progress--indeterminate .semiont-progress__fill {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* Legacy Compatibility Mappings (deprecated - use base classes above)
+   These will be removed in a future version. Update components to use .semiont-progress */
+.semiont-progress-bar,
+.semiont-panel-progress {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-full);
+  overflow: hidden;
+}
+
+[data-theme="dark"] .semiont-progress-bar,
+[data-theme="dark"] .semiont-panel-progress {
+  background-color: var(--semiont-bg-tertiary);
+}
+
+.semiont-progress-bar__fill,
+.semiont-panel-progress__fill {
+  height: 100%;
+  background-color: var(--semiont-color-primary-500);
+  transition: width 0.3s ease;
+}
+
+[data-theme="dark"] .semiont-progress-bar__fill,
+[data-theme="dark"] .semiont-panel-progress__fill {
+  background-color: var(--semiont-color-primary-500);
+}

package/src/styles/core/selects.css

@@ -0,0 +1,135 @@
+/* ============================================
+   Selects/Dropdowns - Core UI Element
+
+   This is the authoritative source for all select/dropdown styles.
+   Usage: Apply .semiont-select to <select> elements.
+
+   Available modifiers:
+   - .semiont-select--small (reduced padding)
+   - .semiont-select--large (increased padding)
+   ============================================ */
+
+/* Base Select Styling */
+.semiont-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: var(--semiont-radius-md);
+  font-size: var(--semiont-text-sm);
+  font-family: inherit;
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  padding-right: 2rem;
+}
+
+[data-theme="dark"] .semiont-select {
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  border-color: var(--semiont-color-gray-700);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%9CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+}
+
+/* Focus State - keyboard navigation */
+.semiont-select:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -1px;
+  border-color: var(--semiont-color-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .semiont-select:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+  border-color: var(--semiont-color-primary-400);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* Remove default focus for mouse users */
+.semiont-select:focus:not(:focus-visible) {
+  outline: none;
+  border-color: var(--semiont-color-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .semiont-select:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: more) {
+  .semiont-select:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Invalid State */
+.semiont-select[aria-invalid="true"] {
+  border-color: var(--semiont-color-red-500);
+}
+
+[data-theme="dark"] .semiont-select[aria-invalid="true"] {
+  border-color: var(--semiont-color-red-400);
+}
+
+.semiont-select[aria-invalid="true"]:focus-visible {
+  outline: 2px solid var(--semiont-color-red-500);
+  outline-offset: -1px;
+  border-color: var(--semiont-color-red-500);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+[data-theme="dark"] .semiont-select[aria-invalid="true"]:focus-visible {
+  outline-color: var(--semiont-color-red-400);
+  border-color: var(--semiont-color-red-400);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+/* Disabled State */
+.semiont-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-select:disabled {
+  background-color: var(--semiont-color-gray-800);
+}
+
+/* Option Styling */
+.semiont-select option {
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+}
+
+.semiont-select option:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -2px;
+  background-color: var(--semiont-color-primary-50);
+}
+
+[data-theme="dark"] .semiont-select option {
+  background-color: var(--semiont-color-gray-700);
+  color: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-select option:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+  background-color: var(--semiont-color-primary-900);
+}
+
+/* Size Variants */
+.semiont-select--small {
+  padding: 0.375rem 1.75rem 0.375rem 0.5rem;
+  font-size: var(--semiont-text-xs);
+}
+
+.semiont-select--large {
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  font-size: var(--semiont-text-base);
+  background-position: right 1rem center;
+}

package/src/styles/core/sliders.css

@@ -0,0 +1,236 @@
+/* ============================================
+   Sliders/Range Inputs - Core UI Element
+
+   This is the authoritative source for all slider/range input styles.
+   Usage: Apply .semiont-slider to <input type="range"> elements.
+
+   Available modifiers:
+   - .semiont-slider--small (reduced size)
+   - .semiont-slider--large (increased size)
+   ============================================ */
+
+/* Base Slider Reset and Styling */
+.semiont-slider {
+  appearance: none;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--semiont-color-gray-300);
+  border-radius: var(--semiont-radius-full);
+  border: 1px solid var(--semiont-color-gray-400);
+  cursor: pointer;
+}
+
+[data-theme="dark"] .semiont-slider {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+/* Track Styling */
+.semiont-slider::-webkit-slider-track {
+  width: 100%;
+  height: 0.5rem;
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-full);
+  border: 1px solid var(--semiont-color-gray-300);
+}
+
+.semiont-slider::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  background: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-full);
+  border: 1px solid var(--semiont-color-gray-300);
+}
+
+[data-theme="dark"] .semiont-slider::-webkit-slider-track {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-slider::-moz-range-track {
+  background: var(--semiont-bg-tertiary);
+  border-color: var(--semiont-color-gray-600);
+}
+
+/* Thumb/Handle Styling */
+.semiont-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--semiont-color-primary-500);
+  border: 2px solid var(--semiont-color-white);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.semiont-slider::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: var(--semiont-color-primary-500);
+  border: 2px solid var(--semiont-color-white);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-slider::-webkit-slider-thumb {
+  background: var(--semiont-color-primary-400);
+  border-color: var(--semiont-bg-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .semiont-slider::-moz-range-thumb {
+  background: var(--semiont-color-primary-400);
+  border-color: var(--semiont-bg-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+/* Hover State */
+.semiont-slider:hover::-webkit-slider-thumb {
+  background: var(--semiont-color-primary-600);
+  transform: scale(1.1);
+}
+
+.semiont-slider:hover::-moz-range-thumb {
+  background: var(--semiont-color-primary-600);
+  transform: scale(1.1);
+}
+
+[data-theme="dark"] .semiont-slider:hover::-webkit-slider-thumb {
+  background: var(--semiont-color-primary-300);
+}
+
+[data-theme="dark"] .semiont-slider:hover::-moz-range-thumb {
+  background: var(--semiont-color-primary-300);
+}
+
+/* Focus State */
+.semiont-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.semiont-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.semiont-slider:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+.semiont-slider:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Active/Dragging State */
+.semiont-slider:active::-webkit-slider-thumb {
+  background: var(--semiont-color-primary-700);
+  transform: scale(0.95);
+}
+
+.semiont-slider:active::-moz-range-thumb {
+  background: var(--semiont-color-primary-700);
+  transform: scale(0.95);
+}
+
+/* Disabled State */
+.semiont-slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.semiont-slider:disabled::-webkit-slider-track {
+  background: var(--semiont-color-gray-200);
+}
+
+.semiont-slider:disabled::-moz-range-track {
+  background: var(--semiont-color-gray-200);
+}
+
+.semiont-slider:disabled::-webkit-slider-thumb {
+  background: var(--semiont-color-gray-400);
+  cursor: not-allowed;
+}
+
+.semiont-slider:disabled::-moz-range-thumb {
+  background: var(--semiont-color-gray-400);
+  cursor: not-allowed;
+}
+
+/* Size Variants */
+.semiont-slider--small::-webkit-slider-track {
+  height: 0.25rem;
+}
+
+.semiont-slider--small::-moz-range-track {
+  height: 0.25rem;
+}
+
+.semiont-slider--small::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+.semiont-slider--small::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+}
+
+.semiont-slider--large::-webkit-slider-track {
+  height: 0.75rem;
+}
+
+.semiont-slider--large::-moz-range-track {
+  height: 0.75rem;
+}
+
+.semiont-slider--large::-webkit-slider-thumb {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.semiont-slider--large::-moz-range-thumb {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Slider Container with Labels */
+.semiont-slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.semiont-slider__labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
+}
+
+[data-theme="dark"] .semiont-slider__labels {
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-slider__value {
+  text-align: center;
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-color-primary-600);
+}
+
+[data-theme="dark"] .semiont-slider__value {
+  color: var(--semiont-color-primary-400);
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .semiont-slider::-webkit-slider-thumb,
+  .semiont-slider::-moz-range-thumb {
+    transition: none;
+  }
+}