velvetkit 0.1.0.beta

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

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+class UI::Tabs::Trigger < UI::Base
+  variants(
+    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap " \
+          "font-medium transition-all " \
+          "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 " \
+          "disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground!",
+    variants: {
+      variant: {
+        line:  "relative -mb-px px-3 text-muted-foreground hover:text-foreground " \
+               "data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary",
+        pill:  "px-3 rounded-sm text-muted-foreground hover:text-foreground " \
+               "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        solid: "px-4 text-muted-foreground hover:text-foreground first:rounded-l-md last:rounded-r-md " \
+               "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+      },
+      size: {
+        sm:      "text-xs",
+        default: "text-sm",
+        lg:      "text-base"
+      }
+    },
+    compound: [
+      # Line variant heights
+      { when: { variant: :line, size: :sm },      class: "h-8" },
+      { when: { variant: :line, size: :default }, class: "h-10" },
+      { when: { variant: :line, size: :lg },      class: "h-11" },
+      # Pill variant heights
+      { when: { variant: :pill, size: :sm },      class: "h-7" },
+      { when: { variant: :pill, size: :default }, class: "h-8" },
+      { when: { variant: :pill, size: :lg },      class: "h-9" },
+      # Solid variant heights
+      { when: { variant: :solid, size: :sm },      class: "h-8" },
+      { when: { variant: :solid, size: :default }, class: "h-10" },
+      { when: { variant: :solid, size: :lg },      class: "h-11" }
+    ],
+    defaults: { variant: :line, size: :default }
+  )
+
+  renders_one :leading_icon, ->(name:, **opts) {
+    UI::Icon.new(name: name, size: opts.delete(:size) || :sm, **opts)
+  }
+
+  def initialize(value:, disabled: false, class: nil, **html_attrs)
+    @value      = value
+    @disabled   = disabled
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  attr_reader :value
+
+  def set_tab_context(tabs, list:)
+    @tab_context = tabs
+    @list        = list
+    @id          = @html_attrs[:id] || "ui-tab-#{tabs.id}-#{@value}"
+  end
+
+  def panel_id
+    "ui-panel-#{@tab_context.id}-#{@value}"
+  end
+
+  def active?
+    @tab_context.initial_value.to_s == @value.to_s
+  end
+
+  def classes
+    cn(
+      variant_classes(variant: @tab_context.variant, size: @tab_context.size),
+      @user_class
+    )
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:type]              = :button
+    opts[:role]              = :tab
+    opts[:id]                = @id
+    opts[:class]             = classes
+    opts[:disabled]          = true if @disabled
+    opts[:"aria-selected"]   = active? ? "true" : "false"
+    opts[:"aria-controls"]   = panel_id
+    opts[:tabindex]          = active? ? "0" : "-1"
+    opts[:"data-state"]      = active? ? "active" : "inactive"
+    opts[:"data-ui--tabs-target"] = "trigger"
+    opts[:"data-value"]      = @value.to_s
+    opts[:"data-action"]     = "click->ui--tabs#activate keydown->ui--tabs#keydown"
+    opts
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.div(class: root_classes,
+            data: { controller: "ui--tabs", "ui--tabs-active-value": (initial_value || "") }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><%= list %><% panels.each do |panel| %><%= panel %><% end %><% end %>

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class UI::Tabs < UI::Base
+  renders_one  :list, ->(**opts) { UI::Tabs::List.new(**opts).tap { |l| l.set_tab_context(self) } }
+  renders_many :panels, ->(value:, **opts) { UI::Tabs::Content.new(value: value, **opts).tap { |p| p.set_tab_context(self) } }
+
+  def initialize(default_value:, variant: :line, size: :default,
+                 class: nil, **html_attrs)
+    @default_value = default_value
+    @variant       = variant
+    @size          = size
+    @user_class    = binding.local_variable_get(:class)
+    @html_attrs    = html_attrs
+    @id            = @html_attrs[:id] || "ui-tabs-#{SecureRandom.hex(4)}"
+    @html_attrs[:id] = @id
+  end
+
+  attr_reader :variant, :size, :default_value, :id
+
+  def root_classes
+    cn("w-full", @user_class)
+  end
+
+  def initial_value
+    @default_value || ""
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.public_send(tag_name, class: classes, **@html_attrs) do %><%= content %><% end %>

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+class UI::Text < UI::Base
+  variants(
+    base: "leading-normal",
+    variants: {
+      size: {
+        xs:   "text-xs",
+        sm:   "text-sm",
+        base: "text-base",
+        lg:   "text-lg",
+        xl:   "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl"
+      },
+      weight: {
+        normal:   "font-normal",
+        medium:   "font-medium",
+        semibold: "font-semibold",
+        bold:     "font-bold"
+      },
+      tone: {
+        default:     "text-foreground",
+        muted:       "text-muted-foreground",
+        destructive: "text-destructive"
+      }
+    },
+    defaults: { size: :base, weight: :normal, tone: :default }
+  )
+
+  def initialize(as: :p, size: :base, weight: :normal, tone: :default, class: nil, **html_attrs)
+    @as          = binding.local_variable_get(:as)
+    @size        = size
+    @weight      = weight
+    @tone        = tone
+    @user_class  = binding.local_variable_get(:class)
+    @html_attrs  = html_attrs
+  end
+
+  def classes
+    cn(variant_classes(size: @size, weight: @weight, tone: @tone), @user_class)
+  end
+
+  def tag_name
+    @as
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= tag.div(**wrapper_options) do %><%= render(UI::Menu.new) do |menu| %>
+  <% menu.with_trigger(**trigger_options) do %><%= render(UI::Icon.new(name: "sun", size: :sm, class: sun_classes)) %><%= render(UI::Icon.new(name: "moon", size: :sm, class: moon_classes)) %><%= render(UI::Icon.new(name: "monitor", size: :sm, class: system_classes)) %><% end %>
+  <% menu.with_menu_content(align: :end, class: "w-40") do |content| %>
+    <% content.with_label(t("ui.theme_toggle.heading", default: "Theme")) %>
+    <% OPTIONS.each do |option| %>
+      <% content.with_item(**option_options(option)) do %><%= render(UI::Icon.new(name: option[:icon], size: :sm)) %><span><%= t("ui.theme_toggle.options.#{option[:key]}", default: option[:key].capitalize) %></span><%= render(UI::Icon.new(name: "check", size: :sm, class: "ml-auto hidden group-aria-checked:block")) %><% end %>
+    <% end %>
+  <% end %>
+<% end %><% end %>

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

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# UI::ThemeToggle — System / Light / Dark picker.
+#
+# The preference lives in localStorage under `ui-theme` and is applied by the
+# `ui--theme` Stimulus controller, which sets `.dark` on <html>. The initial
+# class is set pre-paint by layouts/_theme_script to avoid a flash.
+#
+# Usage:
+#   <%= render(UI::ThemeToggle.new) %>
+class UI::ThemeToggle < UI::Base
+  OPTIONS = [
+    { value: "light",  key: "light",  icon: "sun" },
+    { value: "dark",   key: "dark",   icon: "moon" },
+    { value: "system", key: "system", icon: "monitor" }
+  ].freeze
+
+  def initialize(label: nil, class: nil, **html_attrs)
+    @label      = label
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def wrapper_options
+    opts = @html_attrs.dup
+    opts[:data] = { controller: "ui--theme" }.merge(opts[:data] || {})
+    opts[:class] = cn("contents", @user_class)
+    opts
+  end
+
+  def trigger_options
+    {
+      variant: :ghost,
+      size: :icon_sm,
+      class: "size-7!",
+      aria: { label: @label || I18n.t("ui.theme_toggle.label", default: "Change theme") }
+    }
+  end
+
+  # Both icons are rendered and swapped with `dark:` variants rather than by
+  # changing `data-lucide` at runtime: lucide replaces each <i> with an <svg>
+  # on first render, so the original element is gone and a later attribute
+  # change would do nothing.
+  # The trigger shows the preference (html[data-theme], set before paint by
+  # the theme script): sun for light, which is the default, moon for dark,
+  # and a monitor while following the system.
+  def sun_classes = "block in-data-[theme=dark]:hidden in-data-[theme=system]:hidden"
+  def moon_classes = "hidden in-data-[theme=dark]:block"
+  def system_classes = "hidden in-data-[theme=system]:block"
+
+  def option_options(option)
+    {
+      role: "menuitemradio",
+      class: "group",
+      data: {
+        theme: option[:value],
+        action: "ui--theme#select",
+        "ui--theme-target" => "option"
+      },
+      aria: { checked: "false" }
+    }
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.div(**html_options) do %><%= content %><%= tag.div(class: arrow_classes, data: { "ui--tooltip-target": "arrow" }) %><% end %>

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+class UI::Tooltip::Content < UI::Base
+  # Note: do NOT add `overflow-hidden` here — Floating UI positions the arrow
+  # partially outside this box via a negative `staticSide` offset, and
+  # `overflow-hidden` would clip the arrow (the most common reason it goes
+  # invisible). Keep overflow visible so the arrow can stick out.
+  variants(
+    base: "z-50 rounded-md bg-foreground px-3 py-1.5 text-sm text-background shadow-lg " \
+          "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: "",
+        right: "",
+        bottom: "",
+        left: ""
+      },
+      align: {
+        start: "",
+        center: "",
+        end: ""
+      }
+    },
+    defaults: { side: :top, align: :center }
+  )
+
+  def initialize(side: :top, align: :center, class: nil, **html_attrs)
+    @side = side
+    @align = align
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_tooltip_context(tooltip)
+    @tooltip = tooltip
+    @id = @html_attrs[:id] || "ui-tooltip-content-#{tooltip.id}"
+  end
+
+  def classes
+    cn(
+      variant_classes(side: @side, align: @align),
+      @user_class
+    )
+  end
+
+  def arrow_classes
+    "absolute w-2 h-2 bg-foreground rotate-45"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id] = @id
+    opts[:class] = classes
+    opts[:role] = :tooltip
+    opts[:"data-ui--tooltip-target"] = "content"
+    opts[:hidden] = true
+    opts[:"data-side"] = @side
+    opts[:"data-align"] = @align
+    opts
+  end
+
+  attr_reader :side, :align
+end

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

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

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class UI::Tooltip::Trigger < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def set_tooltip_context(tooltip)
+    @tooltip = tooltip
+    @id = @html_attrs[:id] || "ui-tooltip-trigger-#{tooltip.id}"
+  end
+
+  def classes
+    cn(@user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id] = @id
+    opts[:class] = classes
+    opts[:type] = :button if opts[:as]&.to_sym == :button
+    opts[:"aria-describedby"] = "ui-tooltip-content-#{@tooltip.id}"
+    opts[:"data-ui--tooltip-target"] = "trigger"
+    opts[:"data-action"] = [
+      "mouseenter->ui--tooltip#show",
+      "mouseleave->ui--tooltip#hide",
+      "focus->ui--tooltip#show",
+      "blur->ui--tooltip#hide"
+    ].join(" ")
+    opts
+  end
+end

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

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

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class UI::Tooltip < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Tooltip::Trigger.new(**opts).tap { |t| t.set_tooltip_context(self) }
+  }
+  renders_one :tooltip_content, ->(**opts) {
+    UI::Tooltip::Content.new(**opts).tap { |c| c.set_tooltip_context(self) }
+  }
+  # Alias for more natural API: `with_content` instead of `with_tooltip_content`
+  alias_method :with_content, :with_tooltip_content
+
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+    @id = @html_attrs[:id] || "ui-tooltip-#{SecureRandom.hex(4)}"
+  end
+
+  attr_reader :id
+
+  def root_classes
+    cn("inline-block", @user_class)
+  end
+end

