shadcn-ui 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a6f3c1462c5fec38163ab5cbac5af561ca2d05f3944ca41bab01649c14ac6fa
-  data.tar.gz: 5a7fb75ae5e0f7d0db67bf0e55fdc55e65390e5bf535b351f17d69b4b03dd23c
+  metadata.gz: 22a141b91988a0b7411fa66841274699ee3f55d4a6b7b2afb152000cdba95385
+  data.tar.gz: f7a806d1a7897c1154b4b6a23903d1a2295e4152e29638ff6e5721982eea4760
 SHA512:
-  metadata.gz: 1923bfc2b23ab4fd10aff954938111600c1d4e820c47b87827b67c8529bf1540eb36ae058d8bb0973dce3090802855414e6b200f633d08cfeac75db698e75057
-  data.tar.gz: b16a329953472dee87d8851958f17e2757b1c8709e21c3e5825990486ef80c1ed1b78f459ce23c3d55645786b8173fce76ad6d5b834ecafbadf9940970330410
+  metadata.gz: 1b2264728f5100c07607e963c4027aa406e91c7635ef9b9cf6e1c21f5dd7fa193575e0a11b08a2021358835de6645665f6370b4119a1169c99b6ece40c195f9d
+  data.tar.gz: 357afd147401ff2c9911082690ed8b8f8162bbf60d64a229ee1c51bfbfd7c6cbfcfa88c8ace873dc1c64029c3ef5fefe64d4e0767029eec579eeb4208defb985

data/.env

@@ -0,0 +1 @@
+RAILS_MASTER_KEY=1b9d0e6b785b2a5e2648a484f41295cd

data/Rakefile

@@ -1,11 +1,14 @@
 # Add your own tasks in files placed in lib/tasks ending in .rake,
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
 require "bundler/gem_tasks"
-require "rspec/core/rake_task"
 
-RSpec::Core::RakeTask.new(:spec)
+if ENV["RAILS_ENV"] != "production"
+  require "rspec/core/rake_task"
 
-task default: :spec
+  RSpec::Core::RakeTask.new(:spec)
+
+  task default: :spec
+end
 
 require_relative "config/application"
 

data/app/assets/stylesheets/{application.scss → application.css}

@@ -13,30 +13,3 @@
  *=
  *= require_self
  */
-.st-accordion {
-  .st-accordion__icon:before {
-    content: "▼";
-    display: inline-block;
-    margin-right: 5px;
-    font-size: 80%;
-    text-decoration: none;
-    transform: rotate(-90deg);
-  }
-  .st-accordion__icon--opened:before {
-    transform: rotate(0deg);
-  }
-
-  .st-accordion__content:not(.st-accordion__content--visible) {
-    height: 0;
-    opacity: 0;
-    visibility: hidden;
-    overflow: hidden;
-    transition: all 0.2s;
-  }
-  .st-accordion__content.st-accordion__content--visible {
-    opacity: 1;
-    visibility: visible;
-    overflow: hidden;
-    transition: all 0.2s;
-  }
-}

data/app/assets/stylesheets/application.tailwind.css

@@ -1,182 +1,42 @@
+@import "shadcn.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --font-sans: "Inter var";
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --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%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    width: 100%;
   }
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-
-  .code-sample {
-    @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
-  }
-
-  .code-sample span {
-    @apply bg-zinc-950;
+  :root {
+    --pink: 301 98% 50% 0.88;
   }
 }
-input[type="range"] {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 1em;
-  font-family: Arial, sans-serif;
-}
-
-/* input[type="range"]:focus,
-input[type="number"]:focus {
-  box-shadow: 0 0 3px 1px #4b81dd;
-  outline: none;
-} */
-
-input[type="range"] {
-  -webkit-appearance: none;
-  margin-right: 15px;
-  width: 200px;
-  height: 7px;
-  background: #f4f4f5;
-  border-radius: 5px;
-  background-image: linear-gradient(#000, #000);
-  background-repeat: no-repeat;
-}
-
-/* Input Thumb */
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
-}
-
-input[type="range"]::-moz-range-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
-}
 
-input[type="range"]::-ms-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
+article.documentation h1 {
+  @apply scroll-m-20 text-4xl font-bold tracking-tight;
 }
 
-/* input[type="range"]::-webkit-slider-thumb:hover {
-  background: #a1a1aa;
+article.documentation p + h1 {
+  @apply mt-12;
 }
-
-input[type="range"]::-moz-range-thumb:hover {
-  background: #a1a1aa;
+article.documentation h2 {
+  @apply scroll-m-20 text-3xl font-bold tracking-tight my-8;
 }
 
-input[type="range"]::-ms-thumb:hover {
-  background: #a1a1aa;
-} */
-
-input[type="range"]::-moz-range-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
+article.documentation h3 {
+  @apply scroll-m-20 text-2xl font-bold tracking-tight my-4;
 }
 
