velvetkit 0.1.0.beta

data/registry/app/components/ui/date_picker.html.erb

@@ -0,0 +1,70 @@
+<div class="<%= classes %>" data-controller="ui--date-picker"
+     data-ui--date-picker-module-url-value="<%= helpers.asset_path('cally.js') %>"
+     data-ui--date-picker-order-value="<%= part_order %>"
+     data-ui--date-picker-separator-value="<%= separator %>"
+     data-action="click@window->ui--date-picker#closeOnOutsideClick keydown@window->ui--date-picker#closeOnEscape"
+     <%= tag.attributes(@html_attrs) %>>
+  <% if render_label? %>
+    <label for="<%= input_id %>" class="mb-1.5 block text-sm font-medium text-foreground">
+      <%= label_text %><% if @required %><span class="ml-0.5 text-destructive">*</span><% end %>
+    </label>
+  <% end %>
+
+  <div class="relative">
+    <%# What the user types. Not name'd: it is never submitted, so a
+        half-typed date cannot reach the server. %>
+    <input type="text" id="<%= input_id %>" inputmode="numeric" autocomplete="off"
+           placeholder="<%= placeholder %>" class="<%= input_classes %>"
+           value="<%= typed_value %>"
+           <%= "required" if @required %> <%= "disabled" if @disabled %>
+           <%= "aria-describedby=\"#{input_id}-hint\"".html_safe if render_hint? %>
+           data-ui--date-picker-target="input"
+           data-action="input->ui--date-picker#typed">
+
+    <%# What the form submits. %>
+    <input type="hidden" name="<%= field_name %>" value="<%= iso_value %>"
+           data-ui--date-picker-target="hidden">
+
+    <button type="button" aria-haspopup="dialog" aria-expanded="false"
+            aria-controls="<%= panel_id %>"
+            aria-label="<%= t("ui.date_picker.open") %>"
+            class="absolute inset-y-0 right-0 flex w-9 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+            <%= "disabled" if @disabled %>
+            data-ui--date-picker-target="toggle"
+            data-action="ui--date-picker#toggle">
+      <%= render(UI::Icon.new(name: "calendar", class: "size-4")) %>
+    </button>
+  </div>
+
+  <% if render_hint? %>
+    <p id="<%= input_id %>-hint" class="mt-1 text-xs text-muted-foreground">
+      <%= t("ui.date_picker.hint", pattern: placeholder) %>
+    </p>
+  <% end %>
+
+  <div id="<%= panel_id %>" role="dialog" hidden
+       class="absolute z-30 mt-1 rounded-md border bg-popover p-3 text-popover-foreground shadow-md"
+       data-ui--date-picker-target="panel">
+    <%# calendar-select-year is why this library was chosen: reaching 2012 for
+        a date of birth is one click, not a hundred and seventy. %>
+    <%# Cally puts each arrow inside its own button, so ours are icons with
+        words for screen readers; the month and year selects fill its heading
+        slot, between the arrows. %>
+    <%= tag.send(:"calendar-date",
+                 safe_join([
+                   tag.span(safe_join([ render(UI::Icon.new(name: "chevron-left", size: :sm)),
+                                        tag.span(t("ui.date_picker.previous"), class: "sr-only") ]),
+                            slot: "previous", class: "inline-flex"),
+                   tag.span(safe_join([ render(UI::Icon.new(name: "chevron-right", size: :sm)),
+                                        tag.span(t("ui.date_picker.next"), class: "sr-only") ]),
+                            slot: "next", class: "inline-flex"),
+                   tag.div(safe_join([ tag.send(:"calendar-select-month"), tag.send(:"calendar-select-year") ]),
+                           slot: "heading", class: "flex items-center gap-1.5"),
+                   tag.send(:"calendar-month")
+                 ]),
+                 locale: I18n.locale == :en ? "en-IN" : I18n.locale.to_s,
+                 "first-day-of-week": 1, min: @min, max: @max,
+                 data: { "ui--date-picker-target": "calendar",
+                         action: "change->ui--date-picker#picked" }) %>
+  </div>
+</div>

