uikit_rails 0.1.1

data/test_app/app/assets/stylesheets/ui/sheet.css

@@ -0,0 +1,193 @@
+/* ============================================
+ * UikitRails — Sheet
+ *
+ * Slide-over panel using native <dialog> element.
+ * Slides in from any side: top, right, bottom, left.
+ * ============================================ */
+
+.ui-sheet {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.ui-sheet::backdrop {
+  display: none;
+}
+
+/* --- Overlay --- */
+
+.ui-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: ui-sheet-fade-in var(--ui-transition-speed) ease;
+}
+
+/* --- Content (shared) --- */
+
+.ui-sheet__content {
+  position: fixed;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  padding: 1.5rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  z-index: 51;
+  font-family: var(--ui-font-family);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+/* --- Side modifiers --- */
+
+.ui-sheet__content--right {
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  border-left: 1px solid var(--ui-border);
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-right var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--left {
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  border-right: 1px solid var(--ui-border);
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+  animation: ui-sheet-slide-in-left var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-height: 24rem;
+  border-bottom: 1px solid var(--ui-border);
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-top var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__content--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+  max-height: 24rem;
+  border-top: 1px solid var(--ui-border);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  animation: ui-sheet-slide-in-bottom var(--ui-transition-speed) ease;
+}
+
+/* --- Header --- */
+
+.ui-sheet__header {
+  margin-bottom: 1rem;
+}
+
+.ui-sheet__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ui-foreground);
+  line-height: 1.25;
+}
+
+.ui-sheet__description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0.25rem 0 0;
+  line-height: 1.5;
+}
+
+/* --- Body --- */
+
+.ui-sheet__body {
+  font-size: var(--ui-font-size-sm);
+  flex: 1;
+}
+
+/* --- Footer --- */
+
+.ui-sheet__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+/* --- Close Button --- */
+
+.ui-sheet__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ui-muted-foreground);
+  padding: 0.25rem;
+  border-radius: var(--ui-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--ui-transition-speed) ease;
+}
+
+.ui-sheet__close:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-sheet__close:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Animations --- */
+
+@keyframes ui-sheet-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ui-sheet-slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes ui-sheet-slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes ui-sheet-slide-in-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes ui-sheet-slide-in-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}

data/test_app/app/assets/stylesheets/ui/skeleton.css

@@ -0,0 +1,25 @@
+/* ============================================
+ * UikitRails — Skeleton
+ *
+ * Animated loading placeholder
+ * ============================================ */
+
+.ui-skeleton {
+  background-color: var(--ui-muted);
+  animation: ui-skeleton-pulse 2s ease-in-out infinite;
+}
+
+.ui-skeleton--rounded {
+  border-radius: var(--ui-radius);
+}
+
+@keyframes ui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

data/test_app/app/assets/stylesheets/ui/switch.css

@@ -0,0 +1,81 @@
+/* ============================================
+ * UikitRails — Switch
+ *
+ * Pure CSS toggle switch (no JS required).
+ * Uses a hidden checkbox + styled label.
+ * ============================================ */
+
+.ui-switch__wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ui-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.ui-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ui-muted);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color var(--ui-transition-speed) ease;
+  flex-shrink: 0;
+}
+
+.ui-switch__thumb {
+  position: absolute;
+  left: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--ui-background);
+  border-radius: 9999px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform var(--ui-transition-speed) ease;
+}
+
+/* Checked state */
+.ui-switch__input:checked + .ui-switch {
+  background-color: var(--ui-primary);
+}
+
+.ui-switch__input:checked + .ui-switch .ui-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Focus state */
+.ui-switch__input:focus-visible + .ui-switch {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* Disabled state */
+.ui-switch__input:disabled + .ui-switch {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-switch__input:disabled ~ .ui-switch__label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-switch__label {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  cursor: pointer;
+  user-select: none;
+}

data/test_app/app/assets/stylesheets/ui/table.css

@@ -0,0 +1,86 @@
+/* ============================================
+ * UikitRails — Table
+ *
+ * Slots: caption, header, body (content), footer
+ * ============================================ */
+
+.ui-table__wrapper {
+  overflow-x: auto;
+  width: 100%;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+}
+
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  background-color: var(--ui-background);
+}
+
+.ui-table__caption {
+  padding: 0.75rem 1rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  text-align: left;
+  caption-side: bottom;
+}
+
+/* --- Head --- */
+
+.ui-table__head {
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-table__head tr {
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-table__head th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+  white-space: nowrap;
+}
+
+/* --- Body --- */
+
+.ui-table__body tr {
+  border-bottom: 1px solid var(--ui-border);
+  transition: background-color var(--ui-transition-speed) ease;
+}
+
+.ui-table__body tr:last-child {
+  border-bottom: none;
+}
+
+.ui-table__body tr:nth-child(even) {
+  background-color: color-mix(in srgb, var(--ui-muted) 40%, transparent);
+}
+
+.ui-table__body tr:hover {
+  background-color: color-mix(in srgb, var(--ui-muted) 60%, transparent);
+}
+
+.ui-table__body td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  vertical-align: middle;
+}
+
+/* --- Foot --- */
+
+.ui-table__foot {
+  border-top: 1px solid var(--ui-border);
+}
+
+.ui-table__foot td,
+.ui-table__foot th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+}

