aeno 0.0.3

data/app/components/aeno/primitives/input_password/styles.css

@@ -0,0 +1,61 @@
+/* Input Password */
+.cp-input-password {
+}
+
+.cp-input-password__field {
+  position: relative;
+}
+
+.cp-input-password__input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-password__input::placeholder {
+  color: var(--ui-input-placeholder);
+}
+
+.cp-input-password__input:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-password__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-input-password__toggle {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0.25rem;
+  color: var(--ui-input-placeholder);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 0.25rem;
+}
+
+.cp-input-password__toggle:hover {
+  color: var(--ui-input-fg);
+}
+
+.cp-input-password__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+}
+
+.cp-input-password__toggle-icon--hidden {
+  display: none;
+}

data/app/components/aeno/primitives/input_select/component.html.erb

@@ -0,0 +1,43 @@
+<div class="cp-input-select">
+  <%= render Aeno::Primitives::InputWrapper::Component.new(
+      label: label,
+      helper_text: helper_text,
+      error_text: error_text,
+      name: name,
+      id: id,
+      disabled: disabled,
+      required: required) do %>
+    <select
+      id="<%= id %>"
+      name="<%= name %>"
+      class="cp-input-select__select"
+      <%= 'disabled' if disabled %>
+      <%= 'required' if required %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    >
+    <% if prompt %>
+      <option value=""><%= prompt %></option>
+    <% end %>
+
+    <% if collection && value_method && label_method %>
+      <% collection.each do |item| %>
+        <option value="<%= item.send(value_method) %>" <%= 'selected' if value == item.send(value_method).to_s %>>
+          <%= item.send(label_method) %>
+        </option>
+      <% end %>
+    <% elsif options.any? %>
+      <% options.each do |option_value, option_label| %>
+        <option value="<%= option_value %>" <%= 'selected' if value == option_value.to_s %>>
+          <%= option_label %>
+        </option>
+      <% end %>
+    <% else %>
+      <% select_options.each do |option| %>
+        <%= option %>
+      <% end %>
+    <% end %>
+    </select>
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_select/component.rb

@@ -0,0 +1,21 @@
+module Aeno::Primitives::InputSelect
+  class Component < ::Aeno::FormBuilder::BaseComponent
+    prop :prompt, description: "Placeholder option", optional: true
+    prop :options, description: "Array of [label, value] pairs", default: -> { [] }
+    prop :collection, description: "ActiveRecord collection", optional: true
+    prop :value_method, description: "Method for option value", optional: true
+    prop :label_method, description: "Method for option label", optional: true
+
+    renders_many :select_options, Aeno::Primitives::InputSelect::Option
+
+    examples("Input Select", description: "Dropdown select input") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "country", options: [["USA", "us"], ["Canada", "ca"]]
+      end
+
+      b.example(:with_prompt, title: "With Prompt") do |e|
+        e.preview name: "status", prompt: "Select status...", options: [["Active", "active"], ["Inactive", "inactive"]]
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/input_select/option.rb

@@ -0,0 +1,14 @@
+module Aeno::Primitives::InputSelect
+  class Option < ::Aeno::ApplicationViewComponent
+    option(:value)
+    option(:label)
+    option(:selected, default: proc { false })
+    option(:disabled, default: proc { false })
+
+    erb_template <<~ERB
+      <option value="<%= value %>" <%= 'selected' if selected %> <%= 'disabled' if disabled %>>
+        <%= label %>
+      </option>
+    ERB
+  end
+end

data/app/components/aeno/primitives/input_select/styles.css

