@semiont/react-ui 0.2.30 → 0.2.31

package/src/styles/core/checkboxes.css

@@ -0,0 +1,92 @@
+/* ============================================
+   Checkboxes - Core UI Element
+
+   This is the authoritative source for all checkbox styles.
+   Usage: Apply .semiont-checkbox to <input type="checkbox"> elements.
+
+   Available modifiers:
+   - .semiont-checkbox--small (reduced size)
+   - .semiont-checkbox--large (increased size)
+   ============================================ */
+
+/* Base Checkbox Styling */
+.semiont-checkbox {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 2px solid var(--semiont-color-gray-400);
+  border-radius: var(--semiont-radius-sm);
+  cursor: pointer;
+  flex-shrink: 0;
+  appearance: none;
+  background-color: var(--semiont-bg-primary);
+  transition: all 0.2s ease;
+}
+
+[data-theme="dark"] .semiont-checkbox {
+  border-color: var(--semiont-color-gray-600);
+  background-color: var(--semiont-bg-primary);
+}
+
+/* Checked State */
+.semiont-checkbox:checked {
+  background-color: var(--semiont-color-primary-500);
+  border-color: var(--semiont-color-primary-500);
+}
+
+[data-theme="dark"] .semiont-checkbox:checked {
+  background-color: var(--semiont-color-primary-400);
+  border-color: var(--semiont-color-primary-400);
+}
+
+/* Focus State */
+.semiont-checkbox:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.semiont-checkbox:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 2px;
+}
+
+[data-theme="dark"] .semiont-checkbox:focus-visible {
+  outline-color: var(--semiont-color-primary-400);
+}
+
+/* Hover State */
+.semiont-checkbox:hover:not(:disabled) {
+  border-color: var(--semiont-color-primary-500);
+}
+
+[data-theme="dark"] .semiont-checkbox:hover:not(:disabled) {
+  border-color: var(--semiont-color-primary-400);
+}
+
+/* Disabled State */
+.semiont-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-checkbox:disabled {
+  background-color: var(--semiont-color-gray-800);
+}
+
+/* Size Variants */
+.semiont-checkbox--small {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.semiont-checkbox--large {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .semiont-checkbox {
+    transition: none;
+  }
+}

package/src/styles/core/forms.css

@@ -0,0 +1,254 @@
+/**
+ * Form Component Styles
+ *
+ * Reusable form field styles using BEM methodology
+ */
+
+/* Form container */
+.semiont-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.semiont-form__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Form field */
+.semiont-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Labels */
+.semiont-form__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-form__label {
+  color: var(--semiont-text-primary);
+}
+
+/* Note: Form control styles (.semiont-input, .semiont-textarea, .semiont-select, .semiont-checkbox)
+   are now defined in dedicated core files:
+   - core/inputs.css
+   - core/textareas.css
+   - core/selects.css
+   - core/checkboxes.css */
+
+/* Error messages */
+.semiont-form__error {
+  color: var(--semiont-color-red-600);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-form__error {
+  color: var(--semiont-color-red-400);
+}
+
+/* Checkbox and radio - wrapper fields */
+.semiont-form__checkbox-field,
+.semiont-form__radio-field {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.semiont-form__checkbox-label,
+.semiont-form__radio-label {
+  font-size: 0.875rem;
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-form__checkbox-label,
+[data-theme="dark"] .semiont-form__radio-label {
+  color: var(--semiont-text-primary);
+}
+
+/* Form actions */
+.semiont-form__actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.semiont-form__actions--right {
+  justify-content: flex-end;
+}
+
+.semiont-form__actions--center {
+  justify-content: center;
+}
+
+.semiont-form__actions--between {
+  justify-content: space-between;
+}
+
+/* Help text */
+.semiont-form__help {
+  font-size: 0.875rem;
+  color: var(--semiont-text-secondary);
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-form__help {
+  color: var(--semiont-text-secondary);
+}
+
+/* Fieldset and legend */
+.semiont-form__fieldset {
+  border: 1px solid var(--semiont-color-gray-200);
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+[data-theme="dark"] .semiont-form__fieldset {
+  border-color: var(--semiont-color-gray-700);
+}
+
+.semiont-form__legend {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--semiont-text-primary);
+  padding: 0 0.5rem;
+}
+
+[data-theme="dark"] .semiont-form__legend {
+  color: var(--semiont-text-primary);
+}
+
+/* Note: Disabled states for form controls are defined in their respective core files */
+
+/* Panel form elements */
+.semiont-panel-label {
+  display: block;
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-panel-label {
+  color: var(--semiont-color-gray-300);
+}
+
+.semiont-panel-hint {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-color-gray-500);
+  margin-top: 0.25rem;
+}
+
+[data-theme="dark"] .semiont-panel-hint {
+  color: var(--semiont-color-gray-400);
+}
+
+.semiont-panel-divider {
+  border-top: 1px solid var(--semiont-color-gray-200);
+  padding-top: 0.5rem;
+}
+
+[data-theme="dark"] .semiont-panel-divider {
+  border-top-color: var(--semiont-color-gray-700);
+}
+
+/* Language selector dropdown */
+.semiont-language-select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--semiont-radius-lg);
+  font-size: var(--semiont-text-sm);
+  border: 1px solid var(--semiont-color-gray-300);
+  background-color: var(--semiont-bg-primary);
+  color: var(--semiont-text-primary);
+  transition: all var(--semiont-duration-base);
+  cursor: pointer;
+}
+
+.semiont-language-select:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--semiont-color-primary-500);
+  border-color: transparent;
+}
+
+.semiont-language-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-theme="dark"] .semiont-language-select {
+  border-color: var(--semiont-color-gray-600);
+  background-color: var(--semiont-color-gray-700);
+  color: var(--semiont-color-gray-100);
+}
+
+[data-theme="dark"] .semiont-language-select option {
+  background-color: var(--semiont-color-gray-700);
+  color: var(--semiont-color-gray-100);
+}
+/* ============================================
+   Detect Section Form Fields (single-dash BEM variant)
+   Used in DetectSection component
+   ============================================ */
+
+.semiont-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.semiont-form-field__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.semiont-form-field__label {
+  display: block;
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
+}
+
+[data-theme="dark"] .semiont-form-field__label {
+  color: var(--semiont-text-primary);
+}
+
+.semiont-form-field__label--with-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.semiont-form-field__info {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+  font-weight: var(--semiont-font-medium);
+}
+
+[data-theme="dark"] .semiont-form-field__info {
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-form-field__char-count {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+  text-align: right;
+}
+
+[data-theme="dark"] .semiont-form-field__char-count {
+  color: var(--semiont-text-tertiary);
+}
+
+/* Note: Basic form controls (.semiont-textarea, .semiont-select, .semiont-checkbox)
+   are now defined in /styles/core/ as they are fundamental UI elements.
+   See: core/textareas.css, core/selects.css, core/checkboxes.css */

package/src/styles/core/index.css

@@ -0,0 +1,43 @@
+/* ============================================
+   Core UI Elements
+
+   This is the central import file for all core UI elements.
+   These are fundamental, reusable components that can be used
+   anywhere in the application.
+   ============================================ */
+
+/* Buttons - Primary interactive elements */
+@import './buttons.css';
+
+/* Toggle switches - On/off switches for settings */
+@import './toggles.css';
+
+/* Progress bars - Loading and completion indicators */
+@import './progress.css';
+
+/* Range sliders - Input controls for numeric ranges */
+@import './sliders.css';
+
+/* Inputs - Text input fields */
+@import './inputs.css';
+
+/* Checkboxes - Checkbox input controls */
+@import './checkboxes.css';
+
+/* Textareas - Multi-line text input fields */
+@import './textareas.css';
+
+/* Selects - Dropdown selection controls */
+@import './selects.css';
+
+/* Forms - Form field wrappers and layout structures */
+@import './forms.css';
+
+/* Badges - Status and role indicators (Admin, Active, etc.) */
+@import './badges.css';
+
+/* Tags - Content labels and metadata */
+@import './tags.css';
+
+/* Status indicators - Online/offline/busy dots */
+@import './indicators.css';

package/src/styles/core/indicators.css

@@ -0,0 +1,225 @@
+/* ============================================
+   Status Indicators - Core UI Element
+
+   This is the authoritative source for all status indicator styles.
+   Usage: Apply .semiont-indicator with appropriate modifier.
+
+   Available modifiers:
+   - .semiont-indicator--online (green)
+   - .semiont-indicator--offline (gray)
+   - .semiont-indicator--busy (orange)
+   - .semiont-indicator--error (red)
+   - .semiont-indicator--pulse (animated)
+   ============================================ */
+
+/* Base Status Indicator (dot) */
+.semiont-indicator {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--semiont-color-gray-400);
+  position: relative;
+}
+
+[data-theme="dark"] .semiont-indicator {
+  background-color: var(--semiont-color-gray-600);
+}
+
+/* Status Variants */
+.semiont-indicator--online {
+  background-color: var(--semiont-color-green-500);
+  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
+}
+
+[data-theme="dark"] .semiont-indicator--online {
+  background-color: var(--semiont-color-green-400);
+  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2);
+}
+
+.semiont-indicator--offline {
+  background-color: var(--semiont-color-gray-400);
+  box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.2);
+}
+
+[data-theme="dark"] .semiont-indicator--offline {
+  background-color: var(--semiont-color-gray-600);
+  box-shadow: 0 0 0 1px rgba(75, 85, 99, 0.2);
+}
+
+.semiont-indicator--busy {
+  background-color: var(--semiont-color-amber-500);
+  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
+}
+
+[data-theme="dark"] .semiont-indicator--busy {
+  background-color: var(--semiont-color-amber-400);
+  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
+}
+
+.semiont-indicator--error {
+  background-color: var(--semiont-color-red-500);
+  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
+}
+
+[data-theme="dark"] .semiont-indicator--error {
+  background-color: var(--semiont-color-red-400);
+  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2);
+}
+
+/* Pulse Animation */
+.semiont-indicator--pulse {
+  animation: pulse 2s infinite;
+}
+
+.semiont-indicator--pulse::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: inherit;
+  animation: pulse-ring 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+/* Size Variants */
+.semiont-indicator--small {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.semiont-indicator--large {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Indicator with Label */
+.semiont-indicator-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.semiont-indicator__label {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-secondary);
+}
+
+[data-theme="dark"] .semiont-indicator__label {
+  color: var(--semiont-text-secondary);
+}
+
+/* Indicator Badge (dot with count) */
+.semiont-indicator-badge {
+  position: relative;
+  display: inline-block;
+}
+
+.semiont-indicator-badge__count {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  background-color: var(--semiont-color-red-500);
+  color: var(--semiont-color-white);
+  border-radius: var(--semiont-radius-full);
+  font-size: var(--semiont-text-2xs);
+  font-weight: var(--semiont-font-bold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--semiont-bg-primary);
+}
+
+[data-theme="dark"] .semiont-indicator-badge__count {
+  background-color: var(--semiont-color-red-400);
+  border-color: var(--semiont-bg-primary);
+}
+
+/* Connection Status Bar */
+.semiont-connection-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  background-color: var(--semiont-bg-secondary);
+  border-radius: var(--semiont-radius-full);
+  font-size: var(--semiont-text-xs);
+}
+
+[data-theme="dark"] .semiont-connection-status {
+  background-color: var(--semiont-bg-tertiary);
+}
+
+.semiont-connection-status--online {
+  background-color: rgba(34, 197, 94, 0.1);
+  color: var(--semiont-color-green-700);
+}
+
+[data-theme="dark"] .semiont-connection-status--online {
+  background-color: rgba(74, 222, 128, 0.1);
+  color: var(--semiont-color-green-300);
+}
+
+.semiont-connection-status--offline {
+  background-color: rgba(156, 163, 175, 0.1);
+  color: var(--semiont-color-gray-700);
+}
+
+[data-theme="dark"] .semiont-connection-status--offline {
+  background-color: rgba(75, 85, 99, 0.1);
+  color: var(--semiont-color-gray-300);
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .semiont-indicator--pulse,
+  .semiont-indicator--pulse::before {
+    animation: none;
+  }
+
+  .semiont-indicator--pulse {
+    opacity: 1;
+  }
+}
+
+/* Accessibility - Screen Reader Text */
+.semiont-indicator__sr-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}