rbui 0.0.0 → 1.0.0.pre.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f3131ea4a15099ea321929a2e78e72de8191a82f38c74f094d9a6eba86796a5
-  data.tar.gz: 731f89b894ca93deb424316db772a120c00a97c1a67d88128e1cbf8da3606c29
+  metadata.gz: 794cdf4660f12d1e59c2c2d9f6652bc08142b19679b716b7455ef528ffe8de9a
+  data.tar.gz: cb8a388fc16a758575396ec1716a758614a341c70683ff5a83c4ff01d13e8360
 SHA512:
-  metadata.gz: 37033795e0d1de250660fc90736524f34f2ca1e91e4ba8b5bcaa074b1364a72ce0e050f095cd1befed028acdc86e4ddc6195ac371326cd4a589332388cff9b95
-  data.tar.gz: 261b4d3bd9c12f3320757b1e8a717199d0a39282d0d490646606442d31e94834a2579b40674febb0398b06a2eacd4188481ec1f40b5aaea8522e75427433e71c
+  metadata.gz: fac186cab781c5331efa8a88f510711f1b73455535e42b841e0d798b8548f66cd95498a6bfdf8ebf95570ef063ae611a6eae04c9915e14cfb17d4478b4b947fd
+  data.tar.gz: 43083c45bf22547efab83489001106102f82fce9ab07d61f4cd2f6047c3bcc0cc412360517367eb5ccfd7c5a19fa07b11dd36fde080df2149f6e8934c1ca6852

data/lib/rbui/accordion/accordion.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Accordion < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full"
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_content.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__accordion_target: "content"
+        },
+        class: "overflow-y-hidden",
+        style: "height: 0px;"
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_default_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionDefaultContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pb-4 pt-0 text-sm"
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_default_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionDefaultTrigger < Base
+    def view_template(&block)
+      div(class: "flex items-center justify-between w-full") do
+        p(&block)
+        RBUI.AccordionIcon
+      end
+    end
+
+    def default_attrs
+      {
+        data: {action: "click->rbui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_icon.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        class: "opacity-50",
+        data: {rbui__accordion_target: "icon"}
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionItem < Base
+    def initialize(open: false, rotate_icon: 180, **attrs)
+      @open = open
+      @rotate_icon = rotate_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--accordion",
+          rbui__accordion_open_value: @open,
+          rbui__accordion_rotate_icon_value: @rotate_icon
+        },
+        class: "border-b"
+      }
+    end
+  end
+end

data/lib/rbui/accordion/accordion_trigger.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AccordionTrigger < Base
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        data: {action: "click->rbui--accordion#toggle"},
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/rbui/alert/alert.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Alert < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant
+      super(**attrs) # must be called after variant is set
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def colors
+      case @variant
+      when nil
+        "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80"
+      when :warning
+        "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80"
+      when :success
+        "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80"
+      when :destructive
+        "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80"
+      end
+    end
+
+    def default_attrs
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      {
+        class: tokens(base_classes, colors)
+      }
+    end
+  end
+end

data/lib/rbui/alert/alert_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm [&_p]:leading-relaxed"
+      }
+    end
+  end
+end

