maglevcms 2.1.0 → 3.0.0.beta2

data/app/components/maglev/uikit/icon_component.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class IconComponent < ViewComponent::Base
+      attr_reader :name, :size, :class_names
+
+      def initialize(name:, size: '1.25rem', class_names: nil)
+        @name = name
+        @size = size
+        @class_names = class_names
+      end
+
+      def call
+        icon_svg = ICONS[name] || raise("Icon '#{name}' not found")
+
+        # Apply styling and classes to the SVG
+        styled_svg = icon_svg.gsub(
+          '<svg xmlns="http://www.w3.org/2000/svg" ',
+          "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"#{style}\" class=\"#{final_class_names}\""
+        )
+
+        # rubocop:disable Rails/OutputSafety
+        styled_svg.html_safe
+        # rubocop:enable Rails/OutputSafety
+      end
+
+      private
+
+      def style
+        "width: #{size}; height: #{size};"
+      end
+
+      def final_class_names
+        helpers.class_names(*class_names, 'fill-current')
+      end
+
+      # Centralized icon definitions
+      # rubocop:disable Layout/LineLength, Naming/VariableNumber
+      ICONS = {
+        # Remix Icons
+        error_warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>',
+
+        stack: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13L2.715 7.43a.5.5 0 0 1 0-.858l8.771-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"/></svg>',
+
+        checkbox_circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-.997-6l7.07-7.071-1.414-1.414-5.656 5.657-2.829-2.829-1.414 1.414L11.003 16z"/></svg>',
+
+        settings: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.213 14.06a9.945 9.945 0 0 1 0-4.12c1.11.13 2.08-.237 2.396-1.001.317-.765-.108-1.71-.986-2.403a9.945 9.945 0 0 1 2.913-2.913c.692.877 1.638 1.303 2.403.986.765-.317 1.132-1.286 1.001-2.396a9.945 9.945 0 0 1 4.12 0c-.13 1.11.237 2.08 1.001 2.396.765.317 1.71-.108 2.403-.986a9.945 9.945 0 0 1 2.913 2.913c-.877.692-1.303 1.638-.986 2.403.317.765 1.286 1.132 2.396 1.001a9.945 9.945 0 0 1 0 4.12c-1.11-.13-2.08.237-2.396 1.001-.317.765.108 1.71.986 2.403a9.945 9.945 0 0 1-2.913 2.913c-.692-.877-1.638-1.303-2.403-.986-.765.317-1.132 1.286-1.001 2.396a9.945 9.945 0 0 1-4.12 0c.13-1.11-.237-2.08-1.001-2.396-.765-.317-1.71.108-2.403.986a9.945 9.945 0 0 1-2.913-2.913c.877-.692 1.303-1.638.986-2.403-.317-.765-1.286-1.132-2.396-1.001zM4 12.21c1.1.305 2.007 1.002 2.457 2.086.449 1.085.3 2.22-.262 3.212.096.102.195.201.297.297.993-.562 2.127-.71 3.212-.262 1.084.45 1.781 1.357 2.086 2.457.14.004.28.004.42 0 .305-1.1 1.002-2.007 2.086-2.457 1.085-.449 2.22-.3 3.212.262.102-.096.201-.195.297-.297-.562-.993-.71-2.127-.262-3.212.45-1.084 1.357-1.781 2.457-2.086.004-.14.004-.28 0-.42-1.1-.305-2.007-1.002-2.457-2.086-.449-1.085-.3-2.22.262-3.212a7.935 7.935 0 0 0-.297-.297c-.993.562-2.127.71-3.212.262C13.212 6.007 12.515 5.1 12.21 4a7.935 7.935 0 0 0-.42 0c-.305 1.1-1.002 2.007-2.086 2.457-1.085.449-2.22.3-3.212-.262-.102.096-.201.195-.297.297.562.993.71 2.127.262 3.212C6.007 10.788 5.1 11.485 4 11.79c-.004.14-.004.28 0 .42zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>',
+
+        close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current"><path fill="none" d="M0 0h24v24H0z"></path><path d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg>',
+
+        clone: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="fill-current"><path d="M3 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h3v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-3V3a1 1 0 0 0-1-1zm15 9.56 2 2v2.88l-2-2zm0-2.12V8h2v3.44zM18 17v-.44l2 2V20h-1.44l-2-2H17a1 1 0 0 0 1-1m-3.56 1 2 2h-2.88l-2-2zm-5 0 2 2H8v-2zM4 16V4h12v12z"></path></svg>',
+
+        add: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>',
+
+        more: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="fill-current"><path d="M5 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m14 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"></path></svg>',
+
+        more_2: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>',
+
+        file: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 2.003V2h10.998C20.55 2 21 2.455 21 2.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 20.993V8l6-5.997zM5.83 8H9V4.83L5.83 8zM11 4v5a1 1 0 0 1-1 1H5v10h14V4h-8z"/></svg>',
+
+        file_copy: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>',
+
+        clipboard: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="fill-current"><path d="M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.993.993 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4zm0 2H5v14h14V6h-2v2H7zm2-2v2h6V4z"></path></svg>',
+
+        global: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10m-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.01 8.01 0 0 0 5.648 6.667M10.03 13c.151 2.439.848 4.73 1.97 6.752A15.9 15.9 0 0 0 13.97 13zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.01 8.01 0 0 0 19.938 13M4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.01 8.01 0 0 0 4.062 11m5.969 0h3.938A15.9 15.9 0 0 0 12 4.248 15.9 15.9 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.01 8.01 0 0 0-5.648-6.667"></path></svg>',
+
+        arrow_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current"><path fill="none" d="M0 0h24v24H0z"></path><path d="m12 13.172 4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path></svg>',
+        arrow_left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>',
+        arrow_right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>',
+
+        image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#000"/></svg>',
+
+        delete_bin: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z"/></svg>',
+
+        search: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>',
+
+        camera: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.828 5l-2 2H4v12h16V7h-3.828l-2-2H9.828zM9 3h6l2 2h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4l2-2zm3 15a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>',
+
+        draggable: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>',
+
+        pencil: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"/></svg>',
+
+        archive_stack: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 5H20V3H4V5ZM20 9H4V7H20V9ZM3 11H10V13H14V11H21V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V11ZM16 13V15H8V13H5V19H19V13H16Z"></path></svg>',
+
+        eraser: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.58564 8.85449L3.63589 13.8042L8.83021 18.9985L9.99985 18.9978V18.9966H11.1714L14.9496 15.2184L8.58564 8.85449ZM9.99985 7.44027L16.3638 13.8042L19.1922 10.9758L12.8283 4.61185L9.99985 7.44027ZM13.9999 18.9966H20.9999V20.9966H11.9999L8.00229 20.9991L1.51457 14.5113C1.12405 14.1208 1.12405 13.4877 1.51457 13.0971L12.1212 2.49053C12.5117 2.1 13.1449 2.1 13.5354 2.49053L21.3136 10.2687C21.7041 10.6592 21.7041 11.2924 21.3136 11.6829L13.9999 18.9966Z"></path></svg>',
+
+        external_link: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>',
+
+        mail: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z"></path></svg>',
+
+        palette: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"></path></svg>',
+
+        check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg>',
+
+        drop: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3.09723L7.05025 8.04697C4.31658 10.7806 4.31658 15.2128 7.05025 17.9465C9.78392 20.6801 14.2161 20.6801 16.9497 17.9465C19.6834 15.2128 19.6834 10.7806 16.9497 8.04697L12 3.09723ZM12 0.268799L18.364 6.63276C21.8787 10.1475 21.8787 15.846 18.364 19.3607C14.8492 22.8754 9.15076 22.8754 5.63604 19.3607C2.12132 15.846 2.12132 10.1475 5.63604 6.63276L12 0.268799Z"></path></svg>',
+
+        book: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H6.5C4.567 22 3 20.433 3 18.5ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19ZM5 15.3368C5.45463 15.1208 5.9632 15 6.5 15H19V4H6C5.44772 4 5 4.44772 5 5V15.3368Z"></path></svg>',
+
+        preview: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path></svg>',
+
+        # Richtext
+
+        text_bold: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.11929 13.8807 6 12.5 6H8V11ZM18 15.5C18 17.9853 15.9853 20 13.5 20H6V4H12.5C14.9853 4 17 6.01472 17 8.5C17 9.70431 16.5269 10.7981 15.7564 11.6058C17.0979 12.3847 18 13.837 18 15.5ZM8 13V18H13.5C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13H8Z"></path></svg>',
+        text_italic: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 20H7V18H9.92661L12.0425 6H9V4H17V6H14.0734L11.9575 18H15V20Z"></path></svg>',
+        text_underline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z"></path></svg>',
+        text_strikethrough: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z"></path></svg>',
+        text_superscript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.59567 5L10.5 10.9283L15.4043 5H18L11.7978 12.4971L18 19.9943V20H15.4091L10.5 14.0659L5.59092 20H3V19.9943L9.20216 12.4971L3 5H5.59567ZM21.5507 6.5803C21.7042 6.43453 21.8 6.22845 21.8 6C21.8 5.55817 21.4418 5.2 21 5.2C20.5582 5.2 20.2 5.55817 20.2 6C20.2 6.07624 20.2107 6.14999 20.2306 6.21983L19.0765 6.54958C19.0267 6.37497 19 6.1906 19 6C19 4.89543 19.8954 4 21 4C22.1046 4 23 4.89543 23 6C23 6.57273 22.7593 7.08923 22.3735 7.45384L20.7441 9H23V10H19V9L21.5507 6.5803V6.5803Z"></path></svg>',
+
+        text_unorderd_list: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>',
+        text_ordered_list: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>',
+
+        text_paragraph: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 6V21H10V16C6.68629 16 4 13.3137 4 10C4 6.68629 6.68629 4 10 4H20V6H17V21H15V6H12ZM10 6C7.79086 6 6 7.79086 6 10C6 12.2091 7.79086 14 10 14V6Z"></path></svg>',
+        text_heading_2: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 8C20.5711 8 22.25 9.67893 22.25 11.75C22.25 12.6074 21.9623 13.3976 21.4781 14.0292L21.3302 14.2102L18.0343 18H22V20H15L14.9993 18.444L19.8207 12.8981C20.0881 12.5908 20.25 12.1893 20.25 11.75C20.25 10.7835 19.4665 10 18.5 10C17.5818 10 16.8288 10.7071 16.7558 11.6065L16.75 11.75H14.75C14.75 9.67893 16.4289 8 18.5 8Z"></path></svg>',
+        text_heading_3: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8L21.9984 10L19.4934 12.883C21.0823 13.3184 22.25 14.7728 22.25 16.5C22.25 18.5711 20.5711 20.25 18.5 20.25C16.674 20.25 15.1528 18.9449 14.8184 17.2166L16.7821 16.8352C16.9384 17.6413 17.6481 18.25 18.5 18.25C19.4665 18.25 20.25 17.4665 20.25 16.5C20.25 15.5335 19.4665 14.75 18.5 14.75C18.214 14.75 17.944 14.8186 17.7056 14.9403L16.3992 13.3932L19.3484 10H15V8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z"></path></svg>',
+        text_heading_4: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM22 8V16H23.5V18H22V20H20V18H14.5V16.66L19.5 8H22ZM20 11.133L17.19 16H20V11.133Z"></path></svg>',
+        text_code: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3.41436 5.99995L5.70726 3.70706L4.29304 2.29285L0.585938 5.99995L4.29304 9.70706L5.70726 8.29285L3.41436 5.99995ZM9.58594 5.99995L7.29304 3.70706L8.70726 2.29285L12.4144 5.99995L8.70726 9.70706L7.29304 8.29285L9.58594 5.99995ZM14.0002 2.99995H21.0002C21.5524 2.99995 22.0002 3.44767 22.0002 3.99995V20C22.0002 20.5522 21.5524 21 21.0002 21H3.00015C2.44787 21 2.00015 20.5522 2.00015 20V12H4.00015V19H20.0002V4.99995H14.0002V2.99995Z"></path></svg>',
+        text_quote: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.4167 6.67891C20.4469 7.77257 21.0001 9 21.0001 10.9897C21.0001 14.4891 18.5436 17.6263 14.9695 19.1768L14.0768 17.7992C17.4121 15.9946 18.0639 13.6539 18.3245 12.178C17.7875 12.4557 17.0845 12.5533 16.3954 12.4895C14.591 12.3222 13.1689 10.8409 13.1689 9C13.1689 7.067 14.7359 5.5 16.6689 5.5C17.742 5.5 18.7681 5.99045 19.4167 6.67891ZM9.41669 6.67891C10.4469 7.77257 11.0001 9 11.0001 10.9897C11.0001 14.4891 8.54359 17.6263 4.96951 19.1768L4.07682 17.7992C7.41206 15.9946 8.06392 13.6539 8.32447 12.178C7.78747 12.4557 7.08452 12.5533 6.39539 12.4895C4.59102 12.3222 3.16895 10.8409 3.16895 9C3.16895 7.067 4.73595 5.5 6.66895 5.5C7.742 5.5 8.76814 5.99045 9.41669 6.67891Z"></path></svg>',
+
+        text_link: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path></svg>',
+        text_unlink: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 17H22V19H19V22H17V17ZM7 7H2V5H5V2H7V7ZM18.364 15.5355L16.9497 14.1213L18.364 12.7071C20.3166 10.7545 20.3166 7.58866 18.364 5.63604C16.4113 3.68342 13.2455 3.68342 11.2929 5.63604L9.87868 7.05025L8.46447 5.63604L9.87868 4.22183C12.6123 1.48816 17.0445 1.48816 19.7782 4.22183C22.5118 6.9555 22.5118 11.3877 19.7782 14.1213L18.364 15.5355ZM15.5355 18.364L14.1213 19.7782C11.3877 22.5118 6.9555 22.5118 4.22183 19.7782C1.48816 17.0445 1.48816 12.6123 4.22183 9.87868L5.63604 8.46447L7.05025 9.87868L5.63604 11.2929C3.68342 13.2455 3.68342 16.4113 5.63604 18.364C7.58866 20.3166 10.7545 20.3166 12.7071 18.364L14.1213 16.9497L15.5355 18.364ZM14.8284 7.75736L16.2426 9.17157L9.17157 16.2426L7.75736 14.8284L14.8284 7.75736Z"></path></svg>',
+
+        # Devices
+
+        computer: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 16h16V5H4v11zm9 2v2h4v2H7v-2h4v-2H2.992A.998.998 0 0 1 2 16.993V4.007C2 3.451 2.455 3 2.992 3h18.016c.548 0 .992.449.992 1.007v12.986c0 .556-.455 1.007-.992 1.007H13z" fill="#000"/></svg>',
+        tablet: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6 4v16h12V4zM5 2h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1m7 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2"></path></svg>',
+        smartphone: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 4v16h10V4H7zM6 2h12a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm6 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" fill="#000"/></svg>',
+
+        # Other icons
+        home: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1m-6-2h5V9.157l-6-5.454-6 5.454V19h5v-6h2z"/></svg>',
+
+        logout: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1H5zm13-6v-3h-7v-2h7V8l5 4-5 4z"/></svg>',
+
+        # Spinners
+        spinner: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z"></path></svg>'
+      }.with_indifferent_access.freeze
+      # rubocop:enable Layout/LineLength, Naming/VariableNumber
+    end
+  end
+end

