@lattice-ui/accordion 0.4.4 → 0.5.0-next.2

package/default.project.json

@@ -0,0 +1,9 @@
+{
+  "name": "accordion",
+  "tree": {
+    "$path": "out",
+    "out": {
+      "$path": "out"
+    }
+  }
+}

package/out/Accordion/AccordionContent.d.ts

@@ -1,3 +1,3 @@
 import { React } from "@lattice-ui/core";
 import type { AccordionContentProps } from "./types";
-export declare function AccordionContent(props: AccordionContentProps): React.JSX.Element | undefined;
+export declare function AccordionContent(props: AccordionContentProps): React.JSX.Element;

package/out/Accordion/AccordionContent.luau

@@ -3,11 +3,25 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
+local Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createSurfaceRevealRecipe = _motion.createSurfaceRevealRecipe
+local usePresenceMotionController = _motion.usePresenceMotionController
 local useAccordionItemContext = TS.import(script, script.Parent, "context").useAccordionItemContext
-local function AccordionContent(props)
-	local itemContext = useAccordionItemContext()
-	local forceMount = props.forceMount == true
-	if not itemContext.open and not forceMount then
+local function AccordionContentImpl(props)
+	local defaultTransition = React.useMemo(function()
+		return createSurfaceRevealRecipe()
+	end, {})
+	local config = props.transition or defaultTransition
+	local motion = usePresenceMotionController({
+		present = props.present,
+		forceMount = props.forceMount,
+		config = config,
+		onExitComplete = props.onExitComplete,
+	})
+	local mounted = motion.mounted
+	local visible = mounted and (motion.present or motion.phase ~= "exited")
+	if not mounted then
 		return nil
 	end
 	if props.asChild then
@@ -16,16 +30,41 @@ local function AccordionContent(props)
 			error("[AccordionContent] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
-			Visible = itemContext.open,
+			Visible = visible,
+			ref = motion.ref,
 		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(35, 41, 54),
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(260, 44),
-		Visible = itemContext.open,
+		Visible = visible,
+		ref = motion.ref,
 	}, props.children)
 end
+local function AccordionContent(props)
+	local itemContext = useAccordionItemContext()
+	local forceMount = props.forceMount == true
+	if forceMount then
+		return React.createElement(AccordionContentImpl, {
+			asChild = props.asChild,
+			forceMount = true,
+			present = itemContext.open,
+			transition = props.transition,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		present = itemContext.open,
+		render = function(state)
+			return React.createElement(AccordionContentImpl, {
+				asChild = props.asChild,
+				onExitComplete = state.onExitComplete,
+				present = state.isPresent,
+				transition = props.transition,
+			}, props.children)
+		end,
+	})
+end
 return {
 	AccordionContent = AccordionContent,
 }

package/out/Accordion/AccordionTrigger.luau

@@ -3,6 +3,9 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createSelectionResponseRecipe = _motion.createSelectionResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local _context = TS.import(script, script.Parent, "context")
 local useAccordionContext = _context.useAccordionContext
 local useAccordionItemContext = _context.useAccordionItemContext
@@ -10,6 +13,14 @@ local function AccordionTrigger(props)
 	local accordionContext = useAccordionContext()
 	local itemContext = useAccordionItemContext()
 	local disabled = itemContext.disabled
+	local motionRef = useResponseMotion(itemContext.open, {
+		active = {
+			BackgroundColor3 = Color3.fromRGB(59, 66, 84),
+		},
+		inactive = {
+			BackgroundColor3 = Color3.fromRGB(41, 48, 63),
+		},
+	}, createSelectionResponseRecipe(0.15))
 	local handleActivated = React.useCallback(function()
 		if disabled then
 			return nil
@@ -40,12 +51,13 @@ local function AccordionTrigger(props)
 			Active = not disabled,
 			Event = eventHandlers,
 			Selectable = false,
+			ref = motionRef,
 		}, child)
 	end
 	return React.createElement("textbutton", {
 		Active = not disabled,
 		AutoButtonColor = false,
-		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
+		BackgroundColor3 = if itemContext.open then Color3.fromRGB(59, 66, 84) else Color3.fromRGB(41, 48, 63),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
 		Selectable = false,
@@ -54,6 +66,7 @@ local function AccordionTrigger(props)
 		TextColor3 = if disabled then Color3.fromRGB(143, 150, 165) else Color3.fromRGB(236, 241, 249),
 		TextSize = 14,
 		TextXAlignment = Enum.TextXAlignment.Left,
+		ref = motionRef,
 	}, React.createElement("uipadding", {
 		PaddingLeft = UDim.new(0, 10),
 	}), props.children)

