@rbxts/uiblox 0.2.0-alpha.18 → 0.2.0-alpha.2

package/out/ui/packages/skeleton/components/skeletonTone.d.ts

@@ -1,20 +0,0 @@
-interface SkeletonPalette {
-    surface: {
-        canvas: Color3;
-        elevated: Color3;
-    };
-    action: {
-        hover: Color3;
-    };
-    text: {
-        secondary: Color3;
-    };
-}
-/** Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. */
-export declare function skeletonTone(theme: {
-    palette: SkeletonPalette;
-}): {
-    bone: Color3;
-    shine: Color3;
-};
-export {};

package/out/ui/packages/skeleton/components/skeletonTone.luau

@@ -1,14 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local relativeLuminance = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "utilites", "colorMath").relativeLuminance
---* Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. 
-local function skeletonTone(theme)
-	local lightCanvas = relativeLuminance(theme.palette.surface.canvas) > 0.5
-	return {
-		bone = theme.palette.action.hover,
-		shine = if lightCanvas then theme.palette.surface.elevated else theme.palette.text.secondary,
-	}
-end
-return {
-	skeletonTone = skeletonTone,
-}

package/out/ui/packages/slider/components/sliderMarks.d.ts

@@ -1 +0,0 @@
-export declare function sliderMarkValues(min: number, max: number, step: number | undefined, marks: boolean | ReadonlyArray<number> | undefined): number[];

package/out/ui/packages/slider/components/sliderMarks.luau

@@ -1,37 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local function sliderMarkValues(min, max, step, marks)
-	if marks == nil or marks == false then
-		return {}
-	end
-	if marks ~= true then
-		local out = {}
-		for _, value in marks do
-			if value >= min and value <= max then
-				table.insert(out, value)
-			end
-		end
-		return out
-	end
-	local span = max - min
-	if span <= 0 then
-		return { min }
-	end
-	local increment = if step ~= nil and step > 0 then step else span
-	local out = {}
-	local value = min
-	local guard = 0
-	while value <= max + increment * 1e-9 and guard < 64 do
-		local _arg0 = math.clamp(value, min, max)
-		table.insert(out, _arg0)
-		value += increment
-		guard += 1
-	end
-	if out[#out] ~= max then
-		local _max = max
-		table.insert(out, _max)
-	end
-	return out
-end
-return {
-	sliderMarkValues = sliderMarkValues,
-}

package/out/ui/packages/snackbar/components/snackbarAction.d.ts

@@ -1 +0,0 @@
-export declare function snackbarActionLabel(action?: string): string | undefined;

package/out/ui/packages/snackbar/components/snackbarAction.luau

@@ -1,10 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local function snackbarActionLabel(action)
-	if action == nil or #action == 0 then
-		return nil
-	end
-	return action
-end
-return {
-	snackbarActionLabel = snackbarActionLabel,
-}

package/out/ui/packages/speedDial/components/SpeedDial.d.ts

@@ -1,19 +0,0 @@
-import { CustomizedProps } from "../../../../theme/index";
-import { Icons } from "../../../enums/index";
-import { SpeedDialDirection } from "./SpeedDial.styles";
-export interface SpeedDialAction {
-    icon: Icons;
-    disabled?: boolean;
-    onClick?: () => void;
-}
-export interface SpeedDialProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    actions: SpeedDialAction[];
-    icon?: Icons;
-    openIcon?: Icons;
-    disabled?: boolean;
-    direction?: SpeedDialDirection;
-}
-declare function SpeedDial(props: CustomizedProps<Frame, SpeedDialProps>): JSX.Element;
-export default SpeedDial;

package/out/ui/packages/speedDial/components/SpeedDial.luau