data/registry/app/components/ui/date_picker.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+# UI::DatePicker — a typed date field with a calendar beside it.
+#
+# Three inputs in one: what the user types (DD/MM/YYYY), what the form submits
+# (ISO, hidden), and the calendar. The typed field comes first because people
+# who know the date type it in a second: reaching a date years away in a
+# calendar means clicking back month after month.
+#
+# The written format is not decided here. It comes from `date.formats.typed`
+# in the locale, and this component derives the placeholder, the parse order
+# and the separator from that one string — so a locale that writes dates
+# differently changes what the field accepts, what it shows and what the hint
+# says, together, with nothing hardcoded.
+#
+# The shipped English format is day-first; change `date.formats.typed` for
+# month-first. A native date input follows the browser's locale instead, which
+# is how the same form reads MM/DD on one machine and DD/MM on another, and how
+# the 2nd of May gets recorded as the 5th of February.
+#
+# Cally is ~9 KB gzipped and loaded only when the calendar is first opened, so
+# a form nobody opens a calendar on downloads nothing.
+#
+# Usage:
+#   <%= render(UI::DatePicker.new(form: f, field: :starts_on, required: true)) %>
+#   <%= render(UI::DatePicker.new(name: "event[date]", value: @date, label: "Date")) %>
+class UI::DatePicker < UI::Base
+  def initialize(name: nil, value: nil, form: nil, field: nil, label: nil,
+                 required: false, error: false, disabled: false, hint: true,
+                 min: nil, max: nil, class: nil, **html_attrs)
+    @name = name
+    @value = value
+    @form = form
+    @field = field
+    @label = label
+    @required = required
+    # The hint teaches the format, which a form field wants and a filter
+    # toolbar does not — there the value is already on
+    # screen in the format the hint would describe.
+    @hint = hint
+    @error = error
+    @disabled = disabled
+    @min = min
+    @max = max
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def field_name = @name || (@form && @field && "#{@form.object_name}[#{@field}]")
+
+  # The value the form submits, always ISO, whatever was typed.
+  def iso_value
+    raw = @value || (@form && @field && @form.object&.public_send(@field))
+    raw.respond_to?(:strftime) ? raw.strftime("%Y-%m-%d") : raw.presence
+  end
+
+  def label_text
+    return @label if @label.present?
+    return nil unless @form && @field
+
+    @form.object.class.try(:human_attribute_name, @field) || @field.to_s.humanize
+  end
+
+  def render_label? = @label != false && label_text.present?
+  def render_hint? = @hint != false
+
+  def input_id = @input_id ||= "ui-date-#{SecureRandom.hex(4)}"
+  def panel_id = "#{input_id}-panel"
+
+  def classes = cn("relative", @user_class)
+
+  def input_classes
+    cn(
+      "flex w-full rounded-md border border-input bg-background text-foreground",
+      "placeholder:text-muted-foreground transition-all focus:outline-none",
+      "focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background",
+      "disabled:cursor-not-allowed disabled:opacity-50 h-9 pl-3 pr-10 py-2 text-sm",
+      # aria-invalid rather than a Ruby flag, so a date the user mistypes is
+      # marked without a round trip.
+      "aria-invalid:border-destructive aria-invalid:ring-destructive",
+      @error && "border-destructive"
+    )
+  end
+
+  # The one string everything else here is derived from.
+  def date_format = I18n.t("date.formats.typed")
+
+  # "%d/%m/%Y" -> "DD/MM/YYYY". Shown as the placeholder and in the hint, so
+  # what the user is told matches what the parser accepts by construction.
+  def placeholder
+    date_format.gsub("%d", "DD").gsub("%m", "MM").gsub("%Y", "YYYY").gsub("%y", "YY")
+  end
+
+  # "%d/%m/%Y" -> "DMY". The controller builds its parser from this rather
+  # than assuming an order.
+  def part_order = date_format.scan(/%([dmyY])/).flatten.map(&:upcase).join
+
+  def separator = date_format[/[^%a-zA-Z]/] || "/"
+
+  # Rendered server-side in the locale's format, so the field is already right
+  # before any JavaScript has loaded.
+  def typed_value
+    iso = iso_value
+    return nil if iso.blank?
+
+    date = iso.respond_to?(:strftime) ? iso : Date.parse(iso.to_s)
+    I18n.l(date, format: :typed)
+  rescue Date::Error
+    iso
+  end
+end

data/registry/app/components/ui/dialog/close.html.erb