@@ -0,0 +1,30 @@
+/* Input Select */
+.cp-input-select {
+}
+
+.cp-input-select__select {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-select__select:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-select__select--error {
+  border-color: var(--ui-destructive);
+}

data/app/components/aeno/primitives/input_slider/component.html.erb

@@ -0,0 +1,33 @@
+<div class="cp-input-slider <%= 'cp-input-slider--disabled' if disabled %>">
+  <% if label || show_value %>
+    <div class="cp-input-slider__header">
+      <% if label %>
+        <label for="<%= input_id %>" class="cp-input-slider__label">
+          <%= label %>
+        </label>
+      <% end %>
+      <% if show_value %>
+        <span class="cp-input-slider__value" data-slider-value><%= value %></span>
+      <% end %>
+    </div>
+  <% end %>
+
+  <input
+    type="range"
+    id="<%= input_id %>"
+    name="<%= name %>"
+    value="<%= value %>"
+    min="<%= min %>"
+    max="<%= max %>"
+    step="<%= step %>"
+    class="cp-input-slider__input"
+    <%= 'disabled' if disabled %>
+    <% data.each do |key, val| %>
+      data-<%= key.to_s.dasherize %>="<%= val %>"
+    <% end %>
+  />
+
+  <% if helper_text %>
+    <p class="cp-input-slider__helper"><%= helper_text %></p>
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_slider/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Aeno::Primitives::InputSlider
+  class Component < ::Aeno::ApplicationViewComponent
+    prop :name, description: "Input name attribute"
+    prop :id, description: "Input id", optional: true
+    prop :value, description: "Current value", default: -> { 50 }
+    prop :min, description: "Minimum value", default: -> { 0 }
+    prop :max, description: "Maximum value", default: -> { 100 }
+    prop :step, description: "Step increment", default: -> { 1 }
+    prop :label, description: "Label text", optional: true
+    prop :show_value, description: "Show current value", default: -> { true }
+    prop :helper_text, description: "Helper text", optional: true
+    prop :disabled, description: "Disabled state", default: -> { false }
+    prop :data, description: "Data attributes", default: -> { {} }
+
+    examples("Input Slider", description: "Range slider input") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "volume"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "brightness", label: "Brightness", value: 75
+      end
+
+      b.example(:custom_range, title: "Custom Range") do |e|
+        e.preview name: "temperature", min: -10, max: 40, value: 20, label: "Temperature"
+      end
+    end
+
+    def input_id
+      id || name
+    end
+  end
+end

data/app/components/aeno/primitives/input_slider/styles.css

@@ -0,0 +1,74 @@
+/* Input Slider */
+.cp-input-slider {
+}
+
+.cp-input-slider--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cp-input-slider__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.cp-input-slider__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ui-foreground);
+}
+
+.cp-input-slider__value {
+  font-size: 0.875rem;
+  font-family: monospace;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-slider__input {
+  width: 100%;
+  height: 0.5rem;
+  appearance: none;
+  background: var(--ui-accent);
+  border-radius: 9999px;
+  cursor: pointer;
+  outline: none;
+}
+
+.cp-input-slider__input::-webkit-slider-thumb {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  background: var(--ui-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.cp-input-slider__input::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.cp-input-slider__input::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background: var(--ui-primary);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.cp-input-slider__input:focus {
+  outline: none;
+}
+
+.cp-input-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.cp-input-slider__helper {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}

data/app/components/aeno/primitives/input_tagging/component.html.erb

@@ -0,0 +1,73 @@
+<div class="cp-input-tagging">
+  <%= render Aeno::Primitives::InputWrapper::Component.new(
+      label: label,
+      helper_text: helper_text,
+      error_text: error_text,
+      name: name,
+      id: id,
+      disabled: disabled,
+      required: required) do %>
+    <div class="cp-input-tagging__container"
+         data-controller="<%= controller_name %>"
+         <%= stimulus_values.map { |k, v| "data-#{k.dasherize}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ").html_safe %>>
+
+      <div class="cp-input-tagging__tags" data-<%= controller_name %>-target="selectedContainer">
+        <% selected_tags.each do |tag| %>
+          <span class="cp-input-tagging__tag"
+                data-<%= controller_name %>-target="tag"
+                data-tag-name="<%= tag %>">
+            <%= tag %>
+            <button type="button"
+                    class="cp-input-tagging__tag-remove"
+                    data-action="click-><%= controller_name %>#removeTag">
+              <%= lucide_icon("x", class: "cp-input-tagging__tag-icon") %>
+            </button>
+          </span>
+        <% end %>
+      </div>
+
+      <div data-<%= controller_name %>-target="hiddenInputs">
+        <% selected_tags.each do |tag| %>
+          <input type="hidden" name="<%= input_name %>" value="<%= tag %>">
+        <% end %>
+      </div>
+
+      <div class="cp-input-tagging__search">
+        <input type="text"
+               class="cp-input-tagging__input"
+               placeholder="<%= placeholder || 'Search or add tags...' %>"
+               autocomplete="off"
+               data-<%= controller_name %>-target="search"
+               data-action="input-><%= controller_name %>#onSearchInput focus-><%= controller_name %>#onFocus keydown-><%= controller_name %>#onKeydown"
+               <%= 'disabled' if disabled %>>
+
+        <div class="cp-input-tagging__dropdown cp-input-tagging__dropdown--hidden"
+             data-<%= controller_name %>-target="dropdown">
+
+          <div class="cp-input-tagging__loading cp-input-tagging__loading--hidden" data-<%= controller_name %>-target="loading">
+            <%= ui("spinner", size: :sm) %>
+            <span>Loading...</span>
+          </div>
+
+          <div class="cp-input-tagging__options" data-<%= controller_name %>-target="optionsContainer">
+          </div>
+
+          <% if allow_create %>
+            <div class="cp-input-tagging__create cp-input-tagging__create--hidden" data-<%= controller_name %>-target="createOption">
+              <button type="button"
+                      class="cp-input-tagging__create-btn"
+                      data-action="click-><%= controller_name %>#createTag">
+                <%= lucide_icon("plus", class: "cp-input-tagging__create-icon") %>
+                <span>Create "<span data-<%= controller_name %>-target="createLabel"></span>"</span>
+              </button>
+            </div>
+          <% end %>
+
+          <div class="cp-input-tagging__empty cp-input-tagging__empty--hidden" data-<%= controller_name %>-target="empty">
+            No tags found.
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_tagging/component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Aeno::Primitives::InputTagging
+  class Component < ::Aeno::FormBuilder::BaseComponent
+    prop :tags_url, description: "URL to fetch tags", optional: true
+    prop :create_url, description: "URL to create new tags", optional: true
+    prop :selected_tags, description: "Pre-selected tags", default: -> { [] }
+    prop :allow_create, description: "Allow creating new tags", default: -> { true }
+    prop :max_tags, description: "Maximum number of tags", optional: true
+
+    examples("Input Tagging", description: "Tag input with autocomplete") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "tags"
+      end
+
+      b.example(:with_selected, title: "With Selected Tags") do |e|
+        e.preview name: "tags", selected_tags: [{ id: 1, name: "Ruby" }, { id: 2, name: "Rails" }]
+      end
+
+      b.example(:limited, title: "Limited Tags") do |e|
+        e.preview name: "tags", max_tags: 3
+      end
+    end
+
+    def stimulus_values
+      values = {
+        "#{controller_name}-selected-value" => selected_tags.to_json,
+        "#{controller_name}-allow-create-value" => allow_create
+      }
+      values["#{controller_name}-tags-url-value"] = tags_url if tags_url
+      values["#{controller_name}-create-url-value"] = create_url if create_url
+      values["#{controller_name}-max-tags-value"] = max_tags if max_tags
+      values
+    end
+
+    def input_name
+      name.to_s.end_with?("[]") ? name : "#{name}[]"
+    end
+  end
+end