senren-ui 0.1.0

data/templates/controllers/select_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--select
+// v0.1: a no-op pass-through. Future versions will swap a native select for a
+// listbox-style component while preserving form submission semantics.
+export default class extends Controller {
+  connect() {
+    // ready
+  }
+}

data/templates/controllers/sheet_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--sheet
+// Side panel; behaves like a dialog.
+export default class extends Controller {
+  static targets = ["overlay", "panel", "trigger"]
+
+  connect()    { this._onKey = this._onKey.bind(this) }
+  disconnect() {
+    document.removeEventListener("keydown", this._onKey)
+    document.body.style.overflow = ""
+  }
+
+  open(event) {
+    event?.preventDefault()
+    this.overlayTarget.hidden = false
+    this.panelTarget.hidden   = false
+    this.panelTarget.dataset.open = "true"
+    document.addEventListener("keydown", this._onKey)
+    document.body.style.overflow = "hidden"
+    queueMicrotask(() => this.panelTarget?.focus())
+  }
+
+  close(event) {
+    event?.preventDefault()
+    this.overlayTarget.hidden = true
+    this.panelTarget.hidden   = true
+    this.panelTarget.dataset.open = "false"
+    document.removeEventListener("keydown", this._onKey)
+    document.body.style.overflow = ""
+  }
+
+  _onKey(event) { if (event.key === "Escape") this.close() }
+}

data/templates/controllers/sidebar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--sidebar
+// Local UI: compact/expanded visual state only.
+export default class extends Controller {
+  toggle() {
+    this.element.classList.toggle("w-20")
+    this.element.classList.toggle("w-64")
+  }
+}

data/templates/controllers/tabs_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--tabs
+// Local UI: tab activation plus arrow-key navigation.
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+
+  select(event) {
+    event.preventDefault()
+    this._activate(event.currentTarget)
+  }
+
+  onKey(event) {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return
+    event.preventDefault()
+    const tabs = this.tabTargets
+    const index = tabs.indexOf(event.currentTarget)
+    const nextIndex = this._nextIndex(event.key, index, tabs.length)
+    tabs[nextIndex]?.focus()
+    this._activate(tabs[nextIndex])
+  }
+
+  _activate(tab) {
+    const panelId = tab.dataset.panelId
+    this.tabTargets.forEach((target) => {
+      const selected = target === tab
+      target.setAttribute("aria-selected", selected ? "true" : "false")
+      target.tabIndex = selected ? 0 : -1
+    })
+    this.panelTargets.forEach((panel) => {
+      panel.hidden = panel.dataset.panelId !== panelId
+    })
+  }
+
+  _nextIndex(key, index, length) {
+    if (key === "Home") return 0
+    if (key === "End") return length - 1
+    if (key === "ArrowRight") return (index + 1) % length
+    return (index - 1 + length) % length
+  }
+}

data/templates/controllers/theme_toggle_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--theme-toggle
+// Local UI: toggles the document dark class and stores the preference.
+export default class extends Controller {
+  static targets = ["label", "icon"]
+
+  connect() {
+    this._sync()
+  }
+
+  toggle() {
+    document.documentElement.classList.toggle("dark")
+    localStorage.setItem("senren-theme", document.documentElement.classList.contains("dark") ? "dark" : "light")
+    this._sync()
+  }
+
+  _sync() {
+    const dark = document.documentElement.classList.contains("dark")
+    this.element.setAttribute("aria-pressed", dark ? "true" : "false")
+    if (this.hasLabelTarget) this.labelTarget.textContent = dark ? "Light theme" : "Dark theme"
+    if (this.hasIconTarget) this.iconTarget.textContent = dark ? "L" : "D"
+  }
+}

data/templates/controllers/tooltip_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+// senren--tooltip
+// Show/hide a small tooltip bubble on hover or focus.
+export default class extends Controller {
+  static targets = ["bubble"]
+
+  show()  { if (this.hasBubbleTarget) this.bubbleTarget.hidden = false }
+  hide()  { if (this.hasBubbleTarget) this.bubbleTarget.hidden = true }
+}

metadata

