@rokkit/themes 1.0.0-next.125 → 1.0.0-next.128

package/src/base/input.css

@@ -1,67 +1,226 @@
-/* Layout Styles for InputField (base/input.css)
-   - Only structure, spacing, sizing, flex, and layout-related properties
-   - No colors, gradients, or theme tokens here
-   - Uses data-attribute selectors, not tag or class names
-*/
+/* Base structural styles for form fields and inputs */
 
-/* Root container: vertical stack, spacing, border radius, border width */
+/* Form root: vertical stack */
+[data-form-root] {
+  @apply flex flex-col gap-3;
+}
+
+/* Form field container */
+[data-form-field] {
+  @apply flex flex-col;
+}
+
+/* Separator between form fields */
+[data-form-separator] {
+  @apply border-surface-z2 my-1 border-t;
+}
+
+/* Form group (fieldset for nested objects) */
+[data-form-group] {
+  @apply border-surface-z2 m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
+}
+
+[data-form-group-label] {
+  @apply pb-1 text-xs font-semibold;
+}
+
+/* Validation report */
+[data-validation-report] {
+  @apply flex flex-col gap-2;
+}
+
+[data-validation-group] {
+  @apply flex flex-col gap-0.5;
+}
+
+[data-validation-group-header] {
+  @apply flex items-center gap-1.5 py-1 text-xs font-semibold;
+}
+
+[data-validation-count] {
+  @apply inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold;
+}
+
+[data-severity='error'] > [data-validation-group-header] {
+  @apply text-error;
+}
+
+[data-severity='error'] [data-validation-count] {
+  @apply bg-error-z1 text-error-z7;
+}
+
+[data-severity='warning'] > [data-validation-group-header] {
+  @apply text-warning;
+}
+
+[data-severity='warning'] [data-validation-count] {
+  @apply bg-warning-z1 text-warning-z7;
+}
+
+[data-severity='info'] > [data-validation-group-header] {
+  @apply text-info;
+}
+
+[data-severity='info'] [data-validation-count] {
+  @apply bg-info-z1 text-info-z7;
+}
+
+[data-severity='success'] > [data-validation-group-header] {
+  @apply text-success;
+}
+
+[data-severity='success'] [data-validation-count] {
+  @apply bg-success-z1 text-success-z7;
+}
+
+[data-validation-item] {
+  @apply rounded px-2 py-0.5 text-left text-xs;
+}
+
+button[data-validation-item] {
+  @apply hover:bg-surface-z1 cursor-pointer border-none bg-transparent;
+}
+
+/* Form actions (submit/reset buttons) */
+[data-form-actions] {
+  @apply flex flex-row justify-end gap-2 pt-2;
+}
+
+button[data-form-submit],
+button[data-form-reset] {
+  @apply border-surface-z3 bg-surface-z1 hover:bg-surface-z2 cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+}
+
+button[data-form-submit] {
+  @apply bg-primary text-on-primary border-primary hover:opacity-90;
+}
+
+button[data-form-submit]:disabled,
+button[data-form-reset]:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* Submitting state: reduce interactivity */
+[data-form-submitting] > :not([data-form-actions]) {
+  @apply pointer-events-none opacity-60;
+}
+
+/* Field root container */
 [data-field-root] {
-  @apply box-border flex flex-col gap-1 rounded-md border p-2;
+  @apply box-border flex flex-col;
 }
 
