shadcn_phlexcomponents 0.1.0

data/lib/components/sheet_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetFooter < Base
+    STYLES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sheet_header.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetHeader < Base
+    STYLES = "flex flex-col space-y-2 text-center sm:text-left".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sheet_title.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetTitle < Base
+    STYLES = "text-lg font-semibold text-foreground".freeze
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-title"
+      }
+    end
+
+    def view_template(&)
+      h2(**@attributes, &)
+    end
+  end
+end

data/lib/components/sheet_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        if element.name == "button"
+          merged_attributes.delete(:role)
+        end
+        
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content"
+        },
+        data: {
+          as_child: @as_child.to_s,
+          action: "click->shadcn-phlexcomponents--sheet#open",
+          "shadcn-phlexcomponents--sheet-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/components/sidebar.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Sidebar < Base
+    STYLES = <<~HEREDOC
+      bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col
+      group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border
+      group-data-[variant=floating]:shadow
+    HEREDOC
+
+    PANEL_STYLES = {
+      sidebar: "group-data-[side=left]:border-r group-data-[side=right]:border-l",
+      floating: "p-2",
+      inset: "p-2"
+    }
+
+    def initialize(id:, variant: :sidebar, side: :left, width: "16rem", expanded: true, **attributes)
+      @id = id
+      @variant = variant
+      @side = side
+      @width = width
+      @expanded = expanded
+      super(**attributes)
+    end
+
+    def header(**attributes, &)
+      SidebarHeader(**attributes, &)
+    end
+
+    def content(**attributes, &)
+      SidebarContent(**attributes, &)
+    end
+
+    def group(**attributes, &)
+      SidebarGroup(**attributes, &)
+    end
+
+    def group_content(**attributes, &)
+      SidebarGroupContent(**attributes, &)
+    end
+
+    def group_label(**attributes, &)
+      SidebarGroupLabel(**attributes, &)
+    end
+
+    def menu(**attributes, &)
+      SidebarMenu(**attributes, &)
+    end
+    
+    def menu_item(**attributes, &)
+      SidebarMenuItem(**attributes, &)
+    end
+    
+    def menu_button(**attributes, &)
+      SidebarMenuButton(**attributes, &)
+    end
+
+    def menu_sub(**attributes, &)
+      SidebarMenuSub(**attributes, &)
+    end
+    
+    def menu_sub_item(**attributes, &)
+      SidebarMenuSubItem(**attributes, &)
+    end
+    
+    def menu_sub_button(**attributes, &)
+      SidebarMenuSubButton(**attributes, &)
+    end
+
+    def footer(**attributes, &)
+      SidebarFooter(**attributes, &)
+    end
+
+    def view_template(&)
+      div(id: @id,
+          class: "group peer hidden md:block", 
+          style: { "--sidebar-width": @width }, 
+          data: { 
+            side: @side,
+            variant: @variant, 
+            collapsible: @expanded ? "" : "offcanvas", 
+            sidebar_id: @sidebar_id, 
+            state: @expanded ? "expanded" : "collapsed",
+            controller: "shadcn-phlexcomponents--sidebar"
+          }) do
+        div(class: "relative h-svh w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200
+                    ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180
+                    group-data-[collapsible=icon]:w-[--sidebar-width-icon]", data: { "shadcn-phlexcomponents--sidebar-target": "panelOffset" })
+
+
+        div(class: "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200
+                    ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]
+                    group-data-[collapsible=icon]:w-[--sidebar-width-icon] #{PANEL_STYLES[@variant]}",
+                    data: {
+                      "shadcn-phlexcomponents--sidebar-target": "panel"
+                    }) do
+
+          div(**@attributes, &)
+        end
+      end
+    end
+  end
+end

data/lib/components/sidebar_container.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarContainer < Base
+    STYLES = "group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_content.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarContent < Base
+    STYLES = "flex min-h-0 flex-1 flex-col gap-2 overflow-auto"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarFooter < Base
+    STYLES = "flex flex-col gap-2 p-2".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_group.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarGroup < Base
+    STYLES = "relative flex w-full min-w-0 flex-col p-2"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_group_content.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarGroupContent < Base
+    STYLES = "w-full text-sm"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_group_label.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarGroupLabel < Base
+    STYLES = <<~HEREDOC
+      text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center
+      rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa]
+      duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0
+      group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0
+    HEREDOC
+    
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_header.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarHeader < Base
+    STYLES = "flex flex-col gap-2 p-2".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_inset.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarInset < Base
+    STYLES = <<~HEREDOC
+      relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))]
+      md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2
+      md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow
+    HEREDOC
+
+    def view_template(&)
+      main(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_menu.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenu < Base
+    STYLES = "flex w-full min-w-0 flex-col gap-1".freeze
+
+    def view_template(&)
+      ul(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_menu_button.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenuButton < Base
+    STYLES = <<~HEREDOC
+      peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left
+      text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+      focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground
+      disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8
+      aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent
+      data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent
+      data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!
+      [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer
+    HEREDOC
+
+    SIZES = {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+    }
+
+    def initialize(size: :default, type: :button, active: false, as_child: false, **attributes)
+      @type = type
+      @size = size
+      @active = active
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          active: @active.to_s
+        }
+      }  
+    end
+
+    def default_styles
+      "#{STYLES} #{SIZES[@size]}"
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        button(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/sidebar_menu_item.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenuItem < Base
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_menu_sub.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenuSub < Base
+    STYLES = <<~HEREDOC
+      border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col
+      gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden  
+    HEREDOC
+
+    def view_template(&)
+      ul(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_menu_sub_button.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenuSubButton < Base
+    STYLES = <<~HEREDOC
+      text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+      active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground
+      flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none
+      focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none
+      aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 
+      data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground 
+      text-sm group-data-[collapsible=icon]:hidden cursor-pointer
+    HEREDOC
+
+    def initialize(type: :button, active: false, as_child: false, **attributes)
+      @active = active
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          active: @active.to_s
+        }
+      }  
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        button(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/sidebar_menu_sub_item.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarMenuSubItem < Base
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+end

data/lib/components/sidebar_trigger.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SidebarTrigger < Base
+    STYLES = <<~HEREDOC
+      inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+      text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none
+      focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none
+      disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent
+      hover:text-accent-foreground h-7 w-7 -ml-1 cursor-pointer
+    HEREDOC
+
+    def initialize(sidebar_id:, **attributes)
+      @sidebar_id = sidebar_id
+      super(**attributes)
+    end
+    
+    def default_attributes
+      {
+        data: {
+          sidebar_id: @sidebar_id,
+          controller: "shadcn-phlexcomponents--sidebar-trigger",
+          action: "click->shadcn-phlexcomponents--sidebar-trigger#toggle"
+        }
+      }  
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        if block_given?
+          yield
+        else
+          icon("panel-left", class: "")
+        end
+
+        span(class: "sr-only") { "Toggle Sidebar" }
+      end
+    end
+  end
+end

data/lib/components/skeleton.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Skeleton < Base
+    STYLES = "animate-pulse rounded-md bg-primary/10".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/switch.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Switch < Base
+    STYLES = <<~HEREDOC.freeze
+      peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full
+      border-2 border-transparent transition-colors focus-visible:outline-none 
+      focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50
+      data-[checked=true]:bg-primary data-[checked=false]:bg-input group/switch
+    HEREDOC
+
+    def initialize(name: nil, value: "1", unchecked_value: "0", checked: false, id: nil, include_hidden: true, **attributes)
+      @name = name
+      @value = value
+      @unchecked_value = unchecked_value
+      @checked = checked
+      @id = id || name
+      @include_hidden = include_hidden
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg
+                    ring-0 transition-transform group-data-[checked=true]/switch:translate-x-5
+                    group-data-[checked=false]/switch:translate-x-0")
+
+        if @include_hidden
+          input(name: @name, type: "hidden", value: @unchecked_value, autocomplete: "off")
+        end
+
+        input(
+          type: "checkbox", 
+          value: @value,
+          class: "-translate-x-full pointer-events-none absolute top-0 left-0 size-4 opacity-0",
+          name: @name,
+          tabindex: -1,
+          checked: @checked,
+          aria: { hidden: true },
+          data: {
+            "shadcn-phlexcomponents--switch-target": "input"
+          }
+        )
+      end
+    end
+
+    def default_attributes
+      { 
+        id: @id,
+        type: "button",
+        role: "switch",
+        aria: {
+          checked: @checked.to_s,
+        },
+        data: {
+          checked: @checked.to_s,
+          controller: "shadcn-phlexcomponents--switch",
+          action: "click->shadcn-phlexcomponents--switch#toggle",
+          "shadcn-phlexcomponents--switch-checked-value": @checked,
+        }
+      }
+    end
+  end
+end

data/lib/components/table.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Table < Base
+    STYLES = "w-full caption-bottom text-sm".freeze
+
+    def initialize( **attributes)
+      @columns = []
+      super(**attributes)
+    end
+
+    def view_template(&)
+      table(**@attributes, &)
+    end
+
+    def header(**attributes, &)
+      TableHeader(**attributes, &)
+    end 
+
+    def caption(**attributes, &)
+      TableCaption(**attributes, &)
+    end
+
+    def row(**attributes, &)
+      TableRow(**attributes, &)
+    end
+
+    def head(**attributes, &)
+      TableHead(**attributes, &)
+    end
+
+    def body(**attributes, &)
+      TableBody(**attributes, &)
+    end
+
+    def cell(**attributes, &)
+      TableCell(**attributes, &)
+    end
+
+    def footer(**attributes, &)
+      TableFooter(**attributes, &)
+    end
+
+    def rows(rows, &)
+      @rows = rows
+
+      vanish(&)
+
+      thead(class: TableHeader::STYLES) do
+        tr(class: TableRow::STYLES) do
+          @columns.each do |column|
+            th(class: TAILWIND_MERGER.merge("#{TableHead::STYLES} #{column[:head_class]}")) { column[:header] }
+          end
+        end
+      end
+
+      tbody(class: TableBody::STYLES) do
+        @rows.each do |row|
+          tr(class: TableRow::STYLES) do
+            @columns.each do |column|
+              td(class: TAILWIND_MERGER.merge("#{TableCell::STYLES} #{column[:cell_class]}")) { column[:content].call(row) }
+            end
+          end
+        end
+      end
+    end
+
+    def column(header, head_class: nil, cell_class: nil, &content)
+      @columns << { header:, head_class:, cell_class:, content: }
+      nil
+    end
+  end
+end

data/lib/components/table_body.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableBody < Base
+    STYLES = "[&_tr:last-child]:border-0".freeze
+
+    def view_template(&)
+      tbody(**@attributes, &)
+    end
+  end
+end