ruby_ui 1.0.0.pre.alpha.4

data/lib/rbui/sheet/sheet_content.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module RBUI
+  class SheetContent < Base
+    SIDE_CLASS = {
+      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      right: "inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+    }
+
+    def initialize(side: :right, **attrs)
+      @side = side
+      @side_classes = SIDE_CLASS[side]
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      template_tag(data: {rbui__sheet_target: "content"}) do
+        div(data: {controller: "rbui--sheet-content"}) do
+          backdrop
+          div(**attrs) do
+            block&.call
+            close_button
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_state: "open", # For animate in
+        class: tokens(
+          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          @side_classes
+        )
+      }
+    end
+
+    def close_button
+      button(
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        data_action: "click->rbui--sheet-content#close"
+      ) do
+        svg(
+          width: "15",
+          height: "15",
+          viewbox: "0 0 15 15",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          class: "h-4 w-4"
+        ) do |s|
+          s.path(
+            d:
+                  "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+            fill: "currentColor",
+            fill_rule: "evenodd",
+            clip_rule: "evenodd"
+          )
+        end
+        span(class: "sr-only") { "Close" }
+      end
+    end
+
+    def backdrop
+      div(
+        data_state: "open",
+        data_action: "click->rbui--sheet-content#close",
+        class:
+              "fixed pointer-events-auto inset-0 z-50 bg-background/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"
+      )
+    end
+  end
+end

data/lib/rbui/sheet/sheet_description.rb

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

data/lib/rbui/sheet/sheet_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class SheetFooter < 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 gap-y-2 sm:gap-y-0"
+      }
+    end
+  end
+end

data/lib/rbui/sheet/sheet_header.rb

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

data/lib/rbui/sheet/sheet_middle.rb

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

data/lib/rbui/sheet/sheet_title.rb

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

data/lib/rbui/sheet/sheet_trigger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class SheetTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {action: "click->rbui--sheet#open"}
+      }
+    end
+  end
+end

data/lib/rbui/shortcut_key/shortcut_key.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ShortcutKey < Base
+    def view_template(&)
+      kbd(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      }
+    end
+  end
+end

data/lib/rbui/table/table.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Table < Base
+    def view_template(&block)
+      div(class: "relative w-full overflow-auto") do
+        table(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full caption-bottom text-sm"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_body.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableBody < Base
+    def view_template(&)
+      tbody(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "[&_tr:last-child]:border-0"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_caption.rb

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

data/lib/rbui/table/table_cell.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableCell < Base
+    def view_template(&)
+      td(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableFooter < Base
+    def view_template(&)
+      tfoot(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "border-t bg-muted bg-opacity-50 font-medium[& amp;>tr]:last:border-b-0"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_head.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableHead < Base
+    def view_template(&)
+      th(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableHeader < Base
+    def view_template(&)
+      thead(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "[&_tr]:border-b"
+      }
+    end
+  end
+end

data/lib/rbui/table/table_row.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TableRow < Base
+    def view_template(&)
+      tr(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted"
+      }
+    end
+  end
+end

data/lib/rbui/tabs/tabs.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Tabs < Base
+    def initialize(default: nil, **attrs)
+      @default = default
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--tabs",
+          rbui__tabs_active_value: @default
+        }
+      }
+    end
+  end
+end

data/lib/rbui/tabs/tabs_content.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TabsContent < Base
+    def initialize(value:, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__tabs_target: :content,
+          value: @value
+        },
+        class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden"
+      }
+    end
+  end
+end

data/lib/rbui/tabs/tabs_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TabsList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/rbui/tabs/tabs_trigger.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TabsTrigger < Base
+    def initialize(value:, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: :button,
+        data: {
+          rbui__tabs_target: "trigger",
+          action: "click->rbui--tabs#show",
+          value: @value
+        },
+        class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"
+      }
+    end
+  end
+end

data/lib/rbui/textarea/textarea.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Textarea < Base
+    def initialize(rows: 4, **attrs)
+      @rows = rows
+      super(**attrs)
+    end
+
+    def view_template(&)
+      textarea(rows: @rows, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__form_field_target: "input",
+          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
+        },
+        class: "flex w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/rbui/theme_toggle/theme_toggle.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ThemeToggle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    def light_mode(**user_attrs, &)
+      light_attrs = mix(default_light_attrs, user_attrs)
+      div(**light_attrs, &)
+    end
+
+    def dark_mode(**user_attrs, &)
+      dark_attrs = mix(default_dark_attrs, user_attrs)
+      div(**dark_attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "rbui--theme-toggle"}
+      }
+    end
+
+    def default_light_attrs
+      {
+        class: "dark:hidden",
+        data: {action: "click->rbui--theme-toggle#setDarkTheme"}
+      }
+    end
+
+    def default_dark_attrs
+      {
+        class: "hidden dark:inline-block",
+        data: {action: "click->rbui--theme-toggle#setLightTheme"}
+      }
+    end
+  end
+end

data/lib/rbui/tooltip/tooltip.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Tooltip < Base
+    def initialize(placement: "top", **attrs)
+      @placement = placement
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--tooltip",
+          rbui__tooltip_placement_value: @placement
+        },
+        class: "group"
+      }
+    end
+  end
+end

data/lib/rbui/tooltip/tooltip_content.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TooltipContent < Base
+    def initialize(**attrs)
+      @id = "tooltip#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        data: {
+          rbui__tooltip_target: "content"
+        },
+        class: "invisible peer-hover:visible peer-focus:visible w-max absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md peer-focus:zoom-in-95 animate-out fade-out-0 zoom-out-95 peer-hover:animate-in peer-focus:animate-in peer-hover:fade-in-0 peer-focus:fade-in-0 peer-hover:zoom-in-95 group-data-[rbui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[rbui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[rbui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[rbui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500"
+      }
+    end
+  end
+end

data/lib/rbui/tooltip/tooltip_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TooltipTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {rbui__tooltip_target: "trigger"},
+        variant: :outline,
+        class: "peer"
+      }
+    end
+  end
+end

data/lib/rbui/typography/typography_blockquote.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TypographyBlockquote < Base
+    def view_template(&)
+      blockquote(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mt-6 border-l-2 pl-6 italic"
+      }
+    end
+  end
+end

data/lib/rbui/typography/typography_h1.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TypographyH1 < Base
+    def view_template(&)
+      h1(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "scroll-m-20 text-3xl font-bold leading-normal lg:leading-normal tracking-tight lg:text-4xl"
+      }
+    end
+  end
+end

data/lib/rbui/typography/typography_h2.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TypographyH2 < Base
+    def view_template(&)
+      h2(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "scroll-m-20 text-2xl font-semibold tracking-tight transition-colors first:mt-0 pb-4 border-b"
+      }
+    end
+  end
+end

data/lib/rbui/typography/typography_h3.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class TypographyH3 < Base
+    def view_template(&)
+      h3(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "scroll-m-20 text-xl font-semibold tracking-tight"
+      }
+    end
+  end
+end