@rbxts-ui/components 2.0.0 → 2.1.0

package/dist/Section.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface SectionProps {
+    title: string;
+    children: React.ReactNode;
+    cornerRadius?: number;
+    sortOrder?: Enum.SortOrder;
+    theme?: Theme;
+}
+export declare function Section({ title, children, cornerRadius, sortOrder, theme, }: SectionProps): JSX.Element;
+export type { SectionProps };
+//# sourceMappingURL=Section.d.ts.map

package/dist/Section.luau

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function Section(_param)
+	local title = _param.title
+	local children = _param.children
+	local cornerRadius = _param.cornerRadius
+	if cornerRadius == nil then
+		cornerRadius = 2
+	end
+	local sortOrder = _param.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.Name
+	end
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local textSize = rem(3.5)
+	return React.createElement(VStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		verticalAlignment = Enum.VerticalAlignment.Top,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, rem(cornerRadius)),
+	}), React.createElement(VStack, {
+		size = UDim2.new(1, 0, 0, rem(8)),
+		backgroundTransparency = 1,
+	}, React.createElement(Text, {
+		text = title,
+		textSize = rem(3),
+		textScaled = true,
+		richText = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+		textYAlignment = "Center",
+		textXAlignment = "Left",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))), React.createElement(VStack, {
+		spacing = rem(2),
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		sortOrder = sortOrder,
+	}, children))
+end
+return {
+	Section = Section,
+}

package/dist/SegmentedToggle.d.ts

@@ -0,0 +1,19 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+export interface SegmentedToggleOption<T extends string> {
+    id: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SegmentedToggleProps<T extends string> {
+    options: ReadonlyArray<SegmentedToggleOption<T>>;
+    value: T;
+    onChange: (id: T) => void;
+    disabled?: boolean;
+    size?: "default" | "small";
+    label?: string;
+    children?: React.ReactNode;
+    theme?: Theme;
+}
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, theme, }: SegmentedToggleProps<T>): JSX.Element;
+//# sourceMappingURL=SegmentedToggle.d.ts.map

package/dist/SegmentedToggle.luau

@@ -0,0 +1,120 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Button = TS.import(script, script.Parent, "Button").Button
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
+local HStack = _layout.HStack
+local VStack = _layout.VStack
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function SegmentedToggle(_param)
+	local options = _param.options
+	local value = _param.value
+	local onChange = _param.onChange
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local size = _param.size
+	if size == nil then
+		size = "default"
+	end
+	local label = _param.label
+	local children = _param.children
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local count = #options
+	if count == 0 then
+		return React.createElement(React.Fragment)
+	end
+	local height = if size == "small" then rem(4) else rem(5)
+	local spacing = rem(1)
+	local innerPaddingX = rem(0.6)
+	local innerPaddingY = rem(0.5)
+	local buttonCorner = UDim.new(0, rem(2))
+	local buttonWidthOffset = if count > 1 then -((count - 1) * spacing) / count else 0
+	local buttonSize = UDim2.new(1 / count, buttonWidthOffset, 1, 0)
+	local handleChange = function(id, optionDisabled)
+		if disabled or optionDisabled then
+			return nil
+		end
+		if id == value then
+			return nil
+		end
+		onChange(id)
+	end
+	local showLabel = label ~= nil and label ~= ""
+	local containerHeight = if showLabel then height + rem(3.5) else height
+	local labelColor = if disabled then theme.palette.disabled else theme.palette.crust
+	local _exp = showLabel and (React.createElement(Text, {
+		text = label,
+		textSize = rem(3),
+		textScaled = true,
+		textColor = labelColor,
+		size = UDim2.new(1, 0, 0, rem(3)),
+		textXAlignment = "Left",
+	}))
+	local _exp_1 = React.createElement("uistroke", {
+		Color = theme.palette.overlay0,
+		Transparency = if disabled then 0.6 else 0.3,
+		Thickness = 1,
+	})
+	local _exp_2 = React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, innerPaddingX),
+		PaddingRight = UDim.new(0, innerPaddingX),
+		PaddingTop = UDim.new(0, innerPaddingY),
+		PaddingBottom = UDim.new(0, innerPaddingY),
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(option, index)
+		local isSelected = option.id == value
+		local optionDisabled = disabled or option.disabled
+		local backgroundColor = theme.palette.blue
+		return React.createElement(Button, {
+			key = `segmented-toggle-{option.id}-{index}`,
+			size = buttonSize,
+			backgroundColor = backgroundColor,
+			backgroundTransparency = if isSelected then 0 else 1,
+			onClick = function()
+				return handleChange(option.id, optionDisabled)
+			end,
+			selectable = false,
+			cornerRadius = buttonCorner,
+		}, React.createElement(Text, {
+			size = UDim2.new(1, 0, 1, 0),
+			text = option.label,
+			textSize = rem(3),
+			textScaled = true,
+			textColor = theme.palette.crust,
+			textXAlignment = "Center",
+			textYAlignment = "Center",
+			padding = 0.5,
+			rem = rem,
+		}))
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(VStack, {
+		spacing = rem(1),
+		size = UDim2.new(1, 0, 0, containerHeight),
+		automaticSize = Enum.AutomaticSize.Y,
+	}, _exp, React.createElement(Frame, {
+		size = UDim2.new(1, 0, 0, height),
+		backgroundColor = theme.palette.surface1,
+		backgroundTransparency = 1,
+		cornerRadius = UDim.new(0, rem(3)),
+	}, _exp_1, React.createElement(HStack, {
+		spacing = spacing,
+	}, _exp_2, _newValue)), children)
+end
+return {
+	SegmentedToggle = SegmentedToggle,
+}

