shadcn-ui 0.0.12 → 0.0.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/shadcn.css +67 -83
- data/app/components/shadcn/form_builder.rb +12 -1
- data/app/helpers/components/badge_helper.rb +2 -2
- data/app/helpers/components/button_helper.rb +3 -3
- data/app/helpers/components/filter_helper.rb +4 -0
- data/app/helpers/components/input_helper.rb +3 -2
- data/app/javascript/controllers/ui/dialog_controller.js +3 -0
- data/app/views/components/ui/_card.html.erb +1 -1
- data/app/views/components/ui/_textarea.html.erb +2 -2
- data/app/views/examples/components/dropdown-menu.html.erb +1 -1
- data/lib/shadcn-ui/version.rb +1 -1
- data/shadcn-ui.gemspec +39 -0
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 403f7186d9ebbcca03f5f3bc13901e29db5d84bcdefa1d8648be46387822defc
|
4
|
+
data.tar.gz: eb7e79a3a62954cdbb21777e46aea6bee225a1fbde655e2e85616f2a7d357648
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 05b4c95efea37e11f8251081572564b057ab11a77e10e97af756f5e3c9f880b0dbc68d15105dfb91af2c5c2b59723a8b0ced098b7f68f2e57e15603a8386c29f
|
7
|
+
data.tar.gz: 8e03c73187dca4d4408962a83e676c5fe0ff8a344dd27bc60fe0575a5c1014386bc7d1de29ddc31414c14264b75c6626456ce3eb715ad0200f28f90b9156d7a2
|
@@ -1,84 +1,64 @@
|
|
1
|
+
:root {
|
2
|
+
--font-sans: "Inter var";
|
3
|
+
|
4
|
+
--background: 0 0% 100%;
|
5
|
+
--foreground: 240 10% 3.9%;
|
6
|
+
--card: 0 0% 100%;
|
7
|
+
--card-foreground: 240 10% 3.9%;
|
8
|
+
--popover: 0 0% 100%;
|
9
|
+
--popover-foreground: 240 10% 3.9%;
|
10
|
+
--primary: 240 5.9% 10%;
|
11
|
+
--primary-foreground: 0 0% 98%;
|
12
|
+
--secondary: 240 4.8% 95.9%;
|
13
|
+
--secondary-foreground: 240 5.9% 10%;
|
14
|
+
--muted: 240 4.8% 95.9%;
|
15
|
+
--muted-foreground: 240 3.8% 46.1%;
|
16
|
+
--accent: 240 4.8% 95.9%;
|
17
|
+
--accent-foreground: 240 5.9% 10%;
|
18
|
+
--destructive: 0 84.2% 60.2%;
|
19
|
+
--destructive-foreground: 0 0% 98%;
|
20
|
+
--border: 240 5.9% 90%;
|
21
|
+
--input: 240 5.9% 90%;
|
22
|
+
--ring: 240 5% 64.9%;
|
23
|
+
--radius: 0.5rem;
|
24
|
+
|
25
|
+
--success: 132, 95.3%, 33.3%, 0.74;
|
26
|
+
--success-foreground: 109 55% 28%;
|
27
|
+
|
28
|
+
--info: 223 78% 42%;
|
29
|
+
--info-foreground: 225 100% 50%;
|
30
|
+
|
31
|
+
--attention: 45 90% 45%;
|
32
|
+
--attention-foreground: 60 98.4% 48.8% 0.82;
|
33
|
+
}
|
1
34
|
@layer base {
|
2
|
-
:root {
|
3
|
-
--font-sans: "Inter var";
|
4
|
-
--background: 0 0% 100%;
|
5
|
-
--foreground: 222.2 47.4% 11.2%;
|
6
|
-
|
7
|
-
--muted: 210 40% 96.1%;
|
8
|
-
--muted-foreground: 215.4 16.3% 46.9%;
|
9
|
-
|
10
|
-
--popover: 0 0% 100%;
|
11
|
-
--popover-foreground: 222.2 47.4% 11.2%;
|
12
|
-
|
13
|
-
--border: 214.3 31.8% 91.4%;
|
14
|
-
--input: 214.3 31.8% 91.4%;
|
15
|
-
|
16
|
-
--card: 0 0% 100%;
|
17
|
-
--card-foreground: 222.2 47.4% 11.2%;
|
18
|
-
|
19
|
-
--primary: 222.2 47.4% 11.2%;
|
20
|
-
--primary-foreground: 210 40% 98%;
|
21
|
-
|
22
|
-
--secondary: 210 40% 96.1%;
|
23
|
-
--secondary-foreground: 222.2 47.4% 11.2%;
|
24
|
-
|
25
|
-
--accent: 210 40% 96.1%;
|
26
|
-
--accent-foreground: 222.2 47.4% 11.2%;
|
27
|
-
|
28
|
-
--destructive: 0 100% 50%;
|
29
|
-
--destructive-foreground: 210 40% 98%;
|
30
|
-
|
31
|
-
--success: 132, 95.3%, 33.3%, 0.74;
|
32
|
-
--success-foreground: 109 55% 28%;
|
33
|
-
|
34
|
-
--info: 223 78% 42%;
|
35
|
-
--info-foreground: 225 100% 50%;
|
36
|
-
|
37
|
-
--attention: 45 90% 45%;
|
38
|
-
--attention-foreground: 60 98.4% 48.8% 0.82;
|
39
|
-
|
40
|
-
--ring: 215 20.2% 65.1%;
|
41
|
-
|
42
|
-
--radius: 0.5rem;
|
43
|
-
}
|
44
|
-
|
45
35
|
.dark {
|
46
|
-
--background:
|
47
|
-
--foreground:
|
48
|
-
|
49
|
-
--
|
50
|
-
--
|
51
|
-
|
52
|
-
--
|
53
|
-
--
|
54
|
-
|
55
|
-
--
|
56
|
-
--
|
57
|
-
|
58
|
-
--
|
59
|
-
--
|
60
|
-
|
61
|
-
--
|
62
|
-
--
|
63
|
-
|
64
|
-
--
|
65
|
-
--
|
66
|
-
|
67
|
-
--secondary: 222.2 47.4% 11.2%;
|
68
|
-
--secondary-foreground: 210 40% 98%;
|
69
|
-
|
70
|
-
--destructive: 0 63% 31%;
|
71
|
-
--destructive-foreground: 210 40% 98%;
|
72
|
-
|
73
|
-
--attention: 45, 90%, 45%, 0.8;
|
74
|
-
--attention-foreground: 60 98.4% 48.8% 0.82;
|
36
|
+
--background: 240 10% 3.9%;
|
37
|
+
--foreground: 0 0% 98%;
|
38
|
+
--card: 240 10% 3.9%;
|
39
|
+
--card-foreground: 0 0% 98%;
|
40
|
+
--popover: 240 10% 3.9%;
|
41
|
+
--popover-foreground: 0 0% 98%;
|
42
|
+
--primary: 0 0% 98%;
|
43
|
+
--primary-foreground: 240 5.9% 10%;
|
44
|
+
--secondary: 240 3.7% 15.9%;
|
45
|
+
--secondary-foreground: 0 0% 98%;
|
46
|
+
--muted: 240 3.7% 15.9%;
|
47
|
+
--muted-foreground: 240 5% 64.9%;
|
48
|
+
--accent: 240 3.7% 15.9%;
|
49
|
+
--accent-foreground: 0 0% 98%;
|
50
|
+
--destructive: 0 62.8% 30.6%;
|
51
|
+
--destructive-foreground: 0 85.7% 97.3%;
|
52
|
+
--border: 240 3.7% 15.9%;
|
53
|
+
--input: 240 3.7% 15.9%;
|
54
|
+
--ring: 240 4.9% 83.9%;
|
55
|
+
--radius: 0.5rem;
|
75
56
|
|
76
57
|
--success: 109 55% 28%;
|
77
58
|
--success-foreground: 109 55% 28%;
|
78
59
|
|
79
|
-
--
|
80
|
-
|
81
|
-
--radius: 0.5rem;
|
60
|
+
--attention: 45, 90%, 45%, 0.8;
|
61
|
+
--attention-foreground: 60 98.4% 48.8% 0.82;
|
82
62
|
}
|
83
63
|
}
|
84
64
|
|
@@ -104,7 +84,19 @@
|
|
104
84
|
.code-sample span {
|
105
85
|
@apply bg-zinc-950;
|
106
86
|
}
|
87
|
+
input.error {
|
88
|
+
@apply border-red-400;
|
89
|
+
}
|
90
|
+
|
91
|
+
label.error {
|
92
|
+
@apply text-destructive;
|
93
|
+
}
|
94
|
+
|
95
|
+
input.error:focus-visible {
|
96
|
+
@apply ring-destructive;
|
97
|
+
}
|
107
98
|
}
|
99
|
+
|
108
100
|
input[type="range"] {
|
109
101
|
display: inline-block;
|
110
102
|
vertical-align: middle;
|
@@ -214,11 +206,3 @@ input[type="range"]::-ms-track {
|
|
214
206
|
overflow: hidden;
|
215
207
|
transition: all 0.2s;
|
216
208
|
}
|
217
|
-
|
218
|
-
input.error {
|
219
|
-
@apply border-red-400;
|
220
|
-
}
|
221
|
-
|
222
|
-
label.error {
|
223
|
-
@apply text-destructive;
|
224
|
-
}
|
@@ -37,7 +37,18 @@ class Shadcn::FormBuilder < ActionView::Helpers::FormBuilder
|
|
37
37
|
type: "email", **options
|
38
38
|
)
|
39
39
|
end
|
40
|
-
|
40
|
+
|
41
|
+
def text_area(method, options = {})
|
42
|
+
error_class = @object.errors[method].any? ? "error" : ""
|
43
|
+
options[:class] = @template.tw("#{options[:class]} #{error_class}")
|
44
|
+
@template.render_textarea(
|
45
|
+
name: "#{object_name}[#{method}]",
|
46
|
+
id: "#{object_name}_#{method}",
|
47
|
+
value: @object.send(method),
|
48
|
+
type: "text", **options
|
49
|
+
)
|
50
|
+
end
|
51
|
+
|
41
52
|
def submit(value = nil, options = {})
|
42
53
|
@template.render_button(value, **options)
|
43
54
|
end
|
@@ -1,7 +1,7 @@
|
|
1
1
|
module Components::BadgeHelper
|
2
2
|
def render_badge(label = "", data: "", text: "", variant: :default, **options)
|
3
3
|
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 "
|
4
|
-
|
4
|
+
variant_classes = case variant.to_sym
|
5
5
|
when :default
|
6
6
|
ComponentsHelper::PRIMARY_CLASSES
|
7
7
|
when :secondary
|
@@ -13,7 +13,7 @@ module Components::BadgeHelper
|
|
13
13
|
when :ghost
|
14
14
|
ComponentsHelper::GHOST_CLASSES
|
15
15
|
end
|
16
|
-
badge_classes << " #{
|
16
|
+
badge_classes << " #{variant_classes}"
|
17
17
|
text = label if label.present?
|
18
18
|
|
19
19
|
content_tag :div, class: badge_classes do
|
@@ -1,7 +1,7 @@
|
|
1
1
|
module Components::ButtonHelper
|
2
2
|
def render_button(label = "", text: nil, variant: :default, as: :button, href: nil, data: {}, **options, &block)
|
3
3
|
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 "
|
4
|
-
|
4
|
+
variant_classes = case variant.to_sym
|
5
5
|
when :default
|
6
6
|
" bg-primary text-primary-foreground hover:bg-primary/90 "
|
7
7
|
when :secondary
|
@@ -13,8 +13,8 @@ module Components::ButtonHelper
|
|
13
13
|
when :ghost
|
14
14
|
" hover:bg-accent hover:text-accent-foreground "
|
15
15
|
end
|
16
|
-
button_classes
|
17
|
-
|
16
|
+
button_classes = tw(button_classes, variant_classes, options[:class])
|
17
|
+
|
18
18
|
text = label if label.present?
|
19
19
|
text = capture(&block) if block
|
20
20
|
render "components/ui/button", text:, button_classes:, as:, href:, data:, **options
|
@@ -9,4 +9,8 @@ module Components::FilterHelper
|
|
9
9
|
input_class = content_for?(:filter_icon) ? "pl-1" : ""
|
10
10
|
render "components/ui/filter", items: items, options: options, input_class: input_class, content: content
|
11
11
|
end
|
12
|
+
|
13
|
+
def list_item(:value, :name, :selected)
|
14
|
+
"#{name}"
|
15
|
+
end
|
12
16
|
end
|
@@ -10,14 +10,15 @@ module Components::InputHelper
|
|
10
10
|
options[:class] = tw(options[:class])
|
11
11
|
|
12
12
|
options.reverse_merge!(
|
13
|
-
label: (options[:
|
13
|
+
label: (options[:label] || false),
|
14
14
|
required: (options[:required] || false),
|
15
15
|
disabled: (options[:disabled] || false),
|
16
16
|
readonly: (options[:readonly] || false),
|
17
17
|
placeholder: (options[:placeholder] || ""),
|
18
18
|
autocomplete: (options[:autocomplete] || ""),
|
19
19
|
autocapitalize: (options[:autocapitalize] || nil),
|
20
|
-
autocorrect: (options[:autocorrect] || nil)
|
20
|
+
autocorrect: (options[:autocorrect] || nil),
|
21
|
+
autofocus: (options[:autofocus] || nil)
|
21
22
|
)
|
22
23
|
render partial: "components/ui/input", locals: {
|
23
24
|
type:,
|
@@ -61,6 +61,9 @@ export default class UIDialog extends Controller {
|
|
61
61
|
closeBy(target) {
|
62
62
|
this.toggleClass(false);
|
63
63
|
|
64
|
+
if (target.getAttribute('data-ui--dialog-target') === 'modal') {
|
65
|
+
document.body.classList.remove("overflow-hidden");
|
66
|
+
}
|
64
67
|
this.dispatch("closed", { detail: { target: target } });
|
65
68
|
}
|
66
69
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]
|
1
|
+
<div class="<%= tw("rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]", options[:class]) %">
|
2
2
|
<% if title || subtitle %>
|
3
3
|
<div class="flex flex-col space-y-1.5 p-6">
|
4
4
|
<% if title %>
|
@@ -1,9 +1,9 @@
|
|
1
1
|
<textarea
|
2
|
-
class="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50
|
2
|
+
class="<%= tw("flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", options[:class]) %>"
|
3
3
|
placeholder="<%= options[:placeholder] %>"
|
4
4
|
name="<%= name %>"
|
5
5
|
id="<% id %>"
|
6
6
|
<%= options[:disabled] ? "disabled" : "" %>
|
7
7
|
<%= options[:required] ? "required" : "" %>
|
8
8
|
<%= options[:readonly] ? "readonly" : "" %>
|
9
|
-
<%= options[:rows] ? "rows" : ""
|
9
|
+
<%= options[:rows] ? "rows" : "" %>><%= value %></textarea>
|
@@ -2,7 +2,7 @@
|
|
2
2
|
description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button." %>
|
3
3
|
|
4
4
|
<%= content_for :preview, flush: true do %>
|
5
|
-
|
5
|
+
<%= render_dropdown_menu do %>
|
6
6
|
<%= dropdown_menu_trigger do %>
|
7
7
|
<%= render_button "Open Dropdown", variant: :outline %>
|
8
8
|
<% end %>
|
data/lib/shadcn-ui/version.rb
CHANGED
data/shadcn-ui.gemspec
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require_relative "lib/shadcn-ui/shadcn-ui"
|
4
|
+
|
5
|
+
Gem::Specification.new do |spec|
|
6
|
+
spec.name = "shadcn-ui"
|
7
|
+
spec.version = ShadcnUi::VERSION
|
8
|
+
spec.authors = ["Avi Flombaum"]
|
9
|
+
spec.email = ["git@avi.nyc"]
|
10
|
+
|
11
|
+
spec.homepage = "https://shadcn.rails-components.com"
|
12
|
+
spec.summary = "Provides the shadcn-ui component library to a Ruby on Rails application."
|
13
|
+
spec.description = "This gem is a documentation site and gem that will copy components from the shadcn-ui library into a Ruby on Rails application."
|
14
|
+
spec.homepage = "https://github.com/aviflombaum/shadcn-rails"
|
15
|
+
spec.license = "MIT"
|
16
|
+
spec.required_ruby_version = ">= 2.6.0"
|
17
|
+
|
18
|
+
spec.metadata["homepage_uri"] = spec.homepage
|
19
|
+
spec.metadata["source_code_uri"] = "https://github.com/aviflombaum/shadcn-rails"
|
20
|
+
spec.metadata["changelog_uri"] = "https://github.com/aviflombaum/shadcn-rails/tree/main/CHANGELOG.md"
|
21
|
+
|
22
|
+
# Specify which files should be added to the gem when it is released.
|
23
|
+
# The `git ls-files -z` loads the files in the RubyGem that have been added into git.
|
24
|
+
spec.files = Dir.chdir(__dir__) do
|
25
|
+
`git ls-files -z`.split("\x0").reject do |f|
|
26
|
+
(File.expand_path(f) == __FILE__) ||
|
27
|
+
f.start_with?(*%w[bin/ test/ spec/ features/ .git .circleci appveyor Gemfile])
|
28
|
+
end
|
29
|
+
end
|
30
|
+
spec.bindir = "bin"
|
31
|
+
spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
|
32
|
+
spec.require_paths = ["lib"]
|
33
|
+
|
34
|
+
# Uncomment to register a new dependency of your gem
|
35
|
+
spec.add_dependency "tailwind_merge", "~> 0.7"
|
36
|
+
|
37
|
+
# For more information and examples about making a new gem, check out our
|
38
|
+
# guide at: https://bundler.io/guides/creating_gem.html
|
39
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: shadcn-ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.13
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Avi Flombaum
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2024-04-26 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: tailwind_merge
|
@@ -368,6 +368,7 @@ files:
|
|
368
368
|
- public/favicon.ico
|
369
369
|
- public/og.jpg
|
370
370
|
- public/robots.txt
|
371
|
+
- shadcn-ui.gemspec
|
371
372
|
- sig/shadcn-ui.rbs
|
372
373
|
- storage/.keep
|
373
374
|
- tmp/.keep
|
@@ -397,7 +398,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
397
398
|
- !ruby/object:Gem::Version
|
398
399
|
version: '0'
|
399
400
|
requirements: []
|
400
|
-
rubygems_version: 3.4
|
401
|
+
rubygems_version: 3.5.4
|
401
402
|
signing_key:
|
402
403
|
specification_version: 4
|
403
404
|
summary: Provides the shadcn-ui component library to a Ruby on Rails application.
|