data/lib/rbui/alert/alert_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertTitle < Base
+    def view_template(&)
+      h5(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mb-1 font-medium leading-none tracking-tight"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialog < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--alert-dialog",
+          rbui__alert_dialog_open_value: @open.to_s
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_action.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogAction < Base
+    def view_template(&)
+      render RBUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :primary
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_cancel.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogCancel < Base
+    def view_template(&)
+      render RBUI::Button.new(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        variant: :outline,
+        data: {
+          action: "click->rbui--alert-dialog#dismiss"
+        },
+        class: "mt-2 sm:mt-0"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogContent < Base
+    def view_template(&block)
+      template_tag(**attrs) do
+        div(data: {controller: "rbui--alert-dialog"}) do
+          background
+          container(&block)
+        end
+      end
+    end
+
+    def background
+      div(
+        data_state: "open",
+        class:
+              "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        style: "pointer-events:auto",
+        data_aria_hidden: "true",
+        aria_hidden: "true"
+      )
+    end
+
+    def container(&)
+      div(
+        role: "alertdialog",
+        data_state: "open",
+        class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        style: "pointer-events:auto",
+        &
+      )
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__alert_dialog_target: "content"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-2 text-center sm:text-left"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogTitle < Base
+    def view_template(&)
+      h2(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_trigger.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {action: "click->rbui--alert-dialog#open"},
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/rbui/aspect_ratio/aspect_ratio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AspectRatio < Base
+    def initialize(aspect_ratio: "16/9", **attrs)
+      raise "aspect_ratio must be in the format of a string with a slash in the middle (eg. '16/9', '1/1')" unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")
+
+      @aspect_ratio = aspect_ratio
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "relative w-full",
+        style: "padding-bottom: #{padding_bottom}%;"
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def padding_bottom
+      @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+    end
+
+    def default_attrs
+      {
+        class: "bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Avatar < Base
+    SIZES = {
+      xs: "h-4 w-4 text-[0.5rem]",
+      sm: "h-6 w-6 text-xs",
+      md: "h-10 w-10 text-base",
+      lg: "h-14 w-14 text-xl",
+      xl: "h-20 w-20 text-3xl"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      @size_classes = SIZES[@size]
+      super(**attrs)
+    end
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar_fallback.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AvatarFallback < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-full w-full items-center justify-center rounded-full bg-muted"
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar_image.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AvatarImage < Base
+    def initialize(src:, alt: "", **attrs)
+      @src = src
+      @alt = alt
+      super(**attrs)
+    end
+
+    def view_template
+      img(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        loading: "lazy",
+        class: "aspect-square h-full w-full",
+        alt: @alt,
+        src: @src
+      }
+    end
+  end
+end

data/lib/rbui/badge/badge.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Badge < Base
+    SIZES = {
+      sm: "px-1.5 py-0.5 text-xs",
+      md: "px-2 py-1 text-xs",
+      lg: "px-3 py-1 text-sm"
+    }
+
+    COLORS = {
+      primary: "text-primary bg-primary/5 ring-primary/20",
+      secondary: "text-secondary bg-secondary/10 ring-secondary/20",
+      outline: "text-foreground bg-background ring-border",
+      destructive: "text-destructive bg-destructive/10 ring-destructive/20",
+      success: "text-success bg-success/10 ring-success/20",
+      warning: "text-warning bg-warning/10 ring-warning/20",
+      slate: "text-slate-500 bg-slate-500/10 ring-slate-500/20",
+      gray: "text-gray-500 bg-gray-500/10 ring-gray-500/20",
+      zinc: "text-zinc-500 bg-zinc-500/10 ring-zinc-500/20",
+      neutral: "text-neutral-500 bg-neutral-500/10 ring-neutral-500/20",
+      stone: "text-stone-500 bg-stone-500/10 ring-stone-500/20",
+      red: "text-red-500 bg-red-500/10 ring-red-500/20",
+      orange: "text-orange-500 bg-orange-500/10 ring-orange-500/20",
+      amber: "text-amber-500 bg-amber-500/10 ring-amber-500/20",
+      yellow: "text-yellow-500 bg-yellow-500/10 ring-yellow-500/20",
+      lime: "text-lime-500 bg-lime-500/10 ring-lime-500/20",
+      green: "text-green-500 bg-green-500/10 ring-green-500/20",
+      emerald: "text-emerald-500 bg-emerald-500/10 ring-emerald-500/20",
+      teal: "text-teal-500 bg-teal-500/10 ring-teal-500/20",
+      cyan: "text-cyan-500 bg-cyan-500/10 ring-cyan-500/20",
+      sky: "text-sky-500 bg-sky-500/10 ring-sky-500/20",
+      blue: "text-blue-500 bg-blue-500/10 ring-blue-500/20",
+      indigo: "text-indigo-500 bg-indigo-500/10 ring-indigo-500/20",
+      violet: "text-violet-500 bg-violet-500/10 ring-violet-500/20",
+      purple: "text-purple-500 bg-purple-500/10 ring-purple-500/20",
+      fuchsia: "text-fuchsia-500 bg-fuchsia-500/10 ring-fuchsia-500/20",
+      pink: "text-pink-500 bg-pink-500/10 ring-pink-500/20",
+      rose: "text-rose-500 bg-rose-500/10 ring-rose-500/20"
+    }
+
+    def initialize(variant: :primary, size: :md, **args)
+      @variant = variant
+      @size = size
+      super(**args)
+    end
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant])
+      }
+    end
+  end
+end

data/lib/rbui/base.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module RBUI
+  class Base < Phlex::HTML
+    attr_reader :attrs
+
+    def initialize(**user_attrs)
+      @attrs = mix(default_attrs, user_attrs)
+      @attrs[:class] = ::TailwindMerge::Merger.new.merge(@attrs[:class]) if @attrs[:class]
+    end
+
+    if defined?(Rails) && Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+        super
+      end
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end