local c=script.Parent.Parent local H=require(c.Parent.Fusion)local e=require(c.Themer)local n=H.scoped local v=H.Children local Q=require(script.Parent.Button)local R=require(script.Parent.Frame)local b=require(script.Parent.Divider)local f={Button=Q,Frame=R;Divider=b}return{story=function(c)local n=H.innerScope(c.scope,H,f)local Q=e.Theme:now()n:Frame({Parent=c.target;ListEnabled=true,ListPadding=n:Computed(function(c)return UDim.new(0,c(Q.Spacing["\048\046\053"]))end);Padding=n:Computed(function(c)return UDim.new(0,c(Q.StrokeThickness["\049"]))end),[v]={n:Button({Content={"\066\117\116\116\111\110"}});n:Button({Content={"\066\117\116\116\111\110"},Color=Q.Colors.Primary.Main}),n:Button({Content={"\066\117\116\116\111\110"},Style="\079\117\116\108\105\110\101\100",Color=Q.Colors.Primary.Main});n:Button({Content={"\114\098\120\097\115\115\101\116\105\100\058\047\047\049\049\053\054\048\051\052\049\049\051\050";"\080\117\114\099\104\097\115\101"},Color=Color3.fromRGB(86,255,70)});n:Button({Content={"\114\098\120\097\115\115\101\116\105\100\058\047\047\049\051\052\048\053\050\050\056\052\049\056","\068\101\108\101\116\101"},Style="\079\117\116\108\105\110\101\100",Color=Q.Colors.Error.Main});n:Button({Content={"\071\104\111\115\116"},Style="\071\104\111\115\116";Color=Q.Colors.BaseContent.Main});n:Button({Content={"\114\098\120\097\115\115\101\116\105\100\058\047\047\049\049\053\054\048\051\052\049\049\051\050","\066\111\098\117\120"};Color=Color3.fromRGB(86,255,70);Disabled=true}),n:Button({Content={"\084\101\115\116\105\110\103"};Color=Color3.fromRGB(86,255,70);Disabled=true;Style="\079\117\116\108\105\110\101\100"});n:Divider({});n:Frame({ListEnabled=true,ListFillDirection=Enum.FillDirection.Horizontal;ListVerticalAlignment=Enum.VerticalAlignment.Center,Padding=n:Computed(function(c)return UDim.new(0,c(Q.Spacing["\049"]))end);[v]={n:Button({Content={"\066\117\116\116\111\110 \040\120\115\041"},SizeVariant="\069\120\116\114\097\083\109\097\108\108";Color=Q.Colors.Primary.Main}),n:Button({Content={"\066\117\116\116\111\110 \040\115\109\041"};SizeVariant="\083\109\097\108\108",Color=Q.Colors.Primary.Main});n:Button({Content={"\066\117\116\116\111\110 \040\109\100\041"};SizeVariant="\077\101\100\105\117\109";Color=Q.Colors.Primary.Main});n:Button({Content={"\066\117\116\116\111\110 \040\108\103\041"};SizeVariant="\076\097\114\103\101";Color=Q.Colors.Primary.Main});n:Button({Content={"\066\117\116\116\111\110 \040\120\108\041"},SizeVariant="\069\120\116\114\097\076\097\114\103\101",Color=Q.Colors.Primary.Main})}})}})end,fusion=H}
local OnyxUI = script.Parent.Parent

local Fusion = require(OnyxUI.Parent.Fusion)
local Themer = require(OnyxUI.Themer)

local Scoped = Fusion.scoped
local Children = Fusion.Children

local Button = require(script.Parent.Button)
local Frame = require(script.Parent.Frame)
local Divider = require(script.Parent.Divider)
local Components = {
	Button = Button,
	Frame = Frame,
	Divider = Divider,
}

return {
	story = function(Props)
		local Scope = Fusion.innerScope(Props.scope, Fusion, Components)
		local Theme = Themer.Theme:now()

		Scope:Frame {
			Parent = Props.target,
			ListEnabled = true,
			ListPadding = Scope:Computed(function(Use)
				return UDim.new(0, Use(Theme.Spacing["0.5"]))
			end),
			Padding = Scope:Computed(function(Use)
				return UDim.new(0, Use(Theme.StrokeThickness["1"]))
			end),

			[Children] = {
				Scope:Button {
					Content = { "Button" },
				},
				Scope:Button {
					Content = { "Button" },
					Color = Theme.Colors.Primary.Main,
				},
				Scope:Button {
					Content = { "Button" },
					Style = "Outlined",
					Color = Theme.Colors.Primary.Main,
				},
				Scope:Button {
					Content = { "rbxassetid://11560341132", "Purchase" },
					Color = Color3.fromRGB(86, 255, 70),
				},
				Scope:Button {
					Content = { "rbxassetid://13405228418", "Delete" },
					Style = "Outlined",
					Color = Theme.Colors.Error.Main,
				},
				Scope:Button {
					Content = { "Ghost" },
					Style = "Ghost",
					Color = Theme.Colors.BaseContent.Main,
				},
				Scope:Button {
					Content = { "rbxassetid://11560341132", "Bobux" },
					Color = Color3.fromRGB(86, 255, 70),
					Disabled = true,
				},
				Scope:Button {
					Content = { "Testing" },
					Color = Color3.fromRGB(86, 255, 70),
					Disabled = true,
					Style = "Outlined",
				},
				Scope:Divider {},
				Scope:Frame {
					ListEnabled = true,
					ListFillDirection = Enum.FillDirection.Horizontal,
					ListVerticalAlignment = Enum.VerticalAlignment.Center,
					Padding = Scope:Computed(function(Use)
						return UDim.new(0, Use(Theme.Spacing["1"]))
					end),

					[Children] = {
						Scope:Button {
							Content = { "Button (xs)" },
							SizeVariant = "ExtraSmall",
							Color = Theme.Colors.Primary.Main,
						},
						Scope:Button {
							Content = { "Button (sm)" },
							SizeVariant = "Small",
							Color = Theme.Colors.Primary.Main,
						},
						Scope:Button {
							Content = { "Button (md)" },
							SizeVariant = "Medium",
							Color = Theme.Colors.Primary.Main,
						},
						Scope:Button {
							Content = { "Button (lg)" },
							SizeVariant = "Large",
							Color = Theme.Colors.Primary.Main,
						},
						Scope:Button {
							Content = { "Button (xl)" },
							SizeVariant = "ExtraLarge",
							Color = Theme.Colors.Primary.Main,
						},
					},
				},
			},
		}
	end,
	fusion = Fusion,
}
