@rbxts/uiblox 0.2.0-alpha.28 → 0.2.0-alpha.3

package/out/theme/styles/utilities/resolveSx.d.ts

@@ -1,110 +0,0 @@
-/** Dot-path into `theme.palette` (typed for common roles). */
-export type PaletteToken = "surface.canvas" | "surface.paper" | "surface.elevated" | "surface.overlay" | "surface.input" | "primary.main" | "primary.on" | "primary.hover" | "primary.pressed" | "accent.main" | "accent.on" | "accent.hover" | "accent.pressed" | "text.primary" | "text.secondary" | "text.disabled" | "text.inverse" | "text.link" | "border" | "divider" | "focus" | "action.hover" | "action.pressed" | "action.selected" | "action.disabled" | "status.success.main" | "status.success.on" | "status.success.surface" | "status.success.border" | "status.warning.main" | "status.warning.on" | "status.warning.surface" | "status.warning.border" | "status.error.main" | "status.error.on" | "status.error.surface" | "status.error.border" | "status.info.main" | "status.info.on" | "status.info.surface" | "status.info.border" | "backdrop" | "shadow";
-export declare function resolvePaletteToken(palette: object, token: PaletteToken | Color3): Color3;
-/** Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. */
-type Responsive<T> = T | {
-    phone?: T;
-    tablet?: T;
-    desktop?: T;
-};
-type PadInput = number | {
-    x?: number;
-    y?: number;
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
-interface SxTheme {
-    spacing: {
-        calc: (multiple: number) => number;
-    };
-    palette: object;
-    typography: {
-        fontFamilies: {
-            [family: string]: Enum.Font;
-        };
-        variants: {
-            [name: string]: {
-                size: number;
-                family: string;
-            };
-        };
-    };
-}
-export type SxColor = PaletteToken | Color3;
-/** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
-export type SxInput = {
-    width?: Responsive<number | UDim | UDim2>;
-    height?: Responsive<number | UDim | UDim2>;
-    w?: Responsive<number | UDim | UDim2>;
-    h?: Responsive<number | UDim | UDim2>;
-    size?: Responsive<UDim2 | {
-        width?: number | UDim;
-        height?: number | UDim;
-    }>;
-    x?: Responsive<number | UDim>;
-    y?: Responsive<number | UDim>;
-    position?: Responsive<UDim2>;
-    pos?: Responsive<UDim2>;
-    anchor?: Responsive<Vector2 | number | [number, number]>;
-    p?: Responsive<number>;
-    px?: Responsive<number>;
-    py?: Responsive<number>;
-    pt?: Responsive<number>;
-    pr?: Responsive<number>;
-    pb?: Responsive<number>;
-    pl?: Responsive<number>;
-    padding?: Responsive<PadInput>;
-    gap?: Responsive<number>;
-    bgcolor?: Responsive<SxColor>;
-    bg?: Responsive<SxColor>;
-    backgroundColor?: Responsive<SxColor>;
-    color?: Responsive<SxColor>;
-    borderColor?: Responsive<SxColor>;
-    opacity?: Responsive<number>;
-    transparency?: Responsive<number>;
-    border?: Responsive<number>;
-    borderWidth?: Responsive<number>;
-    radius?: Responsive<number>;
-    typography?: Responsive<string>;
-    fontSize?: Responsive<number>;
-    font?: Responsive<Enum.Font | string>;
-    visible?: Responsive<boolean>;
-    zIndex?: Responsive<number>;
-    z?: Responsive<number>;
-    _hover?: SxInput;
-    _pressed?: SxInput;
-    _focus?: SxInput;
-    _focusVisible?: SxInput;
-    _disabled?: SxInput;
-    _selected?: SxInput;
-    _checked?: SxInput;
-    _loading?: SxInput;
-    _first?: SxInput;
-    _last?: SxInput;
-    _odd?: SxInput;
-    _even?: SxInput;
-    [key: string]: unknown;
-};
-export interface ResolvedSx {
-    root: {
-        [key: string]: unknown;
-    };
-    padding?: {
-        PaddingTop: UDim;
-        PaddingRight: UDim;
-        PaddingBottom: UDim;
-        PaddingLeft: UDim;
-    };
-    corner?: {
-        CornerRadius: UDim;
-    };
-    gap?: number;
-}
-/**
- * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
- * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
- */
-export declare function resolveSx(theme: SxTheme, sx?: SxInput, width?: number): ResolvedSx;
-export {};

package/out/theme/styles/utilities/resolveSx.luau

@@ -1,479 +0,0 @@
--- Compiled with roblox-ts v3.0.0
---* Dot-path into `theme.palette` (typed for common roles). 
-local function resolvePaletteToken(palette, token)
-	local _token = token
-	if not (type(_token) == "string") then
-		return token
-	end
-	local parts = string.split(token, ".")
-	local cursor = palette
-	for _, part in parts do
-		local _condition = cursor == nil
-		if not _condition then
-			local _cursor = cursor
-			_condition = typeof(_cursor) ~= "table"
-		end
-		if _condition then
-			return Color3.new(0, 0, 0)
-		end
-		cursor = cursor[part]
-	end
-	local _cursor = cursor
-	if typeof(_cursor) == "Color3" then
-		return cursor
-	end
-	return Color3.new(0, 0, 0)
-end
---* Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. 
-local function resolveResponsive(value, width)
-	local _condition = value == nil
-	if not _condition then
-		local _value = value
-		_condition = typeof(_value) ~= "table"
-	end
-	if _condition then
-		return value
-	end
-	local record = value
-	local size = if width == width and width < math.huge and width > 0 then width else 0
-	local name = if size < 600 then "phone" elseif size < 960 then "tablet" else "desktop"
-	if name == "desktop" then
-		local _condition_1 = record.desktop
-		if _condition_1 == nil then
-			_condition_1 = record.tablet
-			if _condition_1 == nil then
-				_condition_1 = record.phone
-			end
-		end
-		return _condition_1
-	end
-	if name == "tablet" then
-		local _condition_1 = record.tablet
-		if _condition_1 == nil then
-			_condition_1 = record.phone
-		end
-		return _condition_1
-	end
-	return record.phone
-end
-local SELECTORS = {
-	_hover = true,
-	_pressed = true,
-	_focus = true,
-	_focusVisible = true,
-	_disabled = true,
-	_selected = true,
-	_checked = true,
-	_loading = true,
-	_first = true,
-	_last = true,
-	_odd = true,
-	_even = true,
-}
-local SHORTHAND = {
-	width = true,
-	height = true,
-	w = true,
-	h = true,
-	size = true,
-	x = true,
-	y = true,
-	position = true,
-	pos = true,
-	anchor = true,
-	p = true,
-	px = true,
-	py = true,
-	pt = true,
-	pr = true,
-	pb = true,
-	pl = true,
-	padding = true,
-	gap = true,
-	bgcolor = true,
-	bg = true,
-	backgroundColor = true,
-	color = true,
-	borderColor = true,
-	opacity = true,
-	transparency = true,
-	border = true,
-	borderWidth = true,
-	radius = true,
-	typography = true,
-	fontSize = true,
-	font = true,
-	visible = true,
-	zIndex = true,
-	z = true,
-}
---* CSS-like shorthands + pass-through Instance props. No CSS string parser. 
-local function pick(value, width)
-	if value == nil then
-		return nil
-	end
-	if width ~= nil then
-		return resolveResponsive(value, width)
-	end
-	local _value = value
-	if typeof(_value) ~= "table" then
-		return value
-	end
-	local record = value
-	if record.phone ~= nil or record.tablet ~= nil or record.desktop ~= nil then
-		local _condition = record.desktop
-		if _condition == nil then
-			_condition = record.tablet
-			if _condition == nil then
-				_condition = record.phone
-			end
-		end
-		return _condition
-	end
-	return value
-end
-local function asUDim(value)
-	local _value = value
-	return if type(_value) == "number" then UDim.new(0, value) else value
-end
-local function sizeAxis(value, axis)
-	if value == nil then
-		return nil
-	end
-	local _value = value
-	if type(_value) == "number" then
-		return UDim.new(0, value)
-	end
-	local _value_1 = value
-	if typeof(_value_1) == "UDim" then
-		return value
-	end
-	return if axis == "X" then value.X else value.Y
-end
-local function padSides(padding)
-	if padding == nil then
-		return {
-			top = 0,
-			right = 0,
-			bottom = 0,
-			left = 0,
-		}
-	end
-	local _padding = padding
-	if type(_padding) == "number" then
-		return {
-			top = padding,
-			right = padding,
-			bottom = padding,
-			left = padding,
-		}
-	end
-	local _condition = padding.x
-	if _condition == nil then
-		_condition = 0
-	end
-	local x = _condition
-	local _condition_1 = padding.y
-	if _condition_1 == nil then
-		_condition_1 = 0
-	end
-	local y = _condition_1
-	local _object = {}
-	local _left = "top"
-	local _condition_2 = padding.top
-	if _condition_2 == nil then
-		_condition_2 = y
-	end
-	_object[_left] = _condition_2
-	local _left_1 = "right"
-	local _condition_3 = padding.right
-	if _condition_3 == nil then
-		_condition_3 = x
-	end
-	_object[_left_1] = _condition_3
-	local _left_2 = "bottom"
-	local _condition_4 = padding.bottom
-	if _condition_4 == nil then
-		_condition_4 = y
-	end
-	_object[_left_2] = _condition_4
-	local _left_3 = "left"
-	local _condition_5 = padding.left
-	if _condition_5 == nil then
-		_condition_5 = x
-	end
-	_object[_left_3] = _condition_5
-	return _object
-end
-local function colorOf(theme, value)
-	if value == nil then
-		return nil
-	end
-	return resolvePaletteToken(theme.palette, value)
-end
---[[
-	*
-	 * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
-	 * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
-	 
-]]
-local function resolveSx(theme, sx, width)
-	if sx == nil then
-		return {
-			root = {},
-		}
-	end
-	local root = {}
-	local pad
-	local radius
-	local gap
-	local _condition = sx.width
-	if _condition == nil then
-		_condition = sx.w
-	end
-	local widthVal = pick(_condition, width)
-	local _condition_1 = sx.height
-	if _condition_1 == nil then
-		_condition_1 = sx.h
-	end
-	local heightVal = pick(_condition_1, width)
-	local sizeVal = pick(sx.size, width)
-	local sizeX = sizeAxis(widthVal, "X")
-	local sizeY = sizeAxis(heightVal, "Y")
-	if sizeVal ~= nil then
-		if typeof(sizeVal) == "UDim2" then
-			sizeX = sizeX or sizeVal.X
-			sizeY = sizeY or sizeVal.Y
-		else
-			local record = sizeVal
-			sizeX = sizeX or sizeAxis(record.width, "X")
-			sizeY = sizeY or sizeAxis(record.height, "Y")
-		end
-	end
-	if sizeX ~= nil or sizeY ~= nil then
-		local _result = sizeX
-		if _result ~= nil then
-			_result = _result.Scale
-		end
-		local _condition_2 = _result
-		if _condition_2 == nil then
-			_condition_2 = 0
-		end
-		local _result_1 = sizeX
-		if _result_1 ~= nil then
-			_result_1 = _result_1.Offset
-		end
-		local _condition_3 = _result_1
-		if _condition_3 == nil then
-			_condition_3 = 0
-		end
-		local _result_2 = sizeY
-		if _result_2 ~= nil then
-			_result_2 = _result_2.Scale
-		end
-		local _condition_4 = _result_2
-		if _condition_4 == nil then
-			_condition_4 = 0
-		end
-		local _result_3 = sizeY
-		if _result_3 ~= nil then
-			_result_3 = _result_3.Offset
-		end
-		local _condition_5 = _result_3
-		if _condition_5 == nil then
-			_condition_5 = 0
-		end
-		root.Size = UDim2.new(_condition_2, _condition_3, _condition_4, _condition_5)
-	end
-	local position = pick(sx.position or sx.pos, width)
-	local x = pick(sx.x, width)
-	local y = pick(sx.y, width)
-	if position ~= nil then
-		root.Position = position
-	elseif x ~= nil or y ~= nil then
-		local xU = if x ~= nil then asUDim(x) else UDim.new(0, 0)
-		local yU = if y ~= nil then asUDim(y) else UDim.new(0, 0)
-		root.Position = UDim2.new(xU.Scale, xU.Offset, yU.Scale, yU.Offset)
-	end
-	local anchor = pick(sx.anchor, width)
-	if anchor ~= nil then
-		if type(anchor) == "number" then
-			root.AnchorPoint = Vector2.new(anchor, anchor)
-		elseif typeof(anchor) == "Vector2" then
-			root.AnchorPoint = anchor
-		else
-			local pair = anchor
-			root.AnchorPoint = Vector2.new(pair[1], pair[2])
-		end
-	end
-	local padding = pick(sx.padding, width)
-	if padding ~= nil then
-		pad = padSides(padding)
-	end
-	local p = pick(sx.p, width)
-	local px = pick(sx.px, width)
-	local py = pick(sx.py, width)
-	local pt = pick(sx.pt, width)
-	local pr = pick(sx.pr, width)
-	local pb = pick(sx.pb, width)
-	local pl = pick(sx.pl, width)
-	if p ~= nil or px ~= nil or py ~= nil or pt ~= nil or pr ~= nil or pb ~= nil or pl ~= nil then
-		local base = pad or {
-			top = 0,
-			right = 0,
-			bottom = 0,
-			left = 0,
-		}
-		local _condition_2 = p
-		if _condition_2 == nil then
-			_condition_2 = 0
-		end
-		local uniform = _condition_2
-		local _object = {}
-		local _left = "top"
-		local _condition_3 = pt
-		if _condition_3 == nil then
-			_condition_3 = py
-			if _condition_3 == nil then
-				_condition_3 = (if p ~= nil then uniform else base.top)
-			end
-		end
-		_object[_left] = _condition_3
-		local _left_1 = "right"
-		local _condition_4 = pr
-		if _condition_4 == nil then
-			_condition_4 = px
-			if _condition_4 == nil then
-				_condition_4 = (if p ~= nil then uniform else base.right)
-			end
-		end
-		_object[_left_1] = _condition_4
-		local _left_2 = "bottom"
-		local _condition_5 = pb
-		if _condition_5 == nil then
-			_condition_5 = py
-			if _condition_5 == nil then
-				_condition_5 = (if p ~= nil then uniform else base.bottom)
-			end
-		end
-		_object[_left_2] = _condition_5
-		local _left_3 = "left"
-		local _condition_6 = pl
-		if _condition_6 == nil then
-			_condition_6 = px
-			if _condition_6 == nil then
-				_condition_6 = (if p ~= nil then uniform else base.left)
-			end
-		end
-		_object[_left_3] = _condition_6
-		pad = _object
-	end
-	local gapVal = pick(sx.gap, width)
-	if gapVal ~= nil then
-		gap = theme.spacing.calc(gapVal)
-	end
-	local bg = pick(sx.bgcolor or sx.bg or sx.backgroundColor, width)
-	local bgColor = colorOf(theme, bg)
-	if bgColor ~= nil then
-		root.BackgroundColor3 = bgColor
-		if root.BackgroundTransparency == nil then
-			root.BackgroundTransparency = 0
-		end
-	end
-	local textColor = colorOf(theme, pick(sx.color, width))
-	if textColor ~= nil then
-		root.TextColor3 = textColor
-	end
-	local borderColor = colorOf(theme, pick(sx.borderColor, width))
-	if borderColor ~= nil then
-		root.BorderColor3 = borderColor
-	end
-	local opacity = pick(sx.opacity, width)
-	if opacity ~= nil then
-		root.BackgroundTransparency = 1 - opacity
-	end
-	local transparency = pick(sx.transparency, width)
-	if transparency ~= nil then
-		root.BackgroundTransparency = transparency
-	end
-	local _condition_2 = sx.border
-	if _condition_2 == nil then
-		_condition_2 = sx.borderWidth
-	end
-	local border = pick(_condition_2, width)
-	if border ~= nil then
-		root.BorderSizePixel = border
-	end
-	local radiusVal = pick(sx.radius, width)
-	if radiusVal ~= nil then
-		radius = radiusVal
-	end
-	local typography = pick(sx.typography, width)
-	if typography ~= nil then
-		local variant = theme.typography.variants[typography]
-		if variant ~= nil then
-			root.TextSize = variant.size
-			root.Font = theme.typography.fontFamilies[variant.family]
-		end
-	end
-	local fontSize = pick(sx.fontSize, width)
-	if fontSize ~= nil then
-		root.TextSize = fontSize
-	end
-	local font = pick(sx.font, width)
-	if font ~= nil then
-		if typeof(font) == "EnumItem" then
-			root.Font = font
-		else
-			root.Font = theme.typography.fontFamilies[font]
-		end
-	end
-	local visible = pick(sx.visible, width)
-	if visible ~= nil then
-		root.Visible = visible
-	end
-	local _condition_3 = sx.zIndex
-	if _condition_3 == nil then
-		_condition_3 = sx.z
-	end
-	local zIndex = pick(_condition_3, width)
-	if zIndex ~= nil then
-		root.ZIndex = zIndex
-	end
-	for key, raw in pairs(sx) do
-		local name = key
-		if SHORTHAND[name] == true then
-			continue
-		end
-		if SELECTORS[name] == true then
-			local nested = resolveSx(theme, raw, width)
-			root[name] = nested.root
-			continue
-		end
-		root[name] = pick(raw, width)
-	end
-	local resolved = {
-		root = root,
-	}
-	if pad ~= nil then
-		resolved.padding = {
-			PaddingTop = UDim.new(0, theme.spacing.calc(pad.top)),
-			PaddingRight = UDim.new(0, theme.spacing.calc(pad.right)),
-			PaddingBottom = UDim.new(0, theme.spacing.calc(pad.bottom)),
-			PaddingLeft = UDim.new(0, theme.spacing.calc(pad.left)),
-		}
-	end
-	if radius ~= nil then
-		resolved.corner = {
-			CornerRadius = UDim.new(0, radius),
-		}
-	end
-	if gap ~= nil then
-		resolved.gap = gap
-	end
-	return resolved
-end
-return {
-	resolvePaletteToken = resolvePaletteToken,
-	resolveSx = resolveSx,
-}

package/out/ui/packages/backdrop/components/Backdrop.d.ts

@@ -1,10 +0,0 @@
-import React from "@rbxts/react";
-import { CustomizedProps } from "../../../../theme/index";
-export interface BackdropProps {
-    open?: boolean;
-    invisible?: boolean;
-    onClick?: () => void;
-    children?: React.ReactNode;
-}
-declare function Backdrop(props: CustomizedProps<TextButton, BackdropProps>): JSX.Element | undefined;
-export default Backdrop;

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -1,51 +0,0 @@
--- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
-local function Backdrop(props)
-	local _binding = props
-	local open = _binding.open
-	if open == nil then
-		open = true
-	end
-	local invisible = _binding.invisible
-	local onClick = _binding.onClick
-	local children = _binding.children
-	local className = _binding.className
-	local sx = _binding.sx
-	local id = _binding.id
-	local ref = _binding.ref
-	local styles = useBackdropStyles({
-		invisible = invisible,
-	})
-	if open ~= true then
-		return nil
-	end
-	local _attributes = {
-		tag = "textbutton",
-	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Backdrop"
-	end
-	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.Event = {
-		Activated = function()
-			local _result = onClick
-			if _result ~= nil then
-				_result = _result()
-			end
-			return _result
-		end,
-	}
-	return React.createElement(SxHost, _attributes, children)
-end
-local default = Backdrop
-return {
-	default = default,
-}

package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts

@@ -1,4 +0,0 @@
-declare const useBackdropStyles: (props: {
-    invisible?: boolean;
-}) => import("../../../../theme/index").ClassNameMap<string>;
-export default useBackdropStyles;

package/out/ui/packages/backdrop/components/Backdrop.styles.luau

@@ -1,24 +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 useBackdropStyles = componentStyles("Backdrop", function(theme, _param)
-	local invisible = _param.invisible
-	return createStyles({
-		root = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.backdrop,
-			BackgroundTransparency = if invisible == true then 1 else 0.45,
-			BorderSizePixel = 0,
-			Text = "",
-			AutoButtonColor = false,
-			Selectable = false,
-			ZIndex = 30000,
-		},
-	})
-end)
-local default = useBackdropStyles
-return {
-	default = default,
-}

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

@@ -1,2 +0,0 @@
-export { default as Backdrop } from "./components/Backdrop";
-export { BackdropProps } from "./components/Backdrop";

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

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

package/out/ui/packages/divider/components/dividerLabel.d.ts

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

package/out/ui/packages/divider/components/dividerLabel.luau

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