data/app/components/maglev/uikit/image_library/card_component.html.erb

@@ -0,0 +1,41 @@
+<div class="flex h-full flex-col" data-controller="transition">
+  <div class="bg-checkerboard pb-full relative overflow-hidden rounded flex-1" data-action="mouseenter->transition#enter mouseleave->transition#leave">
+    <div class="absolute inset-0 h-full w-full rounded">
+      <img
+        src="<%= image_url %>" 
+        class="h-full w-full object-contain <%= 'cursor-pointer' if picker_mode? %>"
+        <% if picker_mode? %>
+        data-controller="dispatcher"
+        data-action="click->dispatcher#trigger click->uikit-modal#close:self"
+        data-dispatcher-event-name-value="<%= picker_event_name %>"
+        data-dispatcher-payload-value="<%= picker_event_payload %>"
+        <% end %>
+      />
+
+      <div
+        class="flex items-center px-2 absolute bg-black/75 bottom-0 h-12 w-full text-white text-xs cursor-default rounded-b hidden"
+        data-transition-target="revealable"
+        data-transition-enter="ease-out duration-100"
+        data-transition-enter-start="translate-y-4 opacity-0"
+        data-transition-enter-end="translate-y-0 opacity-100"
+        data-transition-leave="ease-in duration-100"
+        data-transition-leave-start="translate-y-0 opacity-100"
+        data-transition-leave-end="translate-y-4 opacity-0"
+      >
+        <%= button_to delete_path, 
+          method: :delete,
+          form_class: 'ml-auto flex items-center', 
+          class: 'px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 cursor-pointer',
+          data: { turbo_confirm: t('maglev.editor.image_library.confirm_destroy'), turbo_frame: 'modal-dialog' } do 
+        %>
+          <%= render Maglev::Uikit::IconComponent.new(name: 'delete_bin', size: '1rem') %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+  <div class="mt-1 text-xs font-bold text-gray-900 truncate" title="<%= filename %>"><%= filename %></div>
+  <div class="mb-1 flex items-center text-xs justify-between text-gray-700">
+    <span><% if width_and_height? %><%= width %>x<%= height %><% end %></span>
+    <span><% if byte_size.present? %><%= number_to_human_size(byte_size) %><% end %></span>
+  </div>
+</div>

