@rbxts/react-clean-ui 1.0.5

package/out/Components/Navigation/Menu.d.ts

@@ -0,0 +1,19 @@
+import React, { Component } from "@rbxts/react";
+import { ButtonProps } from "../Input";
+interface MenuItemProps extends ButtonProps {
+    title: string;
+}
+export declare function MenuItem(props: MenuItemProps): React.JSX.Element;
+interface MenuProps {
+    title: string;
+    collapsed?: boolean;
+}
+interface MenuState {
+    collapsed: boolean;
+}
+export declare class Menu extends Component<MenuProps, MenuState> {
+    static Item: typeof MenuItem;
+    state: MenuState;
+    render(): React.ReactNode;
+}
+export {};

package/out/Components/Navigation/Menu.luau

@@ -0,0 +1,91 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local Button = TS.import(script, script.Parent.Parent, "Input").Button
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local Container = _Layout.Container
+local FlexItem = _Layout.FlexItem
+local Group = _Layout.Group
+local HStack = _Layout.HStack
+local Scroller = _Layout.Scroller
+local VStack = _Layout.VStack
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local NavigationContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").NavigationContext
+local function MenuItem(props)
+	local context = React.useContext(NavigationContext)
+	return React.createElement(Button, {
+		text = if not context.collapsed then props.title else nil,
+		icon = props.icon,
+		Event = props.Event,
+		group = true,
+	})
+end
+local Menu
+do
+	local super = Component
+	Menu = setmetatable({}, {
+		__tostring = function()
+			return "Menu"
+		end,
+		__index = super,
+	})
+	Menu.__index = Menu
+	function Menu.new(...)
+		local self = setmetatable({}, Menu)
+		return self:constructor(...) or self
+	end
+	function Menu:constructor(...)
+		super.constructor(self, ...)
+		local _object = {}
+		local _left = "collapsed"
+		local _condition = self.props.collapsed
+		if _condition == nil then
+			_condition = false
+		end
+		_object[_left] = _condition
+		self.state = _object
+	end
+	function Menu:render()
+		return React.createElement(NavigationContext.Provider, {
+			value = {
+				collapsed = self.state.collapsed,
+			},
+		}, React.createElement(Group, nil, React.createElement(VStack, {
+			spacing = "sm",
+		}, React.createElement(Container, {
+			group = true,
+		}, React.createElement(HStack, {
+			valign = "Center",
+		}, React.createElement(Button, {
+			icon = "bars",
+			Event = {
+				Activated = function()
+					self:setState(function(state)
+						return {
+							collapsed = not state.collapsed,
+						}
+					end)
+				end,
+			},
+		}), not self.state.collapsed and React.createElement(Text, {
+			text = self.props.title,
+			variant = "heading",
+		}))), React.createElement(FlexItem, {
+			mode = "Fill",
+		}, React.createElement(Scroller, {
+			height = "100%",
+		}, React.createElement(VStack, {
+			spacing = "sm",
+			HorizontalFlex = Enum.UIFlexAlignment.None,
+		}, self.props.children))))))
+	end
+	Menu.Item = MenuItem
+	Menu = ReactComponent(Menu) or Menu
+end
+return {
+	MenuItem = MenuItem,
+	Menu = Menu,
+}

package/out/Components/Navigation/index.d.ts

@@ -0,0 +1 @@
+export * from './Menu';

package/out/Components/Navigation/init.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "Menu") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/Components/Surface/Box.d.ts

@@ -0,0 +1,7 @@
+import React from "@rbxts/react";
+import { BackgroundElementProps, ShadowElementProps, SizeElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
+export interface BoxProps extends SpacedElementProps, ShadowElementProps, BackgroundElementProps, ZIndexElementProps, SizeElementProps, React.InstanceProps<Frame> {
+    'border-thickness'?: number;
+    'border-color'?: Color3;
+}
+export declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<Frame>>;

package/out/Components/Surface/Box.luau

@@ -0,0 +1,50 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Padding = _Decorator.Padding
+local Corners = _Decorator.Corners
+local BoxShadow = _Decorator.BoxShadow
+local Container = TS.import(script, script.Parent.Parent, "Layout").Container
+local SizeHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SizeHelper
+local Box = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = SizeHelper:GetSize(props, UDim2.fromScale(1, 1))
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	local _condition = props.BackgroundTransparency
+	if _condition == nil then
+		_condition = theme.components.box.backgroundTransparency
+	end
+	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundColor3 = props.BackgroundColor3 or theme.components.box.backgroundColor
+	_attributes.ZIndex = props.ZIndex
+	_attributes.Event = props.Event
+	local _attributes_1 = {}
+	local _condition_1 = props["border-thickness"]
+	if _condition_1 == nil then
+		_condition_1 = theme.components.box.borderThickness
+	end
+	_attributes_1.Thickness = _condition_1
+	_attributes_1.BorderStrokePosition = Enum.BorderStrokePosition.Inner
+	_attributes_1.Color = props["border-color"] or theme.components.box.borderColor
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(props)
+	setmetatable(_attributes_2, nil)
+	_attributes_2.value = theme.components.box.boxShadow
+	local _exp_1 = React.createElement(BoxShadow, _attributes_2)
+	local _attributes_3 = table.clone(props)
+	setmetatable(_attributes_3, nil)
+	return React.createElement(Container, _attributes, _exp, _exp_1, React.createElement(Padding, _attributes_3), React.createElement(Corners, {
+		radius = theme.components.box.cornerRadius,
+	}), props.children)
+end)
+return {
+	Box = Box,
+}