-/* Disabled state: layout only (theme handles color/cursor) */
-[data-field-root][data-field-disabled] {
-  /* No layout changes needed for disabled in base */
+/* Field wrapper: vertical by default */
+[data-field-root] > [data-field] {
+  @apply flex flex-col gap-1;
+}
+
+/* Checkbox and switch: inline layout */
+[data-field-type='switch'] > [data-field],
+[data-field-type='checkbox'] > [data-field] {
+  @apply flex-row items-center gap-2;
 }
 
-/* Error state: layout only (theme handles color/bg) */
-[data-field-root][data-field-state='fail'] {
-  /* No layout changes needed for error in base */
+/* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
+[data-input-root] [data-select] {
+  @apply flex-1 self-stretch;
+  display: flex;
 }
 
-/* Label: spacing and font size */
-[data-field-root] > label,
+[data-input-root] [data-select] [data-select-trigger] {
+  @apply flex-1 self-stretch;
+  min-width: 0;
+}
+
+/* Checkbox icon */
+[data-checkbox-root] {
+  @apply flex items-center;
+}
+
+/* Label: fills available space */
 [data-field] > label {
-  @apply mb-1 text-xs leading-tight;
-  display: block;
+  @apply flex-1 text-xs;
+}
+
+/* Info field: horizontal layout */
+[data-field-type='info'] > [data-field] {
+  @apply flex-row items-center justify-between;
+}
+
+[data-field-info] {
+  @apply font-mono text-xs;
+}
+
+/* Numeric/date input alignment */
+[data-field-type='number'] input,
+[data-field-type='integer'] input,
+[data-field-type='date'] input,
+[data-field-type='time'] input {
+  @apply text-right;
 }
 
-/* Input wrapper: horizontal layout for input and icon */
-[data-field] {
-  @apply flex min-h-8 items-center gap-2;
+/* Input wrapper: horizontal for input + icon */
+[data-input-root] {
+  @apply flex flex-row items-center;
 }
 
-/* Icon inside input: size and alignment */
-[data-field] [data-icon] {
-  @apply h-5 w-5 flex-shrink-0;
+/* Input elements fill available width */
+[data-input-root] input,
+[data-input-root] textarea,
+[data-input-root] select {
+  @apply m-0 min-w-0 flex-1 leading-loose transition-all;
 }
 
-/* Input element: fill available width, spacing */
-[data-field] input,
-[data-field] textarea,
-[data-field] select {
-  @apply box-border min-w-0 flex-1;
+/* Icons inside inputs */
+[data-input-root] [data-icon] {
+  @apply aspect-square min-h-full flex-shrink-0;
 }
 
 /* Description below input */
 [data-description] {
-  @apply mt-1 text-xs leading-snug;
+  @apply text-xs leading-snug;
 }
 
-/* Message below input (validation, info, etc.) */
+/* Validation message */
 [data-message] {
-  @apply mt-1 text-xs leading-snug;
+  @apply text-xs leading-snug;
 }
-[data-field-root] > [data-field] {
-  @apply flex flex-col gap-2;
+
+/* Checkbox icon: focus handling */
+[data-checkbox-icon] {
+  @apply focus:outline-none;
+}
+
+/* Range slider thumb */
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+  border: none;
 }
 
-/* Checkbox and switch inline with input */
-[data-field-root][data-field-type='switch'] > [data-field] {
-  @applyf flex-row items-center;
+/* Color input */
+input[type='color'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  @apply p-0;
 }
-[data-field-root][data-field-type='checkbox'] > [data-field] {
-  @applyf flex-row-reverse items-center;
+
+[data-input-root] [data-input-icon] {
+  @apply mx-2 aspect-square min-h-full flex-shrink-0;
 }
 
 /* Responsive adjustments */
@@ -74,6 +233,6 @@
   }
   [data-description],
   [data-message] {
-    @apply text-[11px];
+    @apply text-sm;
   }
 }

package/src/base/item.css

@@ -0,0 +1,78 @@
+/**
+ * Item Content - Base Structural Styles
+ *
+ * Shared styles for icon, text, description, and badge elements
+ * used by List, Tree, and other components.
+ */
+
+/* =============================================================================
+   Item Icon
+   ============================================================================= */
+
+[data-item-icon] {
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Item Avatar
+   ============================================================================= */
+
+[data-item-avatar] {
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+/* =============================================================================
+   Item Text Container
+   ============================================================================= */
+
+[data-item-text] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+[data-item-label] {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-item-description] {
+  font-size: 0.75em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* =============================================================================
+   Item Badge
+   ============================================================================= */
+
+[data-item-badge] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+/* =============================================================================
+   Item Shortcut
+   ============================================================================= */
+
+[data-item-shortcut] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}

package/src/base/list.css

@@ -0,0 +1,179 @@
+/**
+ * List - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   List Container
+   ============================================================================= */
+
+[data-list] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-list][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[dir='rtl'] [data-list] [data-list-item] {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+/* =============================================================================
+   List Items (shared for links and buttons)
+   ============================================================================= */
+
+[data-list-item] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+a[data-list-item],
+button[data-list-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-list-item][data-disabled='true'],
+[data-list-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-list-item]:focus {
+  outline: none;
+}
+
+/* Size variants for items */
+[data-list][data-size='sm'] [data-list-item],
+[data-list][data-size='sm'] a[data-list-item],
+[data-list][data-size='sm'] button[data-list-item] {
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-list][data-size='md'] [data-list-item],
+[data-list]:not([data-size]) [data-list-item],
+[data-list][data-size='md'] a[data-list-item],
+[data-list]:not([data-size]) a[data-list-item],
+[data-list][data-size='md'] button[data-list-item],
+[data-list]:not([data-size]) button[data-list-item] {
+  gap: 0.625rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-list][data-size='lg'] [data-list-item],
+[data-list][data-size='lg'] a[data-list-item],
+[data-list][data-size='lg'] button[data-list-item] {
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements - uses shared [data-item-*] from item.css
+   ============================================================================= */
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-list-group] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+/* Non-collapsible group labels are not interactive */
+[data-list]:not([data-collapsible='true']) [data-list-group] {
+  cursor: default;
+}
+
+[data-list-group]:focus {
+  outline: none;
+}
+
+/* Group label sizes */
+[data-list][data-size='sm'] [data-list-group] {
+  padding: 0.25rem 0.5rem;
+}
+[data-list][data-size='md'] [data-list-group],
+[data-list]:not([data-size]) [data-list-group] {
+  padding: 0.375rem 0.75rem;
+}
+[data-list][data-size='lg'] [data-list-group] {
+  padding: 0.5rem 1rem;
+}
+
+/* Group item content — inherits font from [data-list-group], label stays inline */
+[data-list-group] > [data-item-icon] {
+  opacity: 0.7;
+}
+
+[data-list-group] > [data-item-text] {
+  display: contents;
+}
+
+[data-list-group] [data-item-label] {
+  font-weight: inherit;
+}
+
+/* Expand/collapse chevron — pushed to the right edge */
+[data-list-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
+/* =============================================================================
+   Multi-selection
+   ============================================================================= */
+
+[data-list][data-multiselect='true'] [data-list-item] {
+  user-select: none;
+}
+
+/* =============================================================================
+   Separator / Spacer
+   ============================================================================= */
+
+[data-list-separator] {
+  height: 1px;
+  margin-block: 0.25rem;
+  border: none;
+}
+
+[data-list-spacer] {
+  height: 0.5rem;
+}