data/app/components/maglev/uikit/image_library/card_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module ImageLibrary
+      class CardComponent < Maglev::Uikit::BaseComponent
+        attr_reader :id, :image_url, :filename, :width, :height, :byte_size, :delete_path, :picker_attributes
+
+        def initialize(image:, delete_path:, picker_attributes: nil)
+          @id = image[:id]
+          @image_url = image[:image_url]
+          @filename = image[:filename]
+          @width = image[:width]
+          @height = image[:height]
+          @byte_size = image[:byte_size]
+          @delete_path = delete_path
+          @picker_attributes = picker_attributes
+        end
+
+        def picker_mode?
+          picker_attributes.present? && picker_attributes[:picker].present?
+        end
+
+        def picker_event_payload
+          {
+            source: picker_attributes[:source],
+            image: picker_event_image_payload
+          }.to_json
+        end
+
+        def picker_event_image_payload
+          {
+            id: id,
+            filename: filename,
+            url: image_url,
+            width: width,
+            height: height,
+            byte_size: byte_size
+          }
+        end
+
+        def picker_event_name
+          "image-selected-#{picker_attributes[:source]}"
+        end
+
+        def width_and_height?
+          width.present? && height.present?
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/image_library/list_component.html.erb

@@ -0,0 +1,7 @@
+<div class="grid grid-cols-4 gap-4">
+  <% images.each do |image| %>
+    <div class="col-span-1 h-58">
+      <%= image %>
+    </div>
+  <% end %>
+</div>