@@ -0,0 +1,7 @@
+<%= render(UI::Button.new(**button_options)) do %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= render(UI::Icon.new(name: :x, size: :sm)) %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/dialog/close.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class UI::Dialog::Close < UI::Base
+  def initialize(variant: :ghost, size: :icon_sm, class: nil, **html_attrs)
+    @variant = variant
+    @size = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_content_context(content_context)
+    @content_context = content_context
+  end
+
+  def button_class
+    if content.present?
+      cn(@user_class)
+    else
+      cn("absolute right-4 top-4 p-0", @user_class)
+    end
+  end
+
+  def button_options
+    opts = @html_attrs.deep_dup
+    opts[:variant] = @variant
+    opts[:size] = effective_size
+    opts[:type] = :button
+    opts[:class] = button_class
+    opts[:data] = merged_data
+    opts[:aria] = merged_aria
+    opts
+  end
+
+  private
+
+  def merged_data
+    user_data = (@html_attrs[:data] || {}).deep_dup
+    action = [ user_data.delete(:action) || user_data.delete("action"), "click->ui--dialog#close" ].compact.join(" ")
+
+    user_data.merge(
+      action: action,
+      ui_dialog_close: true
+    )
+  end
+
+  def merged_aria
+    (@html_attrs[:aria] || {}).deep_dup.reverse_merge(label: I18n.t("ui.dialog.close_label", default: "Close"))
+  end
+
+  def effective_size
+    content.present? && [ :icon, :icon_sm ].include?(@size) ? :default : @size
+  end
+end

data/registry/app/components/ui/dialog/content.html.erb