@@ -0,0 +1,257 @@
+--- !ruby/object:Gem::Specification
+name: senren-ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- vutt
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: |
+  Senren UI is a Rails-native UI component library inspired by the developer
+  experience of shadcn/ui. It ships generators, a registry, and a centralized
+  AI-agent skill system. Components are copied into the host app (source-copy
+  architecture) so developers and AI agents can read and edit them directly.
+email:
+- thanhvu8a1@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- CONTRIBUTING.md
+- LICENSE
+- README.md
+- Rakefile
+- docs/visual_style.md
+- lib/generators/senren/component/component_generator.rb
+- lib/generators/senren/component/templates/component.html.erb.tt
+- lib/generators/senren/component/templates/component.rb.tt
+- lib/generators/senren/component/templates/component_test.rb.tt
+- lib/generators/senren/component/templates/controller.js.tt
+- lib/generators/senren/component/templates/system_test.rb.tt
+- lib/generators/senren/install/install_generator.rb
+- lib/generators/senren/install/templates/base_component.rb.tt
+- lib/generators/senren/install/templates/conventions.md.tt
+- lib/generators/senren/install/templates/installed_components.yml.tt
+- lib/generators/senren/install/templates/senren.css.tt
+- lib/senren/rails.rb
+- lib/senren/rails/component_copier.rb
+- lib/senren/rails/doctor.rb
+- lib/senren/rails/engine.rb
+- lib/senren/rails/host_paths.rb
+- lib/senren/rails/installer.rb
+- lib/senren/rails/llms_writer.rb
+- lib/senren/rails/registry.rb
+- lib/senren/rails/skill_writer.rb
+- lib/senren/rails/version.rb
+- lib/tasks/senren.rake
+- registry/components.yml
+- registry/groups.yml
+- registry/recipes.yml
+- templates/components/accordion/accordion_component.html.erb
+- templates/components/accordion/accordion_component.rb
+- templates/components/activity_feed/activity_feed_component.html.erb
+- templates/components/activity_feed/activity_feed_component.rb
+- templates/components/alert/alert_component.html.erb
+- templates/components/alert/alert_component.rb
+- templates/components/alert_dialog/alert_dialog_component.html.erb
+- templates/components/alert_dialog/alert_dialog_component.rb
+- templates/components/api_key_field/api_key_field_component.html.erb
+- templates/components/api_key_field/api_key_field_component.rb
+- templates/components/app_shell/app_shell_component.html.erb
+- templates/components/app_shell/app_shell_component.rb
+- templates/components/aspect_ratio/aspect_ratio_component.html.erb
+- templates/components/aspect_ratio/aspect_ratio_component.rb
+- templates/components/avatar/avatar_component.html.erb
+- templates/components/avatar/avatar_component.rb
+- templates/components/badge/badge_component.html.erb
+- templates/components/badge/badge_component.rb
+- templates/components/billing_plan_card/billing_plan_card_component.html.erb
+- templates/components/billing_plan_card/billing_plan_card_component.rb
+- templates/components/breadcrumb/breadcrumb_component.html.erb
+- templates/components/breadcrumb/breadcrumb_component.rb
+- templates/components/bulk_action_bar/bulk_action_bar_component.html.erb
+- templates/components/bulk_action_bar/bulk_action_bar_component.rb
+- templates/components/button/button_component.html.erb
+- templates/components/button/button_component.rb
+- templates/components/calendar/calendar_component.html.erb
+- templates/components/calendar/calendar_component.rb
+- templates/components/card/card_component.html.erb
+- templates/components/card/card_component.rb
+- templates/components/carousel/carousel_component.html.erb
+- templates/components/carousel/carousel_component.rb
+- templates/components/checkbox/checkbox_component.html.erb
+- templates/components/checkbox/checkbox_component.rb
+- templates/components/checkbox_group/checkbox_group_component.html.erb
+- templates/components/checkbox_group/checkbox_group_component.rb
+- templates/components/clipboard/clipboard_component.html.erb
+- templates/components/clipboard/clipboard_component.rb
+- templates/components/codeblock/codeblock_component.html.erb
+- templates/components/codeblock/codeblock_component.rb
+- templates/components/collapsible/collapsible_component.html.erb
+- templates/components/collapsible/collapsible_component.rb
+- templates/components/combobox/combobox_component.html.erb
+- templates/components/combobox/combobox_component.rb
+- templates/components/command/command_component.html.erb
+- templates/components/command/command_component.rb
+- templates/components/context_menu/context_menu_component.html.erb
+- templates/components/context_menu/context_menu_component.rb
+- templates/components/data_table/data_table_component.html.erb
+- templates/components/data_table/data_table_component.rb
+- templates/components/date_picker/date_picker_component.html.erb
+- templates/components/date_picker/date_picker_component.rb
+- templates/components/dialog/dialog_component.html.erb
+- templates/components/dialog/dialog_component.rb
+- templates/components/dropdown_menu/dropdown_menu_component.html.erb
+- templates/components/dropdown_menu/dropdown_menu_component.rb
+- templates/components/empty_state/empty_state_component.html.erb
+- templates/components/empty_state/empty_state_component.rb
+- templates/components/filter_bar/filter_bar_component.html.erb
+- templates/components/filter_bar/filter_bar_component.rb
+- templates/components/form/form_component.html.erb
+- templates/components/form/form_component.rb
+- templates/components/hover_card/hover_card_component.html.erb
+- templates/components/hover_card/hover_card_component.rb
+- templates/components/input/input_component.html.erb
+- templates/components/input/input_component.rb
+- templates/components/invite_member_dialog/invite_member_dialog_component.html.erb
+- templates/components/invite_member_dialog/invite_member_dialog_component.rb
+- templates/components/label/label_component.html.erb
+- templates/components/label/label_component.rb
+- templates/components/link/link_component.html.erb
+- templates/components/link/link_component.rb
+- templates/components/masked_input/masked_input_component.html.erb
+- templates/components/masked_input/masked_input_component.rb
+- templates/components/native_select/native_select_component.html.erb
+- templates/components/native_select/native_select_component.rb
+- templates/components/page_header/page_header_component.html.erb
+- templates/components/page_header/page_header_component.rb
+- templates/components/pagination/pagination_component.html.erb
+- templates/components/pagination/pagination_component.rb
+- templates/components/popover/popover_component.html.erb
+- templates/components/popover/popover_component.rb
+- templates/components/progress/progress_component.html.erb
+- templates/components/progress/progress_component.rb
+- templates/components/radio_button/radio_button_component.html.erb
+- templates/components/radio_button/radio_button_component.rb
+- templates/components/rich_text_editor_lite/rich_text_editor_lite_component.html.erb
+- templates/components/rich_text_editor_lite/rich_text_editor_lite_component.rb
+- templates/components/search_input/search_input_component.html.erb
+- templates/components/search_input/search_input_component.rb
+- templates/components/select/select_component.html.erb
+- templates/components/select/select_component.rb
+- templates/components/separator/separator_component.html.erb
+- templates/components/separator/separator_component.rb
+- templates/components/settings_section/settings_section_component.html.erb
+- templates/components/settings_section/settings_section_component.rb
+- templates/components/sheet/sheet_component.html.erb
+- templates/components/sheet/sheet_component.rb
+- templates/components/shortcut_key/shortcut_key_component.html.erb
+- templates/components/shortcut_key/shortcut_key_component.rb
+- templates/components/sidebar/sidebar_component.html.erb
+- templates/components/sidebar/sidebar_component.rb
+- templates/components/skeleton/skeleton_component.html.erb
+- templates/components/skeleton/skeleton_component.rb
+- templates/components/stat_card/stat_card_component.html.erb
+- templates/components/stat_card/stat_card_component.rb
+- templates/components/switch/switch_component.html.erb
+- templates/components/switch/switch_component.rb
+- templates/components/table/table_component.html.erb
+- templates/components/table/table_component.rb
+- templates/components/tabs/tabs_component.html.erb
+- templates/components/tabs/tabs_component.rb
+- templates/components/team_member_list/team_member_list_component.html.erb
+- templates/components/team_member_list/team_member_list_component.rb
+- templates/components/textarea/textarea_component.html.erb
+- templates/components/textarea/textarea_component.rb
+- templates/components/theme_toggle/theme_toggle_component.html.erb
+- templates/components/theme_toggle/theme_toggle_component.rb
+- templates/components/tooltip/tooltip_component.html.erb
+- templates/components/tooltip/tooltip_component.rb
+- templates/components/top_nav/top_nav_component.html.erb
+- templates/components/top_nav/top_nav_component.rb
+- templates/components/typography/typography_component.html.erb
+- templates/components/typography/typography_component.rb
+- templates/controllers/accordion_controller.js
+- templates/controllers/alert_dialog_controller.js
+- templates/controllers/api_key_field_controller.js
+- templates/controllers/calendar_controller.js
+- templates/controllers/carousel_controller.js
+- templates/controllers/clipboard_controller.js
+- templates/controllers/collapsible_controller.js
+- templates/controllers/combobox_controller.js
+- templates/controllers/command_controller.js
+- templates/controllers/context_menu_controller.js
+- templates/controllers/data_table_controller.js
+- templates/controllers/date_picker_controller.js
+- templates/controllers/dialog_controller.js
+- templates/controllers/dropdown_menu_controller.js
+- templates/controllers/hover_card_controller.js
+- templates/controllers/invite_member_dialog_controller.js
+- templates/controllers/masked_input_controller.js
+- templates/controllers/popover_controller.js
+- templates/controllers/rich_text_editor_lite_controller.js
+- templates/controllers/select_controller.js
+- templates/controllers/sheet_controller.js
+- templates/controllers/sidebar_controller.js
+- templates/controllers/tabs_controller.js
+- templates/controllers/theme_toggle_controller.js
+- templates/controllers/tooltip_controller.js
+homepage: https://github.com/vuth-dogo/senren-ui
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/vuth-dogo/senren-ui
+  source_code_uri: https://github.com/vuth-dogo/senren-ui/tree/main
+  changelog_uri: https://github.com/vuth-dogo/senren-ui/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.1.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.3
+specification_version: 4
+summary: Rails-native UI component library with ViewComponent, Hotwire, Tailwind,
+  and AI-agent skill files.
+test_files: []