nanoui 0.2.0 → 0.3.0

data/lib/generators/nanoui/templates/views/components/_checkbox.html.erb

@@ -1,36 +0,0 @@
-<%# NanoUI Checkbox
-  Options: label, id (auto), checked (false), disabled (false), error (false), name, value, class, html
-  Usage:
-    render "components/checkbox", label: "Accept terms", name: "tos", required: true
-    render "components/checkbox", label: "Remember me", checked: true
-%>
-<%
-  label_text = local_assigns.fetch(:label, "")
-  input_id   = local_assigns.fetch(:id, "checkbox-#{SecureRandom.hex(4)}")
-  checked    = local_assigns.fetch(:checked, false)
-  disabled   = local_assigns.fetch(:disabled, false)
-  error      = local_assigns.fetch(:error, false)
-  name       = local_assigns.fetch(:name, nil)
-  value      = local_assigns.fetch(:value, "1")
-  classes    = local_assigns.fetch(:class, "")
-
-  css = ["nano-checkbox"]
-  css << "nano-checkbox--error" if error
-  css << classes if classes.present?
-%>
-
-<div class="<%= css.join(" ").strip %>">
-  <%
-    checkbox_attributes = {
-      type: "checkbox",
-      id: input_id,
-      class: "nano-checkbox__input",
-      value: value
-    }
-    checkbox_attributes[:name] = name if name
-    checkbox_attributes[:checked] = true if checked
-    checkbox_attributes[:disabled] = true if disabled
-  %>
-  <%= tag.input(**checkbox_attributes) %>
-  <label for="<%= input_id %>" class="nano-checkbox__label"><%= label_text %></label>
-</div>

data/lib/generators/nanoui/templates/views/components/_dialog.html.erb

@@ -1,65 +0,0 @@
-<%# NanoUI Dialog (native <dialog> with Stimulus)
-  Options: size (sm, md, lg, full), title, description, title_id (auto), trigger, footer, class
-  Usage:
-    render "components/dialog",
-      title: "Edit Profile",
-      description: "Update your info.",
-      trigger: render("components/button") { "Open" },
-      footer: render("components/button", variant: "outline", html: { data: { action: "nanoui-dialog#close" } }) { "Cancel" } do
-      "Dialog body content here"
-    end
-%>
-<%
-  size      = local_assigns.fetch(:size, "md")
-  title     = local_assigns.fetch(:title, "")
-  desc      = local_assigns.fetch(:description, nil)
-  title_id  = local_assigns.fetch(:title_id, "dialog-title-#{SecureRandom.hex(4)}")
-  trigger   = local_assigns.fetch(:trigger, nil)
-  footer    = local_assigns.fetch(:footer, nil)
-  classes   = local_assigns.fetch(:class, "")
-
-  css = ["nano-dialog"]
-  css << "nano-dialog--#{size}" unless size == "md"
-  css << classes if classes.present?
-%>
-
-<div data-controller="nanoui-dialog">
-  <% if trigger %>
-    <div class="nano-dialog__trigger" data-action="click->nanoui-dialog#open">
-      <%= trigger %>
-    </div>
-  <% end %>
-
-  <dialog data-nanoui-dialog-target="modal"
-          data-action="click->nanoui-dialog#clickBackdrop cancel->nanoui-dialog#cancel"
-          class="<%= css.join(" ").strip %>"
-          aria-labelledby="<%= title_id %>">
-    <div class="nano-dialog__content">
-      <header class="nano-dialog__header">
-        <h2 id="<%= title_id %>" class="nano-dialog__title"><%= title %></h2>
-        <% if desc %>
-          <p class="nano-dialog__description"><%= desc %></p>
-        <% end %>
-      </header>
-
-      <div class="nano-dialog__body">
-        <%= yield %>
-      </div>
-
-      <% if footer %>
-        <footer class="nano-dialog__footer">
-          <%= footer %>
-        </footer>
-      <% end %>
-
-      <button data-action="nanoui-dialog#close" class="nano-dialog__close"
-              type="button" aria-label="Close dialog">
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-             stroke-linecap="round" stroke-linejoin="round">
-          <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
-        </svg>
-      </button>
-    </div>
-  </dialog>
-</div>

data/lib/generators/nanoui/templates/views/components/_dropdown.html.erb

