@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.5

package/README.md

@@ -2,35 +2,13 @@
 
 # uiblox-rbxts
 
-> This package is a work in progress.
-
 UI library and theming for roblox-ts projects.
 
-## Background
-
-Roblox has their own internal design system, coined "uiblox-web", that it uses for its new
-web-facing products. This system offers reusable components, implemented in
-React Typescript, that are derived from material UI (MUI). As well, it offers a
-common theme/pallete for consistent UI/UX.
-
-Anyone is able to view their design system as
-[UIBlox-Web](https://uiblox.roblox.com). You can see that they leverage
-[Storybook](https://storybook.js.org), a UI component explorer for frontend
-developers, to render component previews.
-
-Design systems all help engineers cut down on implementation time and ensure
-consitent UX across products.
-
 ## Overview
 
-So what is uiblox-rbxts? Simply put, its my stab at a design system that mimics
-uiblox-web for games written using roblox-ts.
+Uiblox is a roblox-ts UI kit: semantic themes, `makeStyles` / `createStyles`, and typed React components for Studio and games. Public APIs aim for familiar Material UI–style capability (props and behavior), implemented independently for Roblox Instances, input modes, and performance.
 
-UIBlox-rbxts aims to provide extensible components that can be reusable by
-anyone who installs this npm package. It also offers a theme and styling system
-that aids UI/UX consistentency.
-
-How does it do this? Well, there are two main exports from this package:
+Main exports from `@rbxts/uiblox`:
 
 -   @rbxts/uiblox -> theme
     -   An extensible Theme type + default Dark (default) and Light themes
@@ -46,11 +24,47 @@ How does it do this? Well, there are two main exports from this package:
 
 ### Installation
 
-Install the package to get started.
+```
+npm install @rbxts/uiblox
+```
+
+## Quickstart
 
-`npm install @rbxts/uiblox`
+1. Wrap your app (or a subtree) in `ThemeProvider` with `DarkTheme` or `LightTheme`.
+2. Build styles with `makeStyles` / `createStyles` (or `componentStyles`) and spread them onto Instances.
+3. For hover/press/focus/disabled (and list `_first` / `_last`), put `_hover`-style keys on the style table and call `resolveStyle(style, state)` before spreading.
+4. Use packaged components from `@rbxts/uiblox` (`Button`, `Input`, `Select`, …).
+5. Preview components in [Storyblox](https://github.com/bjlarouche/storyblox) with `*.stories` modules.
 
-Spacing, density, and sx notes are in [docs/STYLING.md](docs/STYLING.md).
+Token reference (spacing, density, typography, shape, palette, `resolveStyle`): [docs/STYLING.md](docs/STYLING.md).
+
+```tsx
+import React from "@rbxts/react";
+import { Button, DarkTheme, ThemeProvider } from "@rbxts/uiblox";
+
+export function App() {
+	return (
+		<ThemeProvider theme={DarkTheme}>
+			<Button text="Continue" onLeftClick={() => {}} />
+		</ThemeProvider>
+	);
+}
+```
+
+## Parity checklist
+
+Capability parity, not pixel parity. For each public component, expect:
+
+- [ ] Typed controlled props where interaction needs state
+- [ ] Theme tokens (light/dark) via `ThemeProvider`
+- [ ] Style slots / variants through the styling helpers
+- [ ] Disabled / loading / error when the control type warrants it
+- [ ] Mouse, touch, and gamepad-friendly activation where interactive
+- [ ] Cleanup and focused unit checks in-repo
+- [ ] `stateMatrix` rows for visual capture planning
+- [ ] A Storyblox story (dev fixtures OK)
+
+Skipped on purpose: browser-only addons (MDX, iframes, hosted visual-review clouds).
 
 ## Example
 
@@ -197,6 +211,74 @@ const useMyComponentStyles = makeStyles<MyComponentProps>((theme: Theme, props:
 export default useMyComponentStyles;
 ```
 
+### Style precedence
+
+Components spread their own styles first, then `className`, then the props that
+carry state. Later always wins:
+
+1. Component styles from the theme
+2. `className` (merge several with `cx(a, condition && b)`; later args win, falsy
+   args are skipped)
+3. State props the component owns: `Active`, `Selectable`, `Text`, and the
+   value-driven sizes/positions of Slider, SplitPane, and so on
+
+So `className` can restyle anything except a control's state. Pass `disabled`
+instead of overriding `Active`.
+
+### Controls
+
+Inputs are controlled: `{ value, onChange, disabled? }`. They call `onChange`
+only when the value actually changes, and never while disabled.
+
+| Component | Value | Notes |
+| --- | --- | --- |
+| Checkbox | `boolean` | `mixed` shows indeterminate; activating commits `true` |
+| Switch | `boolean` | |
+| RadioGroup / Select / Tabs | `T` from `options: { label, value: T, disabled? }[]` | compared by identity; disabled options are skipped |
+| NumberInput | `number` | commits on focus lost or Enter; clamps to `min`/`max`, snaps to `step` |
+| Slider | `number` | `onChange` while dragging, `onCommit` on release |
+| SplitPane | first pane size (px) | display clamps to `min`/`max`; Escape cancels a drag |
+| Input | `text` | `onInput` while typing, `onTextChanged` on commit |
+
+Select and Tooltip render through `Popup`, which portals into the nearest
+`LayerCollector` so clipping parents do not cut them off. The popup follows its
+anchor when that anchor moves or resizes, and Select closes if the anchor leaves
+the layer. Select handles Up, Down, Enter, and Escape while it is open or
+selected, including when the pointer is not over it.
+
+### Loading
+
+`Skeleton` covers a block that is still loading. `variant` is `text`,
+`rectangular`, `rounded`, or `circular`. `width` and `height` are pixels.
+`lines` and `gap` stack text rows. `SkeletonText` is the text variant.
+`animation` is `pulse`, `shimmer`, or `false`. `reducedMotion` holds the block
+still. A later theme preference can set that prop for you.
+
+`CircularProgress` spins while `value` is omitted. A `value` from 0 to 1 draws
+an arc and stops the spin. `size`, `thickness`, and `color` restyle the ring.
+`LinearProgress` is the existing `ProgressBar`: pass `value` from 0 to 1 or
+`progress` from 0 to 100. `indeterminate` slides the bar. `disabled` and
+`reducedMotion` stop the motion and fade the fill.
+
+`Button` and `IconButton` take `loading`. The control ignores clicks, hover,
+and focus while loading, and its size stays put. `loadingLabel` replaces the
+caption. `loadingPosition` is `start`, `center`, or `end`. `reducedMotion`
+keeps the spinner still.
+
+### State captures
+
+`stateMatrix` is the gallery list for Storyblox. Each row is one shot: `theme`
+(`Dark` or `Light`), `width`, and `pointer` (`rest`, `hover`, `press`, or
+`focus`). Rows are built in small helper functions and concatenated so the
+compiled Luau chunk stays under the 200-local register limit. `open` means the
+Select list is showing. `options` and `disabledOption` build RadioGroup, Select,
+and Tabs. `selected` and `filter` are TreeView. `value`, `text`, `disabled`,
+`loading`, `mixed`, `hasError`, and `placeholder` are that control's props.
+`variant`, `animation` (`pulse`, `shimmer`, or `false`), `reducedMotion`, and
+`indeterminate` cover skeleton and progress shots. Those shots stay still when
+`animation` is `false` or `reducedMotion` is set. Hover, press, and focus rows
+are only there when the control actually changes.
+
 ### Client
 
 Some sample logic for mounting app when player spawns (on client).

package/out/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { breakpointName, orientationName, resolveResponsive } from "./breakpoints";
 export { BreakpointName, OrientationName, Responsive } from "./breakpoints";
 export { useBreakpoints } from "./useBreakpoints";
-export { clearViewportObservers, observeViewport } from "./viewportObserver";
 export { useReducedMotion } from "./useReducedMotion";

package/out/hooks/init.luau

@@ -6,8 +6,5 @@ exports.breakpointName = _breakpoints.breakpointName
 exports.orientationName = _breakpoints.orientationName
 exports.resolveResponsive = _breakpoints.resolveResponsive
 exports.useBreakpoints = TS.import(script, script, "useBreakpoints").useBreakpoints
-local _viewportObserver = TS.import(script, script, "viewportObserver")
-exports.clearViewportObservers = _viewportObserver.clearViewportObservers
-exports.observeViewport = _viewportObserver.observeViewport
 exports.useReducedMotion = TS.import(script, script, "useReducedMotion").useReducedMotion
 return exports

package/out/hooks/useBreakpoints.luau

@@ -6,7 +6,6 @@ local useState = _react.useState
 local _breakpoints = TS.import(script, script.Parent, "breakpoints")
 local breakpointName = _breakpoints.breakpointName
 local orientationName = _breakpoints.orientationName
-local observeViewport = TS.import(script, script.Parent, "viewportObserver").observeViewport
 local function useBreakpoints(host)
 	local size, setSize = useState({
 		width = 0,
@@ -16,7 +15,17 @@ local function useBreakpoints(host)
 		if host == nil then
 			return nil
 		end
-		return observeViewport(host, setSize)
+		local read = function()
+			return setSize({
+				width = host.AbsoluteSize.X,
+				height = host.AbsoluteSize.Y,
+			})
+		end
+		read()
+		local connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
+		return function()
+			return connection:Disconnect()
+		end
 	end, { host })
 	return {
 		width = size.width,

package/out/theme/interfaces/theme/Theme.d.ts

@@ -21,21 +21,6 @@ interface Theme {
             styleOverrides?: {
                 [slot: string]: object;
             };
-            variants?: {
-                [prop: string]: {
-                    [value: string]: {
-                        [slot: string]: object;
-                    };
-                };
-            };
-            compoundVariants?: Array<{
-                when: {
-                    [prop: string]: unknown;
-                };
-                styles: {
-                    [slot: string]: object;
-                };
-            }>;
         };
     };
 }

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

@@ -4,7 +4,6 @@ local _componentTheme = TS.import(script, script.Parent, "componentTheme")
 local propsWithDefaults = _componentTheme.propsWithDefaults
 local slotsWithOverrides = _componentTheme.slotsWithOverrides
 local makeStyles = TS.import(script, script.Parent, "makeStyles").default
-local applyVariants = TS.import(script, script.Parent, "variants").applyVariants
 local componentStyles = function(name, factory)
 	return makeStyles((function(theme, props)
 		local _spec = theme.components
@@ -18,53 +17,12 @@ local componentStyles = function(name, factory)
 		end
 		local merged = propsWithDefaults(_result, props)
 		local paint = factory
-		local slots = paint(theme, merged)
+		local _exp = paint(theme, merged)
 		local _result_1 = spec
 		if _result_1 ~= nil then
-			_result_1 = _result_1.variants
+			_result_1 = _result_1.styleOverrides
 		end
-		local _condition = _result_1 ~= nil
-		if not _condition then
-			local _result_2 = spec
-			if _result_2 ~= nil then
-				_result_2 = _result_2.compoundVariants
-				if _result_2 ~= nil then
-					_result_2 = #_result_2
-				end
-			end
-			local _condition_1 = _result_2
-			if _condition_1 == nil then
-				_condition_1 = 0
-			end
-			_condition = _condition_1 > 0
-		end
-		if _condition then
-			local _exp = slots
-			local _exp_1 = merged
-			local _result_2 = spec
-			if _result_2 ~= nil then
-				_result_2 = _result_2.variants
-			end
-			local _condition_1 = _result_2
-			if _condition_1 == nil then
-				_condition_1 = {}
-			end
-			local _result_3 = spec
-			if _result_3 ~= nil then
-				_result_3 = _result_3.compoundVariants
-			end
-			local _condition_2 = _result_3
-			if _condition_2 == nil then
-				_condition_2 = {}
-			end
-			slots = applyVariants(_exp, _exp_1, _condition_1, _condition_2)
-		end
-		local _exp = slots
-		local _result_2 = spec
-		if _result_2 ~= nil then
-			_result_2 = _result_2.styleOverrides
-		end
-		return slotsWithOverrides(_exp, _result_2)
+		return slotsWithOverrides(_exp, _result_1)
 	end))
 end
 local default = componentStyles

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

@@ -5,21 +5,6 @@ export interface ComponentSpec {
     styleOverrides?: {
         [slot: string]: object;
     };
-    variants?: {
-        [prop: string]: {
-            [value: string]: {
-                [slot: string]: object;
-            };
-        };
-    };
-    compoundVariants?: Array<{
-        when: {
-            [prop: string]: unknown;
-        };
-        styles: {
-            [slot: string]: object;
-        };
-    }>;
 }
 export declare function propsWithDefaults(defaults: {
     [key: string]: unknown;

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

@@ -4,6 +4,4 @@ export { default as classNames, cx } from "./classNames";
 export { applyVariants, CompoundVariant } from "./variants";
 export { default as componentStyles } from "./componentStyles";
 export { resolveResponsive, Responsive } from "../../../hooks/breakpoints";
-export { clearStyleCaches, createStyleCache, styleDepsKey } from "./styleCache";
-export { resolveSx, resolvePaletteToken, PaletteToken, ResolvedSx, SxColor, SxGradient, SxInput } from "./resolveSx";
 export { interactionStyle, InteractionSlots, InteractionState, resolveStyle, StyleSelectorKey, StyleState, StyleWithSelectors, } from "./resolveStyle";

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

@@ -9,13 +9,6 @@ exports.cx = _classNames.cx
 exports.applyVariants = TS.import(script, script, "variants").applyVariants
 exports.componentStyles = TS.import(script, script, "componentStyles").default
 exports.resolveResponsive = TS.import(script, script.Parent.Parent.Parent, "hooks", "breakpoints").resolveResponsive
-local _styleCache = TS.import(script, script, "styleCache")
-exports.clearStyleCaches = _styleCache.clearStyleCaches
-exports.createStyleCache = _styleCache.createStyleCache
-exports.styleDepsKey = _styleCache.styleDepsKey
-local _resolveSx = TS.import(script, script, "resolveSx")
-exports.resolveSx = _resolveSx.resolveSx
-exports.resolvePaletteToken = _resolveSx.resolvePaletteToken
 local _resolveStyle = TS.import(script, script, "resolveStyle")
 exports.interactionStyle = _resolveStyle.interactionStyle
 exports.resolveStyle = _resolveStyle.resolveStyle

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

@@ -1,31 +1,23 @@
-export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_focusVisible" | "_disabled" | "_selected" | "_checked" | "_loading" | "_first" | "_last" | "_odd" | "_even";
+export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_disabled" | "_selected" | "_checked" | "_first" | "_last";
 export interface StyleState {
     hover?: boolean;
     pressed?: boolean;
     focused?: boolean;
-    focusVisible?: boolean;
     disabled?: boolean;
     selected?: boolean;
     checked?: boolean;
-    loading?: boolean;
     first?: boolean;
     last?: boolean;
-    odd?: boolean;
-    even?: boolean;
 }
 export type StyleWithSelectors<T extends object = object> = T & {
     _hover?: Partial<T>;
     _pressed?: Partial<T>;
     _focus?: Partial<T>;
-    _focusVisible?: Partial<T>;
     _disabled?: Partial<T>;
     _selected?: Partial<T>;
     _checked?: Partial<T>;
-    _loading?: Partial<T>;
     _first?: Partial<T>;
     _last?: Partial<T>;
-    _odd?: Partial<T>;
-    _even?: Partial<T>;
 };
 export interface InteractionSlots<T extends object = object> {
     hover?: T;
@@ -34,7 +26,7 @@ export interface InteractionSlots<T extends object = object> {
     disabled?: T;
 }
 export type InteractionState = Pick<StyleState, "hover" | "pressed" | "focused" | "disabled">;
-/** Peels selector keys and merges active ones onto the Instance props. */
+/** Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. */
 export declare function resolveStyle<T extends object>(style: StyleWithSelectors<T>, state?: StyleState): T;
 /** Prefer `resolveStyle` with `_hover` keys. Kept for existing call sites. */
 export declare function interactionStyle<T extends object>(base: T, slots: InteractionSlots<T>, state: InteractionState): T;

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

@@ -1,21 +1,17 @@
 -- Compiled with roblox-ts v3.0.0
---* Order matters: later keys win. Structural → selection → interaction; `_disabled` last. 
-local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_odd", "odd" }, { "_even", "even" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_loading", "loading" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_focusVisible", "focusVisible" }, { "_disabled", "disabled" } }
+--* Order matters: later keys win. Structural first, then interaction; `_disabled` last. 
+local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_disabled", "disabled" } }
 local SELECTOR_FLAGS = {
 	_hover = true,
 	_pressed = true,
 	_focus = true,
-	_focusVisible = true,
 	_selected = true,
 	_checked = true,
-	_loading = true,
 	_first = true,
 	_last = true,
-	_odd = true,
-	_even = true,
 	_disabled = true,
 }
---* Peels selector keys and merges active ones onto the Instance props. 
+--* Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. 
 local function resolveStyle(style, state)
 	if state == nil then
 		state = {}

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

@@ -1,4 +1,2 @@
 export declare function styleDepsKey(props: object | undefined): string;
 export declare function createStyleCache<T extends defined>(): (theme: object, key: string, create: () => T) => T;
-/** Drop all makeStyles memo buckets (theme hot-reload / tests). */
-export declare function clearStyleCaches(): void;

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

@@ -9,7 +9,6 @@ local KEYED = {
 	CFrame = true,
 	BrickColor = true,
 }
-local caches = {}
 local function styleDepsKey(props)
 	if props == nil then
 		return ""
@@ -41,7 +40,6 @@ local function styleDepsKey(props)
 end
 local function createStyleCache()
 	local byTheme = {}
-	table.insert(caches, byTheme)
 	return function(theme, key, create)
 		local _theme = theme
 		local bucket = byTheme[_theme]
@@ -64,14 +62,7 @@ local function createStyleCache()
 		return value
 	end
 end
---* Drop all makeStyles memo buckets (theme hot-reload / tests). 
-local function clearStyleCaches()
-	for _, cache in caches do
-		table.clear(cache)
-	end
-end
 return {
 	styleDepsKey = styleDepsKey,
 	createStyleCache = createStyleCache,
-	clearStyleCaches = clearStyleCaches,
 }

package/out/theme/types/types.d.ts

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from "@rbxts/react";
 import { WriteableStyle } from "../styles/index";
-import { SxInput } from "../styles/utilities/resolveSx";
 export interface CommonProps<T extends Instance> extends PropsWithChildren {
     className?: WriteableStyle<T>;
-    sx?: WriteableStyle<T> & SxInput;
+    sx?: WriteableStyle<T>;
     component?: T;
     id?: React.Key;
     ref?: React.Ref<T>;

package/out/ui/packages/accordion/components/Accordion.d.ts

@@ -4,8 +4,6 @@ export interface AccordionProps {
     title: string;
     open?: boolean;
     defaultOpen?: boolean;
-    disabled?: boolean;
-    square?: boolean;
     onChange?: (open: boolean) => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/accordion/components/Accordion.luau

@@ -3,19 +3,13 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
-local accordionGlyph = _accordionOpen.accordionGlyph
-local accordionOpen = _accordionOpen.accordionOpen
+local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
 	local title = _binding.title
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
-	local disabled = _binding.disabled
-	local square = _binding.square
 	local onChange = _binding.onChange
 	local children = _binding.children
 	local className = _binding.className
@@ -26,12 +20,8 @@ local function Accordion(props)
 	local open = accordionOpen(localOpen, controlled)
 	local styles = useAccordionStyles({
 		open = open,
-		disabled = disabled,
 	})
 	local toggle = function()
-		if disabled == true then
-			return nil
-		end
 		local nextOpen = not open
 		if controlled == nil then
 			setLocalOpen(nextOpen)
@@ -41,58 +31,52 @@ local function Accordion(props)
 			_result(nextOpen)
 		end
 	end
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Accordion"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
-	local _condition_1 = square ~= true
-	if _condition_1 then
-		local _attributes_1 = table.clone(styles.corner)
-		setmetatable(_attributes_1, nil)
-		_condition_1 = React.createElement("uicorner", _attributes_1)
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
 	end
-	local _attributes_1 = table.clone(styles.list)
+	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.corner)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _attributes_2 = {
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	local _attributes_3 = {
 		key = "Header",
 	}
 	for _k, _v in styles.header do
-		_attributes_2[_k] = _v
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Event = {
+	_attributes_3.Event = {
 		Activated = toggle,
 	}
-	local _attributes_3 = table.clone(styles.padding)
-	setmetatable(_attributes_3, nil)
-	local _exp_1 = React.createElement("uipadding", _attributes_3)
-	local _attributes_4 = {
+	local _attributes_4 = table.clone(styles.padding)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_4)
+	local _attributes_5 = {
 		key = "Title",
 	}
 	for _k, _v in styles.title do
-		_attributes_4[_k] = _v
-	end
-	_attributes_4.Text = title
-	local _exp_2 = React.createElement("textlabel", _attributes_4)
-	local _attributes_5 = {
-		key = "Icon",
-	}
-	for _k, _v in styles.icon do
 		_attributes_5[_k] = _v
 	end
-	_attributes_5.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
-	local _exp_3 = React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, React.createElement("imagelabel", _attributes_5))
+	_attributes_5.Text = title
+	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, React.createElement("textlabel", _attributes_5))
 	local _attributes_6 = {
 		key = "Body",
 	}
@@ -101,7 +85,7 @@ local function Accordion(props)
 	end
 	local _attributes_7 = table.clone(styles.padding)
 	setmetatable(_attributes_7, nil)
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
 end
 local default = Accordion
 return {

package/out/ui/packages/accordion/components/Accordion.styles.d.ts

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

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -8,7 +8,6 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	if open == nil then
 		open = false
 	end
-	local disabled = _param.disabled
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -28,30 +27,19 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
-			Active = disabled ~= true,
-			Selectable = disabled ~= true,
+			Active = true,
+			Selectable = true,
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.Y,
-			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.primary,
-			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
-		icon = {
-			Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
-			Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
-			AnchorPoint = Vector2.new(1, 0.5),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			ScaleType = Enum.ScaleType.Fit,
-			ImageColor3 = theme.palette.text.primary,
-			ImageTransparency = if disabled == true then 0.5 else 0,
-		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(1)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(1)),

package/out/ui/packages/accordion/components/accordionOpen.d.ts

@@ -1,2 +1 @@
 export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;
-export declare function accordionGlyph(open?: boolean): "expanded" | "collapsed";

package/out/ui/packages/accordion/components/accordionOpen.luau

@@ -5,10 +5,6 @@ local function accordionOpen(expanded, controlled)
 	end
 	return expanded == true
 end
-local function accordionGlyph(open)
-	return if open == true then "expanded" else "collapsed"
-end
 return {
 	accordionOpen = accordionOpen,
-	accordionGlyph = accordionGlyph,
 }