From 3c114f0da52e23233ec338d278361bace890e9e8 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Wed, 9 Nov 2022 14:58:24 +0900
Subject: [PATCH] Leftover type safety

---
 examples/next-example/src/pages/index.tsx | 4 ++--
 packages/react/src/index.ts               | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/examples/next-example/src/pages/index.tsx b/examples/next-example/src/pages/index.tsx
index 9f244d9..32d325c 100644
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -5,10 +5,10 @@
 
 import Head from "next/head";
 import Image from "next/image";
-import { useYoshiki } from "@yoshiki/react";
+import { useYoshiki, Stylable } from "@yoshiki/react";
 import { ReactNode } from "react";
 
-const Box = ({ children, ...props }: { children?: ReactNode }) => {
+const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
 	const { css } = useYoshiki();
 
 	return (
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4d8eeb3..a65ec1d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -5,7 +5,7 @@
 
 import { Properties } from "csstype";
 import { Theme, YoshikiStyle, useTheme, breakpoints, isBreakpoints } from "@yoshiki/core";
-import { useInsertionEffect } from "react";
+import { CSSProperties, useInsertionEffect } from "react";
 
 // TODO: shorthands
 export type CssObject = {
@@ -58,7 +58,7 @@ export const useYoshiki = () => {
 	return {
 		css: (
 			css: CssObject /*  | CssObject[] */,
-			leftOverProps?: { className?: string; style?: Properties },
+			leftOverProps?: { className?: string; style?: CSSProperties },
 		) => {
 			const { className, style, ...leftOver } = leftOverProps ?? {};
 
@@ -82,3 +82,8 @@ export const useYoshiki = () => {
 		theme,
 	};
 };
+
+export type Stylable = {
+	className?: string,
+	style?: CSSProperties,
+}