Tys toolbar v3 - halfway mark

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/height.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@onlook/ui-v4/button";
+import { Icons } from "@onlook/ui-v4/icons";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@onlook/ui-v4/dropdown-menu";
+import { InputDropdown } from "../inputs/input-dropdown";
+
+export const Height = () => {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
+                >
+                    <Icons.Height className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="text-sm">Hug</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg space-y-3">
+                <div className="space-y-1.5">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-white">Height</span>
+                        <InputDropdown 
+                            value="250"
+                            dropdownValue="Hug"
+                            dropdownOptions={["Hug", "Fixed"]}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Min</span>
+                        <InputDropdown 
+                            value="--"
+                            dropdownValue="Fixed"
+                            dropdownOptions={["Fixed"]}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Max</span>
+                        <InputDropdown 
+                            value="--"
+                            dropdownValue="Fixed"
+                            dropdownOptions={["Fixed"]}
+                        />
+                    </div>
+                </div>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@onlook/ui-v4/button";
+import { Icons } from "@onlook/ui-v4/icons";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@onlook/ui-v4/dropdown-menu";
+import { InputRange } from "../inputs/input-range";
+import { InputIcon } from "../inputs/input-icon";
+import { useState } from "react";
+
+export const Margin = () => {
+    const [activeTab, setActiveTab] = useState('individual');
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
+                >
+                    <Icons.Margin className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="text-sm">24px</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
+                <div className="flex items-center gap-2 mb-3">
+                    <button 
+                        onClick={() => setActiveTab('all')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
+                            activeTab === 'all' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        All sides
+                    </button>
+                    <button 
+                        onClick={() => setActiveTab('individual')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
+                            activeTab === 'individual' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        Individual
+                    </button>
+                </div>
+                {activeTab === 'all' ? (
+                    <InputRange value={12} onChange={(value) => console.log(value)} />
+                ) : (
+                    <div className="grid grid-cols-2 gap-2">
+                        <InputIcon icon="LeftSide" value={12} />
+                        <InputIcon icon="TopSide" value={18} />
+                        <InputIcon icon="RightSide" value={12} />
+                        <InputIcon icon="BottomSide" value={18} />
+                    </div>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@onlook/ui-v4/button";
+import { Icons } from "@onlook/ui-v4/icons";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@onlook/ui-v4/dropdown-menu";
+import { InputRange } from "../inputs/input-range";
+import { InputIcon } from "../inputs/input-icon";
+import { useState } from "react";
+
+export const Padding = () => {
+    const [activeTab, setActiveTab] = useState('individual');
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
+                >
+                    <Icons.Padding className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="text-sm">Mixed</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
+                <div className="flex items-center gap-2 mb-3">
+                    <button 
+                        onClick={() => setActiveTab('all')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
+                            activeTab === 'all' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        All sides
+                    </button>
+                    <button 
+                        onClick={() => setActiveTab('individual')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors cursor-pointer ${
+                            activeTab === 'individual' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        Individual
+                    </button>
+                </div>
+                {activeTab === 'all' ? (
+                    <InputRange value={12} onChange={(value) => console.log(value)} />
+                ) : (
+                    <div className="grid grid-cols-2 gap-2">
+                        <InputIcon icon="LeftSide" value={12} />
+                        <InputIcon icon="TopSide" value={18} />
+                        <InputIcon icon="RightSide" value={12} />
+                        <InputIcon icon="BottomSide" value={18} />
+                    </div>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@onlook/ui-v4/button";
+import { Icons } from "@onlook/ui-v4/icons";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@onlook/ui-v4/dropdown-menu";
+import { InputRange } from "../inputs/input-range";
+import { InputIcon } from "../inputs/input-icon";
+import { useState } from "react";
+
+export const Radius = () => {
+    const [activeTab, setActiveTab] = useState('individual');
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
+                >
+                    <Icons.CornerRadius className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="text-sm">8px</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg">
+                <div className="flex items-center gap-2 mb-3">
+                    <button 
+                        onClick={() => setActiveTab('all')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors ${
+                            activeTab === 'all' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        All sides
+                    </button>
+                    <button 
+                        onClick={() => setActiveTab('individual')}
+                        className={`flex-1 text-sm px-4 py-1.5 rounded-md transition-colors ${
+                            activeTab === 'individual' 
+                                ? 'text-white bg-background-tertiary/20' 
+                                : 'text-muted-foreground hover:bg-background-tertiary/10'
+                        }`}
+                    >
+                        Individual
+                    </button>
+                </div>
+                {activeTab === 'all' ? (
+                    <InputRange value={12} icon="CornerRadius" onChange={(value) => console.log(value)} />
+                ) : (
+                    <div className="grid grid-cols-2 gap-2">
+                        <InputIcon icon="CornerRadius" value={12} />
+                        <InputIcon icon="CornerTopRight" value={18} />
+                        <InputIcon icon="CornerBottomLeft" value={12} />
+                        <InputIcon icon="CornerBottomRight" value={18} />
+                    </div>
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/width.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@onlook/ui-v4/button";
+import { Icons } from "@onlook/ui-v4/icons";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuTrigger,
+} from "@onlook/ui-v4/dropdown-menu";
+import { InputDropdown } from "../inputs/input-dropdown";
+
+export const Width = () => {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 text-muted-foreground border border-border/0 cursor-pointer rounded-lg hover:bg-background-tertiary/20 hover:text-white hover:border hover:border-border data-[state=open]:bg-background-tertiary/20 data-[state=open]:text-white data-[state=open]:border data-[state=open]:border-border px-3 focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus-visible:outline-none active:border-0"
+                >
+                    <Icons.Width className="h-4 w-4 min-h-4 min-w-4" />
+                    <span className="text-sm">280</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-[280px] mt-1 p-3 rounded-lg space-y-3">
+                <div className="space-y-1.5">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-white">Width</span>
+                        <InputDropdown 
+                            value="250"
+                            dropdownValue="Hug"
+                            dropdownOptions={["Hug", "Fixed"]}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Min</span>
+                        <InputDropdown 
+                            value="--"
+                            dropdownValue="Fixed"
+                            dropdownOptions={["Fixed"]}
+                        />
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Max</span>
+                        <InputDropdown 
+                            value="--"
+                            dropdownValue="Fixed"
+                            dropdownOptions={["Fixed"]}
+                        />
+                    </div>
+                </div>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};