components/StyledPane.qml

@@ -1,19 +0,0 @@
-import qs.config
-import QtQuick
-import QtQuick.Controls
-
-Pane {
-    padding: 24
-    background: Rectangle {
-        color: "transparent"
-        border.width: Styling.theme.border
-        border.color: Styling.theme.basecontent
-        opacity: 0.33
-        Behavior on border.color {
-            ColorAnimation {
-                duration: Styling.animations.speed.fast
-            }
-        }
-        radius: Styling.theme.radiusBox
-    }
-}

components/StyledTabButton.qml

@@ -12,7 +12,6 @@ TabButton {
         text: control.text
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
-        padding: 6
         color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
         Behavior on color {
             ColorAnimation {

modules/storybook/Fields.qml

@@ -1,33 +1,21 @@
 import qs.components
 import qs.config
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
-ColumnLayout {
+GridLayout {
-
+    flow: GridLayout.TopToBottom
-    spacing: Styling.layout.spacing.xl
+    columns: 2
-
+    rows: 10
-    ColumnLayout {
-        StyledText {
-            text: "Button"
-            font.pixelSize: 18
-        }
-        StyledPane {
-            StyledButton {
-                text: "Button"
-            }
-        }
-    }
 
     ColumnLayout {
         StyledText {
             text: "Icon Button"
             font.pixelSize: 18
         }
-        StyledPane {
+        StyledIconButton {
-            StyledIconButton {
+            text: Styling.lucide.icons.square
-                text: Styling.lucide.icons.square
-            }
         }
     }
 
@@ -36,18 +24,11 @@ ColumnLayout {
             text: "Slider"
             font.pixelSize: 18
         }
-        StyledPane {
+        StyledSlider {
-            StyledSlider {
+            id: slider
-                id: slider
+            from: 0
-                from: 0
+            to: 100
-                to: 100
+            value: 50
-                value: 50
-            }
         }
     }
-
-    component FieldElement: QtObject {
-        property string title
-        property Component component
-    }
 }

modules/storybook/Storybook.qml

@@ -27,17 +27,15 @@ StyledPanelWindow {
         }
     }
 
-    Item {
+    ColumnLayout {
         id: layout
+
         anchors.fill: parent
+        spacing: 0
 
         StyledTabBar {
             id: tabs
-            anchors.top: parent.top
+            Layout.fillWidth: true
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: stack.top
-
             StyledTabButton {
                 text: "Fields"
             }
@@ -50,26 +48,20 @@ StyledPanelWindow {
         }
 
         StackLayout {
-            id: stack
-
-            anchors.top: tabs.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-
             currentIndex: tabs.currentIndex
 
             ScrollView {
-                Layout.fillWidth: true
+                Layout.maximumHeight: 400
                 padding: 36
                 Fields {}
             }
             ScrollView {
+                Layout.maximumHeight: 400
                 padding: 36
                 Selectors {}
             }
             ScrollView {
-                Layout.fillWidth: true
+                Layout.maximumHeight: 400
                 padding: 36
                 Components {}
             }