-input[type="range"]::-ms-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
+article.documentation h4 {
+  @apply scroll-m-20 text-xl font-bold tracking-tight my-2;
 }
 
-article.documentation h1 {
-  @apply scroll-m-20 text-4xl font-bold tracking-tight;
-}
 article.documentation subtitle {
   @apply text-lg text-muted-foreground;
 }
@@ -191,3 +51,15 @@ article.documentation :where(code):not(:where([class~="not-prose"] *)):before {
 article.documentation :where(code):not(:where([class~="not-prose"] *)):after {
   content: "";
 }
+
+article.documentation p a {
+  @apply underline hover:text-pink;
+}
+
+article.documentation pre {
+  @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900 text-white py-4 px-8 rounded-lg my-4;
+}
+
+article.documentation p > code {
+  @apply text-white bg-black p-1 rounded;
+}

data/app/assets/stylesheets/shadcn.css

@@ -0,0 +1,216 @@
+@layer base {
+  :root {
+    --font-sans: "Inter var";
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --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%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --success: 132, 95.3%, 33.3%, 0.74;
+    --success-foreground: 109 55% 28%;
+
+    --info: 223 78% 42%;
+    --info-foreground: 225 100% 50%;
+
+    --attention: 45 90% 45%;
+    --attention-foreground: 60 98.4% 48.8% 0.82;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --attention: 45, 90%, 45%, 0.8;
+    --attention-foreground: 60 98.4% 48.8% 0.82;
+
+    --success: 109 55% 28%;
+    --success-foreground: 109 55% 28%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  .code-sample {
+    @apply max-h-[650px] min-h-[350px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
+  }
+
+  .code-sample pre {
+    @apply min-h-[350px];
+  }
+
+  .code-sample span {
+    @apply bg-zinc-950;
+  }
+}
+input[type="range"] {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1em;
+  font-family: Arial, sans-serif;
+}
+
+/* input[type="range"]:focus,
+input[type="number"]:focus {
+  box-shadow: 0 0 3px 1px #4b81dd;
+  outline: none;
+} */
+
+input[type="range"] {
+  -webkit-appearance: none;
+  margin-right: 15px;
+  width: 200px;
+  height: 7px;
+  background: #f4f4f5;
+  border-radius: 5px;
+  background-image: linear-gradient(#000, #000);
+  background-repeat: no-repeat;
+}
+
+/* Input Thumb */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+input[type="range"]::-moz-range-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+input[type="range"]::-ms-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+/* input[type="range"]::-webkit-slider-thumb:hover {
+  background: #a1a1aa;
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  background: #a1a1aa;
+}
+
+input[type="range"]::-ms-thumb:hover {
+  background: #a1a1aa;
+} */
+
+input[type="range"]::-moz-range-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-ms-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+.st-accordion .st-accordion__icon:before {
+  content: "▼";
+  display: inline-block;
+  margin-right: 5px;
+  font-size: 80%;
+  text-decoration: none;
+  transform: rotate(-90deg);
+}
+.st-accordion .st-accordion__icon--opened:before {
+  transform: rotate(0deg);
+}
+
+.st-accordion .st-accordion__content:not(.st-accordion__content--visible) {
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+.st-accordion .st-accordion__content.st-accordion__content--visible {
+  opacity: 1;
+  visibility: visible;
+  overflow: hidden;
+  transition: all 0.2s;
+}

data/app/controllers/documentation_controller.rb

@@ -4,6 +4,7 @@ class DocumentationController < ActionController::Base
   end
 
   def show
+    binding.pry
     render "documentation/#{params[:id]}"
   end
 end

data/app/helpers/components/accordion_helper.rb

@@ -1,5 +1,18 @@
 module Components::AccordionHelper
-  def render_accordion(title:, description:)
+  def accordion_title(&block)
+    content_for :title, capture(&block), flush: true
+  end
+
+  def accordion_description(&block)
+    content_for :description, capture(&block), flush: true
+  end
+
+  def render_accordion(title: nil, description: nil, &block)
+    if title && !description
+      content_for :description, capture(&block), flush: true
+    elsif !title && !description
+      capture(&block)
+    end
     render "components/ui/accordion", title: title, description: description
   end
 end

data/app/helpers/components/alert_helper.rb

@@ -1,11 +1,13 @@
 module Components::AlertHelper
-  def render_alert(title:, description:, variant: :default)
+  def render_alert(title:, description:, variant: :default, icon: true)
     alert_classes = case variant.to_sym
     when :default
       "[&>svg]:text-foreground bg-background text-foreground"
     when :error, :danger, :alert, :destructive
       "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+    else
+      "border-#{variant}/50 text-#{variant} dark:border-#{variant} [&>svg]:text-#{variant}"
     end
-    render "components/ui/alert", title: title, description: description, alert_classes: alert_classes, variant: variant
+    render "components/ui/alert", title:, description:, alert_classes:, variant:, icon:
   end
 end

data/app/helpers/components/button_helper.rb

@@ -1,5 +1,5 @@
 module Components::ButtonHelper
-  def render_button(label = "", data: "", text: "", variant: :default, as: :button, href: nil, **options)
+  def render_button(label = "", text: nil, variant: :default, as: :button, href: nil, data: {}, **options, &block)
     button_classes = " inline-flex items-center justify-center rounded-md text-sm font-medium 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 h-10 px-4 py-2 "
     varianet_classes = case variant.to_sym
     when :default
@@ -15,6 +15,7 @@ module Components::ButtonHelper
     end
     button_classes << " #{varianet_classes} #{options[:class]}"
     text = label if label.present?
+    text = capture(&block) if block
     render "components/ui/button", text:, button_classes:, as:, href:, data:, **options
   end
 end

data/app/helpers/components/card_helper.rb

@@ -1,5 +1,5 @@
 module Components::CardHelper
-  def render_card(footer: nil, title: nil, subtitle: nil, body: nil, **options, &block)
+  def render_card(title: nil, subtitle: nil, body: nil, footer: nil, **options, &block)
     render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, options: options
   end
 end

data/app/helpers/components/checkbox_helper.rb

@@ -1,5 +1,5 @@
 module Components::CheckboxHelper
-  def render_checkbox(label:, name:)
-    render "components/ui/checkbox", name: name, label: label
+  def render_checkbox(label:, name:, **options)
+    render "components/ui/checkbox", name: name, label: label, options: options
   end
 end

data/app/helpers/components/collapsible_helper.rb

@@ -1,4 +1,12 @@
 module Components::CollapsibleHelper
+  def collapsible_preview(&block)
+    content_for :preview, capture(&block) if block
+  end
+
+  def collapsible_body(&block)
+    content_for :body, capture(&block) if block
+  end
+
   def render_collapsible(**options, &block)
     content = capture(&block) if block
     render "components/ui/collapsible", content: content, **options

data/app/helpers/components/sheet_helper.rb

@@ -17,4 +17,13 @@ module Components::SheetHelper
   def sheet_content(&block)
     content_for :sheet_content, capture(&block), flush: true
   end
+
+  def direction_class(direction)
+    mappings = {
+      "left": 'left-0',
+      "right": 'right-0'
+    }
+
+    mappings[direction.to_sym]
+  end
 end

data/app/helpers/components_helper.rb

@@ -4,4 +4,15 @@ module ComponentsHelper
   OUTLINE_CLASSES = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
   GHOST_CLASSES = " hover:bg-accent hover:text-accent-foreground  "
   DESTRUCTIVE_CLASSES = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+
+  module Button
+    PRIMARY = " bg-primary text-primary-foreground hover:bg-primary/80 "
+    SECONDARY = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
+    OUTLINE = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
+    GHOST = " hover:bg-accent hover:text-accent-foreground  "
+    DESTRUCTIVE = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+  end
+
+  module Alert
+  end
 end

data/app/helpers/examples_helper.rb

@@ -24,9 +24,8 @@ module ExamplesHelper
   end
 
   def code_sample(content = "", language:, &block)
-    content_tag :pre, class: "code-sample px-4 my-2 pb-5", data: {controller: "highlight"} do
+    content_tag :pre, class: "code-sample px-4 my-2 pb-5 min-h-fit", data: {controller: "highlight"} do
       content_tag :code, class: "language-#{language}" do
-        content
         yield if block
       end
     end

data/app/views/components/ui/_accordion.html.erb

@@ -14,7 +14,7 @@
         aria-expanded="true"
         data-orientation="vertical"
         class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180">
-        <%= title %><svg
+        <%= title || content_for(:title) %><svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -34,7 +34,7 @@
       role="region"
       data-orientation="vertical"
       class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
-      <div class="pb-4 pt-0"><%= description %></div>
+      <div class="pb-4 pt-0"><%= description || content_for(:description) %></div>
     </div>
   </div>
 </div>