shadcn-rails 0.1.0

data/app/assets/stylesheets/shadcn/components.css

@@ -0,0 +1,513 @@
+/**
+ * shadcn-rails Component Styles
+ *
+ * This file contains component-specific styles that work with Stimulus controllers.
+ * These styles handle data-state attributes and other dynamic styling needs.
+ *
+ * Import this file in your application's stylesheet:
+ *   @import "shadcn/components";
+ *
+ * Or with asset pipeline:
+ *   *= require shadcn/components
+ */
+
+/* ============================================
+   Switch Component
+   ============================================ */
+
+/* Button-based Switch with data-state */
+button[role="switch"] {
+  background-color: hsl(var(--input));
+  transition: background-color 0.2s ease-in-out;
+}
+
+button[role="switch"][data-state="checked"] {
+  background-color: hsl(var(--primary));
+}
+
+button[role="switch"][data-state="unchecked"] {
+  background-color: hsl(var(--input));
+}
+
+/* Switch thumb positioning */
+button[role="switch"] > span[data-state="checked"] {
+  transform: translateX(1rem);
+}
+
+button[role="switch"] > span[data-state="unchecked"] {
+  transform: translateX(0);
+}
+
+/* Disabled switch */
+button[role="switch"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   Slider Component
+   ============================================ */
+
+/* Custom slider styling with CSS custom property for fill */
+input[type="range"].shadcn-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 100%;
+}
+
+/* Track styling */
+input[type="range"].shadcn-slider::-webkit-slider-runnable-track {
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    hsl(var(--primary)) 0%,
+    hsl(var(--primary)) var(--slider-fill, 0%),
+    hsl(var(--secondary)) var(--slider-fill, 0%),
+    hsl(var(--secondary)) 100%
+  );
+}
+
+input[type="range"].shadcn-slider::-moz-range-track {
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: hsl(var(--secondary));
+}
+
+input[type="range"].shadcn-slider::-moz-range-progress {
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: hsl(var(--primary));
+}
+
+/* Thumb styling */
+input[type="range"].shadcn-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: hsl(var(--background));
+  border: 2px solid hsl(var(--primary));
+  margin-top: -0.375rem;
+  transition: transform 0.1s ease-in-out;
+}
+
+input[type="range"].shadcn-slider::-moz-range-thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: hsl(var(--background));
+  border: 2px solid hsl(var(--primary));
+  transition: transform 0.1s ease-in-out;
+}
+
+/* Hover/focus states for thumb */
+input[type="range"].shadcn-slider:hover::-webkit-slider-thumb {
+  transform: scale(1.1);
+}
+
+input[type="range"].shadcn-slider:hover::-moz-range-thumb {
+  transform: scale(1.1);
+}
+
+input[type="range"].shadcn-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
+}
+
+input[type="range"].shadcn-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
+}
+
+/* Disabled slider */
+input[type="range"].shadcn-slider:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+input[type="range"].shadcn-slider:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+input[type="range"].shadcn-slider:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   Checkbox Component
+   ============================================ */
+
+/* Native checkbox styling */
+input[type="checkbox"].shadcn-checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid hsl(var(--primary));
+  border-radius: calc(var(--radius) - 4px);
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+
+input[type="checkbox"].shadcn-checkbox:checked {
+  background-color: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+}
+
+/* Checkmark */
+input[type="checkbox"].shadcn-checkbox:checked::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  width: 4px;
+  height: 8px;
+  border: solid hsl(var(--primary-foreground));
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* Focus state */
+input[type="checkbox"].shadcn-checkbox:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
+}
+
+/* Disabled state */
+input[type="checkbox"].shadcn-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   Radio Group Component
+   ============================================ */
+
+/* Native radio styling */
+input[type="radio"].shadcn-radio {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid hsl(var(--primary));
+  border-radius: 9999px;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.15s ease-in-out;
+}
+
+input[type="radio"].shadcn-radio:checked {
+  border-color: hsl(var(--primary));
+}
+
+/* Radio dot */
+input[type="radio"].shadcn-radio:checked::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background-color: hsl(var(--primary));
+  transform: translate(-50%, -50%);
+}
+
+/* Focus state */
+input[type="radio"].shadcn-radio:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
+}
+
+/* Disabled state */
+input[type="radio"].shadcn-radio:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   Toggle Component
+   ============================================ */
+
+/* Toggle button with data-state */
+button[data-state="on"].shadcn-toggle {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+button[data-state="off"].shadcn-toggle {
+  background-color: transparent;
+}
+
+/* ============================================
+   Accordion Component
+   ============================================ */
+
+/* Accordion content animation */
+[data-state="open"] > .accordion-content {
+  animation: accordion-down 0.2s ease-out;
+}
+
+[data-state="closed"] > .accordion-content {
+  animation: accordion-up 0.2s ease-out;
+}
+
+/* Accordion chevron rotation */
+[data-state="open"] .accordion-chevron {
+  transform: rotate(180deg);
+}
+
+[data-state="closed"] .accordion-chevron {
+  transform: rotate(0deg);
+}
+
+.accordion-chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
+/* ============================================
+   Collapsible Component
+   ============================================ */
+
+/* Collapsible content animation */
+[data-state="open"] > .collapsible-content {
+  animation: collapsible-down 0.2s ease-out;
+}
+
+[data-state="closed"] > .collapsible-content {
+  animation: collapsible-up 0.2s ease-out;
+}
+
+/* ============================================
+   Dialog & Sheet Components
+   ============================================ */
+
+/* Overlay styles */
+.shadcn-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 50;
+}
+
+.shadcn-overlay[data-state="open"] {
+  animation: fade-in 150ms ease-out;
+}
+
+.shadcn-overlay[data-state="closed"] {
+  animation: fade-out 150ms ease-in;
+}
+
+/* Dialog content */
+.shadcn-dialog-content[data-state="open"] {
+  animation: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+}
+
+.shadcn-dialog-content[data-state="closed"] {
+  animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
+}
+
+/* Sheet content - slides from different directions */
+.shadcn-sheet-content[data-side="top"][data-state="open"] {
+  animation: slide-in-from-top 300ms ease-out;
+}
+
+.shadcn-sheet-content[data-side="bottom"][data-state="open"] {
+  animation: slide-in-from-bottom 300ms ease-out;
+}
+
+.shadcn-sheet-content[data-side="left"][data-state="open"] {
+  animation: slide-in-from-left 300ms ease-out;
+}
+
+.shadcn-sheet-content[data-side="right"][data-state="open"] {
+  animation: slide-in-from-right 300ms ease-out;
+}
+
+/* ============================================
+   Popover & Tooltip Components
+   ============================================ */
+
+.shadcn-popover[data-state="open"],
+.shadcn-tooltip[data-state="open"] {
+  animation: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+}
+
+.shadcn-popover[data-state="closed"],
+.shadcn-tooltip[data-state="closed"] {
+  animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
+}
+
+/* ============================================
+   Dropdown Menu Component
+   ============================================ */
+
+.shadcn-dropdown[data-state="open"] {
+  animation: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+}
+
+.shadcn-dropdown[data-state="closed"] {
+  animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
+}
+
+/* ============================================
+   Select Component
+   ============================================ */
+
+.shadcn-select-content[data-state="open"] {
+  animation: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+}
+
+.shadcn-select-content[data-state="closed"] {
+  animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
+}
+
+/* Select trigger chevron */
+.shadcn-select-trigger[data-state="open"] .select-chevron {
+  transform: rotate(180deg);
+}
+
+.select-chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
+/* ============================================
+   Tabs Component
+   ============================================ */
+
+/* Active tab indicator */
+[role="tab"][data-state="active"] {
+  color: hsl(var(--foreground));
+}
+
+[role="tab"][data-state="inactive"] {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Tab content visibility */
+[role="tabpanel"][data-state="active"] {
+  display: block;
+}
+
+[role="tabpanel"][data-state="inactive"] {
+  display: none;
+}
+
+/* ============================================
+   Toast Component
+   ============================================ */
+
+.shadcn-toast[data-state="open"] {
+  animation: slide-in-from-right 300ms ease-out;
+}
+
+.shadcn-toast[data-state="closed"] {
+  animation: fade-out 150ms ease-in, slide-out-to-right 300ms ease-in;
+}
+
+/* Toast variants */
+.shadcn-toast[data-variant="destructive"] {
+  border-color: hsl(var(--destructive));
+  background-color: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
+}
+
+/* ============================================
+   Progress Component
+   ============================================ */
+
+.shadcn-progress-indeterminate .shadcn-progress-indicator {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+/* ============================================
+   Hover Card Component
+   ============================================ */
+
+.shadcn-hover-card[data-state="open"] {
+  animation: fade-in 150ms ease-out, zoom-in 150ms ease-out;
+}
+
+.shadcn-hover-card[data-state="closed"] {
+  animation: fade-out 150ms ease-in, zoom-out 150ms ease-in;
+}
+
+/* ============================================
+   Drawer Component
+   ============================================ */
+
+/* Drawer overlay */
+[data-shadcn--drawer-target="overlay"] {
+  transition: opacity 200ms ease-out;
+  opacity: 0;
+}
+
+[data-shadcn--drawer-target="overlay"][data-state="open"] {
+  opacity: 1;
+}
+
+[data-shadcn--drawer-target="overlay"][data-state="closed"] {
+  opacity: 0;
+}
+
+/* Drawer content base styles */
+[data-shadcn--drawer-target="content"] {
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Bottom drawer animations */
+[data-shadcn--drawer-target="content"][data-direction="bottom"] {
+  transform: translateY(100%);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="bottom"][data-state="open"] {
+  transform: translateY(0);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="bottom"][data-state="closed"] {
+  transform: translateY(100%);
+}
+
+/* Top drawer animations */
+[data-shadcn--drawer-target="content"][data-direction="top"] {
+  transform: translateY(-100%);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="top"][data-state="open"] {
+  transform: translateY(0);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="top"][data-state="closed"] {
+  transform: translateY(-100%);
+}
+
+/* Left drawer animations */
+[data-shadcn--drawer-target="content"][data-direction="left"] {
+  transform: translateX(-100%);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="left"][data-state="open"] {
+  transform: translateX(0);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="left"][data-state="closed"] {
+  transform: translateX(-100%);
+}
+
+/* Right drawer animations */
+[data-shadcn--drawer-target="content"][data-direction="right"] {
+  transform: translateX(100%);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="right"][data-state="open"] {
+  transform: translateX(0);
+}
+
+[data-shadcn--drawer-target="content"][data-direction="right"][data-state="closed"] {
+  transform: translateX(100%);
+}

data/app/assets/stylesheets/shadcn/index.css

@@ -0,0 +1,18 @@
+/**
+ * shadcn-rails Complete Styles
+ *
+ * This file imports all shadcn-rails styles including:
+ * - base.css: CSS variables, theme colors, and animations
+ * - components.css: Component-specific styles for data-state and interactive elements
+ *
+ * Import this single file to get everything:
+ *   @import "shadcn/index";
+ *
+ * Or with asset pipeline:
+ *   *= require shadcn/index
+ *
+ * You can also import files individually if you only need specific styles.
+ */
+
+@import "shadcn/base.css";
+@import "shadcn/components.css";

data/app/assets/stylesheets/shadcn/themes/gray.css

@@ -0,0 +1,68 @@
+/**
+ * Gray Theme for shadcn-rails
+ *
+ * Import this file to use the Gray color theme:
+ *   @import "shadcn/themes/gray";
+ */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --primary: 220.9 39.3% 11%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 224 71.4% 4.1%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+  --ring: 216 12.2% 83.9%;
+}

data/app/assets/stylesheets/shadcn/themes/slate.css

@@ -0,0 +1,68 @@
+/**
+ * Slate Theme for shadcn-rails
+ *
+ * Import this file to use the Slate color theme:
+ *   @import "shadcn/themes/slate";
+ */
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}