@@ -1,29 +0,0 @@
-<%# NanoUI Dropdown (Stimulus-powered)
-  Options: trigger, class
-  Usage:
-    render "components/dropdown",
-      trigger: render("components/button", variant: "outline") { "Options" } do
-      '<button class="nano-dropdown__item">Profile</button>
-       <button class="nano-dropdown__item">Settings</button>
-       <div class="nano-dropdown__separator"></div>
-       <button class="nano-dropdown__item">Log out</button>'.html_safe
-    end
-%>
-<%
-  classes = local_assigns.fetch(:class, "")
-  trigger = local_assigns.fetch(:trigger, nil)
-  css = "nano-dropdown"
-  css += " #{classes}" if classes.present?
-%>
-
-<div class="<%= css.strip %>" data-controller="nanoui-dropdown">
-  <div data-action="click->nanoui-dropdown#toggle keydown->nanoui-dropdown#activateTrigger"
-       data-nanoui-dropdown-target="trigger"
-       class="nano-dropdown__trigger">
-    <%= trigger || content_tag(:button, "Options", type: "button", class: "nano-btn nano-btn--outline") %>
-  </div>
-
-  <div class="nano-dropdown__content" data-nanoui-dropdown-target="content">
-    <%= yield %>
-  </div>
-</div>

data/lib/generators/nanoui/templates/views/components/_input.html.erb

@@ -1,42 +0,0 @@
-<%# NanoUI Input (wrapped in .nano-field with optional label and error)
-  Options: label, required (false), error, type ("text"), id (auto), class, html
-  Usage:
-    render "components/input", label: "Email", type: "email", required: true
-    render "components/input", label: "Name", error: "Required", html: { placeholder: "Jane" }
-%>
-<%
-  label_text = local_assigns.fetch(:label, nil)
-  required   = local_assigns.fetch(:required, false)
-  error      = local_assigns.fetch(:error, nil)
-  type       = local_assigns.fetch(:type, "text")
-  input_id   = local_assigns.fetch(:id, "input-#{SecureRandom.hex(4)}")
-  classes    = local_assigns.fetch(:class, "")
-  html       = local_assigns.fetch(:html, {}).symbolize_keys
-
-  css = ["nano-input"]
-  css << "nano-input--error" if error
-  css << classes if classes.present?
-  error_id = "#{input_id}-error" if error
-  input_attributes = {
-    id: input_id,
-    type: type,
-    class: css.join(" ")
-  }.merge(html)
-  input_attributes[:required] = true if required
-  if error
-    input_attributes[:"aria-invalid"] = true
-    input_attributes[:"aria-describedby"] = error_id
-  end
-%>
-
-<div class="nano-field">
-  <% if label_text %>
-    <label for="<%= input_id %>" class="nano-label<%= " nano-label--required" if required %>"><%= label_text %></label>
-  <% end %>
-
-  <%= tag.input(**input_attributes) %>
-
-  <% if error %>
-    <p id="<%= error_id %>" class="nano-field__error" role="alert"><%= error %></p>
-  <% end %>
-</div>

data/lib/generators/nanoui/templates/views/components/_label.html.erb

@@ -1,20 +0,0 @@
-<%# NanoUI Label
-  Options: for, required (false), class
-  Usage:
-    render "components/label", for: "email", required: true do "Email" end
-%>
-<%
-  label_for = local_assigns.fetch(:for, nil)
-  required  = local_assigns.fetch(:required, false)
-  classes   = local_assigns.fetch(:class, "")
-
-  css = "nano-label"
-  css += " nano-label--required" if required
-  css += " #{classes}" if classes.present?
-  label_attributes = { class: css.strip }
-  label_attributes[:for] = label_for if label_for
-%>
-
-<%= content_tag(:label, label_attributes) do %>
-  <%= yield %>
-<% end %>

data/lib/generators/nanoui/templates/views/components/_progress.html.erb

@@ -1,29 +0,0 @@
-<%# NanoUI Progress (native <progress>)
-  Variants: default, success, warning, destructive
-  Options: value, max (100), variant, label, aria_label, class
-  Usage:
-    render "components/progress", value: 65, label: "65%", aria_label: "Upload progress"
-    render "components/progress", value: 100, variant: "success", label: "Complete"
-%>
-<%
-  value      = local_assigns.fetch(:value, nil)
-  max        = local_assigns.fetch(:max, 100)
-  variant    = local_assigns.fetch(:variant, nil)
-  label      = local_assigns.fetch(:label, nil)
-  aria_label = local_assigns.fetch(:aria_label, "Progress")
-  classes    = local_assigns.fetch(:class, "")
-
-  css = ["nano-progress"]
-  css << "nano-progress--#{variant}" if variant
-  css << classes if classes.present?
-%>
-
-<div class="<%= css.join(" ").strip %>">
-  <progress class="nano-progress__bar"
-            <% if value %> value="<%= value %>"<% end %>
-            max="<%= max %>"
-            aria-label="<%= aria_label %>"><%= "#{value}%" if value %></progress>
-  <% if label %>
-    <span class="nano-progress__label" aria-hidden="true"><%= label %></span>
-  <% end %>
-</div>

