@rbxts-ui/components 2.1.0 → 3.1.0

package/dist/form/RoundEmoji.luau

@@ -0,0 +1,40 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Group = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Group
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local function RoundEmoji(_param)
+	local emoji = _param.emoji
+	local primary = _param.primary
+	local height = _param.height
+	if height == nil then
+		height = 4
+	end
+	local rem = useRem()
+	local fullRound = UDim.new(1, 0)
+	local CIRCLE_SIZE = height
+	local EMOJI_SIZE = CIRCLE_SIZE / 1.5
+	return React.createElement(Group, {
+		size = UDim2.new(0, rem(CIRCLE_SIZE), 0, rem(CIRCLE_SIZE)),
+	}, React.createElement(Frame, {
+		backgroundColor = primary,
+		backgroundTransparency = 0.8,
+		cornerRadius = fullRound,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(1, 0, 1, 0),
+	}), React.createElement(Text, {
+		text = emoji,
+		textScaled = true,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(0, rem(EMOJI_SIZE), 0, rem(EMOJI_SIZE)),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+	}))
+end
+return {
+	RoundEmoji = RoundEmoji,
+}

package/dist/form/TextBox.d.ts

@@ -0,0 +1,24 @@
+import { FrameProps } from "@rbxts-ui/primitives";
+import React from "@rbxts/react";
+export interface TextBoxProps<T extends Instance = TextBox> extends FrameProps<T> {
+    font?: Font;
+    text?: string | React.Binding<string>;
+    textColor?: Color3 | React.Binding<Color3>;
+    textSize?: number | React.Binding<number>;
+    textTransparency?: number | React.Binding<number>;
+    textWrapped?: boolean | React.Binding<boolean>;
+    textXAlignment?: React.InferEnumNames<Enum.TextXAlignment>;
+    textYAlignment?: React.InferEnumNames<Enum.TextYAlignment>;
+    textTruncate?: React.InferEnumNames<Enum.TextTruncate>;
+    textScaled?: boolean | React.Binding<boolean>;
+    textHeight?: number | React.Binding<number>;
+    textAutoResize?: "X" | "Y" | "XY";
+    richText?: boolean | React.Binding<boolean>;
+    maxVisibleGraphemes?: number | React.Binding<number>;
+    lineHeight?: number | React.Binding<number>;
+    clearTextOnFocus?: boolean;
+    placeholderText?: string;
+    textEditable?: boolean | React.Binding<boolean>;
+}
+export declare const TextBox: React.ForwardRefExoticComponent<Omit<TextBoxProps<TextBox>, "ref"> & React.RefAttributes<TextBox>>;
+//# sourceMappingURL=TextBox.d.ts.map

package/dist/form/TextBox.luau

@@ -0,0 +1,57 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local fonts = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).fonts
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local TextBox = forwardRef(function(props, ref)
+	local rem = useRem()
+	local _attributes = {
+		ref = ref,
+		Font = Enum.Font.Arial,
+		FontFace = props.font or fonts.inter.regular,
+		Text = props.text,
+		TextColor3 = props.textColor,
+	}
+	local _condition = props.textSize
+	if _condition == nil then
+		_condition = rem(1)
+	end
+	_attributes.TextSize = _condition
+	_attributes.TextTransparency = props.textTransparency
+	_attributes.TextWrapped = props.textWrapped
+	_attributes.TextXAlignment = props.textXAlignment
+	_attributes.TextYAlignment = props.textYAlignment
+	_attributes.TextTruncate = props.textTruncate
+	_attributes.TextScaled = props.textScaled
+	_attributes.LineHeight = props.lineHeight
+	_attributes.RichText = props.richText
+	_attributes.MaxVisibleGraphemes = props.maxVisibleGraphemes
+	_attributes.Size = props.size
+	_attributes.AutomaticSize = props.textAutoResize or props.automaticSize
+	_attributes.Position = props.position
+	_attributes.AnchorPoint = props.anchorPoint
+	_attributes.BackgroundColor3 = props.backgroundColor
+	local _condition_1 = props.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 1
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.ClipsDescendants = props.clipsDescendants
+	_attributes.Visible = props.visible
+	_attributes.ZIndex = props.zIndex
+	_attributes.LayoutOrder = props.layoutOrder
+	_attributes.Change = props.change
+	_attributes.Event = props.event
+	_attributes.Rotation = props.rotation
+	_attributes.ClearTextOnFocus = props.clearTextOnFocus
+	_attributes.PlaceholderText = props.placeholderText
+	_attributes.TextEditable = props.textEditable
+	return React.createElement("textbox", _attributes, props.children, props.cornerRadius and React.createElement("uicorner", {
+		CornerRadius = props.cornerRadius,
+	}))
+end)
+return {
+	TextBox = TextBox,
+}