data/test_app/app/assets/stylesheets/ui/tabs.css

@@ -0,0 +1,72 @@
+/* ============================================
+ * UikitRails — Tabs
+ *
+ * Tabbed content panels with accessible roles
+ * and keyboard-friendly triggers.
+ * ============================================ */
+
+.ui-tabs {
+  font-family: var(--ui-font-family);
+  width: 100%;
+}
+
+/* --- Tab List --- */
+
+.ui-tabs__list {
+  display: flex;
+  border-bottom: 1px solid var(--ui-border);
+  gap: 0;
+}
+
+/* --- Trigger --- */
+
+.ui-tabs__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1rem;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  color: var(--ui-muted-foreground);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+}
+
+.ui-tabs__trigger:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-tabs__trigger:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+
+.ui-tabs__trigger--active {
+  color: var(--ui-foreground);
+  border-bottom-color: var(--ui-primary);
+}
+
+/* --- Panel --- */
+
+.ui-tabs__panel {
+  padding-top: 1rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+}
+
+.ui-tabs__panel[hidden] {
+  display: none;
+}
+
+.ui-tabs__panel--active {
+  display: block;
+}

data/test_app/app/assets/stylesheets/ui/textarea.css

@@ -0,0 +1,39 @@
+/* ============================================
+ * UikitRails — Textarea
+ *
+ * Multi-line text input field.
+ * ============================================ */
+
+.ui-textarea {
+  display: flex;
+  width: 100%;
+  min-height: 80px;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  line-height: 1.5;
+  color: var(--ui-foreground);
+  background-color: var(--ui-background);
+  border: 1px solid var(--ui-input);
+  border-radius: var(--ui-radius);
+  resize: vertical;
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-textarea::placeholder {
+  color: var(--ui-muted-foreground);
+}
+
+.ui-textarea:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}

data/test_app/app/assets/stylesheets/ui/toggle.css

@@ -0,0 +1,89 @@
+/* ============================================
+ * UikitRails — Toggle
+ *
+ * Pressable toggle button.
+ * Variants: default, outline
+ * Sizes:    sm, md, lg
+ * ============================================ */
+
+.ui-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: var(--ui-font-family);
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius);
+  background-color: transparent;
+  color: var(--ui-muted-foreground);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+  line-height: 1;
+}
+
+.ui-toggle:hover {
+  background-color: var(--ui-muted);
+  color: var(--ui-muted-foreground);
+}
+
+.ui-toggle:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+.ui-toggle:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* --- Pressed state --- */
+
+.ui-toggle--pressed {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-toggle--pressed:hover {
+  background-color: color-mix(in srgb, var(--ui-accent) 80%, transparent);
+}
+
+/* --- Variants --- */
+
+.ui-toggle--outline {
+  border-color: var(--ui-border);
+  background-color: transparent;
+}
+
+.ui-toggle--outline:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-toggle--outline.ui-toggle--pressed {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+/* --- Sizes --- */
+
+.ui-toggle--sm {
+  height: 2.25rem;
+  padding: 0 0.625rem;
+  font-size: var(--ui-font-size-xs);
+}
+
+.ui-toggle--md {
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-toggle--lg {
+  height: 2.75rem;
+  padding: 0 1.25rem;
+  font-size: var(--ui-font-size-base);
+}

data/test_app/app/assets/stylesheets/ui/tooltip.css

@@ -0,0 +1,78 @@
+/* ============================================
+ * UikitRails — Tooltip
+ *
+ * Hover/focus tooltip popup with four placement
+ * options: top, bottom, left, right.
+ * ============================================ */
+
+.ui-tooltip {
+  position: relative;
+  display: inline-flex;
+  font-family: var(--ui-font-family);
+}
+
+.ui-tooltip__trigger {
+  display: inline-flex;
+}
+
+/* --- Tooltip Content --- */
+
+.ui-tooltip__content {
+  position: absolute;
+  z-index: 50;
+  background-color: var(--ui-foreground);
+  color: var(--ui-background);
+  font-size: var(--ui-font-size-xs);
+  line-height: 1.4;
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--ui-radius);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--ui-transition-speed) ease;
+}
+
+.ui-tooltip__content[hidden] {
+  display: none;
+}
+
+.ui-tooltip__content:not([hidden]) {
+  opacity: 1;
+}
+
+/* --- Position: Top (default) --- */
+
+.ui-tooltip__content--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+/* --- Position: Bottom --- */
+
+.ui-tooltip__content--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+/* --- Position: Left --- */
+
+.ui-tooltip__content--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+/* --- Position: Right --- */
+
+.ui-tooltip__content--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}