@rokkit/themes 1.0.0-next.14 → 1.0.0-next.140

package/src/base/select.css

@@ -0,0 +1,411 @@
+/**
+ * Select - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Select Container
+   ============================================================================= */
+
+[data-select] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-select][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-select-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 180px;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-select-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-select-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-select][data-size='sm'] [data-select-trigger] {
+  height: 1.75rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-trigger],
+[data-select]:not([data-size]) [data-select-trigger] {
+  height: 2.25rem;
+  padding-inline: 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-trigger] {
+  height: 2.75rem;
+  padding-inline: 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Value Display
+   ============================================================================= */
+
+[data-select-value] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+[data-select-value-icon] {
+  flex-shrink: 0;
+}
+
+[data-select-value-text] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-select-value-custom] {
+  display: contents;
+}
+
+[data-select-value-custom] > button,
+[data-select-value-custom] > a {
+  display: contents;
+}
+
+[data-select-placeholder] {
+  opacity: 0.6;
+}
+
+[data-select-arrow] {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-select][data-open='true'] [data-select-arrow] {
+  transform: rotate(180deg);
+}
+
+/* Arrow sizes */
+[data-select][data-size='sm'] [data-select-arrow] {
+  font-size: 0.875rem;
+}
+[data-select][data-size='md'] [data-select-arrow],
+[data-select]:not([data-size]) [data-select-arrow] {
+  font-size: 1rem;
+}
+[data-select][data-size='lg'] [data-select-arrow] {
+  font-size: 1.125rem;
+}
+
+/* =============================================================================
+   MultiSelect Tags
+   ============================================================================= */
+
+[data-select-tags] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+[data-select-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75em;
+  line-height: 1.25;
+}
+
+[data-select-tag-text] {
+  white-space: nowrap;
+}
+
+[data-select-tag-remove] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  font-size: 0.75em;
+  opacity: 0.7;
+  transition: opacity 150ms ease;
+}
+
+[data-select-tag-remove]:hover {
+  opacity: 1;
+}
+
+[data-select-count] {
+  font-weight: 500;
+}
+
+/* =============================================================================
+   Dropdown Panel
+   ============================================================================= */
+
+[data-select-dropdown] {
+  position: absolute;
+  z-index: 50;
+  min-width: 100%;
+  overflow-y: auto;
+  border-radius: 0.5rem;
+}
+
+/* Direction: down (default) */
+[data-select][data-direction='down'] [data-select-dropdown],
+[data-select]:not([data-direction]) [data-select-dropdown] {
+  top: calc(100% + 4px);
+  animation: select-dropdown-down 150ms ease;
+}
+
+/* Direction: up */
+[data-select][data-direction='up'] [data-select-dropdown] {
+  bottom: calc(100% + 4px);
+  animation: select-dropdown-up 150ms ease;
+}
+
+/* Alignment */
+[data-select][data-align='left'] [data-select-dropdown],
+[data-select]:not([data-align]) [data-select-dropdown] {
+  left: 0;
+}
+
+[data-select][data-align='right'] [data-select-dropdown] {
+  right: 0;
+}
+
+@keyframes select-dropdown-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes select-dropdown-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Select Options
+   ============================================================================= */
+
+[data-select-option] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 150ms ease;
+}
+
+[data-select-option][data-disabled='true'],
+[data-select-option]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-select-option]:focus,
+[data-select-option]:focus-visible {
+  outline: none;
+}
+
+/* Size variants for options */
+[data-select][data-size='sm'] [data-select-option] {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option],
+[data-select]:not([data-size]) [data-select-option] {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option] {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* Check mark for single select */
+[data-select-check] {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Checkbox for multi select */
+[data-select-checkbox] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid currentColor;
+  font-size: 0.75rem;
+}
+
+/* =============================================================================
+   Custom Snippet Wrapper
+   ============================================================================= */
+
+[data-select-option-custom] {
+  display: contents;
+}
+
+[data-select-option-custom] > button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+/* Size variants for custom snippet buttons */
+[data-select][data-size='sm'] [data-select-option-custom] > button {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-select][data-size='md'] [data-select-option-custom] > button,
+[data-select]:not([data-size]) [data-select-option-custom] > button {
+  gap: 0.625rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-select][data-size='lg'] [data-select-option-custom] > button {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-select-group] {
+  padding-block: 0.25rem;
+}
+
+[data-select-group-label] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Group label sizes */
+[data-select][data-size='sm'] [data-select-group-label] {
+  padding: 0.25rem 0.5rem;
+}
+[data-select][data-size='md'] [data-select-group-label],
+[data-select]:not([data-size]) [data-select-group-label] {
+  padding: 0.375rem 0.75rem;
+}
+[data-select][data-size='lg'] [data-select-group-label] {
+  padding: 0.5rem 1rem;
+}
+
+[data-select-group-label] > [data-select-group-icon] {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* =============================================================================
+   Divider
+   ============================================================================= */
+
+[data-select-divider] {
+  height: 1px;
+  margin-block: 0.25rem;
+}
+
+/* =============================================================================
+   Filter Input (filterable mode)
+   ============================================================================= */
+
+[data-select-filter] {
+  padding: 0.375rem;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+[data-select-filter-input] {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: inherit;
+  outline: none;
+  background: transparent;
+}
+
+/* =============================================================================
+   Empty State (no filter results)
+   ============================================================================= */
+
+[data-select-empty] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: center;
+  opacity: 0.6;
+}

package/src/base/shine.css

@@ -0,0 +1,14 @@
+/* Shine — base structural styles */
+
+[data-shine-filter] {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
+
+[data-shine] {
+  display: inline-block;
+}

package/src/base/stepper.css

@@ -0,0 +1,140 @@
+/* Stepper — base structural styles */
+
+[data-stepper] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+[data-stepper][data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+/* ─── Step container ─── */
+
+[data-stepper-step] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/* ─── Step circle ─── */
+
+[data-stepper-circle] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-stepper-circle]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-step][data-completed] [data-stepper-circle] {
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
+  color: white;
+}
+
+[data-stepper-step][data-active] [data-stepper-circle] {
+  border-color: var(--color-primary-500, #3b82f6);
+  color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, transparent);
+}
+
+/* ─── Connector line ─── */
+
+[data-stepper-connector] {
+  flex: 1;
+  height: 2px;
+  min-width: 2rem;
+  align-self: center;
+  /* Vertically center with the circle (half of 2.5rem) */
+  margin-top: 1.25rem;
+  background-color: var(--color-surface-300, #d1d5db);
+  transition: background-color 0.2s ease;
+}
+
+[data-stepper-connector][data-completed] {
+  background-color: var(--color-primary-500, #3b82f6);
+}
+
+/* Vertical orientation connectors */
+[data-stepper][data-orientation='vertical'] [data-stepper-connector] {
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-top: 0;
+  margin-left: 1.25rem;
+  align-self: flex-start;
+}
+
+/* ─── Label ─── */
+
+[data-stepper-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+}
+
+/* ─── Sub-stage dots ─── */
+
+[data-stepper-dots] {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+}
+
+[data-stepper-dot] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-surface-400, #9ca3af);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+[data-stepper-dot]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-dot][data-completed] {
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
+}
+
+[data-stepper-dot][data-active] {
+  border-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent);
+}
+
+/* ─── Content area ─── */
+
+[data-stepper-content] {
+  width: 100%;
+  margin-top: 1.5rem;
+}

package/src/base/switch.css

@@ -0,0 +1,152 @@
+/**
+ * Switch - Base Structural Styles
+ *
+ * These styles provide layout, positioning, size variants, and transitions.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+/* =============================================================================
+   Switch Root (button)
+   ============================================================================= */
+
+[data-switch] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  user-select: none;
+}
+
+[data-switch]:focus {
+  outline: none;
+}
+
+[data-switch][data-switch-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Track
+   ============================================================================= */
+
+[data-switch-track] {
+  position: relative;
+  display: inline-block;
+  border-radius: 9999px;
+  transition: background-color 200ms ease;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Thumb
+   ============================================================================= */
+
+[data-switch-thumb] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(0);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 200ms ease,
+    background-color 200ms ease;
+}
+
+[data-switch][aria-checked='true'] [data-switch-thumb] {
+  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+/* Small: track 28×16, thumb 12px */
+[data-switch][data-switch-size='sm'] [data-switch-track] {
+  width: 1.75rem;
+  height: 1rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-thumb] {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.125rem;
+  --switch-thumb-travel: 0.75rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-icon] {
+  font-size: 0.5rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-label] {
+  font-size: 0.75rem;
+}
+
+/* Medium (default): track 44×24, thumb 18px */
+[data-switch][data-switch-size='md'] [data-switch-track],
+[data-switch]:not([data-switch-size]) [data-switch-track] {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-thumb],
+[data-switch]:not([data-switch-size]) [data-switch-thumb] {
+  width: 1.125rem;
+  height: 1.125rem;
+  left: 0.1875rem;
+  --switch-thumb-travel: 1.25rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-icon],
+[data-switch]:not([data-switch-size]) [data-switch-icon] {
+  font-size: 0.625rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-label],
+[data-switch]:not([data-switch-size]) [data-switch-label] {
+  font-size: 0.875rem;
+}
+
+/* Large: track 56×32, thumb 24px */
+[data-switch][data-switch-size='lg'] [data-switch-track] {
+  width: 3.5rem;
+  height: 2rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-thumb] {
+  width: 1.5rem;
+  height: 1.5rem;
+  left: 0.25rem;
+  --switch-thumb-travel: 1.5rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-icon] {
+  font-size: 0.75rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-label] {
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Label
+   ============================================================================= */
+
+[data-switch-label] {
+  font-weight: 500;
+  user-select: none;
+}
+
+/* =============================================================================
+   Icon (inside thumb)
+   ============================================================================= */
+
+[data-switch-icon] {
+  flex-shrink: 0;
+}