data/lib/generators/nanoui/templates/views/components/_radio_group.html.erb

@@ -1,46 +0,0 @@
-<%# NanoUI Radio Group
-  Options: legend, name, options (array of {label:, value:, checked:, disabled:}), error (false), class
-  Usage:
-    render "components/radio_group",
-      legend: "Plan",
-      name: "plan",
-      options: [
-        { label: "Free", value: "free", checked: true },
-        { label: "Pro", value: "pro" },
-        { label: "Enterprise", value: "enterprise" }
-      ]
-%>
-<%
-  legend_text = local_assigns.fetch(:legend, nil)
-  name        = local_assigns.fetch(:name, "radio-#{SecureRandom.hex(4)}")
-  options     = local_assigns.fetch(:options, [])
-  error       = local_assigns.fetch(:error, false)
-  classes     = local_assigns.fetch(:class, "")
-
-  css = "nano-radio-group"
-  css += " #{classes}" if classes.present?
-%>
-
-<fieldset class="<%= css.strip %>">
-  <% if legend_text %>
-    <legend class="nano-radio-group__legend"><%= legend_text %></legend>
-  <% end %>
-
-  <% options.each_with_index do |opt, i| %>
-    <%
-      radio_id = "#{name}-#{i}"
-      radio_css = "nano-radio"
-      radio_css += " nano-radio--error" if error
-    %>
-    <div class="<%= radio_css %>">
-      <input type="radio"
-             id="<%= radio_id %>"
-             name="<%= name %>"
-             value="<%= opt[:value] %>"
-             class="nano-radio__input"
-             <%= "checked" if opt[:checked] %>
-             <%= "disabled" if opt[:disabled] %>>
-      <label for="<%= radio_id %>" class="nano-radio__label"><%= opt[:label] %></label>
-    </div>
-  <% end %>
-</fieldset>

data/lib/generators/nanoui/templates/views/components/_select.html.erb

@@ -1,67 +0,0 @@
-<%# NanoUI Select (wrapped in .nano-field with optional label and error)
-  Options: label, required (false), error, options (array of strings or {label:, value:}),
-           placeholder, id (auto), name, disabled, class, html
-  Usage:
-    render "components/select",
-      label: "Country",
-      placeholder: "Select a country",
-      options: ["United States", "Canada", "United Kingdom"]
-
-    render "components/select",
-      label: "Role",
-      required: true,
-      options: [
-        { label: "Admin", value: "admin" },
-        { label: "Editor", value: "editor" }
-      ]
-%>
-<%
-  label_text  = local_assigns.fetch(:label, nil)
-  required    = local_assigns.fetch(:required, false)
-  error       = local_assigns.fetch(:error, nil)
-  opts        = local_assigns.fetch(:options, [])
-  placeholder = local_assigns.fetch(:placeholder, nil)
-  select_id   = local_assigns.fetch(:id, "select-#{SecureRandom.hex(4)}")
-  name        = local_assigns.fetch(:name, nil)
-  disabled    = local_assigns.fetch(:disabled, false)
-  classes     = local_assigns.fetch(:class, "")
-
-  css = ["nano-select"]
-  css << "nano-select--error" if error
-  css << classes if classes.present?
-  error_id = "#{select_id}-error" if error
-  select_attributes = {
-    id: select_id,
-    class: css.join(" ")
-  }
-  select_attributes[:name] = name if name
-  select_attributes[:required] = true if required
-  select_attributes[:disabled] = true if disabled
-  if error
-    select_attributes[:"aria-invalid"] = true
-    select_attributes[:"aria-describedby"] = error_id
-  end
-%>
-
-<div class="nano-field">
-  <% if label_text %>
-    <label for="<%= select_id %>" class="nano-label<%= " nano-label--required" if required %>"><%= label_text %></label>
-  <% end %>
-
-  <%= content_tag(:select, select_attributes) do %>
-    <% if placeholder %>
-      <option value="" disabled selected><%= placeholder %></option>
-    <% end %>
-    <% opts.each do |opt| %>
-      <% if opt.is_a?(Hash) %>
-        <option value="<%= opt[:value] %>"><%= opt[:label] %></option>
-      <% else %>
-        <option><%= opt %></option>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <% if error %>
-    <p id="<%= error_id %>" class="nano-field__error" role="alert"><%= error %></p>
-  <% end %>
-</div>

