@rbxts/uiblox 0.2.0-alpha.37 → 0.2.0-alpha.38

package/out/ui/packages/tooltip/components/Tooltip.styles.luau

@@ -14,7 +14,7 @@ local useTooltipStyles = componentStyles("Tooltip", function(theme)
 		label = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
-			BackgroundColor3 = theme.palette.surface.overlay,
+			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			TextColor3 = theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
@@ -37,7 +37,7 @@ local useTooltipStyles = componentStyles("Tooltip", function(theme)
 		},
 		shell = {
 			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.overlay,
+			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 		},
 		stack = {

package/out/ui/packages/treeView/components/TreeView.luau

@@ -34,6 +34,7 @@ local function TreeView(props)
 	local header = _binding_1.header
 	local list = _binding_1.list
 	local row = _binding_1.row
+	local selectedRow = _binding_1.selectedRow
 	local rowIcon = _binding_1.rowIcon
 	local label = _binding_1.label
 	local _binding_2 = useTheme()
@@ -153,7 +154,8 @@ local function TreeView(props)
 		local labelX = _binding_3.labelX
 		local rowIconImage = if entry.kind == "leaf" then (entry.icon or icon or Icons.ListPrimary) else entry.icon
 		local bold = if entry.kind == "branch" then entry.emphasized elseif selected ~= nil then selected == entry.path else clickedLeaf == entry.path
-		local _attributes = table.clone(row)
+		local picked = if selected ~= nil and #selected > 0 then entry.path == selected else entry.kind == "leaf" and clickedLeaf == entry.path
+		local _attributes = table.clone(cx(row, if picked then selectedRow else nil))
 		setmetatable(_attributes, nil)
 		_attributes.Event = {
 			MouseButton1Click = function()
@@ -244,6 +246,7 @@ local function TreeView(props)
 			tint = theme.palette.primary.main,
 		})), React.createElement(Typography, {
 			text = entry.title,
+			noWrap = true,
 			className = cx(label, {
 				Position = UDim2.new(0, labelX, 0.5, 0),
 				Size = UDim2.new(1, -labelX, 1, -theme.padding.calc(4)),
@@ -265,18 +268,14 @@ local function TreeView(props)
 	_attributes.base = root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = {}
-	local _object = {
-		Text = tree.title,
-	}
-	for _k, _v in header do
-		_object[_k] = _v
-	end
-	_attributes_1.className = _object
-	_attributes_1.color = "textSecondary"
-	_attributes_1.variant = "body"
-	_attributes_1.family = "bold"
-	return React.createElement(SxHost, _attributes, React.createElement(Typography, _attributes_1), React.createElement(VirtualList, {
+	return React.createElement(SxHost, _attributes, React.createElement(Typography, {
+		text = tree.title,
+		noWrap = true,
+		className = header,
+		color = "textSecondary",
+		variant = "body",
+		family = "bold",
+	}), React.createElement(VirtualList, {
 		key = "List",
 		items = rows,
 		getKey = function(entry)

package/out/ui/packages/treeView/components/TreeView.styles.luau

@@ -38,8 +38,13 @@ local useTreeViewStyles = componentStyles("TreeView", function(theme)
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
+			AutoButtonColor = false,
 			ZIndex = 5200,
 		},
+		selectedRow = {
+			BackgroundColor3 = theme.palette.action.selected,
+			BackgroundTransparency = 0,
+		},
 		rowIcon = {
 			AnchorPoint = Vector2.new(0, 0.5),
 			BackgroundTransparency = 1,
@@ -51,6 +56,7 @@ local useTreeViewStyles = componentStyles("TreeView", function(theme)
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextYAlignment = Enum.TextYAlignment.Center,
 			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ZIndex = 5300,

package/out/ui/packages/typography/components/Typography.d.ts

@@ -13,6 +13,8 @@ export interface TypographyProps {
     align?: TypographyAlignment;
     noWrap?: boolean;
     lineClamp?: boolean;
+    richText?: boolean;
+    fontFace?: Font;
 }
 declare function Typography<T extends DefaultTypographyComponent>(props: CustomizedProps<T, TypographyProps>): JSX.Element;
 export default Typography;

package/out/ui/packages/typography/components/Typography.luau

@@ -9,6 +9,8 @@ local function Typography(props)
 	if text == nil then
 		text = ""
 	end
+	local richText = _binding.richText
+	local fontFace = _binding.fontFace
 	local className = _binding.className
 	local sx = _binding.sx
 	local children = _binding.children
@@ -29,6 +31,7 @@ local function Typography(props)
 	local _object = table.clone(root)
 	setmetatable(_object, nil)
 	_object.Text = text
+	_object.RichText = richText == true
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
 			_object[_k] = _v
@@ -37,6 +40,11 @@ local function Typography(props)
 	for _k, _v in variantToken do
 		_object[_k] = _v
 	end
+	for _k, _v in (if fontFace ~= nil then {
+		FontFace = fontFace,
+	} else {}) do
+		_object[_k] = _v
+	end
 	_attributes.base = _object
 	_attributes.sx = sx
 	return React.createElement(SxHost, _attributes, children)

package/out/ui/packages/typography/components/Typography.styles.luau

@@ -72,17 +72,19 @@ local useTypographyStyles = componentStyles("Typography", function(theme, _param
 		defaultStyles.TextColor3 = color and COLOR_TO_PALETTE(color)
 		-- eslint-disable-next-line roblox-ts/lua-truthiness
 		defaultStyles.TextWrapped = not noWrap
+		defaultStyles.TextTruncate = if noWrap then Enum.TextTruncate.AtEnd else Enum.TextTruncate.None
+		defaultStyles.TextYAlignment = Enum.TextYAlignment.Top
 		defaultStyles.ClipsDescendants = lineClamp
 		defaultStyles.BackgroundTransparency = 1
 		defaultStyles.BorderSizePixel = 0
 		defaultStyles.Size = UDim2.new(1, 0, 1, 0)
-		defaultStyles.ZIndex = 10000
 		return defaultStyles
 	end
 	return createStyles({
 		root = makeRootStyles(),
 		variantToken = {
 			TextSize = spec.size,
+			LineHeight = spec.leading,
 			Font = theme.typography.fontFamilies[resolvedFamily],
 		},
 	})

package/out/ui/packages/udimEditor/components/UDimEditor.luau

@@ -1,6 +1,7 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local _vectorValue = TS.import(script, script.Parent.Parent.Parent, "vectorEditor", "components", "vectorValue")
@@ -17,6 +18,7 @@ local function UDimEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useUDimEditorStyles()
+	local hover = useEditorHover(disabled)
 	local isUDim2 = typeof(value) == "UDim2"
 	local field = function(key, label, amount, commit, order)
 		local _attributes = {
@@ -51,12 +53,18 @@ local function UDimEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)

package/out/ui/packages/udimEditor/components/UDimEditor.styles.luau

@@ -3,8 +3,12 @@ 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 _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useUDimEditorStyles = componentStyles("UDimEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,36 +17,39 @@ local useUDimEditorStyles = componentStyles("UDimEditor", function(theme)
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		axis = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, editorRowHeight(theme)),
 			BackgroundTransparency = 1,
 		},
 		field = {
-			Size = UDim2.new(0.5, -theme.padding.calc(1), 0, theme.spacing.calc(2)),
+			Size = UDim2.new(0.5, -editorPad(theme), 0, editorRowHeight(theme)),
 			BackgroundTransparency = 1,
 		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(2), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		input = {
-			Size = UDim2.new(1, -theme.spacing.calc(2), 1, 0),
-			BackgroundTransparency = 1,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(0, theme.spacing.calc(2), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.input = {
+		Size = UDim2.new(1, -theme.spacing.calc(2), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useUDimEditorStyles
 return {

package/out/ui/packages/vectorEditor/components/VectorEditor.luau

@@ -1,6 +1,10 @@
 -- 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 _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorRowHeight = _editorFace.editorRowHeight
+local useEditorHover = _editorFace.useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useVectorEditorStyles = TS.import(script, script.Parent, "VectorEditor.styles").default
@@ -17,7 +21,11 @@ local function VectorEditor(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
 	local styles = useVectorEditorStyles()
+	local row = editorRowHeight(theme)
+	local hover = useEditorHover(disabled)
 	local isVector3 = typeof(value) == "Vector3"
 	local axes = props.axes or (if isVector3 then ({ "X", "Y", "Z" }) else ({ "X", "Y" }))
 	local _attributes = {
@@ -29,13 +37,19 @@ local function VectorEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
-	local _attributes_1 = table.clone(styles.row)
+	_attributes.Event = hover.event
+	local _attributes_1 = table.clone(styles.axes)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
@@ -47,7 +61,7 @@ local function VectorEditor(props)
 		for _k, _v in styles.axis do
 			_attributes_2[_k] = _v
 		end
-		_attributes_2.Size = UDim2.new(1 / #axes, 0, 0, 32)
+		_attributes_2.Size = UDim2.new(1 / #axes, 0, 0, row)
 		_attributes_2.LayoutOrder = index + 1
 		local _attributes_3 = table.clone(styles.row)
 		setmetatable(_attributes_3, nil)

package/out/ui/packages/vectorEditor/components/VectorEditor.styles.luau

@@ -3,8 +3,12 @@ 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 _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useVectorEditorStyles = componentStyles("VectorEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,27 +17,37 @@ local useVectorEditorStyles = componentStyles("VectorEditor", function(theme)
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		axis = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(1.5), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
+		axes = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalFlex = Enum.UIFlexAlignment.Fill,
+			Padding = UDim.new(0, editorPad(theme)),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		field = {
-			Size = UDim2.new(1, -theme.spacing.calc(1.5), 1, 0),
+		axis = {
+			Size = UDim2.new(1, 0, 0, editorRowHeight(theme)),
 			BackgroundTransparency = 1,
 		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(0, theme.spacing.calc(1.5), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.field = {
+		Size = UDim2.new(1, -theme.spacing.calc(1.5) - editorPad(theme), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useVectorEditorStyles
 return {

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

@@ -20,6 +20,7 @@ local useVirtualListStyles = componentStyles("VirtualList", function()
 			Size = UDim2.new(1, 0, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
+			ClipsDescendants = true,
 		},
 	})
 end)

package/package.json

@@ -1,68 +1,70 @@
 {
-  "name": "@rbxts/uiblox",
-  "version": "0.2.0-alpha.37",
-  "description": "UI Library and theming for roblox-ts projects",
-  "main": "out/init.luau",
-  "keywords": [
-    "roblox-ts",
-    "ui",
-    "uiblox",
-    "design",
-    "library",
-    "material",
-    "component",
-    "system"
-  ],
-  "author": "bjlarouche",
-  "license": "MIT",
-  "types": "out/index.d.ts",
-  "files": [
-    "out",
-    "!**/*.tsbuildinfo"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@rbxts/attributes": "^1.0.0",
-    "@rbxts/compiler-types": "^3.0.0-types.0",
-    "@rbxts/types": "^1.0.813",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "eslint": "^9.14.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-roblox-ts": "^0.0.36",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "prettier": "^3.3.3",
-    "roblox-ts": "^3.0.0",
-    "typescript": "^5.6.3"
-  },
-  "dependencies": {
-    "@rbxts/boat-tween": "^1.0.1",
-    "@rbxts/pretty-react-hooks": "^0.6.0",
-    "@rbxts/react": "^17.2.1",
-    "@rbxts/react-reflex": "^0.3.4",
-    "@rbxts/react-roblox": "^17.2.1",
-    "@rbxts/reflex": "4.3.1",
-    "@rbxts/services": "^1.5.5"
-  },
-  "directories": {
-    "doc": "docs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bjlarouche/uiblox-rbxts.git"
-  },
-  "bugs": {
-    "url": "https://github.com/bjlarouche/uiblox-rbxts/issues"
-  },
-  "homepage": "https://github.com/bjlarouche/uiblox-rbxts#readme",
-  "scripts": {
-    "build": "rbxtsc",
-    "watch": "rbxtsc -w",
-    "pack:check": "node scripts/pack-check.mjs",
-    "test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/table-columns.check.mjs && node --experimental-strip-types scripts/reorder.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/text.check.mjs && node --experimental-strip-types scripts/week-grid.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/tooltip-pin.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/time-field.check.mjs && node --experimental-strip-types scripts/sparkline.check.mjs && node --experimental-strip-types scripts/copy-button.check.mjs && node --experimental-strip-types scripts/cover.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs && node --experimental-strip-types scripts/transport-glyph.check.mjs && node --experimental-strip-types scripts/timeline.check.mjs && node --experimental-strip-types scripts/avatar-group.check.mjs && node --experimental-strip-types scripts/range-slider.check.mjs && node --experimental-strip-types scripts/collapse.check.mjs && node --experimental-strip-types scripts/button-group.check.mjs && node --experimental-strip-types scripts/table-sort.check.mjs && node --experimental-strip-types scripts/popover.check.mjs && node --experimental-strip-types scripts/focus-ring.check.mjs && node --experimental-strip-types scripts/checkbox-focus.check.mjs && node --experimental-strip-types scripts/pager.check.mjs && node --experimental-strip-types scripts/tooltip-title.check.mjs && node --experimental-strip-types scripts/input-focus.check.mjs && node --experimental-strip-types scripts/select-focus.check.mjs && node --experimental-strip-types scripts/slider-focus.check.mjs && node --experimental-strip-types scripts/switch-focus.check.mjs && node --experimental-strip-types scripts/radio-focus.check.mjs"
-  }
-}
+	"name": "@rbxts/uiblox",
+	"version": "0.2.0-alpha.38",
+	"description": "UI Library and theming for roblox-ts projects",
+	"main": "out/init.luau",
+	"packageManager": "pnpm@11.3.0",
+	"scripts": {
+		"build": "rbxtsc",
+		"watch": "rbxtsc -w",
+		"pack:check": "node scripts/pack-check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/sx-prop.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node scripts/state-matrix-registers.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/table-columns.check.mjs && node --experimental-strip-types scripts/reorder.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/text.check.mjs && node --experimental-strip-types scripts/week-grid.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/scroll-view.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/highlight-code.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/tooltip-pin.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/date-range.check.mjs && node --experimental-strip-types scripts/time-field.check.mjs && node --experimental-strip-types scripts/sparkline.check.mjs && node --experimental-strip-types scripts/copy-button.check.mjs && node --experimental-strip-types scripts/cover.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs && node --experimental-strip-types scripts/transport-glyph.check.mjs && node --experimental-strip-types scripts/timeline.check.mjs && node --experimental-strip-types scripts/avatar-group.check.mjs && node --experimental-strip-types scripts/range-slider.check.mjs && node --experimental-strip-types scripts/collapse.check.mjs && node --experimental-strip-types scripts/button-group.check.mjs && node --experimental-strip-types scripts/table-sort.check.mjs && node --experimental-strip-types scripts/popover.check.mjs && node --experimental-strip-types scripts/focus-ring.check.mjs && node --experimental-strip-types scripts/checkbox-focus.check.mjs && node --experimental-strip-types scripts/pager.check.mjs && node --experimental-strip-types scripts/tooltip-title.check.mjs && node --experimental-strip-types scripts/input-focus.check.mjs && node --experimental-strip-types scripts/select-focus.check.mjs && node --experimental-strip-types scripts/slider-focus.check.mjs && node --experimental-strip-types scripts/switch-focus.check.mjs && node --experimental-strip-types scripts/radio-focus.check.mjs && node --experimental-strip-types scripts/button-paint.check.mjs && node scripts/editor-row.check.mjs",
+		"prepublishOnly": "pnpm build"
+	},
+	"keywords": [
+		"roblox-ts",
+		"ui",
+		"uiblox",
+		"design",
+		"library",
+		"material",
+		"component",
+		"system"
+	],
+	"author": "bjlarouche",
+	"license": "MIT",
+	"types": "out/index.d.ts",
+	"files": [
+		"out",
+		"!**/*.tsbuildinfo"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@rbxts/attributes": "^1.0.0",
+		"@rbxts/compiler-types": "^3.0.0-types.0",
+		"@rbxts/types": "^1.0.813",
+		"@typescript-eslint/eslint-plugin": "^8.15.0",
+		"@typescript-eslint/parser": "^8.15.0",
+		"eslint": "^9.14.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-roblox-ts": "^0.0.36",
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-unused-imports": "^4.1.4",
+		"prettier": "^3.3.3",
+		"roblox-ts": "^3.0.0",
+		"typescript": "^5.6.3"
+	},
+	"dependencies": {
+		"@rbxts/boat-tween": "^1.0.1",
+		"@rbxts/pretty-react-hooks": "^0.6.0",
+		"@rbxts/react": "^17.2.1",
+		"@rbxts/react-reflex": "^0.3.4",
+		"@rbxts/react-roblox": "^17.2.1",
+		"@rbxts/reflex": "4.3.1",
+		"@rbxts/services": "^1.5.5"
+	},
+	"directories": {
+		"doc": "docs"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/bjlarouche/uiblox-rbxts.git"
+	},
+	"bugs": {
+		"url": "https://github.com/bjlarouche/uiblox-rbxts/issues"
+	},
+	"homepage": "https://github.com/bjlarouche/uiblox-rbxts#readme"
+}