data/app/components/maglev/uikit/image_library/list_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module ImageLibrary
+      class ListComponent < Maglev::Uikit::BaseComponent
+        renders_many :images, 'Maglev::Uikit::ImageLibrary::CardComponent'
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/image_library/uploader_component.html.erb

@@ -0,0 +1,30 @@
+<div 
+  class="flex items-center gap-4"
+  data-controller="uikit-image-library-uploader"
+  data-uikit-image-library-uploader-maxsize-value="<%= maxsize %>"
+  data-uikit-image-library-uploader-create-path-value="<%= create_path %>"
+  data-uikit-image-library-uploader-refresh-path-value="<%= refresh_path %>"
+  data-uikit-image-library-uploader-too-big-error-message-value="<%= too_big_error_message %>"
+>
+  <button 
+    class="<%= button_class_names(color: :primary, size: :medium, class: 'group/button') %>"
+    data-action="click->uikit-image-library-uploader#openFileDialog"  
+    data-uikit-image-library-uploader-target="button"
+  >
+    <span class="group-disabled/button:hidden">
+      <%= t('maglev.editor.image_library.uploader.upload_button.default') %>
+    </span>
+    <span class="group-disabled/button:block hidden">
+      <%= t('maglev.editor.image_library.uploader.upload_button.in_progress') %>
+    </span>
+  </button>
+
+  <input
+    type="file"
+    accept="image/*"
+    multiple
+    class="hidden"
+    data-uikit-image-library-uploader-target="fileInput"
+    data-action="change->uikit-image-library-uploader#onFilesSelected"
+  />
+</div>