package/dist/TextButton.d.ts

@@ -0,0 +1,32 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+export declare enum TextButtonVariant {
+    Green = 0,
+    Red = 1,
+    Blue = 2,
+    Black = 3,
+    DarkGray = 4
+}
+interface TextButtonProps extends React.PropsWithChildren {
+    readonly text: string;
+    readonly onClick?: () => void;
+    readonly onHover?: (hovered: boolean) => void;
+    readonly size?: UDim2 | React.Binding<UDim2>;
+    readonly position?: UDim2 | React.Binding<UDim2>;
+    readonly anchorPoint?: Vector2 | React.Binding<Vector2>;
+    readonly overlayGradient?: ColorSequence | React.Binding<ColorSequence>;
+    readonly overlayTransparency?: number | React.Binding<number>;
+    readonly overlayRotation?: number | React.Binding<number>;
+    readonly layoutOrder?: number | React.Binding<number>;
+    readonly variant: TextButtonVariant;
+    readonly isDisabled?: boolean;
+    readonly hasShadow?: boolean;
+    readonly padding?: number;
+    readonly radius?: number;
+    readonly textSize?: number;
+    readonly textScaled?: boolean;
+    readonly theme?: Theme;
+}
+export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, theme, }: TextButtonProps): JSX.Element;
+export type { TextButtonProps };
+//# sourceMappingURL=TextButton.d.ts.map

package/dist/TextButton.luau

