@nexa-ui-kit/theme-default 1.0.0

package/components/scrollytelling.css

@@ -0,0 +1,418 @@
+/* Scrollytelling - Scroll-driven narrative components */
+
+/* Root container */
+[data-slot="scrollytelling"] {
+  position: relative;
+  width: 100%;
+  outline: none;
+}
+
+[data-slot="scrollytelling"]:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+/* Track container */
+[data-slot="scrollytelling-track"] {
+  position: relative;
+}
+
+[data-slot="scrollytelling-track"][data-snap="mandatory"] {
+  scroll-snap-type: y mandatory;
+}
+
+[data-slot="scrollytelling-track"][data-snap="proximity"] {
+  scroll-snap-type: y proximity;
+}
+
+/* Section */
+[data-slot="scrollytelling-section"] {
+  position: relative;
+  min-height: 100vh;
+}
+
+[data-slot="scrollytelling-section"][data-pinned] {
+  /* Height set via inline style based on pinDuration */
+}
+
+[data-slot="scrollytelling-section-sticky"] {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Content wrapper */
+[data-slot="scrollytelling-content"] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+[data-slot="scrollytelling-content"][data-align="start"] {
+  align-items: flex-start;
+}
+
+[data-slot="scrollytelling-content"][data-align="center"] {
+  align-items: center;
+}
+
+[data-slot="scrollytelling-content"][data-align="end"] {
+  align-items: flex-end;
+}
+
+[data-slot="scrollytelling-content"][data-justify="start"] {
+  justify-content: flex-start;
+}
+
+[data-slot="scrollytelling-content"][data-justify="center"] {
+  justify-content: center;
+}
+
+[data-slot="scrollytelling-content"][data-justify="end"] {
+  justify-content: flex-end;
+}
+
+/* Reveal animation container */
+[data-slot="scrollytelling-reveal"] {
+  will-change: transform, opacity;
+}
+
+/* Screen reader only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Background component */
+[data-slot="scrollytelling-background"] {
+  z-index: 0;
+}
+
+[data-slot="scrollytelling-background-container"] {
+  will-change: transform;
+}
+
+[data-slot="scrollytelling-background-image"],
+[data-slot="scrollytelling-background-video"] {
+  will-change: transform;
+}
+
+/* Counter component */
+[data-slot="scrollytelling-counter"] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Highlight component */
+[data-slot="scrollytelling-highlight-segment"] {
+  transition: color var(--scrollytelling-transition-duration, 200ms) ease,
+    background-color var(--scrollytelling-transition-duration, 200ms) ease;
+}
+
+/* Transition component */
+[data-slot="scrollytelling-transition"] {
+  will-change: opacity, transform, filter, clip-path;
+}
+
+/* Timeline component */
+[data-slot="scrollytelling-timeline"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+[data-slot="scrollytelling-timeline"][data-hide-mobile] {
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+[data-slot="scrollytelling-timeline-track"] {
+  position: relative;
+  width: var(--scrollytelling-timeline-width, 2px);
+  height: 200px;
+  background: hsl(var(--muted));
+  border-radius: 9999px;
+}
+
+[data-slot="scrollytelling-timeline-progress"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: hsl(var(--primary));
+  border-radius: 9999px;
+  transition: height 0.1s ease-out;
+}
+
+[data-slot="scrollytelling-timeline-markers"] {
+  position: absolute;
+  inset: 0;
+}
+
+[data-slot="scrollytelling-timeline-marker"] {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--scrollytelling-dot-size, 12px);
+  height: var(--scrollytelling-dot-size, 12px);
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+  border: 2px solid hsl(var(--background));
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+[data-slot="scrollytelling-timeline-marker"][data-active] {
+  background: hsl(var(--primary));
+  transform: translateX(-50%) scale(1.2);
+}
+
+[data-slot="scrollytelling-timeline-marker"]:hover {
+  background: hsl(var(--primary) / 0.8);
+}
+
+[data-slot="scrollytelling-timeline-marker"]:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+[data-slot="scrollytelling-timeline-label"] {
+  position: absolute;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--background) / 0.9);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  backdrop-filter: blur(4px);
+}
+
+[data-slot="scrollytelling-timeline"][data-position="left"]
+  [data-slot="scrollytelling-timeline-label"] {
+  right: calc(100% + 1rem);
+}
+
+[data-slot="scrollytelling-timeline"][data-position="right"]
+  [data-slot="scrollytelling-timeline-label"] {
+  left: calc(100% + 1rem);
+}
+
+/* Nav component */
+[data-slot="scrollytelling-nav-item"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s ease;
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="dots"] {
+  width: var(--scrollytelling-dot-size, 12px);
+  height: var(--scrollytelling-dot-size, 12px);
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="dots"][data-active] {
+  background: hsl(var(--primary));
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="lines"] {
+  width: 24px;
+  height: 3px;
+  border-radius: 2px;
+  background: hsl(var(--muted));
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="lines"][data-active] {
+  background: hsl(var(--primary));
+  width: 32px;
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="numbers"] {
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-slot="scrollytelling-nav-item"][data-variant="numbers"][data-active] {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+
+[data-slot="scrollytelling-nav-item"]:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+/* Debug component */
+[data-slot="scrollytelling-debug"] {
+  background: hsl(var(--background) / 0.95);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.75rem;
+  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
+  backdrop-filter: blur(8px);
+}
+
+[data-slot="scrollytelling-debug-header"] {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+[data-slot="scrollytelling-debug-list"] {
+  display: grid;
+  gap: 0.25rem;
+}
+
+[data-slot="scrollytelling-debug-list"] > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+[data-slot="scrollytelling-debug-list"] dt {
+  color: hsl(var(--muted-foreground));
+}
+
+[data-slot="scrollytelling-debug-list"] dd {
+  font-weight: 500;
+}
+
+[data-slot="scrollytelling-debug-list"] dd[data-warning] {
+  color: hsl(var(--destructive));
+}
+
+[data-slot="scrollytelling-section-debug"] {
+  background: hsl(var(--background) / 0.9);
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.625rem;
+}
+
+[data-slot="scrollytelling-section-debug"] dl {
+  display: grid;
+  gap: 0.125rem;
+}
+
+[data-slot="scrollytelling-section-debug"] dl > div {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* ================================================
+   Media Components
+   ================================================ */
+
+/* Media container */
+[data-slot="scrollytelling-media"] {
+  position: relative;
+}
+
+/* Video */
+[data-slot="scrollytelling-media-video"] {
+  pointer-events: none;
+}
+
+/* Poster fallback */
+[data-slot="scrollytelling-media-poster"] {
+  pointer-events: none;
+}
+
+/* SVG container */
+[data-slot="scrollytelling-media-svg"] {
+  width: 100%;
+  height: 100%;
+}
+
+[data-slot="scrollytelling-media-svg"] svg {
+  width: 100%;
+  height: 100%;
+}
+
+[data-slot="scrollytelling-media-svg"] path {
+  stroke-dasharray: var(--svg-path-length);
+  stroke-dashoffset: var(--svg-dash-offset);
+  transition: stroke-dashoffset 0.05s ease-out;
+}
+
+[data-slot="scrollytelling-media-svg"][data-animation="reveal"] path {
+  fill-opacity: calc(1 - var(--svg-dash-offset) / var(--svg-path-length));
+}
+
+/* Image reveal */
+[data-slot="scrollytelling-media-image"] {
+  will-change: clip-path;
+}
+
+/* ================================================
+   Mobile Optimization
+   ================================================ */
+
+[data-slot="scrollytelling"] {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+[data-slot="scrollytelling-track"] {
+  touch-action: pan-y;
+}
+
+/* Reduce GPU memory on mobile */
+@media (max-width: 768px) {
+  [data-slot="scrollytelling-media-video"],
+  [data-slot="scrollytelling-media-svg"],
+  [data-slot="scrollytelling-media-image"] {
+    will-change: auto;
+  }
+}
+
+/* ================================================
+   Reduced Motion Overrides
+   ================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="scrollytelling-reveal"] {
+    transition: none !important;
+  }
+
+  [data-slot="scrollytelling-media-svg"] path {
+    stroke-dashoffset: 0 !important;
+    transition: none !important;
+  }
+
+  [data-slot="scrollytelling-media-image"] {
+    clip-path: none !important;
+    transition: none !important;
+  }
+
+  [data-slot="scrollytelling-transition"] {
+    transition: none !important;
+  }
+
+  [data-slot="scrollytelling-highlight-segment"] {
+    transition: none !important;
+  }
+}

package/components/select.css

@@ -0,0 +1,74 @@
+/* Select Component Styles */
+/* Radix UI Select with data-slot attributes */
+
+[data-slot="select-trigger"] {
+  @apply flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs;
+  @apply placeholder:text-muted-foreground;
+  @apply focus:outline-none focus:ring-1 focus:ring-ring;
+  @apply disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+[data-slot="select-trigger"][data-placeholder] {
+  @apply text-muted-foreground;
+}
+
+[data-slot="select-icon"] {
+  @apply size-4 shrink-0 opacity-50;
+}
+
+[data-slot="select-content"] {
+  @apply relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md;
+  @apply data-[state=open]:animate-in data-[state=closed]:animate-out;
+  @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+  @apply data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+  @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2;
+  @apply data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+  max-height: var(--radix-select-content-available-height);
+}
+
+[data-slot="select-content"][data-position="popper"] {
+  @apply w-full;
+  min-width: var(--radix-select-trigger-width);
+}
+
+[data-slot="select-viewport"] {
+  @apply p-1;
+}
+
+[data-slot="select-viewport"][data-position="popper"] {
+  @apply h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)];
+}
+
+[data-slot="select-item"] {
+  @apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none;
+  @apply focus:bg-accent focus:text-accent-foreground;
+  @apply data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+}
+
+[data-slot="select-item-indicator-wrapper"] {
+  @apply absolute left-2 flex h-3.5 w-3.5 items-center justify-center;
+}
+
+[data-slot="select-check-icon"] {
+  @apply size-4;
+}
+
+[data-slot="select-label"] {
+  @apply px-2 py-1.5 text-sm font-semibold;
+}
+
+[data-slot="select-separator"] {
+  @apply -mx-1 my-1 h-px bg-muted;
+}
+
+[data-slot="select-scroll-up-button"],
+[data-slot="select-scroll-down-button"] {
+  @apply flex cursor-default items-center justify-center py-1;
+}
+
+[data-slot="select-scroll-up-button"] svg,
+[data-slot="select-scroll-down-button"] svg,
+[data-slot="select-chevron-up"],
+[data-slot="select-chevron-down"] {
+  @apply size-4;
+}

package/components/separator.css

@@ -0,0 +1,5 @@
+/* Separator Component Styles */
+
+[data-slot="separator"] {
+  @apply bg-border shrink-0 data-[orientation=horizontal]:h-[1px] data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[1px];
+}

package/components/sheet.css

@@ -0,0 +1,45 @@
+/* Sheet Component Styles */
+
+[data-slot="sheet-overlay"] {
+  @apply fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+}
+
+[data-slot="sheet-content"] {
+  @apply fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500;
+}
+
+[data-slot="sheet-content"][data-side="top"] {
+  @apply inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top;
+}
+
+[data-slot="sheet-content"][data-side="bottom"] {
+  @apply inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom;
+}
+
+[data-slot="sheet-content"][data-side="left"] {
+  @apply inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left;
+}
+
+[data-slot="sheet-content"][data-side="right"] {
+  @apply inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right;
+}
+
+[data-slot="sheet-close"] {
+  @apply absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary;
+}
+
+[data-slot="sheet-header"] {
+  @apply flex flex-col space-y-2 text-center sm:text-left;
+}
+
+[data-slot="sheet-footer"] {
+  @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
+}
+
+[data-slot="sheet-title"] {
+  @apply text-lg font-semibold text-foreground;
+}
+
+[data-slot="sheet-description"] {
+  @apply text-sm text-muted-foreground;
+}

package/components/sidebar.css

@@ -0,0 +1,65 @@
+/* Sidebar Component Styles */
+
+[data-slot="sidebar"] {
+  @apply flex flex-col bg-background transition-all duration-200 ease-in-out data-[variant=floating]:m-2 data-[variant=floating]:rounded-lg data-[variant=floating]:bg-background data-[variant=floating]:shadow-md data-[variant=floating]:border data-[side=left]:border-r data-[side=right]:border-l;
+}
+
+[data-slot="sidebar"][data-mobile="true"] {
+  @apply fixed inset-y-0 z-50 flex h-full w-full flex-col border-r bg-background transition-transform duration-200 ease-in-out data-[side=left]:left-0 data-[side=right]:right-0 data-[side=left]:data-[state=closed]:-translate-x-full data-[side=right]:data-[state=closed]:translate-x-full;
+}
+
+[data-slot="sidebar-overlay"] {
+   @apply fixed inset-0 z-40 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
+}
+
+[data-slot="sidebar-header"] {
+  @apply flex flex-col border-b p-4;
+}
+
+[data-slot="sidebar-content"] {
+  @apply flex min-h-0 flex-1 flex-col overflow-auto p-2;
+}
+
+[data-slot="sidebar-footer"] {
+  @apply flex flex-col border-t p-4;
+}
+
+[data-slot="sidebar-group"] {
+  @apply flex flex-col gap-1 py-2;
+}
+
+[data-slot="sidebar-group-label"] {
+  @apply px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground opacity-100 transition-opacity duration-200;
+}
+
+[data-slot="sidebar"][data-collapsed="true"] [data-slot="sidebar-group-label"] {
+  @apply opacity-0;
+}
+
+[data-slot="sidebar-menu-item"] {
+  @apply flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:text-accent-foreground;
+}
+
+[data-slot="sidebar"][data-collapsed="true"] [data-slot="sidebar-menu-item"] {
+  @apply justify-center px-0 py-2;
+}
+
+[data-slot="sidebar-menu-item-icon"] {
+  @apply flex h-5 w-5 shrink-0 items-center justify-center;
+}
+
+[data-slot="sidebar-menu-item-content"] {
+  @apply overflow-hidden whitespace-nowrap opacity-100 transition-all duration-200;
+}
+
+[data-slot="sidebar"][data-collapsed="true"] [data-slot="sidebar-menu-item-content"] {
+  @apply w-0 opacity-0;
+}
+
+[data-slot="sidebar-trigger"] {
+  @apply inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+}
+
+[data-slot="sidebar-inset"] {
+  @apply flex flex-1 flex-col overflow-auto;
+}

package/components/skeleton.css

@@ -0,0 +1,5 @@
+/* Skeleton Component Styles */
+
+[data-slot="skeleton"] {
+  @apply animate-pulse rounded-md bg-muted;
+}

package/components/slider.css

@@ -0,0 +1,49 @@
+/* Slider Component Styles */
+
+[data-slot="slider"] {
+  @apply relative flex w-full touch-none select-none items-center;
+}
+
+[data-slot="slider"][data-orientation="vertical"] {
+  @apply h-full w-auto flex-col;
+}
+
+[data-slot="slider-track"] {
+  @apply relative grow overflow-hidden rounded-full bg-secondary;
+}
+
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-track"] {
+  @apply h-2 w-full;
+}
+
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"] {
+  @apply h-full w-2;
+}
+
+[data-slot="slider-range"] {
+  @apply absolute bg-primary;
+}
+
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-range"] {
+  @apply h-full;
+}
+
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"] {
+  @apply w-full;
+}
+
+[data-slot="slider-thumb"] {
+  @apply block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+}
+
+[data-slot="slider-value-label"] {
+  @apply absolute text-xs font-medium text-foreground;
+}
+
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-value-label"] {
+  @apply -top-6 -translate-x-1/2;
+}
+
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-value-label"] {
+  @apply -left-8 top-1/2 -translate-y-1/2;
+}