data/lib/generators/nanoui/templates/views/components/_switch.html.erb

@@ -1,32 +0,0 @@
-<%# NanoUI Switch
-  Options: checked (false), disabled (false), label (sr-only text), class, html
-  Usage:
-    render "components/switch", label: "Enable notifications"
-    render "components/switch", label: "Dark mode", checked: true
-%>
-<%
-  checked  = local_assigns.fetch(:checked, false)
-  disabled = local_assigns.fetch(:disabled, false)
-  label    = local_assigns.fetch(:label, "Toggle")
-  classes  = local_assigns.fetch(:class, "")
-  html     = local_assigns.fetch(:html, {}).symbolize_keys
-
-  css = "nano-switch"
-  css += " #{classes}" if classes.present?
-  switch_attributes = {
-    type: "button",
-    role: "switch",
-    :"aria-checked" => checked,
-    class: css.strip,
-    data: {
-      controller: "nanoui-switch",
-      action: "nanoui-switch#toggle"
-    }
-  }.merge(html)
-  switch_attributes[:disabled] = true if disabled
-%>
-
-<%= content_tag(:button, switch_attributes) do %>
-  <span class="nano-switch__thumb"></span>
-  <span class="nano-sr-only"><%= label %></span>
-<% end %>

data/lib/generators/nanoui/templates/views/components/_table.html.erb

@@ -1,41 +0,0 @@
-<%# NanoUI Table
-  Variants: striped, hoverable
-  Options: headers (array of strings), striped (false), hoverable (false), class
-  Yields: default (tbody rows)
-  Usage:
-    render "components/table", headers: ["Name", "Email", "Status"], striped: true, hoverable: true do
-      '<tr class="nano-table__row">
-        <td class="nano-table__cell">Jane</td>
-        <td class="nano-table__cell">jane@example.com</td>
-        <td class="nano-table__cell">Active</td>
-      </tr>'.html_safe
-    end
-%>
-<%
-  headers   = local_assigns.fetch(:headers, [])
-  striped   = local_assigns.fetch(:striped, false)
-  hoverable = local_assigns.fetch(:hoverable, false)
-  classes   = local_assigns.fetch(:class, "")
-
-  css = ["nano-table"]
-  css << "nano-table--striped" if striped
-  css << "nano-table--hoverable" if hoverable
-  css << classes if classes.present?
-%>
-
-<div class="nano-table-wrapper">
-  <table class="<%= css.join(" ").strip %>">
-    <% if headers.any? %>
-      <thead class="nano-table__head">
-        <tr>
-          <% headers.each do |h| %>
-            <th scope="col" class="nano-table__header"><%= h %></th>
-          <% end %>
-        </tr>
-      </thead>
-    <% end %>
-    <tbody class="nano-table__body">
-      <%= yield %>
-    </tbody>
-  </table>
-</div>

data/lib/generators/nanoui/templates/views/components/_tabs.html.erb

@@ -1,46 +0,0 @@
-<%# NanoUI Tabs (WAI-ARIA tabs with Stimulus)
-  Options: tabs (array of {id:, label:, content:, active:}), label ("Tabs"), hash (false), class
-  Usage:
-    render "components/tabs", label: "Settings", tabs: [
-      { id: "general", label: "General", content: "General settings...", active: true },
-      { id: "security", label: "Security", content: "Security settings..." },
-      { id: "billing", label: "Billing", content: "Billing info..." }
-    ]
-%>
-<%
-  tabs_data  = local_assigns.fetch(:tabs, [])
-  aria_label = local_assigns.fetch(:label, "Tabs")
-  hash       = local_assigns.fetch(:hash, false)
-  classes    = local_assigns.fetch(:class, "")
-
-  css = "nano-tabs"
-  css += " #{classes}" if classes.present?
-%>
-
-<div class="<%= css.strip %>"
-     data-controller="nanoui-tabs"
-     data-nanoui-tabs-hash-value="<%= hash %>">
-  <div role="tablist" class="nano-tabs__list" aria-label="<%= aria_label %>">
-    <% tabs_data.each_with_index do |tab, i| %>
-      <button role="tab"
-              id="tab-<%= tab[:id] %>"
-              class="nano-tabs__trigger"
-              aria-selected="<%= tab[:active] ? "true" : "false" %>"
-              aria-controls="panel-<%= tab[:id] %>"
-              <%= "tabindex=\"-1\"" unless tab[:active] %>
-              data-action="nanoui-tabs#select keydown->nanoui-tabs#navigate"
-              data-nanoui-tabs-target="tab"><%= tab[:label] %></button>
-    <% end %>
-  </div>
-
-  <% tabs_data.each do |tab| %>
-    <div role="tabpanel"
-         id="panel-<%= tab[:id] %>"
-         class="nano-tabs__panel"
-         aria-labelledby="tab-<%= tab[:id] %>"
-         data-nanoui-tabs-target="panel"
-         <%= "hidden" unless tab[:active] %>>
-      <%= tab[:content] if tab[:content] %>
-    </div>
-  <% end %>
-</div>

