velvetkit 0.1.0.beta

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class UI::Icon < UI::Base
+  variants(
+    base: "inline-block shrink-0",
+    variants: {
+      size: {
+        xs:      "w-3 h-3",
+        sm:      "w-4 h-4",
+        default: "w-5 h-5",
+        lg:      "w-6 h-6",
+        xl:      "w-8 h-8"
+      }
+    },
+    defaults: { size: :default }
+  )
+
+  def initialize(name:, size: :default, label: nil, class: nil, **html_attrs)
+    @name = name
+    @size = size
+    @label = label
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def render?
+    @name.present?
+  end
+
+  def classes
+    cn(variant_classes(size: @size), @user_class)
+  end
+
+  def aria_attributes
+    if @label
+      { label: @label }
+    else
+      { hidden: true }
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.img(**html_options) %>

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

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+# UI::Image — asset-backed <img> with radius tokens and lazy loading.
+#
+# Replaces Velvet::Image, which wrapped every image in a Velvet::Box and passed
+# `width:`/`height:` to that wrapper as inline styles — so the div was sized and
+# the image itself was not. Here the dimensions land on the <img>.
+#
+# Usage:
+#   <%= render(UI::Image.new(src: "logo.png", rounded: :lg, width: "100px")) %>
+class UI::Image < UI::Base
+  variants(
+    base: "block max-w-full",
+    variants: {
+      rounded: {
+        none: "rounded-none",
+        xs:   "rounded-xs",
+        sm:   "rounded-sm",
+        md:   "rounded-md",
+        lg:   "rounded-lg",
+        xl:   "rounded-xl",
+        full: "rounded-full"
+      }
+    },
+    defaults: { rounded: :sm }
+  )
+
+  def initialize(src:, rounded: :sm, width: nil, height: nil, alt: nil,
+                 loading: :lazy, class: nil, **html_attrs)
+    @src        = src
+    @rounded    = rounded
+    @width      = width
+    @height     = height
+    @alt        = alt
+    @loading    = loading
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(variant_classes(rounded: @rounded), @user_class)
+  end
+
+  # Dimensions arrive as CSS strings ("100px", "14px"), so they go through
+  # `style` rather than the width/height attributes (which take bare pixels) or
+  # an interpolated Tailwind class (which the scanner cannot see).
+  def html_options
+    opts = @html_attrs.dup
+    opts[:src]     = asset_path(@src)
+    opts[:class]   = classes
+    opts[:alt]     = @alt || default_alt
+    opts[:loading] = @loading if @loading
+
+    dimensions = []
+    dimensions << "width: #{css_length(@width)}"   if @width.present?
+    dimensions << "height: #{css_length(@height)}" if @height.present?
+    unless dimensions.empty?
+      opts[:style] = [ dimensions.join("; "), opts[:style] ].compact.join("; ")
+    end
+
+    opts
+  end
+
+  private
+
+  def css_length(value)
+    value.is_a?(Numeric) ? "#{value}px" : value
+  end
+
+  # Mirrors image_tag's behaviour so alt text does not regress to empty.
+  def default_alt
+    File.basename(@src.to_s, ".*").tr("-_", "  ").capitalize
+  end
+end

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