@@ -0,0 +1,26 @@
+<%# Force the slot block to run first so with_title/with_description/with_footer
+    side effects materialise BEFORE we check title?/description?/footer?. %>
+<% body = content %>
+<%= tag.dialog(**html_options) do %>
+  <%= tag.div(class: panel_classes, data: { state: "closed", "ui--dialog-part": "panel" }) do %>
+    <% if show_close? %>
+      <%= render(UI::Dialog::Close.new) %>
+    <% end %>
+    <% if title? || description? %>
+      <header class="flex flex-col space-y-1.5 text-center sm:text-left">
+        <% if title? %>
+          <%= tag.h2(title_html, id: title_id, class: "text-lg font-semibold leading-none tracking-tight") %>
+        <% end %>
+        <% if description? %>
+          <%= tag.p(description_html, id: description_id, class: "text-sm text-muted-foreground") %>
+        <% end %>
+      </header>
+    <% end %>
+    <% if body.present? %>
+      <div class="overflow-y-auto flex-1 min-h-0 <%= title? || description? ? 'mt-4' : '' %>"><%= body %></div>
+    <% end %>
+    <% if footer? %>
+      <footer class="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><%= footer_html %></footer>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/dialog/content.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+# UI::Dialog::Content — the native <dialog> element. Exposes block helpers for
+# the optional title, description, and footer regions instead of nested
+# ViewComponent sub-classes (one file, fewer indirections).
+class UI::Dialog::Content < UI::Base
+  PANEL_BASE =
+    "relative flex flex-col w-full max-h-[calc(100vh-2rem)] overflow-hidden " \
+    "rounded-lg border bg-background p-6 shadow-lg " \
+    "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 " \
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+
+  variants(
+    base: PANEL_BASE,
+    variants: {
+      size: {
+        sm:      "max-w-md",
+        default: "max-w-lg",
+        lg:      "max-w-2xl",
+        xl:      "max-w-4xl"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(size: :default, show_close: true, class: nil, **html_attrs)
+    @size       = size
+    @show_close = show_close
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_dialog_context(dialog)
+    @dialog = dialog
+  end
+
+  # ── Inline slot helpers (block ↔ text) ────────────────────────────────────
+
+  def with_title(text = nil, &block)
+    @title_text  = text
+    @title_block = block
+    self
+  end
+
+  def with_description(text = nil, &block)
+    @description_text  = text
+    @description_block = block
+    self
+  end
+
+  def with_footer(&block)
+    @footer_block = block
+    self
+  end
+
+  def title?;       @title_text.present? || @title_block.present?;             end
+  def description?; @description_text.present? || @description_block.present?; end
+  def footer?;      @footer_block.present?;                                    end
+  def show_close?;  @show_close;                                               end
+
+  def title_html
+    @title_block ? view_context.capture(&@title_block) : @title_text
+  end
+
+  def description_html
+    @description_block ? view_context.capture(&@description_block) : @description_text
+  end
+
+  def footer_html
+    view_context.capture(&@footer_block) if @footer_block
+  end
+
+  # ── Class strings ────────────────────────────────────────────────────────
+
+  def panel_classes
+    cn(variant_classes(size: @size), @user_class)
+  end
+
+  # The native <dialog> takes the full viewport and centers the panel inside.
+  # Backdrop styling is owned by the ::backdrop pseudo-element so we don't
+  # need a separate overlay div.
+  def dialog_classes
+    "fixed inset-0 m-0 p-0 max-w-none max-h-none w-full h-full " \
+    "bg-transparent border-0 overflow-visible " \
+    "open:flex open:items-center open:justify-center " \
+    "backdrop:bg-black/60 backdrop:backdrop-blur-[1px]"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id]    = @dialog.id
+    opts[:class] = dialog_classes
+    opts[:"aria-labelledby"]  = @dialog.title_id       if title?
+    opts[:"aria-describedby"] = @dialog.description_id if description?
+    opts[:"data-ui--dialog-target"] = "content"
+    opts[:"data-state"] = "closed"
+    opts
+  end
+
+  def title_id;       @dialog.title_id;       end
+  def description_id; @dialog.description_id; end
+end

data/registry/app/components/ui/dialog/description.html.erb

@@ -0,0 +1 @@
+<%= tag.p(id: @content_context.description_id, class: classes, **@html_attrs) do %><%= content %><% end %>

data/registry/app/components/ui/dialog/description.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::Dialog::Description < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_content_context(content_context)
+    @content_context = content_context
+  end
+
+  def classes
+    cn("text-sm text-muted-foreground", @user_class)
+  end
+end

data/registry/app/components/ui/dialog/footer.html.erb

@@ -0,0 +1 @@
+<%= tag.div(class: classes, data: { "ui--dialog-part": "footer" }, **@html_attrs) do %><%= content %><% end %>

data/registry/app/components/ui/dialog/footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class UI::Dialog::Footer < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_content_context(_content_context); end
+
+  def classes
+    cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", @user_class)
+  end
+end

data/registry/app/components/ui/dialog/header.html.erb

@@ -0,0 +1 @@
+<%= tag.div(class: classes, data: { "ui--dialog-part": "header" }, **@html_attrs) do %><%= content %><% end %>

data/registry/app/components/ui/dialog/header.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::Dialog::Header < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_content_context(content_context)
+    @content_context = content_context
+  end
+
+  def classes
+    cn("flex flex-col space-y-1.5 text-center sm:text-left", @user_class)
+  end
+end

data/registry/app/components/ui/dialog/title.html.erb

@@ -0,0 +1 @@
+<%= tag.h2(id: @content_context.title_id, class: classes, **@html_attrs) do %><%= content %><% end %>

data/registry/app/components/ui/dialog/title.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class UI::Dialog::Title < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_content_context(content_context)
+    @content_context = content_context
+  end
+
+  def classes
+    cn("text-lg font-semibold leading-none tracking-tight", @user_class)
+  end
+end

data/registry/app/components/ui/dialog/trigger.html.erb

@@ -0,0 +1,5 @@
+<% if @as == :button %>
+  <%= render(UI::Button.new(**button_options)) do %><%= content %><% end %>
+<% else %>
+  <%= tag.public_send(@as, **html_options) do %><%= content %><% end %>
+<% end %>

data/registry/app/components/ui/dialog/trigger.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+# UI::Dialog::Trigger — click-to-open wrapper.
+#
+# By default renders a UI::Button so variant/size styling works out of the
+# box. Pass as: :a (or any other tag name) to fall back to a plain tag.
+class UI::Dialog::Trigger < UI::Base
+  def initialize(as: :button, variant: :default, size: :default,
+                 class: nil, **html_attrs)
+    @as         = as.to_sym
+    @variant    = variant
+    @size       = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_dialog_context(dialog)
+    @dialog = dialog
+  end
+
+  # ── Options passed to UI::Button (when @as == :button) ───────────────────
+
+  def button_options
+    opts = @html_attrs.deep_dup
+    opts[:variant] = @variant
+    opts[:size]    = @size
+    opts[:type]    = :button
+    opts[:class]   = cn(@user_class)
+    opts[:data]    = merged_data
+    opts[:aria]    = merged_aria
+    opts
+  end
+
+  # ── Options passed to tag.public_send (when @as != :button) ──────────────
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = cn(@user_class)
+
+    user_data = (opts.delete(:data) || {}).dup
+    user_action = user_data.delete(:action) || user_data.delete("action")
+    opts[:data] = user_data.merge(
+      "ui--dialog-target": "trigger",
+      action: [ user_action, "click->ui--dialog#open" ].compact.join(" ")
+    )
+
+    user_aria = (opts.delete(:aria) || {}).dup
+    opts[:aria] = user_aria.merge(
+      haspopup: "dialog",
+      expanded: "false",
+      controls: @dialog.id
+    )
+
+    opts
+  end
+
+  private
+
+  def merged_data
+    user_data = (@html_attrs[:data] || {}).deep_dup
+    user_action = user_data.delete(:action) || user_data.delete("action")
+    user_data.merge(
+      "ui--dialog-target": "trigger",
+      action: [ user_action, "click->ui--dialog#open" ].compact.join(" ")
+    )
+  end
+
+  def merged_aria
+    (@html_attrs[:aria] || {}).deep_dup.merge(
+      haspopup: "dialog",
+      expanded: "false",
+      controls: @dialog.id
+    )
+  end
+end

data/registry/app/components/ui/dialog.html.erb

@@ -0,0 +1,3 @@
+<%= tag.div(class: root_classes,
+            data: { controller: "ui--dialog" }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><% if trigger? %><%= trigger %><% end %><% if body? %><%= body %><% end %><% end %>

data/registry/app/components/ui/dialog.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# UI::Dialog — modal dialog backed by the native <dialog> element + showModal().
+#
+# Why native <dialog>:
+#   - Browser owns the modal mode, focus trap, ESC handling, and inert
+#     background. We do not reimplement any of that in JS.
+#   - The Stimulus controller only opens, closes, and dismisses on backdrop
+#     click. Everything else is delegated to the platform.
+#
+# Compound:
+#   UI::Dialog
+#   UI::Dialog::Trigger    — wraps any element with a click action
+#   UI::Dialog::Content    — the <dialog> box; exposes with_title /
+#                            with_description / with_footer block helpers
+#                            (no further sub-component classes).
+class UI::Dialog < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Dialog::Trigger.new(**opts).tap { |t| t.set_dialog_context(self) }
+  }
+  renders_one :body, ->(**opts) {
+    UI::Dialog::Content.new(**opts).tap { |c| c.set_dialog_context(self) }
+  }
+  alias_method :with_content, :with_body
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-dialog-#{SecureRandom.hex(4)}"
+    @html_attrs.delete(:id)
+  end
+
+  attr_reader :id
+
+  def title_id;       "#{@id}-title";       end
+  def description_id; "#{@id}-description"; end
+
+  def root_classes
+    cn("contents", @user_class)
+  end
+end

data/registry/app/components/ui/divider.html.erb

@@ -0,0 +1,9 @@
+<% if label.present? %>
+  <%= tag.div class: wrapper_classes, **@html_attrs do %>
+    <%= tag.hr class: rule_classes %>
+    <%= tag.span label, class: label_classes %>
+    <%= tag.hr class: rule_classes %>
+  <% end %>
+<% else %>
+  <%= tag.hr class: classes, **@html_attrs %>
+<% end %>

data/registry/app/components/ui/divider.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class UI::Divider < UI::Base
+  variants(
+    base: "shrink-0 border-border",
+    variants: {
+      orientation: {
+        horizontal: "border-t w-full",
+        vertical:   "border-l self-stretch h-full"
+      }
+    },
+    defaults: { orientation: :horizontal }
+  )
+
+  def initialize(orientation: :horizontal, label: nil, class: nil, **html_attrs)
+    @orientation = orientation.to_sym
+    @label_text  = label
+    @user_class  = binding.local_variable_get(:class)
+    @html_attrs  = html_attrs
+  end
+
+  def label; @label_text; end
+
+  def classes
+    cn(variant_classes(orientation: @orientation), @user_class)
+  end
+
+  # Beside a label each rule takes half the leftover space; `w-full` on both
+  # pushed the label and the second rule out of the row.
+  def rule_classes
+    cn(classes, "w-auto flex-1")
+  end
+
+  def wrapper_classes
+    cn("flex items-center gap-3", @user_class) if label.present?
+  end
+
+  def label_classes
+    "text-xs text-muted-foreground whitespace-nowrap"
+  end
+end

data/registry/app/components/ui/icon.html.erb

@@ -0,0 +1 @@
+<%= tag.i data: (@html_attrs[:data] || {}).merge(lucide: @name), class: classes, aria: aria_attributes, **@html_attrs.except(:data) %>