data/registry/app/components/ui/typography/blockquote.html.erb

@@ -0,0 +1 @@
+<%= tag.blockquote class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/typography/blockquote.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class UI::Typography::Blockquote < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(
+      "mt-6 border-l-2 border-border pl-6 italic text-foreground",
+      @user_class
+    )
+  end
+end

data/registry/app/components/ui/typography/code.html.erb

@@ -0,0 +1 @@
+<%= tag.code class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/typography/code.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class UI::Typography::Code < UI::Base
+  variants(
+    base: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+    variants: {
+      size: {
+        sm:   "text-xs",
+        base: "text-sm",
+        lg:   "text-base"
+      }
+    },
+    defaults: { size: :base }
+  )
+
+  def initialize(size: :base, class: nil, **html_attrs)
+    @size       = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(variant_classes(size: @size), @user_class)
+  end
+end

data/registry/app/components/ui/typography/h1.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::H1 < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :h1, size: :"4xl", weight: :bold, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/h2.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::H2 < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :h2, size: :"3xl", weight: :semibold, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/h3.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::H3 < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :h3, size: :"2xl", weight: :semibold, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/h4.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::H4 < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :h4, size: :xl, weight: :semibold, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/large.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::Large < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :div, size: :lg, weight: :semibold, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/lead.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::Lead < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :p, size: :xl, weight: :normal, tone: :muted, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/muted.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::Muted < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :p, size: :sm, weight: :normal, tone: :muted, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/components/ui/typography/small.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class UI::Typography::Small < UI::Text
+  def initialize(class: nil, **html_attrs)
+    super(as: :small, size: :xs, weight: :medium, tone: :default, class: binding.local_variable_get(:class), **html_attrs)
+  end
+end