package/out/Components/Surface/Card.d.ts

@@ -0,0 +1,25 @@
+import React, { Component } from "@rbxts/react";
+import { BoxProps } from "./Box";
+import { CleanThemeContext } from "../../Contexts";
+import { IntentElementProps } from "../../Interfaces";
+interface CardHeaderProps extends IntentElementProps {
+    children?: React.ReactNode;
+}
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<Frame>>;
+interface CardBodyProps extends BoxProps {
+}
+export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<Frame>>;
+interface CardFooterProps extends BoxProps, IntentElementProps {
+}
+export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
+interface CardProps extends BoxProps, IntentElementProps {
+}
+export declare class Card extends Component<CardProps> {
+    static Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<Frame>>;
+    static Footer: React.ForwardRefExoticComponent<Omit<CardFooterProps, "ref"> & React.RefAttributes<Frame>>;
+    static Body: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<Frame>>;
+    static contextType: React.Context<import("../..").CleanTheme>;
+    context: React.ContextType<typeof CleanThemeContext>;
+    render(): React.JSX.Element;
+}
+export {};

package/out/Components/Surface/Card.luau

@@ -0,0 +1,138 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local Box = TS.import(script, script.Parent, "Box").Box
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local Container = _Layout.Container
+local FlexItem = _Layout.FlexItem
+local VStack = _Layout.VStack
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local Padding = TS.import(script, script.Parent.Parent, "Decorator").Padding
+local CardContext = React.createContext({})
+local CardHeader = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local card = React.useContext(CardContext)
+	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.header.intents)
+	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.header.spacing))
+	local corners = CssHelper:parseCssSize(theme.components.card.cornerRadius)
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = intent.backgroundTransparency
+	_attributes.BackgroundColor3 = intent.backgroundColor
+	_attributes.BorderSizePixel = 0
+	return React.createElement(Container, _attributes, React.createElement(Padding, {
+		resolvedPadding = padding,
+	}), React.createElement("uistroke", {
+		Thickness = 1,
+		Color = intent.borderColor,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+	}), React.createElement("uicorner", {
+		TopLeftRadius = corners,
+		TopRightRadius = corners,
+		BottomLeftRadius = UDim.new(0, 0),
+		BottomRightRadius = UDim.new(0, 0),
+	}), props.children)
+end)
+local CardBody = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.header.spacing))
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	return React.createElement(FlexItem, nil, React.createElement(Container, _attributes, React.createElement(Padding, {
+		resolvedPadding = padding,
+	}), props.children))
+end)
+local CardFooter = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local card = React.useContext(CardContext)
+	local intent = ColorHelper:getIntentColors(theme, props.intent or card.intent or "primary", "default", theme.components.card.footer.intents)
+	local padding = SpacingHelper:ResolveNumberPadding(SpacingHelper:GetPadding(theme, "md", theme.components.card.footer.spacing))
+	local corners = CssHelper:parseCssSize(theme.components.card.cornerRadius)
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	_attributes.BackgroundTransparency = intent.backgroundTransparency
+	_attributes.BackgroundColor3 = intent.backgroundColor
+	_attributes.BorderSizePixel = 0
+	return React.createElement(Container, _attributes, React.createElement(Padding, {
+		resolvedPadding = padding,
+	}), React.createElement("uistroke", {
+		Thickness = 1,
+		Color = intent.borderColor,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+	}), React.createElement("uicorner", {
+		TopLeftRadius = UDim.new(0, 0),
+		TopRightRadius = UDim.new(0, 0),
+		BottomLeftRadius = corners,
+		BottomRightRadius = corners,
+	}), props.children)
+end)
+local Card
+do
+	local super = Component
+	Card = setmetatable({}, {
+		__tostring = function()
+			return "Card"
+		end,
+		__index = super,
+	})
+	Card.__index = Card
+	function Card.new(...)
+		local self = setmetatable({}, Card)
+		return self:constructor(...) or self
+	end
+	function Card:constructor(...)
+		super.constructor(self, ...)
+	end
+	function Card:render()
+		local contextValue = {
+			intent = self.props.intent,
+		}
+		local intent = ColorHelper:getIntentColors(self.context, self.props.intent or "primary", "default", self.context.components.card.header.intents)
+		local _attributes = table.clone(self.props)
+		setmetatable(_attributes, nil)
+		_attributes.ref = self.props.ref
+		_attributes.spacing = "None"
+		_attributes["border-color"] = intent.borderColor
+		return React.createElement(CardContext.Provider, {
+			value = contextValue,
+		}, React.createElement(Box, _attributes, React.createElement(VStack, {
+			spacing = "None",
+		}, self.props.children)))
+	end
+	Card.Header = CardHeader
+	Card.Footer = CardFooter
+	Card.Body = CardBody
+	Card.contextType = CleanThemeContext
+	Card = ReactComponent(Card) or Card
+end
+return {
+	CardHeader = CardHeader,
+	CardBody = CardBody,
+	CardFooter = CardFooter,
+	Card = Card,
+}

