uikit_rails 0.1.1

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

@@ -0,0 +1,55 @@
+/* ============================================
+ * UikitRails — Collapsible
+ *
+ * Expandable/collapsible content section with
+ * smooth height transition.
+ * ============================================ */
+
+.ui-collapsible {
+  font-family: var(--ui-font-family);
+  color: var(--ui-foreground);
+}
+
+/* --- Trigger --- */
+
+.ui-collapsible__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 0.75rem 0;
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  user-select: none;
+  border-radius: var(--ui-radius);
+  transition: color var(--ui-transition-speed) ease;
+}
+
+.ui-collapsible__trigger:hover {
+  color: var(--ui-accent-foreground);
+}
+
+.ui-collapsible__trigger:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Content --- */
+
+.ui-collapsible__content {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition:
+    max-height var(--ui-transition-speed) ease,
+    opacity var(--ui-transition-speed) ease,
+    padding var(--ui-transition-speed) ease;
+  font-size: var(--ui-font-size-sm);
+  padding: 0;
+}
+
+.ui-collapsible__content--open {
+  max-height: 500px;
+  opacity: 1;
+  padding: 0.5rem 0 0.75rem;
+}

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

@@ -0,0 +1,133 @@
+/* ============================================
+ * UikitRails — Dialog
+ *
+ * Modal dialog using native <dialog> element
+ * with backdrop overlay and slide-in animation.
+ * ============================================ */
+
+.ui-dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: 100vw;
+  max-height: 100vh;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.ui-dialog::backdrop {
+  display: none;
+}
+
+/* --- Overlay --- */
+
+.ui-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: ui-dialog-fade-in var(--ui-transition-speed) ease;
+}
+
+/* --- Content --- */
+
+.ui-dialog__content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 32rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  z-index: 51;
+  font-family: var(--ui-font-family);
+  animation: ui-dialog-scale-in var(--ui-transition-speed) ease;
+}
+
+/* --- Header --- */
+
+.ui-dialog__header {
+  margin-bottom: 1rem;
+}
+
+.ui-dialog__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--ui-foreground);
+  line-height: 1.25;
+}
+
+.ui-dialog__description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0.25rem 0 0;
+  line-height: 1.5;
+}
+
+/* --- Body --- */
+
+.ui-dialog__body {
+  font-size: var(--ui-font-size-sm);
+}
+
+/* --- Footer --- */
+
+.ui-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+/* --- Close Button --- */
+
+.ui-dialog__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-dialog__close:hover {
+  color: var(--ui-foreground);
+}
+
+.ui-dialog__close:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Animations --- */
+
+@keyframes ui-dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ui-dialog-scale-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

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

@@ -0,0 +1,104 @@
+/* ============================================
+ * UikitRails — Dropdown
+ *
+ * Dropdown menu triggered by a button with
+ * items, separators, and label subtypes.
+ * ============================================ */
+
+.ui-dropdown {
+  position: relative;
+  display: inline-block;
+  font-family: var(--ui-font-family);
+}
+
+/* --- Menu --- */
+
+.ui-dropdown__menu {
+  position: absolute;
+  top: 100%;
+  z-index: 50;
+  min-width: 12rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  animation: ui-dropdown-fade-in var(--ui-transition-speed) ease;
+}
+
+.ui-dropdown__menu[hidden] {
+  display: none;
+}
+
+/* --- Alignment --- */
+
+.ui-dropdown__menu--start {
+  left: 0;
+}
+
+.ui-dropdown__menu--end {
+  right: 0;
+}
+
+/* --- Item --- */
+
+.ui-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-foreground);
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--ui-radius) - 2px);
+  cursor: pointer;
+  transition: background-color var(--ui-transition-speed) ease;
+  line-height: 1.25;
+  box-sizing: border-box;
+}
+
+.ui-dropdown__item:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-dropdown__item:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: -2px;
+}
+
+/* --- Separator --- */
+
+.ui-dropdown__separator {
+  height: 1px;
+  margin: 0.25rem -0.25rem;
+  background-color: var(--ui-border);
+}
+
+/* --- Label --- */
+
+.ui-dropdown__label {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: var(--ui-font-size-xs);
+  font-weight: 600;
+  color: var(--ui-muted-foreground);
+  line-height: 1.25;
+}
+
+/* --- Animation --- */
+
+@keyframes ui-dropdown-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1,48 @@
+/* ============================================
+ * UikitRails — Form
+ *
+ * Form layout, field groups, description, and error text.
+ * ============================================ */
+
+.ui-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ui-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.ui-form-description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0;
+}
+
+.ui-form-error {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-destructive);
+  margin: 0;
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error),
+.ui-form-field .ui-textarea:has(~ .ui-form-error),
+.ui-form-field .ui-select:has(~ .ui-form-error) {
+  border-color: var(--ui-destructive);
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error):focus,
+.ui-form-field .ui-textarea:has(~ .ui-form-error):focus,
+.ui-form-field .ui-select:has(~ .ui-form-error):focus {
+  outline-color: var(--ui-destructive);
+}
+
+.ui-form-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}

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

