orbital_ui 0.3.1

data/app/components/orbital_ui/menu/item.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Menu
+    class Item < Component
+      include OrbitalUi::Concerns::IconProp
+
+      attribute :url, :string, default: nil
+      attribute :disabled, :boolean, default: false
+      attribute :selected, :boolean, default: false
+      attribute :active, :boolean, default: false
+      attribute :destructive, :boolean, default: false
+      attribute :modal, :any, default: nil
+      attribute :shortcut, :string, default: nil
+      attribute :icon, :any, default: nil
+
+      renders_one :icon_slot, OrbitalUi::Icon
+
+      def call
+        content_tag tag_name, **html_attributes do
+          safe_join([
+            render_icon,
+            icon_slot,
+            content_tag(:span, content, class: "Orbital-Menu-Item-Content"),
+            (@shortcut ? render(OrbitalUi::Text.new(size: :sm, tone: :subdued)) { @shortcut } : nil),
+            check_icon
+          ].compact)
+        end
+      end
+
+      private
+
+      def check_icon
+        content_tag(
+          :svg,
+          class: "Orbital-Menu-Item-Check", width: "16", height: "16", viewBox: "0 0 24 24",
+          fill: "none", stroke: "currentColor", "stroke-width": "2",
+          "stroke-linecap": "round", "stroke-linejoin": "round"
+        ) do
+          tag.polyline(points: "20 6 9 17 4 12")
+        end
+      end
+
+      def tag_name
+        @url.present? ? :a : :button
+      end
+
+      def default_attributes
+        attrs = super.merge(
+          class: "Orbital-Menu-Item",
+          role: "menuitem",
+          tabindex: "-1",
+          "data-disabled": @disabled || nil,
+          "data-selected": @selected || nil,
+          "data-active": @active || nil,
+          "data-destructive": @destructive || nil,
+          "aria-disabled": @disabled ? "true" : nil,
+          "data-orbital-menu-target": "item"
+        )
+
+        attrs[:href] = @url if @url.present?
+        attrs[:type] = "button" unless @url.present?
+
+        if @modal.is_a?(String) && %w[true false].exclude?(@modal)
+          attrs["data-open-modal"] = @modal
+        elsif @modal && @url.present?
+          attrs["data-turbo-frame"] = OrbitalUi.configuration.dialog_portal_id
+        end
+
+        attrs
+      end
+    end
+  end
+end

data/app/components/orbital_ui/menu/label.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Menu
+    class Label < Component
+      orb_template <<-ORB
+        <div **html_attributes>{{content}}</div>
+      ORB
+
+      private
+
+      def default_attributes
+        super.merge(
+          class: "Orbital-Menu-Label",
+          role: "presentation"
+        )
+      end
+    end
+  end
+end

data/app/components/orbital_ui/menu/separator.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Menu
+    class Separator < Component
+      orb_template <<-ORB
+        <div **html_attributes></div>
+      ORB
+
+      private
+
+      def default_attributes
+        super.merge(
+          class: "Orbital-Menu-Separator",
+          role: "separator",
+          "aria-orientation": "horizontal"
+        )
+      end
+    end
+  end
+end

data/app/components/orbital_ui/menu/sub.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Menu
+    class Sub < Component
+      include OrbitalUi::Concerns::IconProp
+
+      attribute :label, :string, required: true
+      attribute :icon, :any, default: nil
+
+      renders_many :items, types: {
+        item: { renders: Menu::Item, as: :item },
+        label: { renders: Menu::Label, as: :label },
+        separator: { renders: Menu::Separator, as: :separator }
+      }
+
+      def call
+        content_tag(:div, **html_attributes) do
+          safe_join([trigger_button, sub_content])
+        end
+      end
+
+      private
+
+      def trigger_button
+        content_tag(:button,
+          class: "Orbital-Menu-Item Orbital-Menu-Sub-Trigger",
+          role: "menuitem",
+          tabindex: "-1",
+          "aria-haspopup": "true",
+          "aria-expanded": "false",
+          "data-orbital-menu-target": "item",
+          "data-orbital-menu-sub-target": "trigger",
+          "data-action": "click->orbital-menu-sub#toggle") do
+          safe_join([
+            render_icon,
+            content_tag(:span, @label, class: "Orbital-Menu-Item-Content"),
+            render(OrbitalUi::Icon.new(name: "chevron-right", size: :sm, class: "Orbital-Menu-Sub-Icon"))
+          ].compact)
+        end
+      end
+
+      def sub_content
+        content_tag(:div,
+          class: "Orbital-Menu-Sub-Content",
+          role: "menu",
+          "data-orbital-menu-sub-target": "content",
+          "data-action": "keydown->orbital-menu-sub#handleKeydown") do
+          safe_join(items)
+        end
+      end
+
+      def expanded
+        @expanded || "false"
+      end
+
+      def default_attributes
+        super.merge(
+          class: "Orbital-Menu-Sub",
+          "data-state": "closed",
+          data: {
+            controller: "orbital-menu-sub"
+          }
+        )
+      end
+    end
+  end
+end