package/dist/{TextField.d.ts → form/TextField.d.ts}

@@ -8,5 +8,5 @@ export interface TextFieldProps extends TextProps<TextBox> {
     multiLine?: boolean | React.Binding<boolean>;
     textEditable?: boolean | React.Binding<boolean>;
 }
-export declare function TextField(props: TextFieldProps): JSX.Element;
+export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextBox>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/{TextField.luau → form/TextField.luau}

@@ -2,12 +2,13 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local forwardRef = _react.forwardRef
 local useEffect = _react.useEffect
 local useState = _react.useState
 local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
 local fonts = _primitives.fonts
 local Group = _primitives.Group
-local function TextField(props)
+local TextField = forwardRef(function(props, ref)
 	local childRef, setChildRef = useState(nil)
 	useEffect(function()
 		local _condition = childRef
@@ -27,6 +28,7 @@ local function TextField(props)
 		end
 	end, { childRef, props.text })
 	local _attributes = {
+		ref = ref,
 		PlaceholderText = props.placeholderText,
 		PlaceholderColor3 = props.placeholderColor,
 		ClearTextOnFocus = props.clearTextOnFocus,
@@ -65,7 +67,7 @@ local function TextField(props)
 	}), React.createElement(Group, {
 		ref = setChildRef,
 	}))
-end
+end)
 return {
 	TextField = TextField,
 }

package/dist/form/validation.d.ts

@@ -0,0 +1,13 @@
+export declare function validateAngle(val: string): "Please enter a valid number" | "Angle must be greater than 0" | "Angle must be less than 180" | undefined;
+export declare function validatePosNumber(val: string): "Please enter a valid number" | "Number must be greater than 0" | undefined;
+export declare function validateNumber(val: string): "Please enter a valid number" | undefined;
+/**
+ * Validates that a number is within specified bounds
+ * @param val - String value to validate
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param customErrorMsg - Optional custom error message for bounds error
+ * @returns Error message or undefined if valid
+ */
+export declare function validateNumberBounds(val: string, min: number, max: number, customErrorMsg?: string): string | undefined;
+//# sourceMappingURL=validation.d.ts.map

package/dist/form/validation.luau