data/lib/generators/nanoui/templates/views/components/_toast.html.erb

@@ -1,33 +0,0 @@
-<%# NanoUI Toast (single toast item, placed inside .nano-toast-container)
-  Variants: default, success, destructive, warning
-  Options: variant, title, description, class
-  Usage:
-    render "components/toast", variant: "success", title: "Saved!", description: "Changes applied."
-%>
-<%
-  variant = local_assigns.fetch(:variant, nil)
-  title   = local_assigns.fetch(:title, "")
-  desc    = local_assigns.fetch(:description, nil)
-  classes = local_assigns.fetch(:class, "")
-
-  css = ["nano-toast"]
-  css << "nano-toast--#{variant}" if variant
-  css << classes if classes.present?
-%>
-
-<output class="<%= css.join(" ").strip %>" role="status" data-nanoui-toast-target="item">
-  <div class="nano-toast__content">
-    <p class="nano-toast__title"><%= title %></p>
-    <% if desc %>
-      <p class="nano-toast__description"><%= desc %></p>
-    <% end %>
-  </div>
-  <button class="nano-toast__close" data-action="nanoui-toast#dismiss"
-          type="button" aria-label="Dismiss notification">
-    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14"
-         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-         stroke-linecap="round" stroke-linejoin="round">
-      <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
-    </svg>
-  </button>
-</output>

data/lib/generators/nanoui/templates/views/components/_toast_container.html.erb

@@ -1,17 +0,0 @@
-<%# NanoUI Toast Container (place once in your layout)
-  Options: duration (5000ms auto-dismiss), class
-  Usage (in application.html.erb):
-    render "components/toast_container"
-%>
-<%
-  duration = local_assigns.fetch(:duration, 5000)
-  classes  = local_assigns.fetch(:class, "")
-  css = "nano-toast-container"
-  css += " #{classes}" if classes.present?
-%>
-
-<div class="<%= css.strip %>"
-     data-controller="nanoui-toast"
-     data-nanoui-toast-duration-value="<%= duration %>"
-     aria-live="polite">
-</div>

data/lib/generators/nanoui/templates/views/components/_tooltip.html.erb

@@ -1,28 +0,0 @@
-<%# NanoUI Tooltip (Stimulus-powered)
-  Options: text, position (top, bottom, left, right), delay (200), class
-  Yields: default (trigger content)
-  Usage:
-    render "components/tooltip", text: "Add to favorites", position: "top" do
-      render "components/button", variant: "primary", size: "icon" do
-        '<svg>...</svg>'.html_safe
-      end
-    end
-%>
-<%
-  text     = local_assigns.fetch(:text, "")
-  position = local_assigns.fetch(:position, "top")
-  delay    = local_assigns.fetch(:delay, 200)
-  classes  = local_assigns.fetch(:class, "")
-
-  css = ["nano-tooltip"]
-  css << "nano-tooltip--#{position}" unless position == "top"
-  css << classes if classes.present?
-%>
-
-<div class="<%= css.join(" ").strip %>"
-     data-controller="nanoui-tooltip"
-     data-nanoui-tooltip-delay-value="<%= delay %>"
-     data-action="mouseenter->nanoui-tooltip#show mouseleave->nanoui-tooltip#hide focusin->nanoui-tooltip#show focusout->nanoui-tooltip#hide">
-  <%= yield %>
-  <div class="nano-tooltip__content" role="tooltip" data-nanoui-tooltip-target="content"><%= text %></div>
-</div>