package/out/Accordion/types.d.ts

@@ -1,3 +1,4 @@
+import type { PresenceMotionConfig } from "@lattice-ui/motion";
 import type React from "@rbxts/react";
 import type { AccordionType } from "./state";
 export type AccordionContextValue = {
@@ -35,5 +36,6 @@ export type AccordionTriggerProps = {
 export type AccordionContentProps = {
     asChild?: boolean;
     forceMount?: boolean;
+    transition?: PresenceMotionConfig;
     children?: React.ReactNode;
 };

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "@lattice-ui/accordion",
-  "version": "0.4.4",
+  "version": "0.5.0-next.2",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "default.project.json",
+    "out",
+    "src",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/astra-void/lattice-ui.git"
+  },
   "dependencies": {
-    "@lattice-ui/core": "0.4.4"
+    "@lattice-ui/core": "0.5.0-next.2",
+    "@lattice-ui/motion": "0.5.0-next.2",
+    "@lattice-ui/layer": "0.5.0-next.2"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -17,6 +30,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Accordion/AccordionContent.tsx

@@ -1,12 +1,31 @@
 import { React, Slot } from "@lattice-ui/core";
+import { Presence } from "@lattice-ui/layer";
+import { createSurfaceRevealRecipe, type PresenceMotionConfig, usePresenceMotionController } from "@lattice-ui/motion";
 import { useAccordionItemContext } from "./context";
 import type { AccordionContentProps } from "./types";
 
-export function AccordionContent(props: AccordionContentProps) {
-  const itemContext = useAccordionItemContext();
-  const forceMount = props.forceMount === true;
+function AccordionContentImpl(props: {
+  present: boolean;
+  forceMount?: boolean;
+  transition?: PresenceMotionConfig;
+  onExitComplete?: () => void;
+  asChild?: boolean;
+  children?: React.ReactNode;
+}) {
+  const defaultTransition = React.useMemo(() => createSurfaceRevealRecipe(), []);
+  const config = props.transition ?? defaultTransition;
+
+  const motion = usePresenceMotionController<Frame>({
+    present: props.present,
+    forceMount: props.forceMount,
+    config,
+    onExitComplete: props.onExitComplete,
+  });
 
-  if (!itemContext.open && !forceMount) {
+  const mounted = motion.mounted;
+  const visible = mounted && (motion.present || motion.phase !== "exited");
+
+  if (!mounted) {
     return undefined;
   }
 
@@ -16,7 +35,11 @@ export function AccordionContent(props: AccordionContentProps) {
       error("[AccordionContent] `asChild` requires a child element.");
     }
 
-    return <Slot Visible={itemContext.open}>{child}</Slot>;
+    return (
+      <Slot Visible={visible} ref={motion.ref}>
+        {child}
+      </Slot>
+    );
   }
 
   return (
@@ -24,9 +47,44 @@ export function AccordionContent(props: AccordionContentProps) {
       BackgroundColor3={Color3.fromRGB(35, 41, 54)}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(260, 44)}
-      Visible={itemContext.open}
+      Visible={visible}
+      ref={motion.ref}
     >
       {props.children}
     </frame>
   );
 }
+
+export function AccordionContent(props: AccordionContentProps) {
+  const itemContext = useAccordionItemContext();
+  const forceMount = props.forceMount === true;
+
+  if (forceMount) {
+    return (
+      <AccordionContentImpl
+        asChild={props.asChild}
+        forceMount={true}
+        present={itemContext.open}
+        transition={props.transition}
+      >
+        {props.children}
+      </AccordionContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      present={itemContext.open}
+      render={(state) => (
+        <AccordionContentImpl
+          asChild={props.asChild}
+          onExitComplete={state.onExitComplete}
+          present={state.isPresent}
+          transition={props.transition}
+        >
+          {props.children}
+        </AccordionContentImpl>
+      )}
+    />
+  );
+}

package/src/Accordion/AccordionTrigger.tsx

@@ -1,4 +1,5 @@
 import { React, Slot } from "@lattice-ui/core";
+import { createSelectionResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
 import { useAccordionContext, useAccordionItemContext } from "./context";
 import type { AccordionTriggerProps } from "./types";
 
@@ -7,6 +8,15 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
   const itemContext = useAccordionItemContext();
   const disabled = itemContext.disabled;
 
+  const motionRef = useResponseMotion<TextButton>(
+    itemContext.open,
+    {
+      active: { BackgroundColor3: Color3.fromRGB(59, 66, 84) },
+      inactive: { BackgroundColor3: Color3.fromRGB(41, 48, 63) },
+    },
+    createSelectionResponseRecipe(0.15),
+  );
+
   const handleActivated = React.useCallback(() => {
     if (disabled) {
       return;
@@ -44,7 +54,7 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
     }
 
     return (
-      <Slot Active={!disabled} Event={eventHandlers} Selectable={false}>
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={false} ref={motionRef}>
         {child}
       </Slot>
     );
@@ -54,7 +64,7 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
     <textbutton
       Active={!disabled}
       AutoButtonColor={false}
-      BackgroundColor3={Color3.fromRGB(41, 48, 63)}
+      BackgroundColor3={itemContext.open ? Color3.fromRGB(59, 66, 84) : Color3.fromRGB(41, 48, 63)}
       BorderSizePixel={0}
       Event={eventHandlers}
       Selectable={false}
@@ -63,6 +73,7 @@ export function AccordionTrigger(props: AccordionTriggerProps) {
       TextColor3={disabled ? Color3.fromRGB(143, 150, 165) : Color3.fromRGB(236, 241, 249)}
       TextSize={14}
       TextXAlignment={Enum.TextXAlignment.Left}
+      ref={motionRef}
     >
       <uipadding PaddingLeft={new UDim(0, 10)} />
       {props.children}

package/src/Accordion/types.ts

@@ -1,3 +1,4 @@
+import type { PresenceMotionConfig } from "@lattice-ui/motion";
 import type React from "@rbxts/react";
 import type { AccordionType } from "./state";
 
@@ -42,5 +43,6 @@ export type AccordionTriggerProps = {
 export type AccordionContentProps = {
   asChild?: boolean;
   forceMount?: boolean;
+  transition?: PresenceMotionConfig;
   children?: React.ReactNode;
 };

package/.turbo/turbo-build.log

@@ -1,4 +0,0 @@
-
-> @lattice-ui/accordion@0.4.4 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\accordion
-> rbxtsc -p tsconfig.json
-

package/.turbo/turbo-typecheck.log

@@ -1,4 +0,0 @@
-
-> @lattice-ui/accordion@0.4.4 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\accordion
-> tsc -p tsconfig.typecheck.json
-

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "out",
-    "declaration": true,
-    "typeRoots": [
-      "./node_modules/@rbxts",
-      "../../node_modules/@rbxts",
-      "./node_modules/@lattice-ui",
-      "../../node_modules/@lattice-ui"
-    ],
-    "types": ["types", "compiler-types"]
-  },
-  "include": ["src"]
-}

package/tsconfig.typecheck.json

@@ -1,35 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "baseUrl": "..",
-    "rootDir": "..",
-    "paths": {
-      "@lattice-ui/accordion": ["accordion/src/index.ts"],
-      "@lattice-ui/avatar": ["avatar/src/index.ts"],
-      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
-      "@lattice-ui/combobox": ["combobox/src/index.ts"],
-      "@lattice-ui/core": ["core/src/index.ts"],
-      "@lattice-ui/dialog": ["dialog/src/index.ts"],
-      "@lattice-ui/focus": ["focus/src/index.ts"],
-      "@lattice-ui/layer": ["layer/src/index.ts"],
-      "@lattice-ui/menu": ["menu/src/index.ts"],
-      "@lattice-ui/popover": ["popover/src/index.ts"],
-      "@lattice-ui/popper": ["popper/src/index.ts"],
-      "@lattice-ui/progress": ["progress/src/index.ts"],
-      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
-      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
-      "@lattice-ui/select": ["select/src/index.ts"],
-      "@lattice-ui/slider": ["slider/src/index.ts"],
-      "@lattice-ui/style": ["style/src/index.ts"],
-      "@lattice-ui/switch": ["switch/src/index.ts"],
-      "@lattice-ui/system": ["system/src/index.ts"],
-      "@lattice-ui/tabs": ["tabs/src/index.ts"],
-      "@lattice-ui/text-field": ["text-field/src/index.ts"],
-      "@lattice-ui/textarea": ["textarea/src/index.ts"],
-      "@lattice-ui/toast": ["toast/src/index.ts"],
-      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
-      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
-    }
-  }
-}