shadcn-ui 0.0.4 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7353625f737a5deeed84e83a9718a6201e151541995c11bedbeaa8b2f49234d
-  data.tar.gz: 6399387bda38280d3d1be1208f5ac7796d7370cc902d8a658c742c1bcb64186b
+  metadata.gz: d1a6d106b3e241c5c7a418478bde0b7c4e4e50ce27c0999a1963d7a40b543dd2
+  data.tar.gz: 47a2ff41f7186f01c3cdef384b2b602b39868fbd9f2c2f15f7a3d8c2e0d3a72c
 SHA512:
-  metadata.gz: bb839cd93e13cf9ea774d8d7dd1596bedd48ba02d570c65c8a125be616cbdae81a9f29fd46de71c13150b4a35c8709b5d57b813d21b74ee33076ead527cff827
-  data.tar.gz: e9a6a20f2f23bbc542800bb1bfe6cd1c6bbc08ed6f586590e61f956dff5973aab0b711c912e1b9305c06c019f1045a9ba74a3174d34a3b46ce933bb47a9ec8cb
+  metadata.gz: 0b040f697a8b80b085a5d4a595bb20ed7b78b9f26d90082831977feb7acb80389787c8b23983f2094cde67212f5bf0a682f206c79171231d5b023ca22e11716e
+  data.tar.gz: 1e44cfd6682738fc2df66f886ba9d2c6de2b044c6828f43ff9e2b67aef0f37f62a01087f78bd4158911083eee8cb45ef59f18ad64e0044d824b7b6075ccb6966

data/README.md