@@ -0,0 +1,80 @@
+-- Compiled with roblox-ts v3.0.0
+local function validateAngle(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local angle = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if angle < 0 then
+		return "Angle must be greater than 0"
+	end
+	if angle > 180 then
+		return "Angle must be less than 180"
+	end
+	return nil
+end
+local function validatePosNumber(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if number < 0 then
+		return "Number must be greater than 0"
+	end
+	return nil
+end
+local function validateNumber(val)
+	local valParsed = tonumber(val)
+	if not (valParsed ~= 0 and valParsed == valParsed and valParsed) and valParsed ~= 0 then
+		return "Please enter a valid number"
+	end
+	return nil
+end
+--[[
+	*
+	 * Validates that a number is within specified bounds
+	 * @param val - String value to validate
+	 * @param min - Minimum allowed value
+	 * @param max - Maximum allowed value
+	 * @param customErrorMsg - Optional custom error message for bounds error
+	 * @returns Error message or undefined if valid
+	 
+]]
+local function validateNumberBounds(val, min, max, customErrorMsg)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	local _condition_1 = not (_value ~= 0 and _value == _value and _value)
+	if _condition_1 then
+		_condition_1 = number ~= 0
+	end
+	if _condition_1 then
+		return "Please enter a valid number"
+	end
+	if number < min or number > max then
+		local _condition_2 = customErrorMsg
+		if _condition_2 == nil then
+			_condition_2 = `Number must be between {min} and {max}`
+		end
+		return _condition_2
+	end
+	return nil
+end
+return {
+	validateAngle = validateAngle,
+	validatePosNumber = validatePosNumber,
+	validateNumber = validateNumber,
+	validateNumberBounds = validateNumberBounds,
+}

package/dist/{use-button-animation.d.ts → hooks/use-button-animation.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 export interface ButtonAnimation {
     /**
      * An underdamped spring. `-1` is fully hovered, `0` is neutral, and `1` is
@@ -31,8 +30,7 @@ export interface ButtonAnimation {
  *
  * @param pressedState Whether the button is pressed.
  * @param hoveredState Whether the button is hovered.
- * @param theme Optional theme for spring configs.
  * @returns A `ButtonAnimation` object.
  */
-export declare function useButtonAnimation(pressedState: boolean, hoveredState: boolean, theme?: Theme): ButtonAnimation;
+export declare function useButtonAnimation(pressedState: boolean, hoveredState: boolean): ButtonAnimation;
 //# sourceMappingURL=use-button-animation.d.ts.map

package/dist/{use-button-animation.luau → hooks/use-button-animation.luau}

@@ -4,7 +4,7 @@ local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pr
 local useMotion = _pretty_react_hooks.useMotion
 local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
 local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 --[[
 	*
 	 * Returns a `ButtonAnimation` object that can be used to animate a button.
@@ -18,14 +18,11 @@ local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
 	 *
 	 * @param pressedState Whether the button is pressed.
 	 * @param hoveredState Whether the button is hovered.
-	 * @param theme Optional theme for spring configs.
 	 * @returns A `ButtonAnimation` object.
 	 
 ]]
-local function useButtonAnimation(pressedState, hoveredState, theme)
-	if theme == nil then
-		theme = defaultTheme
-	end
+local function useButtonAnimation(pressedState, hoveredState)
+	local theme = defaultTheme
 	local press, pressMotion = useMotion(0)
 	local hover, hoverMotion = useMotion(0)
 	local hoverExclusive, hoverExclusiveMotion = useMotion(0)

package/dist/icons/InfoIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+interface InfoIconProps {
+    tooltipText: string;
+    portalRef?: React.MutableRefObject<Frame | undefined>;
+}
+export declare function InfoIcon({ tooltipText, portalRef }: InfoIconProps): JSX.Element;
+export {};
+//# sourceMappingURL=InfoIcon.d.ts.map

package/dist/icons/InfoIcon.luau

@@ -0,0 +1,80 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
+local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
+local Tooltip = TS.import(script, script.Parent.Parent, "tooltip", "Tooltip").Tooltip
+local function InfoIcon(_param)
+	local tooltipText = _param.tooltipText
+	local portalRef = _param.portalRef
+	local rem = useRem()
+	local showTooltip, setShowTooltip = useState(false)
+	local iconRef = useRef()
+	local tooltipPos, setTooltipPos = useState()
+	local iconWidth = rem(4)
+	useEffect(function()
+		if showTooltip and iconRef.current then
+			local absPos = iconRef.current.AbsolutePosition
+			local absSize = iconRef.current.AbsoluteSize
+			local centerPos = UDim2.fromOffset(absPos.X + absSize.X / 2, absPos.Y + absSize.Y / 2)
+			setTooltipPos(centerPos)
+		end
+	end, { showTooltip })
+	local _exp = React.createElement(ReactiveButton, {
+		size = UDim2.new(1, 0, 1, 0),
+		position = UDim2.new(0, 0, 0, 0),
+		onMouseEnter = function()
+			return setShowTooltip(true)
+		end,
+		onMouseLeave = function()
+			return setShowTooltip(false)
+		end,
+		backgroundColor = defaultTheme.palette.overlay0,
+		backgroundTransparency = 0.5,
+		cornerRadius = UDim.new(0.5, 0),
+	}, React.createElement(Text, {
+		text = "?",
+		textSize = rem(3),
+		textScaled = true,
+		textColor = defaultTheme.palette.white,
+		size = UDim2.new(1, 0, 1, 0),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+	}))
+	local _condition = showTooltip
+	if _condition then
+		local _result = portalRef
+		if _result ~= nil then
+			_result = _result.current
+		end
+		_condition = _result
+		if _condition then
+			_condition = createPortal(React.createElement(Tooltip, {
+				text = tooltipText,
+				visible = true,
+				position = tooltipPos,
+				offsetX = rem(4),
+				offsetY = rem(-4),
+				maxWidth = 40,
+				anchorPoint = Vector2.new(1, 1),
+			}), portalRef.current)
+		end
+	end
+	return React.createElement(Frame, {
+		size = UDim2.new(0, iconWidth, 0, iconWidth),
+		backgroundTransparency = 1,
+		ref = iconRef,
+	}, _exp, _condition)
+end
+return {
+	InfoIcon = InfoIcon,
+}

package/dist/icons/WarningIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+interface WarningIconProps {
+    tooltipText?: string;
+    portalRef?: React.MutableRefObject<Frame | undefined>;
+}
+export declare function WarningIcon({ tooltipText, portalRef }: WarningIconProps): JSX.Element;
+export {};
+//# sourceMappingURL=WarningIcon.d.ts.map

package/dist/icons/WarningIcon.luau

@@ -0,0 +1,85 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Text = _primitives.Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
+local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
+local Tooltip = TS.import(script, script.Parent.Parent, "tooltip", "Tooltip").Tooltip
+local function WarningIcon(_param)
+	local tooltipText = _param.tooltipText
+	local portalRef = _param.portalRef
+	local rem = useRem()
+	local _condition = tooltipText
+	if _condition == nil then
+		_condition = "Warning"
+	end
+	local warningText = _condition
+	local showTooltip, setShowTooltip = useState(false)
+	local iconRef = useRef()
+	local tooltipPos, setTooltipPos = useState()
+	local iconWidth = rem(6)
+	useEffect(function()
+		if showTooltip and iconRef.current then
+			local absPos = iconRef.current.AbsolutePosition
+			local absSize = iconRef.current.AbsoluteSize
+			local centerPos = UDim2.fromOffset(absPos.X + absSize.X / 2, absPos.Y + absSize.Y / 2)
+			setTooltipPos(centerPos)
+		end
+	end, { showTooltip })
+	local _exp = React.createElement(ReactiveButton, {
+		size = UDim2.new(1, 0, 1, 0),
+		position = UDim2.new(0, 0, 0, 0),
+		onMouseEnter = function()
+			return setShowTooltip(true)
+		end,
+		onMouseLeave = function()
+			return setShowTooltip(false)
+		end,
+		backgroundColor = defaultTheme.palette.white,
+		backgroundTransparency = 0.5,
+		cornerRadius = UDim.new(0.5, 0),
+	}, React.createElement(Text, {
+		text = "⚠️",
+		textSize = rem(3),
+		textScaled = true,
+		textColor = defaultTheme.palette.white,
+		size = UDim2.new(1, 0, 1, 0),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+	}))
+	local _condition_1 = showTooltip
+	if _condition_1 then
+		local _result = portalRef
+		if _result ~= nil then
+			_result = _result.current
+		end
+		_condition_1 = _result
+		if _condition_1 then
+			_condition_1 = createPortal(React.createElement(Tooltip, {
+				text = warningText,
+				visible = true,
+				position = tooltipPos,
+				offsetX = rem(4),
+				offsetY = rem(-4),
+				maxWidth = 35,
+				anchorPoint = Vector2.new(1, 1),
+			}), portalRef.current)
+		end
+	end
+	return React.createElement(Frame, {
+		size = UDim2.new(0, iconWidth, 0, iconWidth),
+		backgroundTransparency = 1,
+		ref = iconRef,
+	}, _exp, _condition_1)
+end
+return {
+	WarningIcon = WarningIcon,
+}

package/dist/icons/WarningIcon.story.d.ts

@@ -0,0 +1,16 @@
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+import { InferFusionProps } from "@rbxts/ui-labs";
+declare const controls: {
+    unionPartsCount: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Slider;
+};
+declare const story: {
+    react: typeof React;
+    reactRoblox: typeof ReactRoblox;
+    controls: {
+        unionPartsCount: import("@rbxts/ui-labs/src/ControlTypings/Advanced").AdvancedTypes.Slider;
+    };
+    story: (props: InferFusionProps<typeof controls>) => JSX.Element;
+};
+export = story;
+//# sourceMappingURL=WarningIcon.story.d.ts.map

package/dist/icons/WarningIcon.story.luau

@@ -0,0 +1,60 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local Slider = TS.import(script, TS.getModule(script, "@rbxts", "ui-labs").src).Slider
+local _rem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem"))
+local useRem = _rem.useRem
+local RemProvider = _rem.RemProvider
+local WarningIcon = TS.import(script, script.Parent, "WarningIcon").WarningIcon
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+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, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useRef = TS.import(script, TS.getModule(script, "@rbxts", "react")).useRef
+local StoryComponent = function(props)
+	local rem = useRem()
+	local portalRef = useRef()
+	return React.createElement(RemProvider, {
+		baseRem = 16,
+		maximumRem = 32,
+	}, React.createElement(Frame, {
+		size = UDim2.new(1, 0, 1, 0),
+		backgroundTransparency = 1,
+		ref = portalRef,
+	}, React.createElement(VStack, {
+		size = UDim2.new(1, 0, 1, 0),
+		spacing = rem(4),
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+	}, React.createElement(Text, {
+		text = `Testing WarningIcon with {props.unionPartsCount} union parts`,
+		textSize = rem(4),
+		textColor = defaultTheme.palette.text,
+	}), React.createElement(HStack, {
+		spacing = rem(4),
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+	}, React.createElement(Text, {
+		text = "Warning Icon:",
+		textSize = rem(3),
+		textColor = defaultTheme.palette.text,
+	}), React.createElement(WarningIcon, {
+		tooltipText = `Selection contains {props.unionPartsCount} UnionOperation part(s). You should separate it unless you know what you are doing.`,
+		portalRef = portalRef,
+	})))))
+end
+local controls = {
+	unionPartsCount = Slider(1, 0, 20, 1),
+}
+local story = {
+	react = React,
+	reactRoblox = ReactRoblox,
+	controls = controls,
+	story = function(props)
+		return React.createElement(StoryComponent, {
+			unionPartsCount = props.controls.unionPartsCount,
+		})
+	end,
+}
+return story

package/dist/index.d.ts

@@ -1,33 +1,53 @@
-export { Padding, type PaddingProps } from "./Padding";
-export { Divider, type DividerProps } from "./Divider";
-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";
+export { Checkmark, type CheckmarkProps } from "./display/Checkmark";
+export { ErrorHandler, ErrorPage } from "./error-handler/index";
+export { TextBox, type TextBoxProps } from "./form/TextBox";
+export { TextField, type TextFieldProps } from "./form/TextField";
+export { Divider, type DividerProps } from "./layout/Divider";
+export { Padding, type PaddingProps } from "./layout/Padding";
+export { DelayRender, type DelayRenderProps } from "./utils/DelayRender";
+export { ErrorBoundary, type ErrorBoundaryProps } from "./utils/ErrorBoundary";
+export { Button, type ButtonProps } from "./buttons/Button";
+export { ReactiveButton, type ReactiveButtonProps } from "./buttons/ReactiveButton";
+export { useButtonAnimation, type ButtonAnimation } from "./hooks/use-button-animation";
+export { useButtonState, type ButtonEvents } from "./hooks/use-button-state";
+export { useInputDevice, type InputDevice } from "./hooks/use-input-device";
+export { useTooltip } from "./tooltip/useTooltip";
+export { ClickOutsideLayer, ClickOutsideOverlay, type ClickOutsideLayerProps, type ClickOutsideOverlayProps, } from "./utils/ClickOutsideOverlay";
+export { InputCapture, type InputCaptureProps } from "./utils/InputCapture";
+export { Outline, type OutlineProps } from "./utils/Outline";
+export { Checkbox, type CheckboxProps } from "./form/Checkbox";
+export { Radio, type RadioProps } from "./form/Radio";
+export { IconRoundButton, type IconRoundButtonProps } from "./buttons/IconRoundButton";
+export { IconTileButton, type IconTileButtonProps } from "./buttons/IconTileButton";
+export { PrimaryButton, type PrimaryButtonProps } from "./buttons/PrimaryButton";
+export { TextButton, TextButtonVariant, type TextButtonProps } from "./buttons/TextButton";
+export { CheckboxRow, type CheckboxRowProps } from "./form/CheckboxRow";
+export { DropdownRow, type DropdownRowProps } from "./form/DropdownRow";
+export { FormRow, type FormRowProps } from "./form/FormRow";
+export { InputRow, type InputRowProps } from "./form/InputRow";
+export { RadioRow, type RadioRowProps } from "./form/RadioRow";
+export { Accordion, type AccordionProps } from "./layout/Accordion";
+export { Section, type SectionProps } from "./layout/Section";
+export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from "./layout/SegmentedToggle";
+export { ExampleTable } from "./table/ExampleTable";
+export { Table, type TableProps } from "./table/Table";
+export { TableCell, type TableCellProps } from "./table/TableCell";
+export { TableFooter, type TableFooterProps } from "./table/TableFooter";
+export { TableHeader, type TableHeaderProps } from "./table/TableHeader";
+export { TableRow, type TableRowProps } from "./table/TableRow";
+export { DropdownButton, type DropdownButtonProps } from "./buttons/DropdownButton";
+export { DropdownOptionButton, type DropdownOptionButtonProps } from "./buttons/DropdownOptionButton";
+export { Dropdown, type DropdownOption, type DropdownProps } from "./form/Dropdown";
+export { AlertBox, type AlertBoxVariant } from "./display/AlertBox";
+export { Legend, type LegendProps } from "./display/Legend";
+export { PillText, type PillTextProps } from "./display/PillText";
+export { TimeAgo, type TimeAgoProps } from "./display/TimeAgo";
+export { Tooltip, type TooltipProps } from "./tooltip/Tooltip";
+export { InfoIcon } from "./icons/InfoIcon";
+export { WarningIcon } from "./icons/WarningIcon";
+export { validateAngle, validateNumber, validateNumberBounds, validatePosNumber } from "./form/validation";
+export { InputRound, type InputRoundProps } from "./form/InputRound";
+export { RoundEmoji, type RoundEmojiProps } from "./form/RoundEmoji";
+export { DynamicWindow, type ExtendableFrameProps } from "./DynamicWindow/DynamicWindow";
+export { clampViewportPosition, getInputViewportPos, getMouseViewportPos, resolveWindowSpawnPosition, type Mode, type ResizeCorner, type WindowSpawnOptions, } from "./DynamicWindow/DynamicWindow.utils";
 //# sourceMappingURL=index.d.ts.map