data/app/components/orbital_ui/menu.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Menu < Component
+    renders_many :menu_items, types: {
+      item: { renders: Menu::Item, as: :item },
+      label: { renders: Menu::Label, as: :label },
+      separator: { renders: Menu::Separator, as: :separator },
+      sub: { renders: Menu::Sub, as: :sub }
+    }
+
+    attribute :orientation, :symbol, default: :vertical, only: [:vertical, :horizontal]
+
+    orb_template <<-ORB
+      <div **html_attributes>
+        {#for menu_item in menu_items}
+          {{menu_item}}
+        {/for}
+      </div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Menu",
+        role: "menu",
+        "data-orientation": @orientation,
+        data: {
+          controller: "orbital-menu",
+          action: "keydown->orbital-menu#handleKeydown"
+        }
+      )
+    end
+  end
+end

data/app/components/orbital_ui/modal.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Modal < Component
+    attribute :open, :boolean, default: false
+    attribute :dismissible, :boolean, default: true
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :xl, :full]
+
+    orb_template <<~ORB
+      <div **html_attributes>
+        <div class="Orbital-Modal-Backdrop" data-action="click->orbital-modal#backdropClick"></div>
+        <div class="Orbital-Modal-Container">
+          <div class="Orbital-Modal-Panel" data-size={@size} data-orbital-modal-target="panel">
+            {{content}}
+          </div>
+        </div>
+      </div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Modal",
+        role: "dialog",
+        "aria-modal": "true",
+        data: {
+          controller: "orbital-modal",
+          "orbital-modal-open-value": @open.to_s,
+          "orbital-modal-dismissible-value": @dismissible.to_s,
+          state: @open ? "open" : "closed"
+        }
+      )
+    end
+  end
+end

data/app/components/orbital_ui/modal_frame.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class ModalFrame < Component
+    orb_template <<~ORB
+      <turbo-frame id={portal_id}>
+        {{content}}
+      </turbo-frame>
+    ORB
+
+    private
+
+    def portal_id
+      OrbitalUi.configuration.dialog_portal_id
+    end
+  end
+end

data/app/components/orbital_ui/navigation_menu.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class OrbitalUi::NavigationMenu < OrbitalUi::Component
+  renders_one :brand
+  renders_one :mobile
+
+  def call
+    popover_id = "nav-mobile-#{SecureRandom.hex(4)}"
+    has_mobile = mobile?
+
+    content_tag :nav, **html_attributes do
+      safe_join([
+        brand,
+        has_mobile ? mobile_trigger(popover_id) : nil,
+        nav_content,
+        has_mobile ? mobile_popover(popover_id) : nil
+      ].compact)
+    end
+  end
+
+  private
+
+  def mobile_trigger(popover_id)
+    content_tag(:button,
+      class: "Orbital-NavigationMenu-Toggle",
+      popovertarget: popover_id,
+      popovertargetaction: "toggle",
+      style: "anchor-name: --nav-toggle-#{popover_id}",
+      "aria-label": "Menu") do
+      render OrbitalUi::Icon.new(name: "menu", size: :md)
+    end
+  end
+
+  def nav_content
+    content_tag(:div, class: "Orbital-NavigationMenu-Content") do
+      content
+    end
+  end
+
+  def mobile_popover(popover_id)
+    tag.div(mobile,
+      id: popover_id,
+      popover: "auto",
+      class: "Orbital-NavigationMenu-Mobile",
+      style: "position-anchor: --nav-toggle-#{popover_id}")
+  end
+
+  def default_attributes
+    super.merge(class: "Orbital-NavigationMenu")
+  end
+end