@@ -2,8 +2,11 @@
 
 [![Gem Version](https://badge.fury.io/rb/shadcn-ui.svg)](https://badge.fury.io/rb/shadcn-ui)
 
-Accessible and customizable components that you can copy and paste into your apps. Free. Open
-Source. **Use this to build your own component library**.
+[Shadcn on Rails](https://shadcn.rails-components.com) provides customizable components that you can
+copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
+
+**If you're using this, [please let me know](https://twitter.com/aviflombaum) so I keep developing
+it.**
 
 ## About
 
@@ -21,321 +24,17 @@ Use this as a reference to build your own component libraries.
 
 ![hero](public/og.jpg)
 
-## Alpha Usage/Installation
-
-Prior to the initial gem release, you can use this as an alpha by cloning this repository and
-starting up the app as you would a standard rails app.
-
-```
-git clone https://github.com/aviflombaum/shadcn-rails.git
-cd shadcn-rails
-bundle install
-./bin/dev
-```
-
-There are very few dependencies and no database so it should just boot up. Visit
-http://localhost:3000 to see the demo app which is also the documentation. You'll be able to browse
-the components at http://localhost:3000/components.
-
-If there's a component you want to try in your app, you will be copying the code from this app to
-yours. There's a few other steps you'll need.
-
-## Installing a Component
-
-### Add Tailwind CSS
-
-Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
-
-[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
-
-### Add dependencies
-
-If you haven't already, install Tailwind into your rails application by adding `tailwindcss-rails`
-to your `Gemfile` and install tailwind into your app:
-
-```sh
-./bin/bundle add tailwindcss-rails
-./bin/rails tailwindcss:install
-```
-
-Then install ./bin/rails tailwindcss:install
-
-### Configure tailwind.config.js
-
-Here's what my `tailwind.config.js` file looks like:
-
-```js title="tailwind.config.js"
-const defaultTheme = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./public/*.html",
-    "./app/helpers/**/*.rb",
-    "./app/javascript/**/*.js",
-    "./app/views/**/*.{erb,haml,html,slim}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/aspect-ratio"),
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/container-queries"),
-    require("tailwindcss-animate"),
-  ],
-};
-```
-
-### Configure styles
-
-Add the following to your app/assets/stylesheets/application.tailwind.css file.
-
-```css title="application.tailwind.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --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;
-  }
-
-  .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;
-  }
-}
-```
-
-### Copy a a component's files to your application
-
-For example, if you want to use the Accordion component, you would copy the following files to your
-application:
-
-- `app/javascript/controllers/components/ui/accordion_controller.js` The Stimulus controller for any
-  component that requires javascript.
-- `app/helpers/components/accordion_helper.rb` The helper for the component that allows for easy
-  rendering within views.
-- `app/views/components/ui/_accordion.html.erb` The html for the component.
-
-Once those are copied in your application you can render an accordion with:
-
-```erb
-<%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
-<%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
-```
-
-See the component's demo page in `app/views/examples/components/accordion.html.erb` for more
-examples.
-
-This will be similar for each component.
-
-## Documentation
-
-Visit https://avi.nyc/shadcn-on-rails to view the documentation.
-
-## Contributing
-
-I am desperately seeking contributors to this project as it is in the very early stages.
-
-### Contributing with Issues
-
-I am looking for people to start documenting issues in the project. The issues I'm interested in
-are:
-
-1. What components are missing? Just start listing out the components that have yet to be
-   implemented, better yet, open a PR with a branch for that issue and we can all start adding to
-   it.
-2. What components are not accessible? I am not an accessibility expert, so I need help with this.
-   If you see something that is not accessible, please open an issue and let me know. This might
-   mean the aria labels are hardcoded and not customizable or that the labels are simply missing.
-3. What components are not customizable? I am trying to make all components as customizable as
-   possible. If you see something that is not customizable, please open an issue and let me know.
-   All the attributes of a component, like aria labels or classes or id or name, etc, should be
-   customizeable by passing attributes into their helper functions that are passed down to the
-   component's partial to be rendered.
-4. Suggestions for the API of the components. I am trying to make the API as simple as possible. If
-   you have any suggestions for how to make the API simpler, please open an issue and let me know. I
-   am open to any and all suggestions.
-
-These are 3 main areas that would make the project easier for people to contribute to. They all make
-for great opportunities for someone new to open source to both file the issue and even begin to
-slowly implement them.
-
-### Setup
-
-1. Fork and clone the repo.
-2. Run `bundle install` to install dependencies, there aren't many as this is currently a standard
-   Rails applications.
-3. `/bin/dev` to start the application.
-
-### App Structure
-
-For now this is a standard Rails 7 application using propshaft and **importmaps**. This will soon be
-extracted into a gem that provides the components to be installed (copied) into the including
-application.
-
-### Components
-
-The goal of this project is to provide a set of components that can be copied into your application.
-The components are built using [TailwindCSS](https://tailwindcss.com/) and
-[Stimulus](https://stimulus.hotwire.dev/). Each component follows the same structure:
+## Installation
 
-1. There is a component partial located in `app/views/components/ui` that is rendered by the
-   component helper. Ex `app/views/components/ui/_button.html.erb` provides the markup for the
-   button component.
-2. There is a component helper named after the component that is responsible for rendering the
-   component and taking in arguments to customize the component located in `app/helpers/components`.
-   Ex `app/helpers/components/button.rb` provides the `render_button` helper that accepts arguments
-   such as `variant` which describes the kind of button and passes the classes for that `variant` to
-   the partial.
-3. When needed there is a stimulus controller for the component that provides the javascript
-   required to make the component interactive. Ex. `app/javascript/controllers/toast_controller.js`
-   provides the javascript for the toast component to display it and then hide it after a certain
-   amount of time.
+Refer to
+[Installation](https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md)
+or the [Installation](https://shadcn.rails-components.com/docs/installation) page on the demo site.
 
-This demo application also included examples of how to use the components in
-`app/views/examples/components`. This is used to create the documentation site that this application
-provides with examples of teh components rendered.
+## Development
 
-For now, this convention should be followed when developing new components.
+Clone the repo and run `bin/setup` to install dependencies. Then, run `bin/dev` to start the
+tailwind watcher and then run `rails s`. I have to run the server and tailwind separately to keep
+debuggers working.
 
 ## [shadcn-ui](https://ui.shadcn.com)
 

data/Rakefile

@@ -1,6 +1,7 @@
 # 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 'fileutils'
 
 if ENV["RAILS_ENV"] != "production"
   require "rspec/core/rake_task"
@@ -13,3 +14,92 @@ end
 require_relative "config/application"
 
 Rails.application.load_tasks
+# Rake task
+
+HELPER_TEMPLATE = <<~TEMPLATE
+module Components::<%= component_name %>Helper
+end
+TEMPLATE
+
+STIMULUS_TEMPLATE = <<~TEMPLATE
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+}
+TEMPLATE
+
+def documentation_erb(name)
+  content  = <<~TEMPLATE
+<%= render "layouts/documentation/component_header",
+  title: "#{name.capitalize}",
+  description: "" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('#{name}') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("#{name}/preview", :erb) %>
+</div>
+<% end %>
+
+<%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui #{name}
+<% end %>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
+<%= code_partial("#{name}/usage", :erb) %>
+
+<%= render_usage("#{name}") %>
+TEMPLATE
+end
+
+namespace :component do
+  desc "Generate a new component"
+  task :generate => :environment do
+    name = ENV['name']
+    abort("No component name provided. Use `rake component:generate name=component_name`") unless name.present?
+
+    puts "Do you want to include a Stimulus controller? (yes/no)"
+    response = STDIN.gets.chomp.downcase
+
+    component_view_path = Rails.root.join("app", "views", "components", "ui", "_#{name}.html.erb")
+    helper_path = Rails.root.join("app", "helpers", "components", "#{name}_helper.rb")
+    controller_path = Rails.root.join("app", "javascript", "controllers", "ui", "#{name}_controller.js")
+
+    documentation_path = Rails.root.join("app", "views", "examples", "components", "#{name}.html.erb")
+    preview_path = Rails.root.join("app", "views", "examples", "components", name, "code", "_preview.html.erb")
+    preview_directory_path = Rails.root.join("app", "views", "examples", "components", name, "code")
+    preview_file_path = "#{preview_directory_path}/_preview.erb"
+    sample_usage_path = "#{preview_directory_path}/_usage.erb"
+    usage_instructions_path = Rails.root.join("app", "views", "examples", "components", name, "_usage.html.erb")
+
+    camelized_name = name.camelize
+    helper_template = ERB.new(HELPER_TEMPLATE)
+    helper_content = helper_template.result_with_hash(component_name: camelized_name)
+
+    stimulus_template = ERB.new(STIMULUS_TEMPLATE)
+    stimulus_content = stimulus_template.result
+
+    File.new(component_view_path, "w")
+    File.open(helper_path, "w") { |file| file.write(helper_content) }
+
+    File.open(documentation_path, "w") { |file| file.write(documentation_erb(name)) }
+    FileUtils.mkdir_p(preview_directory_path)
+    File.new(preview_file_path, "w")
+    File.new(sample_usage_path, "w")
+    File.new(usage_instructions_path, "w")
+
+    if ["yes", "y"].include?(response.downcase)
+      File.open(controller_path, "w") { |file| file.write(stimulus_content) }
+    end
+
+    puts "Component #{name} was created successfully!"
+  end
+end

data/app/assets/stylesheets/shadcn.css

@@ -121,7 +121,7 @@ input[type="number"]:focus {
 input[type="range"] {
   -webkit-appearance: none;
   margin-right: 15px;
-  width: 200px;
+  min-width: 200px;
   height: 7px;
   background: #f4f4f5;
   border-radius: 5px;
@@ -214,3 +214,11 @@ input[type="range"]::-ms-track {
   overflow: hidden;
   transition: all 0.2s;
 }
+
+input.error {
+  @apply border-red-400;
+}
+
+label.error {
+  @apply text-destructive;
+}

data/app/controllers/components_controller.rb

@@ -2,6 +2,7 @@ class ComponentsController < ActionController::Base
   layout "component"
 
   def show
+    @user = User.new # REFACTOR: For the forms example
     render "examples/components/#{params[:component]}"
   end
 end

data/app/controllers/users_controller.rb

@@ -0,0 +1,19 @@
+class UsersController < ApplicationController
+  layout "component"
+
+  def create
+    params[:component] = "forms"
+    @user = User.new(user_params)
+    if @user.valid?
+      # Toast message
+    else
+      render "examples/components/forms", status: 422
+    end
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit(:email, :password)
+  end
+end

data/app/form_builders/shadcn_form_builder.rb

@@ -0,0 +1,43 @@
+class ShadcnFormBuilder < ActionView::Helpers::FormBuilder
+  def label(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_label(name: "#{object_name}[#{method}]", label: method.capitalize, **options)
+  end
+
+  def text_field(method, options = {})
+    options[:class] << " error" if @object.errors[method].any?
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "text", **options
+    )
+  end
+
+  def password_field(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "password", **options
+    )
+  end
+
+  def email_field(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "email", **options
+    )
+  end
+
+  def submit(value = nil, options = {})
+    @template.render_button(value, **options)
+  end
+end

data/app/helpers/application_helper.rb

@@ -6,6 +6,11 @@ module ApplicationHelper
       @page_title << "#{component_name} - " if component_name.present?
     end
     @page_title << "shadcn/ui on Rails"
+
+    set_meta_tags(
+      title: @page_title
+    )
+
     @page_title
   end
 

data/app/helpers/components/alert_dialog_helper.rb

@@ -1,6 +1,22 @@
 module Components::AlertDialogHelper
-  def render_alert_dialog(trigger:, label:, description:, continue:, **options)
-    cancel = options[:cancel] || render_button("Cancel", class: "mt-2 sm:mt-0", data: {action: "ui--dialog#close"})
-    render "components/ui/alert_dialog", trigger:, label:, description:, continue:, cancel:, **options
+  def render_alert_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/alert_dialog", content: content, **options
+  end
+
+  def alert_dialog_trigger(&block)
+    content_for :alert_dialog_trigger, capture(&block), flush: true
+  end
+
+  def alert_dialog_content(&block)
+    content_for :alert_dialog_content, capture(&block), flush: true
+  end
+
+  def alert_dialog_continue(&block)
+    content_for :alert_dialog_continue, capture(&block), flush: true
+  end
+
+  def alert_dialog_cancel(&block)
+    content_for :alert_dialog_cancel, capture(&block), flush: true
   end
 end

data/app/helpers/components/alert_helper.rb

@@ -1,12 +1,16 @@
 module Components::AlertHelper
-  def render_alert(title:, description:, variant: :default, icon: true)
+  def render_alert(title:, description: nil, 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}"
+    when :success
+      "border-success/50 text-success dark:border-success [&>svg]:text-success"
+    when :info
+      "border-info/50 text-info dark:border-info [&>svg]:text-info"
+    when :attention
+      "border-attention/50 text-attention dark:border-attention [&>svg]:text-attention"
     end
     render "components/ui/alert", title:, description:, alert_classes:, variant:, icon:
   end

data/app/helpers/components/badge_helper.rb

@@ -15,6 +15,9 @@ module Components::BadgeHelper
     end
     badge_classes << " #{varianet_classes}"
     text = label if label.present?
-    render "components/ui/badge", text:, badge_classes:, data:, **options
+
+    content_tag :div, class: badge_classes do
+      text
+    end
   end
 end

data/app/helpers/components/combobox_helper.rb

@@ -0,0 +1,10 @@
+module Components::ComboboxHelper
+  def render_combobox(items, &block)
+    content = capture(&block) if block
+    render "components/ui/combobox", items:, content:
+  end
+
+  def combobox_trigger(&block)
+    content_for :trigger, capture(&block) if block
+  end
+end

data/app/helpers/components/forms_helper.rb

@@ -0,0 +1,13 @@
+module Components::FormsHelper
+  def render_form_with(**opts)
+    form_with(**opts.merge(builder: ShadcnFormBuilder)) do |form|
+      yield form
+    end
+  end
+
+  def render_form_for(obj, **opts)
+    form_for(obj, **opts.merge(builder: ShadcnFormBuilder), html: opts) do |form|
+      yield form
+    end
+  end
+end

data/app/helpers/components/input_helper.rb

@@ -1,14 +1,24 @@
 module Components::InputHelper
   def render_input(name:, label: false, id: nil, type: :text, value: nil, **options)
-    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
+    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
     options[:class] << case options[:variant]
     when :borderless
       " border-0 focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-transparent"
     else
-      " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
+      "shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
     end
-    options.reverse_merge!(required: false, disabled: false,
-      readonly: false, label: false, placeholder: "Type here...")
+    options[:class] = tw(options[:class])
+
+    options.reverse_merge!(
+      label: (options[:lable] || 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)
+    )
     render partial: "components/ui/input", locals: {
       type:,
       label:,