shadcn-ui 0.0.12 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d36b644105b526361e08e906fb9404b89f4099f4f860afdc229bebe36a4b1996
-  data.tar.gz: ad0edad68914c4d1eee78f8b468b5f28cbead6ebd22fbd58f174ef7b5f00d77a
+  metadata.gz: a39d85928cde2116a4a0ffb5bf8790b0697474a1dff54e164a8817f3e1c02dc7
+  data.tar.gz: d79e0cd3ce519b91f2e4186ed7946c67bf50e3d9125a0ad3767f6326ef21662b
 SHA512:
-  metadata.gz: d2d42f118d6048f572eab0597f8958be014e653ae2a0d020843308c96b2be4777798e91d54b648333caf67f516494b480edf7993639b64fbdaf5661ceb4389b6
-  data.tar.gz: cd3967406dcf715fd6604bf25f20e2e7f1c719feefa27b239f982be71ecc811118f74fd7351d59f230f6a0e8269a1be378b9760ee6ebb82fb6f8d6609503eee8
+  metadata.gz: d0cb9bf3bb84df2d8a57c334fc43db494ab29a3b31d31ec5192aee725a3e321a207a56b86df94abc1d8b010c0728f1e718002edb6da371c0467cd4a63651ebdd
+  data.tar.gz: 11839c8a282b0497e8a2a33726818b7889bfd0299a60d41b6887f24f3b81b8189f2171e9dfb8e0749cf660b5b2e2a36ba502c6996c8491b90067459f8e18b59b

data/app/assets/stylesheets/shadcn.css

@@ -1,84 +1,64 @@
+:root {
+  --font-sans: "Inter var";
+
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5% 64.9%;
+  --radius: 0.5rem;
+
+  --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;
+}
 @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;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --radius: 0.5rem;
 
     --success: 109 55% 28%;
     --success-foreground: 109 55% 28%;
 
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
+    --attention: 45, 90%, 45%, 0.8;
+    --attention-foreground: 60 98.4% 48.8% 0.82;
   }
 }
 
@@ -104,7 +84,19 @@
   .code-sample span {
     @apply bg-zinc-950;
   }
+  input.error {
+    @apply border-red-400;
+  }
+
+  label.error {
+    @apply text-destructive;
+  }
+
+  input.error:focus-visible {
+    @apply ring-destructive;
+  }
 }
+
 input[type="range"] {
   display: inline-block;
   vertical-align: middle;
@@ -214,11 +206,3 @@ input[type="range"]::-ms-track {
   overflow: hidden;
   transition: all 0.2s;
 }
-
-input.error {
-  @apply border-red-400;
-}
-
-label.error {
-  @apply text-destructive;
-}

data/app/components/shadcn/form_builder.rb

@@ -37,7 +37,18 @@ class Shadcn::FormBuilder < ActionView::Helpers::FormBuilder
       type: "email", **options
     )
   end
-
+  
+  def text_area(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_textarea(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "text", **options
+    )
+  end
+  
   def submit(value = nil, options = {})
     @template.render_button(value, **options)
   end

data/app/helpers/components/badge_helper.rb

@@ -1,7 +1,7 @@
 module Components::BadgeHelper
   def render_badge(label = "", data: "", text: "", variant: :default, **options)
     badge_classes = " inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2  "
-    varianet_classes = case variant.to_sym
+    variant_classes = case variant.to_sym
     when :default
       ComponentsHelper::PRIMARY_CLASSES
     when :secondary
@@ -13,7 +13,7 @@ module Components::BadgeHelper
     when :ghost
       ComponentsHelper::GHOST_CLASSES
     end
-    badge_classes << " #{varianet_classes}"
+    badge_classes << " #{variant_classes}"
     text = label if label.present?
 
     content_tag :div, class: badge_classes do

data/app/helpers/components/button_helper.rb

@@ -1,7 +1,7 @@
 module Components::ButtonHelper
   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
+    variant_classes = case variant.to_sym
     when :default
       " bg-primary text-primary-foreground hover:bg-primary/90 "
     when :secondary
@@ -13,8 +13,8 @@ module Components::ButtonHelper
     when :ghost
       " hover:bg-accent hover:text-accent-foreground  "
     end
-    button_classes << " #{varianet_classes} #{options[:class]}"
-    button_classes = tw(button_classes)
+    button_classes = tw(button_classes, variant_classes, options[:class])
+
     text = label if label.present?
     text = capture(&block) if block
     render "components/ui/button", text:, button_classes:, as:, href:, data:, **options

data/app/helpers/components/date_picker_helper.rb

@@ -0,0 +1,10 @@
+module Components::DatePickerHelper
+  def render_date_picker(name:, id: nil, value: 'Pick a date', **options)
+    render partial: "components/ui/date_picker", locals: {
+      name:,
+      value:,
+      id:,
+      options: options
+    }
+  end
+end

data/app/helpers/components/filter_helper.rb

@@ -9,4 +9,8 @@ module Components::FilterHelper
     input_class = content_for?(:filter_icon) ? "pl-1" : ""
     render "components/ui/filter", items: items, options: options, input_class: input_class, content: content
   end
+
+  def list_item(value:, name:, selected:)
+     "#{name}"
+  end
 end

data/app/helpers/components/input_helper.rb

@@ -10,14 +10,15 @@ module Components::InputHelper
     options[:class] = tw(options[:class])
 
     options.reverse_merge!(
-      label: (options[:lable] || false),
+      label: (options[:label] || false),
       required: (options[:required] || false),
       disabled: (options[:disabled] || false),
       readonly: (options[:readonly] || false),
       placeholder: (options[:placeholder] || ""),
       autocomplete: (options[:autocomplete] || ""),
       autocapitalize: (options[:autocapitalize] || nil),
-      autocorrect: (options[:autocorrect] || nil)
+      autocorrect: (options[:autocorrect] || nil),
+      autofocus: (options[:autofocus] || nil)
     )
     render partial: "components/ui/input", locals: {
       type:,

data/app/helpers/components/table_helper.rb

@@ -1,6 +1,6 @@
 module Components::TableHelper
   def render_table(caption = nil, **options, &block)
-    content_tag :table, options.reverse_merge(
+    content_tag :table, options.merge(
       class: tw("w-full text-sm border-b", options[:class])
     ) do
       if caption.present?
@@ -14,7 +14,7 @@ module Components::TableHelper
   end
 
   def table_head(**options, &block)
-    content_tag :thead, options.reverse_merge(
+    content_tag :thead, options.merge(
       class: tw("[&_tr]:border-b", options[:class])
     ) do
       content_tag :tr, class: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" do
@@ -24,7 +24,7 @@ module Components::TableHelper
   end
 
   def table_header(content = nil, **options, &block)
-    content_tag :th, options.reverse_merge(
+    content_tag :th, options.merge(
       class: tw("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", options[:class])
     ) do
       if block
@@ -36,19 +36,19 @@ module Components::TableHelper
   end
 
   def table_body(**options, &block)
-    content_tag :tbody, class: options.reverse_merge(
+    content_tag :tbody, class: options.merge(
       class: tw("[&_tr:last-child]:border-0", options[:class])
     ), &block
   end
 
   def table_row(**options, &block)
-    content_tag :tr, options.reverse_merge(
+    content_tag :tr, options.merge(
       class: tw("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", options[:class])
     ), &block
   end
 
   def table_column(content = nil, **options, &block)
-    content_tag :td, options.reverse_merge(
+    content_tag :td, options.merge(
       class: tw("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-medium", options[:class])
     ) do
       if block