@@ -0,0 +1,43 @@
+/* ============================================
+ * UikitRails — Input
+ *
+ * Standard text input field.
+ * ============================================ */
+
+.ui-input {
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  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);
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-input::placeholder {
+  color: var(--ui-muted-foreground);
+}
+
+.ui-input:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}
+
+.ui-input[type="file"] {
+  padding-top: 0.375rem;
+  font-size: var(--ui-font-size-xs);
+}

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

@@ -0,0 +1,25 @@
+/* ============================================
+ * UikitRails — Label
+ *
+ * Form label with consistent styling.
+ * ============================================ */
+
+.ui-label {
+  display: inline-block;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ui-foreground);
+  cursor: default;
+}
+
+.ui-label[for] {
+  cursor: pointer;
+}
+
+.ui-label--disabled,
+.ui-label[aria-disabled="true"] {
+  opacity: 0.7;
+  pointer-events: none;
+}

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

@@ -0,0 +1,89 @@
+/* ============================================
+ * UikitRails — Pagination
+ *
+ * Items: page, prev_page, next_page, ellipsis
+ * ============================================ */
+
+.ui-pagination {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+}
+
+.ui-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.ui-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  background-color: var(--ui-background);
+  color: var(--ui-foreground);
+  text-decoration: none;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-speed) ease,
+    color var(--ui-transition-speed) ease,
+    border-color var(--ui-transition-speed) ease;
+}
+
+.ui-pagination__item:hover {
+  background-color: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+}
+
+.ui-pagination__item:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}
+
+/* --- Active page --- */
+
+.ui-pagination__item--active {
+  background-color: var(--ui-primary);
+  color: var(--ui-primary-foreground);
+  border-color: var(--ui-primary);
+  pointer-events: none;
+}
+
+/* --- Disabled (prev/next) --- */
+
+.ui-pagination__item--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+/* --- Previous / Next --- */
+
+.ui-pagination__prev,
+.ui-pagination__next {
+  padding: 0 0.75rem;
+}
+
+/* --- Ellipsis --- */
+
+.ui-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  color: var(--ui-muted-foreground);
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  cursor: default;
+}

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

@@ -0,0 +1,94 @@
+/* ============================================
+ * UikitRails — Popover
+ *
+ * Floating content panel triggered by click.
+ * Supports side (top/bottom) and alignment
+ * (start/center/end) positioning.
+ * ============================================ */
+
+.ui-popover {
+  position: relative;
+  display: inline-block;
+  font-family: var(--ui-font-family);
+}
+
+/* --- Trigger --- */
+
+.ui-popover__trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* --- Content --- */
+
+.ui-popover__content {
+  position: absolute;
+  z-index: 50;
+  background: var(--ui-background);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  padding: 1rem;
+  width: 18rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  font-size: var(--ui-font-size-sm);
+
+  display: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--ui-transition-speed) ease,
+    transform var(--ui-transition-speed) ease;
+}
+
+.ui-popover__content--open {
+  display: block;
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* --- Side: bottom (default) --- */
+
+.ui-popover__content--bottom {
+  top: 100%;
+  margin-top: 0.5rem;
+}
+
+/* --- Side: top --- */
+
+.ui-popover__content--top {
+  bottom: 100%;
+  margin-bottom: 0.5rem;
+}
+
+/* --- Align: center (default) --- */
+
+.ui-popover__content--center {
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+}
+
+.ui-popover__content--center.ui-popover__content--open {
+  transform: translateX(-50%) scale(1);
+}
+
+/* --- Align: start --- */
+
+.ui-popover__content--start {
+  left: 0;
+}
+
+/* --- Align: end --- */
+
+.ui-popover__content--end {
+  right: 0;
+}
+
+/* --- Focus ring on content for accessibility --- */
+
+.ui-popover__content:focus-visible {
+  outline: 2px solid var(--ui-ring);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,20 @@
+/* ============================================
+ * UikitRails — Progress
+ *
+ * Accessible progress bar with smooth transitions
+ * ============================================ */
+
+.ui-progress {
+  width: 100%;
+  height: 0.625rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background-color: var(--ui-muted);
+}
+
+.ui-progress__bar {
+  height: 100%;
+  background-color: var(--ui-primary);
+  border-radius: 9999px;
+  transition: width var(--ui-transition-speed) ease;
+}

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

@@ -0,0 +1,46 @@
+/* ============================================
+ * UikitRails — Select
+ *
+ * Styled native select dropdown.
+ * ============================================ */
+
+.ui-select {
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 2.5rem 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);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  cursor: pointer;
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-select:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}
+
+.ui-select:invalid,
+.ui-select option[disabled] {
+  color: var(--ui-muted-foreground);
+}

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

@@ -0,0 +1,21 @@
+/* ============================================
+ * UikitRails — Separator
+ *
+ * Orientations: horizontal, vertical
+ * ============================================ */
+
+.ui-separator {
+  flex-shrink: 0;
+  background-color: var(--ui-border);
+}
+
+.ui-separator--horizontal {
+  width: 100%;
+  height: 1px;
+}
+
+.ui-separator--vertical {
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}