orbital_ui 0.3.1

data/app/assets/stylesheets/orbital_ui/themes/orange.css

@@ -0,0 +1,43 @@
+:root {
+  --background: #ffffff;
+  --foreground: #1a1a1a;
+  --primary: #ea580c;
+  --primary-foreground: #fff7ed;
+  --secondary: #fff7ed;
+  --secondary-foreground: #1a1a1a;
+  --destructive: #dc2626;
+  --destructive-foreground: #fafafa;
+  --muted: #f5f5f4;
+  --muted-foreground: #737373;
+  --accent: #ffedd5;
+  --accent-foreground: #1a1a1a;
+  --card: #ffffff;
+  --card-foreground: #1a1a1a;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --ring: #ea580c;
+}
+
+.dark {
+  --background: #1a1a1a;
+  --foreground: #fafaf9;
+  --primary: #fb923c;
+  --primary-foreground: #1a1a1a;
+  --secondary: #292524;
+  --secondary-foreground: #fafaf9;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #fafaf9;
+  --muted: #292524;
+  --muted-foreground: #a8a29e;
+  --accent: #292524;
+  --accent-foreground: #fafaf9;
+  --card: #1a1a1a;
+  --card-foreground: #fafaf9;
+  --popover: #1a1a1a;
+  --popover-foreground: #fafaf9;
+  --border: #292524;
+  --input: #292524;
+  --ring: #fb923c;
+}

data/app/assets/stylesheets/orbital_ui/themes/rose.css

@@ -0,0 +1,43 @@
+:root {
+  --background: #ffffff;
+  --foreground: #1c1917;
+  --primary: #e11d48;
+  --primary-foreground: #fff1f2;
+  --secondary: #fef2f2;
+  --secondary-foreground: #1c1917;
+  --destructive: #dc2626;
+  --destructive-foreground: #fafafa;
+  --muted: #f5f5f4;
+  --muted-foreground: #78716c;
+  --accent: #fef2f2;
+  --accent-foreground: #1c1917;
+  --card: #ffffff;
+  --card-foreground: #1c1917;
+  --popover: #ffffff;
+  --popover-foreground: #1c1917;
+  --border: #e7e5e4;
+  --input: #e7e5e4;
+  --ring: #e11d48;
+}
+
+.dark {
+  --background: #1c1917;
+  --foreground: #fafaf9;
+  --primary: #fb7185;
+  --primary-foreground: #1c1917;
+  --secondary: #292524;
+  --secondary-foreground: #fafaf9;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #fafaf9;
+  --muted: #292524;
+  --muted-foreground: #a8a29e;
+  --accent: #292524;
+  --accent-foreground: #fafaf9;
+  --card: #1c1917;
+  --card-foreground: #fafaf9;
+  --popover: #1c1917;
+  --popover-foreground: #fafaf9;
+  --border: #292524;
+  --input: #292524;
+  --ring: #fb7185;
+}

data/app/assets/stylesheets/orbital_ui/themes/violet.css