package/out/Components/Surface/Icon.d.ts

@@ -0,0 +1,10 @@
+import React, { Binding } from "@rbxts/react";
+import { IconElementProps, ScalableElementProps } from "../../Interfaces/";
+export interface IconProps extends IconElementProps, ScalableElementProps {
+    color?: Color3;
+    Size?: UDim2;
+    spinning?: boolean;
+    speed?: number;
+    Rotation?: number | Binding<number>;
+}
+export declare function Icon(props: IconProps): React.JSX.Element;

package/out/Components/Surface/Icon.luau

@@ -0,0 +1,64 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTween = TS.import(script, TS.getModule(script, "@rbxts", "react-ripple").src).useTween
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local DefaultIconSet = TS.import(script, script.Parent.Parent.Parent, "Theme").DefaultIconSet
+local Icon
+local function SpinningIcon(props)
+	local _object = {}
+	local _left = "duration"
+	local _condition = props.speed
+	if _condition == nil then
+		_condition = 1
+	end
+	_object[_left] = _condition
+	_object.easing = "linear"
+	_object.repeats = math.huge
+	local rotation, tween = useTween(0, _object)
+	React.useEffect(function()
+		tween:setGoal(360)
+		tween:start()
+	end)
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		Size = UDim2.fromOffset(0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+	}, React.createElement(Icon, {
+		Size = props.Size,
+		color = props.color,
+		icon = props.icon,
+		scale = props.scale,
+		Rotation = rotation,
+	}))
+end
+function Icon(props)
+	local theme = React.useContext(CleanThemeContext)
+	local _result
+	if props.icon == nil then
+		_result = nil
+	else
+		local _condition = theme.icons[props.icon]
+		if _condition == nil then
+			_condition = DefaultIconSet[props.icon]
+		end
+		_result = _condition
+	end
+	local iconId = _result
+	local size = theme.iconSize[props.scale or theme.default.scale]
+	if props.spinning then
+		local _attributes = table.clone(props)
+		setmetatable(_attributes, nil)
+		return React.createElement(SpinningIcon, _attributes)
+	end
+	return React.createElement("imagelabel", {
+		Rotation = props.Rotation,
+		Size = props.Size or UDim2.fromOffset(size, size),
+		Image = if iconId == nil then nil else `rbxassetid://{iconId}`,
+		BackgroundTransparency = 1,
+		ImageColor3 = props.color or theme.colors.intents.primary.default.textColor,
+	})
+end
+return {
+	Icon = Icon,
+}

package/out/Components/Surface/Panel.d.ts

@@ -0,0 +1,4 @@
+import React, { Component } from "@rbxts/react";
+export declare class Panel extends Component {
+    render(): React.ReactNode;
+}

package/out/Components/Surface/Panel.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local Box = TS.import(script, script.Parent, "Box").Box
+local VStack = TS.import(script, script.Parent.Parent, "Layout", "VStack").VStack
+local Panel
+do
+	local super = Component
+	Panel = setmetatable({}, {
+		__tostring = function()
+			return "Panel"
+		end,
+		__index = super,
+	})
+	Panel.__index = Panel
+	function Panel.new(...)
+		local self = setmetatable({}, Panel)
+		return self:constructor(...) or self
+	end
+	function Panel:constructor(...)
+		super.constructor(self, ...)
+	end
+	function Panel:render()
+		return React.createElement(Box, nil, React.createElement(VStack))
+	end
+	Panel = ReactComponent(Panel) or Panel
+end
+return {
+	Panel = Panel,
+}