@@ -1,101 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
-local Fab = TS.import(script, script.Parent.Parent.Parent, "fab").Fab
-local useSpeedDialStyles = TS.import(script, script.Parent, "SpeedDial.styles").default
-local function SpeedDial(props)
-	local _binding = props
-	local open = _binding.open
-	local onOpenChange = _binding.onOpenChange
-	local actions = _binding.actions
-	local icon = _binding.icon
-	if icon == nil then
-		icon = Icons.OpenBox
-	end
-	local openIcon = _binding.openIcon
-	if openIcon == nil then
-		openIcon = Icons.Close
-	end
-	local disabled = _binding.disabled
-	local direction = _binding.direction
-	if direction == nil then
-		direction = "up"
-	end
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
-	local styles = useSpeedDialStyles({
-		direction = direction,
-	})
-	local mainFirst = direction == "down" or direction == "right"
-	local mainOrder = if mainFirst then 0 else 1000
-	local actionBase = if mainFirst then 1 else 0
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "SpeedDial"
-	end
-	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
-	local _attributes_1 = table.clone(styles.list)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _condition_1 = open
-	if _condition_1 then
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue = table.create(#actions)
-		local _callback = function(action, index)
-			return React.createElement(Fab, {
-				key = `Action-{index}`,
-				icon = action.icon,
-				size = "small",
-				disabled = disabled == true or action.disabled == true,
-				onClick = function()
-					local _result = action.onClick
-					if _result ~= nil then
-						_result()
-					end
-					onOpenChange(false)
-				end,
-				className = {
-					LayoutOrder = actionBase + index,
-				},
-			})
-		end
-		for _k, _v in actions do
-			_newValue[_k] = _callback(_v, _k - 1, actions)
-		end
-		-- ▲ ReadonlyArray.map ▲
-		_condition_1 = _newValue
-	end
-	return React.createElement("frame", _attributes, _exp, _condition_1, React.createElement(Fab, {
-		key = "Main",
-		icon = if open then openIcon else icon,
-		disabled = disabled,
-		onClick = function()
-			return onOpenChange(not open)
-		end,
-		className = {
-			LayoutOrder = mainOrder,
-		},
-	}))
-end
-local default = SpeedDial
-return {
-	default = default,
-}

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -1,5 +0,0 @@
-export type SpeedDialDirection = "up" | "down" | "left" | "right";
-declare const useSpeedDialStyles: (props: {
-    direction?: SpeedDialDirection;
-}) => import("../../../../theme/index").ClassNameMap<string>;
-export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -1,31 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
-local componentStyles = _theme.componentStyles
-local createStyles = _theme.createStyles
-local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
-	local direction = _param.direction
-	if direction == nil then
-		direction = "up"
-	end
-	local vertical = direction == "up" or direction == "down"
-	return createStyles({
-		root = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		list = {
-			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
-			HorizontalAlignment = if direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
-			VerticalAlignment = if direction == "up" then Enum.VerticalAlignment.Bottom elseif direction == "down" then Enum.VerticalAlignment.Top else Enum.VerticalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-		},
-	})
-end)
-local default = useSpeedDialStyles
-return {
-	default = default,
-}

package/out/ui/packages/speedDial/index.d.ts

@@ -1,3 +0,0 @@
-export { default as SpeedDial } from "./components/SpeedDial";
-export { SpeedDialProps, SpeedDialAction } from "./components/SpeedDial";
-export { SpeedDialDirection } from "./components/SpeedDial.styles";

package/out/ui/packages/speedDial/init.luau

@@ -1,5 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local exports = {}
-exports.SpeedDial = TS.import(script, script, "components", "SpeedDial").default
-return exports

package/out/ui/packages/tabs/components/tabsOrientation.d.ts

@@ -1,2 +0,0 @@
-export type TabsOrientation = "horizontal" | "vertical";
-export declare function tabsIsVertical(orientation?: TabsOrientation): orientation is "vertical";

package/out/ui/packages/tabs/components/tabsOrientation.luau

@@ -1,7 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local function tabsIsVertical(orientation)
-	return orientation == "vertical"
-end
-return {
-	tabsIsVertical = tabsIsVertical,
-}

package/out/ui/packages/toggleButton/components/ToggleButton.d.ts