data/registry/app/javascript/ag_grid.ts

@@ -0,0 +1,26 @@
+// AG Grid, built as its own entry point rather than bundled into
+// application.js. It is ~1.3 MB unminified — larger than the entire rest of
+// the app — and only two screens use it, so it is loaded on demand by
+// UI::DataGrid's Stimulus controller instead of on every page.
+//
+// It cannot be a bun code-split chunk: splitting emits sibling imports by
+// plain filename, and Propshaft serves digested filenames, so every chunk
+// 404s. A separate entry point stays self-contained, and Ruby hands the
+// controller the digested URL to import.
+export {
+  createGrid,
+  ModuleRegistry,
+  InfiniteRowModelModule,
+  // The register is a form: it holds one class, needs every row present to
+  // submit, and pages nothing. That is the client-side model, not the
+  // infinite one the read-only grids use.
+  ClientSideRowModelModule,
+  PaginationModule,
+  TextFilterModule,
+  NumberFilterModule,
+  CustomFilterModule,
+  ColumnAutoSizeModule,
+  themeQuartz,
+  colorSchemeDark,
+  colorSchemeLight
+} from "ag-grid-community";

data/registry/app/javascript/cally.ts

@@ -0,0 +1,8 @@
+// Cally, built as its own entry point rather than bundled into
+// application.js. A date picker is only wanted on data-entry screens, and the
+// class list should not pay 9 KB for one.
+//
+// Same shape as ag_grid.ts, and for the same reasons: a bun code-split chunk
+// cannot be used because Propshaft serves digested filenames, and the URL is
+// handed to the Stimulus controller from Ruby.
+import "cally";