data/app/components/orbital_ui/popcard.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Popcard < Popover
+    attribute :on, :symbol, default: :hover, only: [:click, :hover]
+    attribute :position, :symbol, default: :n, only: [:auto, :n, :ne, :e, :se, :s, :sw, :w, :nw]
+
+    private
+
+    def default_attributes
+      super.merge(class: "Orbital-Popcard-Container")
+    end
+
+    def content_class
+      "Orbital-Popcard"
+    end
+  end
+end

data/app/components/orbital_ui/popover.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Popover < Component
+    attribute :id, :string, default: -> { "popover-#{SecureRandom.hex(4)}" }
+    attribute :on, :symbol, default: :click, only: [:click, :hover]
+    attribute :position, :symbol, default: :auto, only: [:auto, :n, :ne, :e, :se, :s, :sw, :w, :nw]
+
+    renders_one :trigger
+
+    orb_template <<-ORB
+      <div **html_attributes>
+        {#if trigger}
+          <div
+            data-orbital-popover-target="trigger">
+            {{trigger}}
+          </div>
+        {/if}
+        {#if content}
+          <div
+            popover
+            id={@id}
+            data-orbital-popover-target="content"
+            class={content_class}
+            data-position={@position}>
+            {{content}}
+          </div>
+        {/if}
+      </div>
+    ORB
+
+    private
+
+    def content_class
+      "Orbital-Popover"
+    end
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Popover-Container",
+        data: {
+          controller: "orbital-popover",
+          "orbital-popover-trigger-value": @on,
+          "orbital-popover-position-value": @position,
+          state: "closed"
+        }
+      )
+    end
+  end
+end

data/app/components/orbital_ui/progress_bar.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class ProgressBar < Component
+    attribute :value, :float, default: 0
+    attribute :max, :float, default: 100
+    attribute :size, :symbol, default: :md, only: %i[xs sm md lg xl]
+
+    orb_template <<-ORB
+      <div **html_attributes>
+        <div class="Orbital-ProgressBar-Fill" style={fill_style}></div>
+      </div>
+    ORB
+
+    private
+
+    def fill_style
+      percent = @max.to_f.positive? ? (@value.to_f / @max * 100).clamp(0, 100).round(1) : 0
+      "width: #{percent}%"
+    end
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-ProgressBar",
+        "data-size": @size,
+        role: "progressbar",
+        "aria-valuenow": @value,
+        "aria-valuemin": 0,
+        "aria-valuemax": @max
+      )
+    end
+  end
+end

data/app/components/orbital_ui/prose.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Prose < OrbitalUi::Component
+  def call
+    content_tag :div, **html_attributes do
+      content
+    end
+  end
+
+  private
+
+  def default_attributes
+    super.merge(class: "Orbital-Prose")
+  end
+end

