Initial

BoxShadowControl.js

@@ -0,0 +1,107 @@
+import { useState } from '@wordpress/element';
+import {
+    Dropdown,
+    Button,
+    __experimentalHStack as HStack,
+} from '@wordpress/components';
+import { solidLine } from '@wordpress/icons';
+
+export default function BoxShadowControl({
+    label = 'Box Shadow',
+    value = '',
+    onSelect,
+}) {
+    const boxShadows = [
+        'rgba(0, 0, 0, 0.1) 0px 0px 10px 0px',
+        '0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)',
+        '0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1)',
+        '0 20px 25px rgba(0,0,0,0.3), 0 10px 10px rgba(0,0,0,0.2)',
+        '0 0 10px rgba(0,0,0,0.5)',
+    ];
+
+    return (
+        <div style={{ width: '100%' }}>
+   <Dropdown
+    className="box-shadow-control"
+    style={{ width: '100%' }}
+    popoverProps={{ placement: 'bottom-start' }}
+    renderToggle={({ isOpen, onToggle }) => (
+        <HStack
+            role="button"
+            tabIndex={0}
+            onClick={onToggle}
+            onKeyDown={(e) => e.key === 'Enter' && onToggle()}
+            gap={6}
+            align="center"
+            style={{
+                width: '100%', // full width toggle
+                padding: '6px 10px',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                userSelect: 'none',
+            }}
+        >
+            <span>{label}</span>
+
+            {value && (
+                <Button
+                    icon={solidLine}
+                    isSecondary
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onSelect(''); // clear the shadow
+                    }}
+                    aria-label="Clear box shadow"
+                    style={{ marginLeft: 'auto' }} // optional: push to right
+                />
+            )}
+        </HStack>
+    )}
+    renderContent={() => (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                padding: '8px',
+            }}
+        >
+            {boxShadows.map((shadow, index) => (
+                <Button
+                    key={index}
+                    style={{
+                        width: '60px',
+                        height: '40px',
+                        backgroundColor: 'white',
+                        boxShadow: shadow,
+                        border: '1px solid #ddd',
+                    }}
+                    onClick={() => onSelect(shadow)}
+                />
+            ))}
+
+            <Button
+                isSecondary
+                style={{
+                    width: '60px',
+                    height: '40px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '12px',
+                    border: '1px solid #ddd',
+                }}
+                onClick={() => onSelect('')}
+            >
+                None
+            </Button>
+        </div>
+    )}
+/>
+
+</div>
+
+    );
+}