From 6e4f4de2227e28f4e7554cfeb94e88f7f8c05137 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 8 Feb 2024 01:35:58 +0300
Subject: [PATCH] Implemented Splitter

---
 components/lib/theme/aura/index.js          |  6 +-
 components/lib/theme/aura/splitter/index.js | 79 +++++++++++++++++++++
 2 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 components/lib/theme/aura/splitter/index.js

diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js
index a36250f3f..6a6c97802 100644
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@@ -3,6 +3,7 @@ import divider from 'primevue/theme/aura/divider';
 import fieldset from 'primevue/theme/aura/fieldset';
 import global from 'primevue/theme/aura/global';
 import panel from 'primevue/theme/aura/panel';
+import splitter from 'primevue/theme/aura/splitter';
 
 export default {
     primitive: {
@@ -127,7 +128,7 @@ export default {
             borderRadius: '6px',
             transitionDuration: '.2s',
             focusRing: {
-                width: '2px',
+                width: '1px',
                 style: 'solid',
                 color: '{primary.500}',
                 offset: '2px'
@@ -163,6 +164,7 @@ export default {
         panel,
         divider,
         fieldset,
-        avatar
+        avatar,
+        splitter
     }
 };
diff --git a/components/lib/theme/aura/splitter/index.js b/components/lib/theme/aura/splitter/index.js
new file mode 100644
index 000000000..bde7878f0
--- /dev/null
+++ b/components/lib/theme/aura/splitter/index.js
@@ -0,0 +1,79 @@
+export default {
+    css: `
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+    border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
+    background: var(--p-dark-surface-900, var(--p-surface-0));
+    border-radius: 6px;
+    color: var(--p-text-color);
+}
+
+.p-splitter-vertical {
+    flex-direction: column;
+}
+
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: var(--p-dark-surface-700, var(--p-surface-200));
+}
+
+.p-splitter-gutter-handle {
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+}
+
+.p-splitter-gutter-handle:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    user-select: none;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+
+.p-splitter-panel {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.p-splitter-panel-nested {
+    display: flex;
+}
+
+.p-splitter-panel .p-splitter {
+    flex-grow: 1;
+    border: 0 none;
+}
+`
+};