package/out/Components/Surface/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Box';
+export * from './Card';
+export * from './Icon';
+export * from './Panel';

package/out/Components/Surface/init.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "Box") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Card") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Icon") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Panel") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/Components/Typography/Text.d.ts

@@ -0,0 +1,18 @@
+import React, { Component } from "@rbxts/react";
+import { CleanThemeContext } from "../../Contexts";
+import { TypographyStyle } from "../../Theme";
+import { TextVariant } from "../../Interfaces/";
+interface TextProps extends React.InstanceProps<TextLabel> {
+    text: string;
+    variant?: TextVariant;
+    typography?: TypographyStyle;
+    weight?: Enum.FontWeight | "bold";
+    align?: "Left" | "Right" | "Center";
+    TextWrap?: boolean;
+}
+export declare class Text extends Component<TextProps> {
+    static contextType: React.Context<import("../../Theme").CleanTheme>;
+    context: React.ContextType<typeof CleanThemeContext>;
+    render(): React.ReactNode;
+}
+export {};

package/out/Components/Typography/Text.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local Text
+do
+	local super = Component
+	Text = setmetatable({}, {
+		__tostring = function()
+			return "Text"
+		end,
+		__index = super,
+	})
+	Text.__index = Text
+	function Text.new(...)
+		local self = setmetatable({}, Text)
+		return self:constructor(...) or self
+	end
+	function Text:constructor(...)
+		super.constructor(self, ...)
+	end
+	function Text:render()
+		local style = self.props.typography or self.context.typography[self.props.variant or "body"]
+		local weight = if self.props.weight == "bold" then Enum.FontWeight.Bold else self.props.weight or style.weight or Enum.FontWeight.Regular
+		return React.createElement("textlabel", {
+			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			LineHeight = style.lineHeight,
+			BackgroundTransparency = 1,
+			TextXAlignment = self.props.align or (self.props.TextXAlignment or Enum.TextXAlignment.Left),
+			TextColor3 = self.props.TextColor3 or self.context.colors.intents.primary.default.textColor,
+			Text = self.props.text,
+			TextWrap = self.props.TextWrap == nil or self.props.TextWrap == true,
+			FontFace = Font.fromName(style.font.Name, weight),
+			FontSize = style.size,
+			RichText = true,
+			TextScaled = false,
+		}, self.props.children)
+	end
+	Text.contextType = CleanThemeContext
+	Text = ReactComponent(Text) or Text
+end
+return {
+	Text = Text,
+}

package/out/Components/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/out/Components/Typography/init.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "Text") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/Components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Decorator/BoxShadow';
+export * from './Decorator/Corners';
+export * from './Decorator/Padding';
+export * from './Surface/';
+export * from './Layout/';
+export * from './Input/';
+export * from './Typography/Text';
+export * from './Navigation/Menu';

package/out/Components/init.luau

@@ -0,0 +1,28 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "Decorator", "BoxShadow") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Decorator", "Corners") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Decorator", "Padding") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Surface") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Layout") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Input") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Typography", "Text") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "Navigation", "Menu") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/Contexts/draggable.context.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+export interface DraggableContextValue {
+    isDragging: boolean;
+    beginDrag: (input: InputObject, handle: GuiObject) => void;
+    updateDrag: (input: InputObject) => void;
+    endDrag: (input: InputObject) => void;
+}
+export declare const DraggableContext: React.Context<DraggableContextValue | undefined>;

package/out/Contexts/draggable.context.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local DraggableContext = React.createContext(nil)
+return {
+	DraggableContext = DraggableContext,
+}

package/out/Contexts/droppable.context.d.ts

@@ -0,0 +1,6 @@
+import React from "@rbxts/react";
+import { DroppableRegistration } from "../Providers";
+export interface DroppableContextValue {
+    registration?: DroppableRegistration;
+}
+export declare const DroppableContext: React.Context<DroppableContextValue | undefined>;

package/out/Contexts/droppable.context.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local DroppableContext = React.createContext(nil)
+return {
+	DroppableContext = DroppableContext,
+}

package/out/Contexts/index.d.ts

@@ -0,0 +1,6 @@
+export * from './draggable.context';
+export * from './droppable.context';
+export * from './navigation.context';
+export * from './overlay.context';
+export * from './row.context';
+export * from './theme.context';

package/out/Contexts/init.luau

@@ -0,0 +1,22 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "draggable.context") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "droppable.context") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "navigation.context") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "overlay.context") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "row.context") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "theme.context") or {} do
+	exports[_k] = _v
+end
+return exports