@@ -1,19 +0,0 @@
-import { ControlSize, CustomizedProps } from "../../../../theme/index";
-import { ChoiceOption } from "../../radioGroup/index";
-export interface ToggleButtonProps {
-    label: string;
-    selected?: boolean;
-    disabled?: boolean;
-    size?: ControlSize;
-    onActivated?: () => void;
-}
-declare function ToggleButton(props: CustomizedProps<TextButton, ToggleButtonProps>): JSX.Element;
-export interface ToggleButtonGroupProps<T> {
-    value: T;
-    options: ChoiceOption<T>[];
-    onChange: (value: T) => void;
-    disabled?: boolean;
-    size?: ControlSize;
-}
-export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
-export default ToggleButton;

package/out/ui/packages/toggleButton/components/ToggleButton.luau

@@ -1,135 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
-local useToggleButtonStyles = TS.import(script, script.Parent, "ToggleButton.styles").default
-local function ToggleButton(props)
-	local _binding = props
-	local label = _binding.label
-	local selected = _binding.selected
-	local disabled = _binding.disabled
-	local size = _binding.size
-	if size == nil then
-		size = "medium"
-	end
-	local onActivated = _binding.onActivated
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
-	local styles = useToggleButtonStyles({
-		selected = selected,
-		disabled = disabled,
-		size = size,
-	})
-	local active = canActivate(disabled)
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ToggleButton"
-	end
-	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
-	_attributes.Text = label
-	_attributes.Active = active
-	_attributes.Selectable = active
-	_attributes.Event = {
-		Activated = function()
-			if active then
-				local _result = onActivated
-				if _result ~= nil then
-					_result()
-				end
-			end
-		end,
-	}
-	local _attributes_1 = table.clone(styles.padding)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uipadding", _attributes_1)
-	local _attributes_2 = table.clone(styles.corner)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uicorner", _attributes_2)
-	local _attributes_3 = table.clone(styles.stroke)
-	setmetatable(_attributes_3, nil)
-	return React.createElement("textbutton", _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_3))
-end
-local function ToggleButtonGroup(props)
-	local _binding = props
-	local value = _binding.value
-	local options = _binding.options
-	local onChange = _binding.onChange
-	local disabled = _binding.disabled
-	local size = _binding.size
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
-	local styles = useToggleButtonStyles({
-		size = size,
-	})
-	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ToggleButtonGroup"
-	end
-	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in styles.group do
-		_attributes[_k] = _v
-	end
-	if className then
-		for _k, _v in className do
-			_attributes[_k] = _v
-		end
-	end
-	if sx then
-		for _k, _v in sx do
-			_attributes[_k] = _v
-		end
-	end
-	local _attributes_1 = table.clone(styles.list)
-	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#options)
-	local _callback = function(choice, index)
-		return React.createElement(ToggleButton, {
-			key = `{choice.label}-{index}`,
-			label = choice.label,
-			selected = choice.value == value,
-			disabled = disabled == true or choice.disabled == true,
-			size = size,
-			onActivated = function()
-				if choice.value ~= value then
-					onChange(choice.value)
-				end
-			end,
-			className = {
-				LayoutOrder = index,
-			},
-		})
-	end
-	for _k, _v in options do
-		_newValue[_k] = _callback(_v, _k - 1, options)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	return React.createElement("frame", _attributes, _exp, _newValue)
-end
-local default = ToggleButton
-return {
-	ToggleButtonGroup = ToggleButtonGroup,
-	default = default,
-}

package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts

@@ -1,7 +0,0 @@
-import { ControlSize } from "../../../../theme/index";
-declare const useToggleButtonStyles: (props: {
-    selected?: boolean;
-    disabled?: boolean;
-    size?: ControlSize;
-}) => import("../../../../theme/index").ClassNameMap<string>;
-export default useToggleButtonStyles;

package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau

