fix exports and add mouse icon

Author: ari-party

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grand-hawk/ui-components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "keywords": [
     "roblox-ts",
     "react",
@@ -49,6 +49,7 @@
   "dependencies": {
     "@rbxts/react": "^0.4.0",
     "@rbxts/react-roblox": "^0.4.0",
+    "@rbxts/services": "^1.5.4",
     "@rbxts/ui-labs": "^2.1.1",
     "roblox-ts": "^2.3.0-dev-576ad98"
   },

pnpm-lock.yaml

@@ -4,6 +4,7 @@ import { Box } from 'components/Box';
 import { ProgressBar, type ProgressBarProps } from 'components/ProgressBar';
 import { useTheme } from 'components/ThemeProvider';
 import { mergeFunctions } from 'helpers';
+import { setMouseIcon, SystemCursors } from 'utils';
 
 import type { PropsWithChildren } from '@rbxts/react';
 import type { BoxProps } from 'components/Box';
@@ -65,7 +66,11 @@ export function Slider(componentProps: PropsWithChildren<SliderProps>) {
               if (sliderChanged) sliderChanged(newValue);
             },
 
-            MouseButton1Up: () => setIsDragging(false),
+            MouseButton1Up: () => {
+              setIsDragging(false);
+
+              setMouseIcon(SystemCursors.Arrow);
+            },
           }}
           Selectable={false}
           Size={UDim2.fromOffset(math.huge, math.huge)}
@@ -97,12 +102,24 @@ export function Slider(componentProps: PropsWithChildren<SliderProps>) {
         Event={{
           ...handleProps?.Event,
 
-          MouseButton1Down: mergeFunctions<
-            (rbx: TextButton, x: number, y: number) => unknown
-          >(() => {
+          MouseButton1Down: mergeFunctions(() => {
             if (isDragging) return;
             setIsDragging(true);
+
+            setMouseIcon(SystemCursors.ClosedHand);
           }, handleProps?.Event?.MouseButton1Down),
+
+          MouseEnter: mergeFunctions(() => {
+            if (isDragging) return;
+
+            setMouseIcon(SystemCursors.OpenHand);
+          }, handleProps?.Event?.MouseEnter),
+
+          MouseLeave: mergeFunctions(() => {
+            if (isDragging) return;
+
+            setMouseIcon(SystemCursors.Arrow);
+          }, handleProps?.Event?.MouseEnter),
         }}
       />
 

src/components/Slider/index.tsx

@@ -1,10 +1,13 @@
 export * from 'components/Box';
 export * from 'components/Button';
 export * from 'components/Input';
+export * from 'components/ProgressBar';
 export * from 'components/SecondaryButton';
 export * from 'components/Sheet';
+export * from 'components/Slider';
 export * from 'components/ThemeProvider';
 export * from 'components/Typography';
 
 export * from 'helpers';
 export * from 'themes';
+export * from 'utils';

src/index.ts

@@ -0,0 +1 @@
+export * from './setMouseIcon';

src/utils/index.ts

@@ -0,0 +1,31 @@
+import { Players, UserInputService } from '@rbxts/services';
+
+export enum SystemCursors {
+  Arrow = 'rbxasset://SystemCursors/Arrow',
+  PointingHand = 'rbxasset://SystemCursors/PointingHand',
+  OpenHand = 'rbxasset://SystemCursors/OpenHand',
+  ClosedHand = 'rbxasset://SystemCursors/ClosedHand',
+  IBeam = 'rbxasset://SystemCursors/IBeam',
+  SizeNS = 'rbxasset://SystemCursors/SizeNS',
+  SizeEW = 'rbxasset://SystemCursors/SizeEW',
+  SizeNESW = 'rbxasset://SystemCursors/SizeNESW',
+  SizeNWSE = 'rbxasset://SystemCursors/SizeNWSE',
+  SizeAll = 'rbxasset://SystemCursors/SizeAll',
+  SplitNS = 'rbxasset://SystemCursors/SplitNS',
+  SplitEW = 'rbxasset://SystemCursors/SplitEW',
+  Forbidden = 'rbxasset://SystemCursors/Forbidden',
+  Wait = 'rbxasset://SystemCursors/Wait',
+  Busy = 'rbxasset://SystemCursors/Busy',
+  Cross = 'rbxasset://SystemCursors/Cross',
+}
+
+export function setMouseIcon(icon: string): boolean {
+  const localPlayer = Players.FindFirstChild('LocalPlayer') as
+    | Player
+    | undefined;
+  if (!localPlayer) return false;
+
+  UserInputService.MouseIcon = icon;
+
+  return true;
+}