data/registry/app/javascript/controllers/ui/_internal/use_dismiss.ts

@@ -0,0 +1,88 @@
+/**
+ * useDismiss - Handles dismissal interactions for popovers and dialogs
+ *
+ * Features:
+ * - Outside click dismissal
+ * - Escape key dismissal
+ * - Optional close on focus leaving the element
+ */
+
+export interface UseDismissOptions {
+  /** Enable dismissal on outside click (default: true) */
+  outsideClick?: boolean;
+  /** Enable dismissal on Escape key (default: true) */
+  escapeKey?: boolean;
+  /** Enable dismissal when focus leaves the element (default: false) */
+  focusOut?: boolean;
+  /** Element(s) to exclude from outside click check (e.g. the trigger button) */
+  outsideClickExclude?: HTMLElement | HTMLElement[];
+  /** Callback when dismiss is triggered */
+  onDismiss?: (reason: 'outside-click' | 'escape-key' | 'focus-out') => void;
+}
+
+export interface UseDismissReturn {
+  /** Cleanup function to remove event listeners */
+  destroy: () => void;
+}
+
+/**
+ * Hook to handle dismiss interactions for floating elements
+ */
+export function useDismiss(
+  element: HTMLElement,
+  options: UseDismissOptions = {}
+): UseDismissReturn {
+  const { outsideClick = true, escapeKey = true, focusOut = false, onDismiss } = options;
+
+  const handleClickOutside = (event: MouseEvent) => {
+    const target = event.target as Node;
+    // Check excluded elements (e.g. trigger button)
+    const excludes = options.outsideClickExclude ? [options.outsideClickExclude].flat() : [];
+    if (excludes.some((el) => el.contains(target))) return;
+    if (element && !element.contains(target)) {
+      onDismiss?.('outside-click');
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onDismiss?.('escape-key');
+    }
+  };
+
+  const handleFocusOut = (event: FocusEvent) => {
+    const relatedTarget = event.relatedTarget as Node;
+    if (element && !element.contains(relatedTarget)) {
+      onDismiss?.('focus-out');
+    }
+  };
+
+  // Set up event listeners
+  if (outsideClick) {
+    // Use capture phase to ensure we catch clicks before they bubble
+    document.addEventListener('click', handleClickOutside, true);
+  }
+
+  if (escapeKey) {
+    document.addEventListener('keydown', handleKeyDown);
+  }
+
+  if (focusOut) {
+    element.addEventListener('focusout', handleFocusOut);
+  }
+
+  // Return cleanup function
+  return {
+    destroy: () => {
+      if (outsideClick) {
+        document.removeEventListener('click', handleClickOutside, true);
+      }
+      if (escapeKey) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+      if (focusOut) {
+        element.removeEventListener('focusout', handleFocusOut);
+      }
+    },
+  };
+}