@rokkit/themes 1.0.0-next.124 → 1.0.0-next.127

package/src/base/floating-navigation.css

@@ -0,0 +1,381 @@
+/**
+ * FloatingNavigation - Base Structural Styles
+ *
+ * Layout, positioning, transitions, and animations.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-floating-nav] {
+  position: fixed;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  overflow: hidden;
+  transition:
+    width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    height var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  [data-floating-nav] {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+  [data-floating-nav] * {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+}
+
+/* =============================================================================
+   Position Variants
+   ============================================================================= */
+
+/* Right edge — vertically centered */
+[data-floating-nav][data-position='right'] {
+  right: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-right 0.5s ease-out 0.5s both;
+}
+
+/* Left edge — vertically centered */
+[data-floating-nav][data-position='left'] {
+  left: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-left 0.5s ease-out 0.5s both;
+}
+
+/* Top edge — horizontally centered */
+[data-floating-nav][data-position='top'] {
+  top: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-top 0.5s ease-out 0.5s both;
+}
+
+/* Bottom edge — horizontally centered */
+[data-floating-nav][data-position='bottom'] {
+  bottom: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-bottom 0.5s ease-out 0.5s both;
+}
+
+/* =============================================================================
+   Entrance Animations
+   ============================================================================= */
+
+@keyframes fn-slide-in-right {
+  from { opacity: 0; transform: translateX(4rem); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fn-slide-in-left {
+  from { opacity: 0; transform: translateX(-4rem); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes fn-slide-in-top {
+  from { opacity: 0; transform: translateY(-4rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fn-slide-in-bottom {
+  from { opacity: 0; transform: translateY(4rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* =============================================================================
+   Header (Title + Pin)
+   ============================================================================= */
+
+[data-floating-nav-header] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  min-height: 2rem;
+}
+
+/* Vertical positions: header above items */
+[data-floating-nav][data-position='left'] [data-floating-nav-header],
+[data-floating-nav][data-position='right'] [data-floating-nav-header] {
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* When expanded, push pin to end */
+[data-floating-nav][data-expanded] [data-floating-nav-header] {
+  justify-content: space-between;
+}
+
+/* Horizontal positions: header before items */
+[data-floating-nav][data-position='top'] [data-floating-nav-header],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-header] {
+  flex-direction: column;
+  justify-content: center;
+}
+
+[data-floating-nav-title] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--fn-label-duration, 200ms) ease;
+}
+
+[data-floating-nav][data-expanded] [data-floating-nav-title] {
+  opacity: 1;
+}
+
+[data-floating-nav-pin] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background: transparent;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-floating-nav-pin]:hover {
+  transform: scale(1.1);
+}
+
+[data-floating-nav-pin]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Items Container
+   ============================================================================= */
+
+[data-floating-nav-items] {
+  position: relative;
+  display: flex;
+  padding: 0.25rem;
+  gap: 0.125rem;
+}
+
+/* Vertical layout (left/right positions) */
+[data-floating-nav][data-position='left'] [data-floating-nav-items],
+[data-floating-nav][data-position='right'] [data-floating-nav-items] {
+  flex-direction: column;
+}
+
+/* Horizontal layout (top/bottom positions) */
+[data-floating-nav][data-position='top'] [data-floating-nav-items],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-items] {
+  flex-direction: row;
+}
+
+/* =============================================================================
+   Navigation Items
+   ============================================================================= */
+
+[data-floating-nav-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  background: transparent;
+  transition:
+    transform 150ms ease,
+    background-color 150ms ease;
+  animation: fn-item-enter 0.3s ease both;
+  animation-delay: calc(var(--fn-index, 0) * 60ms + 0.6s);
+}
+
+@keyframes fn-item-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+[data-floating-nav-item]:hover {
+  transform: scale(1.02);
+}
+
+[data-floating-nav-item]:active {
+  transform: scale(0.98);
+}
+
+[data-floating-nav-item]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+}
+
+/* =============================================================================
+   Size Variants — Items
+   ============================================================================= */
+
+/* Small */
+[data-floating-nav][data-size='sm'] [data-floating-nav-item] {
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+}
+
+[data-floating-nav][data-size='sm'] [data-floating-nav-icon] {
+  font-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Medium (default) */
+[data-floating-nav][data-size='md'] [data-floating-nav-item],
+[data-floating-nav]:not([data-size]) [data-floating-nav-item] {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-floating-nav][data-size='md'] [data-floating-nav-icon],
+[data-floating-nav]:not([data-size]) [data-floating-nav-icon] {
+  font-size: 1.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Large */
+[data-floating-nav][data-size='lg'] [data-floating-nav-item] {
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+[data-floating-nav][data-size='lg'] [data-floating-nav-icon] {
+  font-size: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+/* =============================================================================
+   Icon & Label
+   ============================================================================= */
+
+[data-floating-nav-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+[data-floating-nav-label] {
+  overflow: hidden;
+  max-width: 0;
+  opacity: 0;
+  transition:
+    max-width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    opacity var(--fn-label-duration, 200ms) ease;
+}
+
+/* Expanded: reveal labels */
+[data-floating-nav][data-expanded] [data-floating-nav-label] {
+  max-width: 12rem;
+  opacity: 1;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-floating-nav-indicator] {
+  position: absolute;
+  border-radius: 0.25rem;
+  pointer-events: none;
+  transition:
+    top var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1),
+    left var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Vertical indicator (left/right positions) — bar on the side */
+[data-floating-nav][data-position='left'] [data-floating-nav-indicator] {
+  right: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='right'] [data-floating-nav-indicator] {
+  left: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Horizontal indicator (top/bottom positions) — bar on the edge */
+[data-floating-nav][data-position='top'] [data-floating-nav-indicator] {
+  bottom: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='bottom'] [data-floating-nav-indicator] {
+  top: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Size adjustments for indicator position */
+[data-floating-nav][data-size='sm'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.25rem;
+  top: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.75rem;
+  top: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='sm'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.25rem;
+  left: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.75rem;
+  left: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}

package/src/base/index.css

@@ -0,0 +1,36 @@
+/**
+ * @rokkit/themes - Base Styles
+ *
+ * Structural styles for all components.
+ * Import individual files for tree-shaking, or this file for all base styles.
+ */
+
+@import './button.css';
+@import './item.css';
+@import './menu.css';
+@import './select.css';
+@import './toolbar.css';
+@import './tabs.css';
+@import './toggle.css';
+@import './list.css';
+@import './connector.css';
+@import './tree.css';
+@import './floating-action.css';
+@import './input.css';
+@import './display.css';
+@import './tilt.css';
+@import './shine.css';
+@import './breadcrumbs.css';
+@import './card.css';
+@import './progress.css';
+@import './carousel.css';
+@import './pill.css';
+@import './rating.css';
+@import './stepper.css';
+@import './switch.css';
+@import './table.css';
+@import './search-filter.css';
+@import './range.css';
+@import './timeline.css';
+@import './reveal.css';
+@import './floating-navigation.css';

package/src/base/input.css

@@ -1,67 +1,222 @@
-/* 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-t border-surface-z2 my-1;
+}
+
+/* Form group (fieldset for nested objects) */
+[data-form-group] {
+  @apply flex flex-col gap-3 border-none m-0 p-0 pl-3 border-l border-surface-z2;
+}
+
+[data-form-group-label] {
+  @apply text-xs font-semibold pb-1;
+}
+
+/* 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 text-xs font-semibold py-1;
+}
+
+[data-validation-count] {
+  @apply inline-flex items-center justify-center rounded-full text-[10px] font-bold min-w-[18px] h-[18px] px-1;
+}
+
+[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 text-xs py-0.5 px-2 rounded text-left;
+}
+
+button[data-validation-item] {
+  @apply cursor-pointer bg-transparent border-none hover:bg-surface-z1;
+}
+
+/* Form actions (submit/reset buttons) */
+[data-form-actions] {
+  @apply flex flex-row gap-2 justify-end pt-2;
+}
+
+button[data-form-submit],
+button[data-form-reset] {
+  @apply px-4 py-1.5 text-sm rounded cursor-pointer border border-surface-z3 bg-surface-z1 hover:bg-surface-z2 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 opacity-50 cursor-not-allowed;
+}
+
+/* Submitting state: reduce interactivity */
+[data-form-submitting] > :not([data-form-actions]) {
+  @apply opacity-60 pointer-events-none;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
+[data-input-root] [data-select] {
+  @apply flex-1 self-stretch;
+  display: flex;
 }
 
-/* Disabled state: layout only (theme handles color/cursor) */
-[data-field-root][data-field-disabled] {
-  /* No layout changes needed for disabled in base */
+[data-input-root] [data-select] [data-select-trigger] {
+  @apply flex-1 self-stretch;
+  min-width: 0;
 }
 
-/* Error state: layout only (theme handles color/bg) */
-[data-field-root][data-field-state='fail'] {
-  /* No layout changes needed for error in base */
+/* Checkbox icon */
+[data-checkbox-root] {
+  @apply flex items-center;
 }
 
-/* Label: spacing and font size */
-[data-field-root] > label,
+/* 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 text-xs font-mono;
 }
 
-/* Input wrapper: horizontal layout for input and icon */
-[data-field] {
-  @apply flex min-h-8 items-center gap-2;
+/* 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;
 }
 
-/* Icon inside input: size and alignment */
-[data-field] [data-icon] {
-  @apply h-5 w-5 flex-shrink-0;
+/* Input wrapper: horizontal for input + icon */
+[data-input-root] {
+  @apply flex flex-row items-center;
 }
 
-/* Input element: fill available width, spacing */
-[data-field] input,
-[data-field] textarea,
-[data-field] select {
-  @apply box-border min-w-0 flex-1;
+/* 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;
+}
+
+/* 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;
 }
 
-/* Checkbox and switch inline with input */
-[data-field-root][data-field-type='switch'] > [data-field] {
-  @applyf flex-row items-center;
+input[type='range']::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+  border: none;
 }
-[data-field-root][data-field-type='checkbox'] > [data-field] {
-  @applyf flex-row-reverse items-center;
+
+/* Color input */
+input[type='color'] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  @apply p-0;
 }
 
 /* Responsive adjustments */
@@ -74,6 +229,6 @@
   }
   [data-description],
   [data-message] {
-    @apply text-[11px];
+    @apply text-sm;
   }
 }