@@ -0,0 +1,43 @@
+:root {
+  --background: #ffffff;
+  --foreground: #1e1b4b;
+  --primary: #7c3aed;
+  --primary-foreground: #f5f3ff;
+  --secondary: #f5f3ff;
+  --secondary-foreground: #1e1b4b;
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+  --muted: #f5f3ff;
+  --muted-foreground: #6b7280;
+  --accent: #ede9fe;
+  --accent-foreground: #1e1b4b;
+  --card: #ffffff;
+  --card-foreground: #1e1b4b;
+  --popover: #ffffff;
+  --popover-foreground: #1e1b4b;
+  --border: #e5e7eb;
+  --input: #e5e7eb;
+  --ring: #7c3aed;
+}
+
+.dark {
+  --background: #1e1b4b;
+  --foreground: #f5f3ff;
+  --primary: #a78bfa;
+  --primary-foreground: #1e1b4b;
+  --secondary: #312e81;
+  --secondary-foreground: #f5f3ff;
+  --destructive: #7f1d1d;
+  --destructive-foreground: #fafafa;
+  --muted: #312e81;
+  --muted-foreground: #c4b5fd;
+  --accent: #312e81;
+  --accent-foreground: #f5f3ff;
+  --card: #1e1b4b;
+  --card-foreground: #f5f3ff;
+  --popover: #1e1b4b;
+  --popover-foreground: #f5f3ff;
+  --border: #312e81;
+  --input: #312e81;
+  --ring: #a78bfa;
+}

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Accordion::Item < OrbitalUi::Component
+  renders_one :trigger
+
+  attribute :value, :string, required: true
+  attribute :expanded, :boolean, default: false
+
+  orb_template <<-ORB
+    <div **html_attributes>
+      <Heading as="button" size="sm" class="flex justify-between cursor-pointer w-full py-4 gap-2" data-accordion-trigger>
+        <span class="flex items-center gap-2">{{trigger}}</span>
+        <Icon name="chevron-down" size="small" class="shrink-0" data-accordion-chevron/>
+      </Heading>
+      <div class="Orbital-Accordion-Item-Content" data-state={state}>
+        <div class="Orbital-Accordion-Item-Inner">
+          {{content}}
+        </div>
+      </div>
+    </div>
+  ORB
+
+  private
+
+  def state
+    @expanded ? "open" : "closed"
+  end
+
+  def default_attributes
+    super.merge(class: "Orbital-Accordion-Item")
+  end
+end