@@ -0,0 +1,9 @@
+<%# frozen_string_literal: true %>
+<% if render_label? %>
+  <div class="flex flex-col gap-2 w-full">
+    <%= render(label_component) { label_text } %>
+    <% if form_field? %><%= @form.public_send(form_builder_method, @field, **form_field_options) %><% else %><%= tag.input(**html_options) %><% end %>
+  </div>
+<% else %>
+  <% if form_field? %><%= @form.public_send(form_builder_method, @field, **form_field_options) %><% else %><%= tag.input(**html_options) %><% end %>
+<% end %>

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

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+class UI::Input < UI::Base
+  variants(
+    base: "flex w-full rounded-md border border-input bg-background " \
+          "text-foreground " \
+          "placeholder:text-muted-foreground " \
+          "#{UI::Base::FOCUS_RING} " \
+          "disabled:cursor-not-allowed disabled:opacity-50",
+    variants: {
+      size: {
+        sm:      "h-8 px-2.5 py-1 text-xs",
+        default: "h-9 px-3 py-2 text-sm",
+        lg:      "h-10 px-4 py-2.5 text-base"
+      },
+      variant: {
+        default:    "",
+        error:      "border-destructive focus:ring-destructive",
+        with_label: ""
+      }
+    },
+    defaults: { size: :default, variant: :default }
+  )
+
+  # `form:` + `field:` opt into Rails form-builder rendering (so the input gets
+  # a scoped name like `user[password]` and repopulates from the model). Without
+  # them a plain <input> is rendered and `name:` passes through html_attrs.
+  # Every type gets its own Rails helper rather than text_field with a type:
+  # option. Rails' TextField sets options["type"] ||= "text" against the
+  # STRING key, so a symbol :type never wins and the field silently renders as
+  # a plain text box — which is what date_of_birth was doing: no picker, no
+  # validation, and whatever the user typed accepted as a date.
+  BUILDER_METHODS = {
+    text: :text_field, email: :email_field, password: :password_field,
+    number: :number_field, search: :search_field, tel: :telephone_field,
+    url: :url_field, date: :date_field, time: :time_field,
+    datetime: :datetime_local_field, month: :month_field, week: :week_field,
+    color: :color_field, range: :range_field
+  }.freeze
+
+  def initialize(type: :text, size: :default, variant: :default,
+                 label: nil, label_size: :default, label_weight: :medium,
+                 required: false, error: false, disabled: false,
+                 form: nil, field: nil,
+                 class: nil, **html_attrs)
+    @form           = form
+    @field          = field
+    @type           = type
+    @size           = size
+    @variant        = variant
+    @label          = label
+    @label_size     = label_size
+    @label_weight   = label_weight
+    @required       = required
+    @error          = error
+    @disabled       = disabled
+    @user_class     = binding.local_variable_get(:class)
+    @html_attrs     = html_attrs
+    @input_id       = @html_attrs[:id] || (render_label? ? "ui-input-#{SecureRandom.hex(4)}" : nil)
+    @html_attrs[:id] = @input_id if @input_id
+  end
+
+  def classes
+    cn(
+      variant_classes(size: @size, variant: @variant),
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    # String key, for the same reason: Rails checks options["type"].
+    opts["type"]          = @type
+    opts[:class]          = classes
+    opts[:disabled]       = true if @disabled
+    opts[:required]       = true if @required
+    opts[:"aria-invalid"] = "true" if @error
+    opts
+  end
+
+  def form_field?
+    @form.present? && @field.present?
+  end
+
+  # The builder derives the name itself, so drop any explicit one.
+  def form_field_options
+    html_options.except(:name, :type)
+  end
+
+  def form_builder_method
+    BUILDER_METHODS.fetch(@type.to_sym, :text_field)
+  end
+
+  # Labels follow Rails' own convention: bound to a form object, the attribute
+  # name supplies the text (via human_attribute_name, so i18n and
+  # `activerecord.attributes.*` overrides apply) with no per-call-site string.
+  # Pass `label:` to override the text, or `label: false` to opt out entirely.
+  def render_label?
+    return false if @label == false
+
+    @label.present? || form_field?
+  end
+
+  def label_text
+    return @label if @label.is_a?(String) && @label.present?
+    return nil unless form_field?
+
+    object = @form.object
+    if object.respond_to?(:class) && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(@field)
+    else
+      @field.to_s.humanize
+    end
+  end
+
+  def label_component
+    UI::Label.new(
+      for: @input_id,
+      size: @label_size,
+      weight: @label_weight,
+      required: @required,
+      disabled: @disabled
+    )
+  end
+end

data/registry/app/components/ui/input_group/addon.html.erb

@@ -0,0 +1,6 @@
+<%# frozen_string_literal: true %>
+<div role="group" data-slot="input-group-addon" data-align="<%= @align %>" class="<%= classes %>" <%= tag.attributes(@html_attrs) %>>
+  <%= icon if icon %>
+  <%= icon_button if icon_button %>
+  <%= content %>
+</div>

data/registry/app/components/ui/input_group/addon.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# UI::InputGroup::Addon — positional decorator slot inside an InputGroup.
+#
+# align variants mirror UI::InputGroupItem:
+#   inline-start  — left prefix (icon, text, button)
+#   inline-end    — right suffix
+#   block-start   — full-width top row (e.g. floating label)
+#   block-end     — full-width bottom row (e.g. character count)
+class UI::InputGroup::Addon < UI::Base
+  ALIGN_CLASSES = {
+    "inline-start" =>
+      "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+    "inline-end" =>
+      "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+    "block-start" =>
+      "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+    "block-end" =>
+      "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+  }.freeze
+
+  BASE_CLASSES =
+    "text-muted-foreground flex h-auto cursor-text items-center justify-center " \
+    "gap-2 py-1.5 text-sm font-medium select-none " \
+    "[&>svg:not([class*='size-'])]:size-4 " \
+    "group-data-[disabled=true]/input-group:opacity-50"
+
+  renders_one :icon, ->(name:, **opts) { UI::Icon.new(name: name, **opts) }
+
+  renders_one :icon_button, ->(**opts) {
+    UI::Button.new(
+      type: :button, variant: :ghost,
+      class: cn(
+        "text-sm flex gap-2 items-center h-6 gap-1 px-2",
+        "rounded-[calc(var(--radius)-5px)]",
+        "[&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
+      ),
+      **opts
+    )
+  }
+
+  def initialize(align: "inline-start", class: nil, **html_attrs)
+    @align      = align.to_s
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(BASE_CLASSES, ALIGN_CLASSES[@align], @user_class)
+  end
+end

data/registry/app/components/ui/input_group/field.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+# UI::InputGroup::Field — a UI::Input variant stripped of its own
+# border/shadow/ring so the parent wrapper owns those styles.
+#
+# The wrapper owns the focus treatment via :focus-within; the field strips
+# its own outline + ring so there is no double indicator on focus.
+class UI::InputGroup::Field < UI::Input
+  STRIPPED_CLASSES =
+    "flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground " \
+    "placeholder:text-muted-foreground " \
+    "border-0! bg-transparent shadow-none! " \
+    "outline-none! focus:outline-none! focus:outline-none! focus:ring-0! " \
+    "dark:bg-transparent " \
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50"
+
+  def initialize(**args)
+    super(**args)
+    @html_attrs[:data] ||= {}
+    @html_attrs[:data][:slot] = "input-group-control"
+  end
+
+  def classes
+    STRIPPED_CLASSES
+  end
+end

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

@@ -0,0 +1,5 @@
+<%# frozen_string_literal: true %>
+<div data-slot="input-group" role="group" class="<%= wrapper_classes %>" <%= tag.attributes(@html_attrs) %>>
+  <% addons.each do |addon| %><%= addon %><% end %>
+  <%= field %>
+</div>

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+# UI::InputGroup — wrapper that visually merges a UI::Input with one or more
+# Addon decorators (icons, text, icon-buttons). The wrapper owns the border and
+# focus ring; the inner Field strips its own so there's no double border.
+#
+# The wrapper's focus ring inherits from UI::Base::FOCUS_RING (same as Button)
+# wrapped in has-[] selectors, so changes propagate automatically.
+#
+# Usage:
+#   <%= render(UI::InputGroup.new) do |g| %>
+#     <%= g.with_addon(align: "inline-start") { |a| a.with_icon(name: "mail") } %>
+#     <%= g.with_field(type: :email, placeholder: "you@example.com") %>
+#   <% end %>
+class UI::InputGroup < UI::Base
+  # Wrapper owns the focus ring via :focus-within so it lights up on any
+  # descendant focus (mouse click or keyboard). focus-visible is too narrow.
+  WRAPPER_BASE =
+    "group/input-group relative flex w-full items-center rounded-md border " \
+    "border-input bg-background " \
+    "transition-all " \
+    "h-9 min-w-0 has-[>textarea]:h-auto " \
+    "has-[>[data-align=inline-start]]:[&>input]:pl-2 " \
+    "has-[>[data-align=inline-end]]:[&>input]:pr-2 " \
+    "has-[>[data-align=block-start]]:h-auto " \
+    "has-[>[data-align=block-start]]:flex-col " \
+    "has-[>[data-align=block-start]]:[&>input]:pb-3 " \
+    "has-[>[data-align=block-end]]:h-auto " \
+    "has-[>[data-align=block-end]]:flex-col " \
+    "has-[>[data-align=block-end]]:[&>input]:pt-3 " \
+    "focus-within:ring-2 " \
+    "focus-within:ring-primary " \
+    "focus-within:ring-offset-1 " \
+    "ring-offset-background " \
+    "has-[[data-slot][aria-invalid=true]:not(:has(input:disabled))]:border-destructive " \
+    "has-[[data-slot][aria-invalid=true]:not(:has(input:disabled))]:ring-destructive " \
+    "has-[input:disabled]:border-input " \
+    "has-[input:disabled]:bg-muted " \
+    "has-[input:disabled]:opacity-50"
+
+  renders_many :addons, UI::InputGroup::Addon
+
+  renders_one :field, UI::InputGroup::Field
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def wrapper_classes
+    # Propagate error styling to the wrapper when the field is in error state.
+    error = field&.instance_variable_get(:@error)
+    cn(WRAPPER_BASE, { "border-destructive" => error }, @user_class)
+  end
+end

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

@@ -0,0 +1,2 @@
+<%# frozen_string_literal: true %>
+<%= tag.label(**html_options) do %><%= content %><% if @required %><%= tag.span(" *", class: "text-destructive ml-0.5") %><% end %><% end %>

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+class UI::Label < UI::Base
+  variants(
+    base: "leading-none",
+    variants: {
+      size: {
+        xs:      "text-xs",
+        sm:      "text-sm",
+        default: "text-sm",
+        lg:      "text-base"
+      },
+      weight: {
+        normal:   "font-normal",
+        medium:   "font-medium",
+        semibold: "font-semibold"
+      }
+    },
+    defaults: { size: :default, weight: :medium }
+  )
+
+  def initialize(size: :default, weight: :medium,
+                 required: false, disabled: false,
+                 for: nil, class: nil, **html_attrs)
+    @size     = size
+    @weight   = weight
+    @required = required
+    @disabled = disabled
+    @for      = binding.local_variable_get(:for)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(
+      variant_classes(size: @size, weight: @weight),
+      { "text-muted-foreground cursor-not-allowed" => @disabled },
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:for]   = @for if @for
+    opts[:class] = classes
+    opts
+  end
+end

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

@@ -0,0 +1 @@
+<%= link_to @href, **html_options do %><% if leading_icon? %><%= leading_icon %><% end %><%= content %><% if trailing_icon? %><%= trailing_icon %><% end %><% end %>

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+class UI::Link < UI::Base
+  ICON_SIZE_FOR_LINK_SIZE = {
+    sm: :xs,
+    default: :sm,
+    lg: :default
+  }.freeze
+
+  variants(
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium " \
+          "#{UI::Base::FOCUS_RING}",
+    variants: {
+      variant: {
+        link:        "text-primary underline-offset-4 hover:underline",
+        default:     "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus:ring-destructive",
+        outline:     "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:   "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:       "hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        sm:      "h-8 rounded-sm px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        lg:      "h-10 rounded-sm px-8"
+      }
+    },
+    defaults: { variant: :link, size: :default }
+  )
+
+  renders_one :leading_icon, ->(name:, size: nil, **opts) {
+    UI::Icon.new(name: name, size: size || ICON_SIZE_FOR_LINK_SIZE.fetch(@size, :default), **opts)
+  }
+
+  renders_one :trailing_icon, ->(name:, size: nil, **opts) {
+    UI::Icon.new(name: name, size: size || ICON_SIZE_FOR_LINK_SIZE.fetch(@size, :default), **opts)
+  }
+
+  def initialize(href: "#", variant: :link, size: :default, button_variant: false, truncate: false, class: nil, **html_attrs)
+    @href = href
+    @variant = variant
+    @size = size
+    @button_variant = button_variant
+    @truncate = truncate
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    base = if @button_variant
+             variant_classes(variant: @variant, size: @size)
+    else
+             cn(self.class.variant_config[:base], self.class.variant_config[:variants][:variant][:link])
+    end
+    cn(base, { "max-w-32 truncate" => @truncate }, @user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:href] = @href
+    opts[:class] = classes
+    opts
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= tag.div(**html_options) do %>
+  <% items.each do |item| %>
+    <%= render(item[:comp]) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+class UI::Menu::Content < UI::Base
+  variants(
+    base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] " \
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " \
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    variants: {
+      side: {
+        top: "",
+        bottom: "",
+        left: "",
+        right: ""
+      },
+      align: {
+        start: "",
+        center: "",
+        end: ""
+      }
+    },
+    defaults: { side: :bottom, align: :start }
+  )
+
+  def initialize(side: :bottom, align: :start, class: nil, **html_attrs)
+    @side = side
+    @align = align
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @items = []
+  end
+
+  def set_menu_context(menu)
+    @menu = menu
+    @id = @html_attrs[:id] || "ui-menu-content-#{menu.id}"
+  end
+
+  def before_render
+    content
+  end
+
+  def with_item(label = nil, href: nil, disabled: false, variant: :default, inset: false, **opts, &block)
+    item_class = opts.delete(:class)
+    @items << {
+      type: :item,
+      comp: UI::Menu::Item.new(
+        label,
+        href: href,
+        disabled: disabled,
+        variant: variant,
+        inset: inset,
+        class: item_class,
+        **opts,
+        &block
+      )
+    }
+  end
+
+  def with_label(label = nil, inset: false, **opts, &block)
+    label_class = opts.delete(:class)
+    @items << {
+      type: :label,
+      comp: UI::Menu::Label.new(
+        label,
+        inset: inset,
+        class: label_class,
+        **opts,
+        &block
+      )
+    }
+  end
+
+  def with_divider(**opts)
+    sep_class = opts.delete(:class)
+    @items << {
+      type: :separator,
+      comp: UI::Menu::Separator.new(
+        class: sep_class,
+        **opts
+      )
+    }
+  end
+
+  def classes
+    cn(
+      variant_classes(side: @side, align: @align),
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id] = @id
+    opts[:class] = classes
+    opts[:role] = :menu
+    opts[:"aria-orientation"] = :vertical
+    opts[:"data-ui--menu-target"] = "content"
+    opts[:hidden] = true
+    opts[:"data-side"] = @side
+    opts[:"data-align"] = @align
+    opts[:tabindex] = -1
+    opts
+  end
+
+  attr_reader :side, :align, :items
+end

data/registry/app/components/ui/menu/group.html.erb

@@ -0,0 +1 @@
+<%= tag.div(**html_options) do %><%= content %><% end %>

data/registry/app/components/ui/menu/group.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class UI::Menu::Group < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(@user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts[:role] = :group
+    opts
+  end
+end

data/registry/app/components/ui/menu/item.html.erb

@@ -0,0 +1 @@
+<%= tag.public_send(tag_name, **html_options, **href_attr) do %><%= render_label %><% end %>