@@ -0,0 +1,125 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local lerpBinding = _pretty_react_hooks.lerpBinding
+local useMotion = _pretty_react_hooks.useMotion
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Outline = TS.import(script, script.Parent, "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local TextButtonVariant
+do
+	local _inverse = {}
+	TextButtonVariant = setmetatable({}, {
+		__index = _inverse,
+	})
+	TextButtonVariant.Green = 0
+	_inverse[0] = "Green"
+	TextButtonVariant.Red = 1
+	_inverse[1] = "Red"
+	TextButtonVariant.Blue = 2
+	_inverse[2] = "Blue"
+	TextButtonVariant.Black = 3
+	_inverse[3] = "Black"
+	TextButtonVariant.DarkGray = 4
+	_inverse[4] = "DarkGray"
+end
+local function TextButton(_param)
+	local text = _param.text
+	local onClick = _param.onClick
+	local onHover = _param.onHover
+	local position = _param.position
+	local anchorPoint = _param.anchorPoint
+	local layoutOrder = _param.layoutOrder
+	local variant = _param.variant
+	local isDisabled = _param.isDisabled
+	local hasShadow = _param.hasShadow
+	local size = _param.size
+	local padding = _param.padding
+	local radius = _param.radius
+	local children = _param.children
+	local textSize = _param.textSize
+	local textScaled = _param.textScaled
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local colorVariant = {
+		[TextButtonVariant.Green] = theme.palette.green,
+		[TextButtonVariant.Red] = theme.palette.red,
+		[TextButtonVariant.Blue] = theme.palette.blue,
+		[TextButtonVariant.Black] = theme.palette.black,
+		[TextButtonVariant.DarkGray] = theme.palette.darkgray,
+	}
+	local color = colorVariant[variant]
+	local textColor = if variant == TextButtonVariant.Black then theme.palette.white else theme.palette.crust
+	local _condition = radius
+	if _condition == nil then
+		_condition = 1
+	end
+	local cornerRadius = UDim.new(_condition, 0)
+	local _exp = React.createElement(Frame, {
+		backgroundColor = theme.palette.offwhite,
+		backgroundTransparency = if isDisabled then 0.7 else 0,
+		cornerRadius = cornerRadius,
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uigradient", {
+		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
+		Rotation = 90,
+		Transparency = NumberSequence.new(0, 0.1),
+	}))
+	local _exp_1 = React.createElement(Outline, {
+		cornerRadius = cornerRadius,
+		innerTransparency = if isDisabled then 1 else 0,
+		innerColor = color,
+		innerThickness = 1,
+		theme = theme,
+	})
+	local _attributes = {
+		key = "mainText",
+		size = UDim2.new(1, 0, 1, 0),
+		text = text,
+	}
+	local _condition_1 = textScaled
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	_attributes.textScaled = _condition_1
+	_attributes.textColor = textColor
+	_attributes.textXAlignment = "Center"
+	_attributes.textYAlignment = "Center"
+	_attributes.layoutOrder = 2
+	local _condition_2 = padding
+	if _condition_2 == nil then
+		_condition_2 = 1
+	end
+	_attributes.padding = _condition_2
+	_attributes.textSize = textSize
+	_attributes.rem = rem
+	return React.createElement(ReactiveButton, {
+		onClick = onClick,
+		onHover = function(hovered)
+			hoverMotion:spring(if hovered then 1 else 0)
+			local _result = onHover
+			if _result ~= nil then
+				_result(hovered)
+			end
+		end,
+		backgroundTransparency = 1,
+		anchorPoint = anchorPoint,
+		size = size or UDim2.new(0, rem(10), 0, rem(4)),
+		position = position,
+		layoutOrder = layoutOrder,
+		fill = true,
+		theme = theme,
+	}, _exp, _exp_1, React.createElement(Text, _attributes), children)
+end
+return {
+	TextButton = TextButton,
+	TextButtonVariant = TextButtonVariant,
+}

package/dist/TimeAgo.d.ts

@@ -0,0 +1,8 @@
+import { type TextProps } from "@rbxts-ui/primitives";
+interface TimeAgoProps extends Omit<TextProps, "text"> {
+    timestamp: number;
+    refreshInterval?: number;
+}
+export declare function TimeAgo(props: TimeAgoProps): JSX.Element;
+export type { TimeAgoProps };
+//# sourceMappingURL=TimeAgo.d.ts.map

package/dist/TimeAgo.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Object = TS.import(script, TS.getModule(script, "@rbxts", "object-utils"))
+local useInterval = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useInterval
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local omit = TS.import(script, TS.getModule(script, "@rbxts-ui", "utils").dist).omit
+local PillText = TS.import(script, script.Parent, "PillText").PillText
+local function getTimeAgo(timestamp)
+	local now = os.time()
+	local seconds = now - timestamp / 1000
+	if seconds < 60 then
+		return `{math.floor(seconds)}s ago`
+	end
+	local minutes = math.floor(seconds / 60)
+	if minutes < 60 then
+		return `{minutes}m ago`
+	end
+	local hours = math.floor(minutes / 60)
+	if hours < 24 then
+		return `{hours}h ago`
+	end
+	local days = math.floor(hours / 24)
+	return `{days}d ago`
+end
+local function TimeAgo(props)
+	local timeAgo, setTimeAgo = useState(function()
+		return getTimeAgo(props.timestamp)
+	end)
+	local _exp = function()
+		setTimeAgo(getTimeAgo(props.timestamp))
+	end
+	local _condition = props.refreshInterval
+	if _condition == nil then
+		_condition = 1
+	end
+	useInterval(_exp, _condition)
+	local textProps = Object.assign({}, omit(props, { "timestamp", "refreshInterval" }))
+	local _attributes = table.clone(Object.assign({
+		text = timeAgo,
+	}, textProps))
+	setmetatable(_attributes, nil)
+	return React.createElement(PillText, _attributes)
+end
+return {
+	TimeAgo = TimeAgo,
+}