data/app/components/orbital_ui/select.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Select < Component
+    attribute :options, :array, default: []
+    attribute :selected, :string, default: nil
+    attribute :placeholder, :string, default: "Select..."
+    attribute :name, :string, default: nil
+    attribute :id, :string, default: nil
+    attribute :label, :string, default: nil
+    attribute :labelHidden, :boolean, default: false
+    attribute :help, :string, default: nil
+    attribute :error, :string, default: nil
+    attribute :disabled, :boolean, default: false
+    attribute :required, :boolean, default: false
+    attribute :position, :symbol, default: :s
+    attribute :fullwidth, :boolean, default: false
+
+    orb_template <<-ORB
+      <div class="Orbital-Field" data-fullwidth={@fullwidth || nil}>
+        <label for={input_id} class="Orbital-Field-Label" data-hidden={@labelHidden || nil} :if={render_label?}>
+          <Text size="sm" weight=medium>{{label_text}}</Text>
+        </label>
+
+        <div **html_attributes>
+          <input
+            type="hidden"
+            id={input_id}
+            name={@name}
+            value={@selected}
+            data-orbital-select-target="input"
+            class="Orbital-Select-Input"
+          />
+
+          <Dropdown
+            position={@position}
+            fullwidth
+            id={dropdown_id}>
+
+            <Dropdown:Trigger>
+              <Button
+                variant="outline"
+                disabled={@disabled}
+                class={button_classes}>
+                <span
+                  data-orbital-select-target="label"
+                  class={label_classes}>
+                  {{display_label}}
+                </span>
+                <Icon name="chevron-down" size="sm"/>
+              </Button>
+            </Dropdown:Trigger>
+
+            <Menu>
+              {#for option in @options}
+                <Menu::Item
+                  data-value={option[:value]}
+                  data-label={option[:label]}
+                  disabled={option[:disabled] || false}
+                  selected={option[:value] == @selected}
+                  data-action="click->orbital-select#handleItemClick">
+                  {{option[:label]}}
+                </Menu::Item>
+              {/for}
+            </Menu>
+          </Dropdown>
+        </div>
+
+        <div class="Orbital-Field-Help leading-none" :if={help? || error?}>
+          {% if error? %}
+            <Text size="sm" weight=medium tone="danger" class="leading-none!">{{ @error }}</Text>
+          {% else %}
+            <Text size="sm" tone="subdued" class="leading-none!">{{ @help }}</Text>
+          {% end %}
+        </div>
+      </div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: class_names(
+          "Orbital-Select",
+          "Orbital-Select--fullwidth": @fullwidth
+        ),
+        data: {
+          controller: "orbital-select",
+          "orbital-select-selected-value": @selected,
+          error: error? || nil
+        }
+      )
+    end
+
+    def input_id
+      @id ||= "select-#{SecureRandom.hex(4)}"
+    end
+
+    def dropdown_id
+      "#{input_id}-dropdown"
+    end
+
+    def label_text
+      @label || @name.to_s.humanize
+    end
+
+    def render_label?
+      (@label.present? || @name.present?) && !@labelHidden
+    end
+
+    def selected_option
+      @options.find { |opt| opt[:value] == @selected }
+    end
+
+    def display_label
+      selected_option ? selected_option[:label] : @placeholder
+    end
+
+    def label_classes
+      class_names(
+        selected_option ? "Orbital-Select-Label" : "Orbital-Select-Placeholder"
+      )
+    end
+
+    def button_classes
+      class_names(
+        "Orbital-Select-Trigger",
+        "border-red-500": error?
+      )
+    end
+
+    def help?
+      @help.present?
+    end
+
+    def error?
+      @error.present?
+    end
+  end
+end

data/app/components/orbital_ui/separator.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Separator < Component
+    attribute :orientation, :symbol, only: %i[horizontal vertical], default: :horizontal
+    attribute :decorative, :boolean, default: true
+
+    orb_template <<-ORB
+      <div **html_attributes></div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Separator",
+        "data-orientation": @orientation,
+        role: @decorative ? "none" : "separator"
+      )
+    end
+  end
+end

data/app/components/orbital_ui/spinner.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Spinner < OrbitalUi::Component
+  attribute :size, :string, default: "md" # sm, md, lg
+  attribute :tone, :string, default: "primary" # primary, secondary, accent
+  attribute :kind, :string, only: %w[notch dots], default: "notch"
+
+  orb_template <<-ORB
+    <div class="Orbital-Spinner" data-kind={@kind} data-size={@size} role="status" aria-live="polite" aria-busy="true">
+      <span class="sr-only">Loading...</span>
+      <Icon name="loader-circle" size={@size}/>
+    </div>
+  ORB
+end

data/app/components/orbital_ui/stack.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Stack < Component
+    attribute :gap, :string, default: "4"
+    attribute :align, :symbol, default: :stretch, only: %i[start center end stretch]
+    attribute :justify, :symbol, default: :start, only: %i[start center end between around evenly]
+    attribute :padding, :string
+    attribute :dividers, :boolean, default: false
+
+    orb_template <<-ORB
+      <div **html_attributes>{{content}}</div>
+    ORB
+
+    private
+
+    def default_attributes
+      attrs = super.merge(
+        class: "Orbital-Stack",
+        "data-gap": @gap,
+        "data-align": @align,
+        "data-justify": @justify,
+        "data-padding": @padding
+      )
+      attrs[:"data-dividers"] = true if @dividers
+      attrs
+    end
+  end
+end