data/app/components/maglev/uikit/image_library/uploader_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module ImageLibrary
+      class UploaderComponent < Maglev::Uikit::BaseComponent
+        attr_reader :create_path, :refresh_path, :maxsize
+
+        def initialize(create_path:, refresh_path:, maxsize: 2_048_144)
+          @create_path = create_path
+          @refresh_path = refresh_path
+          @maxsize = maxsize
+        end
+
+        def success_message
+          t('maglev.editor.image_library.uploader.upload_button.success')
+        end
+
+        def error_message
+          t('maglev.editor.image_library.uploader.upload_button.fail')
+        end
+
+        def too_big_error_message
+          t('maglev.editor.image_library.uploader.wrong_files', limit: number_to_human_size(maxsize))
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/image_library/uploader_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from '@hotwired/stimulus'
+import { FetchRequest } from '@rails/request.js'
+
+export default class extends Controller {
+  static targets = ['button', 'fileInput']
+  static values = {
+    createPath: String,
+    refreshPath: String,
+    maxsize: Number,
+    tooBigErrorMessage: String,
+  }
+
+  connect() {
+    console.log('UploaderController connected')
+  }
+
+  openFileDialog() {    
+    this.fileInputTarget.click()
+  }
+
+  onFilesSelected() {    
+    const allowedFiles = this.allowedFiles()
+    if (allowedFiles) {
+      this.buttonTarget.disabled = true
+      this.uploadFiles(allowedFiles).then(() => {
+         this.reloadFrameTag()
+      })
+      .catch((error) => {        
+        console.error(error)
+        alert('Network/Server connection error')
+      }).finally(() => {
+        this.buttonTarget.disabled = false
+      })
+    } else {
+      alert(this.tooBigErrorMessageValue)
+    }
+  }
+
+  uploadFiles(allowedFiles) {
+    return Promise.all(allowedFiles.map((file) => this.uploadSingleFile({ file }, allowedFiles.length)))
+  }
+
+  uploadSingleFile(attributes, numberOfAssets) {
+    const formData = new FormData()
+    formData.append('number_of_assets', numberOfAssets)
+    Object.entries(attributes).forEach(([key, value]) =>
+      formData.append(`asset[${key}]`, value)
+    )
+
+    const request = new FetchRequest('post', this.createPathValue, { body: formData })
+    return request.perform()
+  }
+
+  allowedFiles() {
+    const allowedFiles = []
+    const files = this.fileInputTarget.files
+    for (var i = 0; i < files.length; i++) {
+      const file = files[i]
+      if (file && file.size < this.maxsizeValue) {
+        allowedFiles.push(file)
+      } else return false
+    }
+    return allowedFiles
+  }
+
+  reloadFrameTag() {
+    console.log('reloadFrameTag', this.refreshPathValue)
+    const frame = document.querySelector(`turbo-frame#modal-dialog`)
+    if (frame) {
+      frame.src = this.refreshPathValue
+      frame.reload()
+    }
+  }
+}