package/dist/index.d.ts

@@ -4,4 +4,30 @@ export { Checkmark, type CheckmarkProps } from "./Checkmark";
 export { DelayRender, type DelayRenderProps } from "./DelayRender";
 export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary";
 export { TextField, type TextFieldProps } from "./TextField";
+export { defaultTheme, type Theme } from "./theme";
+export { Outline, type OutlineProps } from "./Outline";
+export { Button, type ButtonProps } from "./Button";
+export { ReactiveButton, type ReactiveButtonProps } from "./ReactiveButton";
+export { ClickOutsideOverlay, ClickOutsideLayer, type ClickOutsideOverlayProps, type ClickOutsideLayerProps } from "./ClickOutsideOverlay";
+export { useInputDevice, type InputDevice } from "./use-input-device";
+export { useButtonState, type ButtonEvents } from "./use-button-state";
+export { useButtonAnimation, type ButtonAnimation } from "./use-button-animation";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export { Radio, type RadioProps } from "./Radio";
+export { PrimaryButton, type PrimaryButtonProps } from "./PrimaryButton";
+export { TextButton, TextButtonVariant, type TextButtonProps } from "./TextButton";
+export { IconRoundButton, type IconRoundButtonProps } from "./IconRoundButton";
+export { IconTileButton, type IconTileButtonProps } from "./IconTileButton";
+export { FormRow, type FormRowProps } from "./FormRow";
+export { CheckboxRow, type CheckboxRowProps } from "./CheckboxRow";
+export { RadioRow, type RadioRowProps } from "./RadioRow";
+export { SegmentedToggle, type SegmentedToggleProps, type SegmentedToggleOption } from "./SegmentedToggle";
+export { Section, type SectionProps } from "./Section";
+export { Accordion, type AccordionProps } from "./Accordion";
+export { Dropdown, type DropdownProps, type DropdownOption } from "./Dropdown";
+export { DropdownButton, type DropdownButtonProps } from "./DropdownButton";
+export { DropdownOptionButton, type DropdownOptionButtonProps } from "./DropdownOptionButton";
+export { TimeAgo, type TimeAgoProps } from "./TimeAgo";
+export { Legend, type LegendProps } from "./Legend";
+export { PillText, type PillTextProps } from "./PillText";
 //# sourceMappingURL=index.d.ts.map

package/dist/init.luau

@@ -7,4 +7,41 @@ exports.Checkmark = TS.import(script, script, "Checkmark").Checkmark
 exports.DelayRender = TS.import(script, script, "DelayRender").DelayRender
 exports.ErrorBoundary = TS.import(script, script, "ErrorBoundary").ErrorBoundary
 exports.TextField = TS.import(script, script, "TextField").TextField
+-- Theme
+exports.defaultTheme = TS.import(script, script, "theme").defaultTheme
+-- Utilities
+exports.Outline = TS.import(script, script, "Outline").Outline
+exports.Button = TS.import(script, script, "Button").Button
+exports.ReactiveButton = TS.import(script, script, "ReactiveButton").ReactiveButton
+local _ClickOutsideOverlay = TS.import(script, script, "ClickOutsideOverlay")
+exports.ClickOutsideOverlay = _ClickOutsideOverlay.ClickOutsideOverlay
+exports.ClickOutsideLayer = _ClickOutsideOverlay.ClickOutsideLayer
+exports.useInputDevice = TS.import(script, script, "use-input-device").useInputDevice
+exports.useButtonState = TS.import(script, script, "use-button-state").useButtonState
+exports.useButtonAnimation = TS.import(script, script, "use-button-animation").useButtonAnimation
+-- Form Inputs
+exports.Checkbox = TS.import(script, script, "Checkbox").Checkbox
+exports.Radio = TS.import(script, script, "Radio").Radio
+-- Buttons
+exports.PrimaryButton = TS.import(script, script, "PrimaryButton").PrimaryButton
+local _TextButton = TS.import(script, script, "TextButton")
+exports.TextButton = _TextButton.TextButton
+exports.TextButtonVariant = _TextButton.TextButtonVariant
+exports.IconRoundButton = TS.import(script, script, "IconRoundButton").IconRoundButton
+exports.IconTileButton = TS.import(script, script, "IconTileButton").IconTileButton
+-- Form Layout
+exports.FormRow = TS.import(script, script, "FormRow").FormRow
+exports.CheckboxRow = TS.import(script, script, "CheckboxRow").CheckboxRow
+exports.RadioRow = TS.import(script, script, "RadioRow").RadioRow
+exports.SegmentedToggle = TS.import(script, script, "SegmentedToggle").SegmentedToggle
+exports.Section = TS.import(script, script, "Section").Section
+exports.Accordion = TS.import(script, script, "Accordion").Accordion
+-- Dropdown
+exports.Dropdown = TS.import(script, script, "Dropdown").Dropdown
+exports.DropdownButton = TS.import(script, script, "DropdownButton").DropdownButton
+exports.DropdownOptionButton = TS.import(script, script, "DropdownOptionButton").DropdownOptionButton
+-- Display
+exports.TimeAgo = TS.import(script, script, "TimeAgo").TimeAgo
+exports.Legend = TS.import(script, script, "Legend").Legend
+exports.PillText = TS.import(script, script, "PillText").PillText
 return exports