data/app/components/orbital_ui/accordion.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class OrbitalUi::Accordion < OrbitalUi::Component
+  renders_many :items, OrbitalUi::Accordion::Item
+
+  orb_template <<-ORB
+    <div **html_attributes>
+      {#for item in items}
+        {{item}}
+      {/for}
+    </div>
+  ORB
+
+  private
+
+  def default_attributes
+    super.merge(
+      class: "Orbital-Accordion",
+      role: "region",
+      data: { controller: "o-accordion" }
+    )
+  end
+end

data/app/components/orbital_ui/alert.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Alert < Component
+    attribute :open, :boolean, default: false
+    attribute :dismissible, :boolean, default: true
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :xl, :full]
+    attribute :title, :string, default: nil
+    attribute :description, :string, default: nil
+    attribute :variant, :symbol, default: :default, only: [:default, :success, :warning, :danger, :info]
+    attribute :button_text, :string, default: "OK"
+
+    orb_template <<-ORB
+      <Modal open={@open} dismissible={@dismissible} size={@size} **html_attributes>
+        <div class="Orbital-Dialog" data-variant={@variant}>
+          <button :if={@dismissible}
+            type="button"
+            data-action="orbital-modal#close"
+            class="Orbital-Dialog-Close"
+            aria-label="Close">
+            <svg class="Orbital-Icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+
+          <div class="Orbital-Dialog-Header">
+            <div class="Orbital-Alert-Content">
+              {#if variant_icon}
+                <div class="Orbital-Alert-Icon" data-variant={@variant}>
+                  {{variant_icon}}
+                </div>
+              {/if}
+              <div class="Orbital-Alert-Text">
+                {#if @title}
+                  <h2 class="Orbital-Dialog-Title">{{@title}}</h2>
+                {/if}
+                {#if @description}
+                  <p class="Orbital-Dialog-Description">{{@description}}</p>
+                {/if}
+              </div>
+            </div>
+          </div>
+
+          {#if content}
+            <div class="Orbital-Dialog-Body">
+              {{content}}
+            </div>
+          {/if}
+
+          <div class="Orbital-Dialog-Footer">
+            <button
+              data-action="orbital-modal#close"
+              class="Orbital-Button"
+              data-variant="default"
+              data-size="default"
+              type="button">
+              {{@button_text}}
+            </button>
+          </div>
+        </div>
+      </Modal>
+    ORB
+
+    private
+
+    def variant_icon
+      icon_name = case @variant
+                  when :success then "circle-check"
+                  when :warning then "triangle-alert"
+                  when :danger then "circle-alert"
+                  when :info then "info"
+                  end
+
+      return nil unless icon_name
+
+      render OrbitalUi::Icon.new(name: icon_name, size: :lg)
+    end
+  end
+end

data/app/components/orbital_ui/avatar.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require "digest/md5"
+
+class OrbitalUi::Avatar < OrbitalUi::Component
+  include OrbitalUi::Concerns::IconProp
+
+  attribute :name, :string, default: nil
+  attribute :email, :string, default: nil
+  attribute :initials, :string, default: nil
+  attribute :size, :symbol, default: :md, only: [:xs, :sm, :md, :lg, :xl]
+  attribute :icon, :any, default: "user"
+  attribute :round, :boolean, default: true
+  attribute :square, :boolean, default: false
+
+  def call
+    content_tag(:div, **html_attributes) do
+      if gravatar_url
+        tag.img(
+          src: gravatar_url,
+          alt: @name || "",
+          class: "Orbital-Avatar-Image",
+          loading: "lazy",
+          "data-orbital-avatar-target": "image",
+          "data-action": "error->orbital-avatar#imageError"
+        ) + fallback_element(hidden: true)
+      else
+        fallback_element
+      end
+    end
+  end
+
+  private
+
+  def fallback_element(hidden: false)
+    opts = { "data-orbital-avatar-target": "fallback" }
+    opts[:style] = "display:none;" if hidden
+    if @initials.present?
+      content_tag(:span, @initials.upcase[0, 2], class: "Orbital-Avatar-Initials", **opts)
+    else
+      content_tag(:span, class: "Orbital-Avatar-Icon", **opts) do
+        render_icon(@icon, size: icon_size)
+      end
+    end
+  end
+
+  def icon_size
+    case @size
+    when :xs, :sm then :xs
+    when :md then :sm
+    when :lg, :xl then :md
+    end
+  end
+
+  def gravatar_url
+    return nil unless @email.present?
+
+    hash = Digest::MD5.hexdigest(@email.strip.downcase)
+    "https://www.gravatar.com/avatar/#{hash}?d=404&s=#{pixel_size}"
+  end
+
+  def pixel_size
+    case @size
+    when :xs then 24
+    when :sm then 32
+    when :md then 40
+    when :lg then 48
+    when :xl then 64
+    end
+  end
+
+  def shape
+    @square ? "square" : "round"
+  end
+
+  def default_attributes
+    attrs = super.merge(
+      class: "Orbital-Avatar",
+      "data-size": @size,
+      "data-shape": shape,
+      "data-controller": gravatar_url ? "orbital-avatar" : nil
+    )
+    attrs[:title] = @name if @name.present?
+    attrs["aria-label"] = @name if @name.present?
+    attrs
+  end
+end

data/app/components/orbital_ui/badge.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Badge < Component
+    include OrbitalUi::Concerns::IconProp
+
+    attribute :variant, :symbol, default: :default, only: [:default, :secondary, :destructive, :ghost, :outline]
+    attribute :dot, :symbol, default: nil, only: [:default, :success, :warning, :danger, :info, :subdued]
+    attribute :icon, :any, default: nil
+
+    orb_template <<~ORB
+      <span **html_attributes>
+        {{render_icon}}
+        {{content}}
+        <span class="Orbital-Badge-Dot" data-tone={@dot} :if={@dot}/>
+      </span>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-Badge",
+        "data-variant": @variant
+      )
+    end
+  end
+end

data/app/components/orbital_ui/button.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Button < Component
+    attribute :variant, :symbol, default: :default, only: [:default, :destructive, :outline, :secondary, :ghost, :link]
+    attribute :size, :symbol, default: :default, only: [:sm, :default, :lg, :icon]
+    attribute :url, :string, default: nil
+    attribute :disabled, :boolean, default: false
+    attribute :fullwidth, :boolean, default: false
+    attribute :modal, :any, default: nil
+
+    def call
+      build_tag(**html_attributes) do
+        content
+      end
+    end
+
+    private
+
+    def default_attributes
+      attrs = super.merge(
+        class: "Orbital-Button",
+        "data-variant": @variant,
+        "data-size": @size,
+        "data-disabled": @disabled || nil,
+        "data-fullwidth": @fullwidth || nil
+      )
+
+      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
+
+    def build_tag(**opts)
+      if @url.present?
+        tag.a(href: @url, **opts) { yield }
+      else
+        tag.button(**opts) { yield }
+      end
+    end
+  end
+end

data/app/components/orbital_ui/button_group.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class ButtonGroup < Component
+    attribute :orientation, :symbol, default: :horizontal, only: [:horizontal, :vertical]
+
+    orb_template <<-ORB
+      <div **html_attributes>{{content}}</div>
+    ORB
+
+    private
+
+    def default_attributes
+      super.merge(
+        class: "Orbital-ButtonGroup",
+        "data-orientation": @orientation
+      )
+    end
+  end
+end

data/app/components/orbital_ui/card/action.rb

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

data/app/components/orbital_ui/card/content.rb

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

data/app/components/orbital_ui/card/description.rb

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

data/app/components/orbital_ui/card/footer.rb

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

data/app/components/orbital_ui/card/header.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Card
+    class Header < Component
+      renders_one :title, Card::Title
+      renders_one :description, Card::Description
+      renders_one :action, Card::Action
+
+      orb_template <<-ORB
+        <div **html_attributes>
+          {{title}}
+          {{description}}
+          {{action}}
+        </div>
+      ORB
+
+      private
+
+      def default_attributes
+        super.merge(class: "Orbital-Card-Header")
+      end
+    end
+  end
+end

data/app/components/orbital_ui/card/title.rb

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

data/app/components/orbital_ui/card.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Card < Component
+    renders_one :header, Card::Header
+    renders_one :footer, Card::Footer
+
+    attribute :gap, :string
+    attribute :padding, :string
+
+    orb_template <<-ORB
+      <div **html_attributes>
+        {{header}}
+        <div **content_attributes>{{content}}</div>
+        {{footer}}
+      </div>
+    ORB
+
+    private
+
+    # A splat, because a bound attribute on an HTML tag would render nil as data-gap="".
+    def content_attributes
+      { class: "Orbital-Card-Content", "data-gap": @gap, "data-padding": @padding }
+    end
+
+    def default_attributes
+      super.merge(class: "Orbital-Card")
+    end
+  end
+end

data/app/components/orbital_ui/check_box.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+class OrbitalUi::CheckBox < OrbitalUi::Component
+  attribute :name, :string, default: nil
+  attribute :value, :string, default: "1"
+  attribute :label, :string, default: nil
+  attribute :help, :string, default: nil
+  attribute :error, :string, default: nil
+  attribute :checked, :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :id, :string, default: nil
+
+  orb_template <<-ORB
+    <div class="Orbital-CheckBox">
+      <label for={input_id} class="Orbital-CheckBox-Label">
+        <div class="Orbital-CheckBox-Control">
+          {{ tag.input(**html_attributes) }}
+          <span class="Orbital-CheckBox-Indicator"/>
+          <Icon name="check" size="sm" class="Orbital-CheckBox-Icon" />
+        </div>
+        <Text>{{ label_text }}</Text>
+      </label>
+
+      {#if @error.present?}
+        <Text tone="danger" size="sm">{{ @error }}</Text>
+      {/if}
+
+      {#if @help.present? && !@error.present?}
+        <Text tone="subdued" size="sm">{{ @help }}</Text>
+      {/if}
+    </div>
+  ORB
+
+  private
+
+  def default_attributes
+    super.merge(
+      name: @name,
+      value: @value,
+      id: input_id,
+      class: "Orbital-CheckBox-Input",
+      type: "checkbox",
+      checked: @checked,
+      disabled: @disabled
+    )
+  end
+
+  def label_text
+    @label || @name.to_s.humanize
+  end
+
+  def input_id
+    @id ||= SecureRandom.hex(4)
+  end
+
+  def help?
+    @help.present?
+  end
+end

data/app/components/orbital_ui/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  class Component < ViewComponent::Base
+    # This module imports the attribute DSL for defining attributes on a component
+    # as well as the html_attributes method for generating HTML attributes
+    include OrbitalUi::Components::Attributes
+
+    # This module provides a method for joining style names together
+    include OrbitalUi::Components::Styles
+  end
+end

data/app/components/orbital_ui/concerns/icon_prop.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module OrbitalUi
+  module Concerns
+    module IconProp
+      def render_icon(icon = @icon, size: :sm)
+        return nil unless icon
+
+        opts = icon.is_a?(Hash) ? { size: size }.merge(icon) : { name: icon, size: size }
+        render(OrbitalUi::Icon.new(**opts))
+      end
+    end
+  end
+end