data/app/components/maglev/uikit/list/insert_button_component.html.erb

@@ -0,0 +1,7 @@
+<div <%= tag.attributes(class: wrapper_classes) %>>
+  <div class="absolute top-0 left-0 w-full justify-center flex opacity-0 group-hover/button:opacity-100 transition-opacity duration-200">
+    <%= link_to link_url, data: link_data, class: "h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 border-4 border-white bg-gray-500 text-gray-200 hover:bg-gray-900 hover:text-gray-100" do %>
+      <%= render Maglev::Uikit::IconComponent.new(name: "add", size: "1.15rem") %>    
+    <% end %>
+  </div>
+</div>

data/app/components/maglev/uikit/list/insert_button_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module List
+      class InsertButtonComponent < Maglev::Uikit::BaseComponent
+        attr_reader :link, :index
+
+        def initialize(link:, index: nil)
+          @link = link
+          @index = index
+        end
+
+        def link_url
+          link[:url]
+        end
+
+        def link_data
+          link[:data] || {}
+        end
+
+        def color_class
+          [
+            'bg-gray-500/20',
+            'bg-red-500/20',
+            'bg-blue-500/20',
+            'bg-green-500/20',
+            'bg-yellow-500/20'
+          ][index]
+        end
+
+        def wrapper_classes(...)
+          class_variants(
+            base: 'relative w-full h-7 group/button z-10 -mb-5 -mt-5 group-[.is-dragging]:hidden'
+          ).render(...)
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/list/list_component.html.erb