package/dist/theme.d.ts

@@ -0,0 +1,41 @@
+import { SpringOptions } from "@rbxts/ripple";
+export interface Theme {
+    palette: {
+        white: Color3;
+        offwhite: Color3;
+        black: Color3;
+        darkgray: Color3;
+        crust: Color3;
+        overlay0: Color3;
+        disabled: Color3;
+        blue: Color3;
+        green: Color3;
+        red: Color3;
+        yellow: Color3;
+        blueishColor: Color3;
+        text: Color3;
+        surface1: Color3;
+    };
+    fonts: {
+        inter: {
+            regular: Font;
+            medium: Font;
+            bold: Font;
+        };
+        roboto: {
+            light: Font;
+            regular: Font;
+            medium: Font;
+            bold: Font;
+        };
+    };
+    springs: {
+        slow: SpringOptions;
+        bubbly: SpringOptions;
+        responsive: SpringOptions;
+        gentle: SpringOptions;
+        world: SpringOptions;
+    };
+}
+export declare const defaultTheme: Theme;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.luau

@@ -0,0 +1,58 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local config = TS.import(script, TS.getModule(script, "@rbxts", "ripple").src).config
+local defaultPalette = {
+	white = Color3.fromRGB(255, 255, 255),
+	offwhite = Color3.fromRGB(234, 238, 253),
+	black = Color3.fromRGB(0, 0, 0),
+	darkgray = Color3.fromRGB(69, 69, 79),
+	crust = Color3.fromRGB(17, 17, 27),
+	overlay0 = Color3.fromRGB(108, 112, 134),
+	disabled = Color3.fromRGB(108, 112, 134),
+	blue = Color3.fromRGB(137, 180, 250),
+	green = Color3.fromRGB(166, 227, 161),
+	red = Color3.fromRGB(243, 139, 168),
+	yellow = Color3.fromRGB(249, 226, 175),
+	blueishColor = Color3.fromRGB(0, 204, 255),
+	text = Color3.fromRGB(205, 214, 244),
+	surface1 = Color3.fromRGB(69, 71, 90),
+}
+local defaultFonts = {
+	inter = {
+		regular = Font.new("rbxassetid://12187365364"),
+		medium = Font.new("rbxassetid://12187365364", Enum.FontWeight.Medium),
+		bold = Font.new("rbxassetid://12187365364", Enum.FontWeight.Bold),
+	},
+	roboto = {
+		light = Font.fromName("Roboto", Enum.FontWeight.Light),
+		regular = Font.fromName("Roboto", Enum.FontWeight.Regular),
+		medium = Font.fromName("Roboto", Enum.FontWeight.Medium),
+		bold = Font.fromName("Roboto", Enum.FontWeight.Bold),
+	},
+}
+local _object = table.clone(config.spring)
+setmetatable(_object, nil)
+_object.bubbly = {
+	tension = 400,
+	friction = 14,
+}
+_object.responsive = {
+	tension = 400,
+}
+_object.gentle = {
+	tension = 250,
+	friction = 30,
+}
+_object.world = {
+	tension = 180,
+	friction = 30,
+}
+local defaultSprings = _object
+local defaultTheme = {
+	palette = defaultPalette,
+	fonts = defaultFonts,
+	springs = defaultSprings,
+}
+return {
+	defaultTheme = defaultTheme,
+}