@@ -1,65 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
-local componentStyles = _theme.componentStyles
-local createStyles = _theme.createStyles
-local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _param)
-	local selected = _param.selected
-	if selected == nil then
-		selected = false
-	end
-	local disabled = _param.disabled
-	if disabled == nil then
-		disabled = false
-	end
-	local size = _param.size
-	if size == nil then
-		size = "medium"
-	end
-	local height = if size == "small" then theme.spacing.calc(3) elseif size == "large" then theme.spacing.calc(5) else theme.spacing.calc(4)
-	local textSize = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
-	local pad = theme.padding.calc(if size == "small" then 1 else 1.5)
-	return createStyles({
-		root = {
-			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.new(0, 0, 0, height),
-			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
-			BorderSizePixel = 0,
-			AutoButtonColor = false,
-			Active = not disabled,
-			Selectable = not disabled,
-			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = textSize,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, pad),
-			PaddingRight = UDim.new(0, pad),
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = if selected then theme.palette.primary.main else theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-			Transparency = if disabled then 0.5 else 0,
-		},
-		group = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-		},
-		list = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			HorizontalAlignment = Enum.HorizontalAlignment.Left,
-			VerticalAlignment = Enum.VerticalAlignment.Center,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
-		},
-	})
-end)
-local default = useToggleButtonStyles
-return {
-	default = default,
-}

package/out/ui/packages/toggleButton/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ToggleButton, ToggleButtonGroup } from "./components/ToggleButton";
-export { ToggleButtonProps, ToggleButtonGroupProps } from "./components/ToggleButton";

package/out/ui/packages/toggleButton/init.luau

@@ -1,7 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local exports = {}
-local _ToggleButton = TS.import(script, script, "components", "ToggleButton")
-exports.ToggleButton = _ToggleButton.default
-exports.ToggleButtonGroup = _ToggleButton.ToggleButtonGroup
-return exports

package/out/ui/packages/virtualList/components/EmptyListHint.d.ts

@@ -1,6 +0,0 @@
-export interface EmptyListHintProps {
-    text: string;
-    height?: number;
-}
-declare function EmptyListHint(props: EmptyListHintProps): JSX.Element;
-export default EmptyListHint;

package/out/ui/packages/virtualList/components/EmptyListHint.luau

@@ -1,32 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
-local useEmptyListHintStyles = TS.import(script, script.Parent, "EmptyListHint.styles").default
-local function EmptyListHint(props)
-	local _binding = props
-	local text = _binding.text
-	local height = _binding.height
-	local _binding_1 = useTheme()
-	local theme = _binding_1.theme
-	local _object = {}
-	local _left = "height"
-	local _condition = height
-	if _condition == nil then
-		_condition = theme.spacing.calc(4)
-	end
-	_object[_left] = _condition
-	local styles = useEmptyListHintStyles(_object)
-	local _attributes = {
-		key = "EmptyListHint",
-	}
-	for _k, _v in styles.root do
-		_attributes[_k] = _v
-	end
-	_attributes.Text = text
-	return React.createElement("textlabel", _attributes)
-end
-local default = EmptyListHint
-return {
-	default = default,
-}

package/out/ui/packages/virtualList/components/EmptyListHint.styles.d.ts

@@ -1,5 +0,0 @@
-export interface EmptyListHintStyleProps {
-    height: number;
-}
-declare const useEmptyListHintStyles: (props: EmptyListHintStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
-export default useEmptyListHintStyles;

package/out/ui/packages/virtualList/components/EmptyListHint.styles.luau

@@ -1,26 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
-local createStyles = _theme.createStyles
-local componentStyles = _theme.componentStyles
-local useEmptyListHintStyles = componentStyles("EmptyListHint", function(theme, _param)
-	local height = _param.height
-	return createStyles({
-		root = {
-			Size = UDim2.new(1, 0, 0, height),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			TextColor3 = theme.palette.text.secondary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextXAlignment = Enum.TextXAlignment.Center,
-			TextYAlignment = Enum.TextYAlignment.Center,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-			ZIndex = 20002,
-		},
-	})
-end)
-local default = useEmptyListHintStyles
-return {
-	default = default,
-}