@@ -0,0 +1,17 @@
+<%= tag.div(
+  class: 'flex flex-col gap-3 group',
+  data: { 
+    controller: sortable? ? 'sortable' : nil, 
+    'sortable-scope-value': sortable? ? sortable_scope : nil,
+    **(html_options[:data] || {})
+  }.compact,
+) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+
+  <%= form_with url: sort_form_path, method: :put, data: sort_form_data, class: 'invisible' do %>
+    <!-- Empty form -->
+    <%= hidden_field_tag :scope, sortable_scope if sortable_scope.present? %>
+  <% end if sortable? %>
+<% end %>

data/app/components/maglev/uikit/list/list_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module List
+      class ListComponent < Maglev::Uikit::BaseComponent
+        renders_many :items, types: {
+          content: Maglev::Uikit::List::ListItemComponent,
+          insert_button: Maglev::Uikit::List::InsertButtonComponent
+        }
+
+        attr_reader :sort_form, :sortable_scope, :html_options
+
+        def initialize(sort_form: nil, sortable_scope: nil, html_options: {})
+          @sort_form = sort_form
+          @sortable_scope = sortable_scope
+          @html_options = html_options
+        end
+
+        def sort_form_path
+          sort_form&.fetch(:path)
+        end
+
+        def sort_form_data
+          { sortable_target: 'sortableForm' }.merge(sort_form[:data] || {})
+        end
+
+        def sortable?
+          sort_form_path.present?
+        end
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/list/list_item_component.html.erb

@@ -0,0 +1,47 @@
+<%= tag.div(data: { sortable_target: sortable_target, item_id: id, item_index: index }) do %>
+  <%= tag.div(class: wrapper_classes) do %>
+
+    <%= tag.div(class: 'flex items-center cursor-move', data: { sortable_target: sortable_handle }) do %>
+      <%= render Maglev::Uikit::IconComponent.new(name: "draggable") %>
+    <% end if handle? %>
+    
+    <% item_body = capture do %>
+      <% if image? %>
+        <div class="h-8 w-8 bg-gray-400">
+          <%= image %>
+        </div>
+      <% end %>
+
+      <% if big_image? %>
+        <%= big_image %>
+      <% end %>
+
+      <div class="flex flex-col overflow-hidden">
+        <% if pre_title? %>
+          <div class="text-gray-500 text-xs"><%= pre_title %></div>
+          <div class="text-gray-800 truncate"><%= title %></div>
+        <% else %>
+          <div class="truncate"><%= title %></div>
+        <% end %>
+      </div>    
+    <% end %>
+
+    <% if link? %>
+      <%= link_to link_url, data: link_data, class: content_classes do %>
+        <%= item_body %>
+      <% end %>
+    <% else %>
+      <div class="<%= content_classes %>">
+        <%= item_body %>
+      </div>
+    <% end %>
+
+    <% if action? %>
+      <div class="relative ml-auto flex items-center shrink-0 min-h-full gap-2">
+        <%= action %>
+      </div>
+    <% end %>  
+  <% end %>
+
+  <%= content if content? %>
+<% end %>