diff --git a/.changeset/blue-crabs-scream.md b/.changeset/blue-crabs-scream.md new file mode 100644 index 0000000..d036dde --- /dev/null +++ b/.changeset/blue-crabs-scream.md @@ -0,0 +1,6 @@ +--- +'@sweatpants/panda-preset': minor +'@sweatpants/react': patch +--- + +Adjust Button styles, animate Drawer exit diff --git a/package-lock.json b/package-lock.json index 45afe0a..a913172 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@sweatpants/libra": "^0.0.28", "@types/react": "18.2.22", "@types/react-dom": "18.2.7", + "framer-motion": "10.16.4", "prettier": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", @@ -1190,6 +1191,18 @@ "sisteransi": "^1.0.5" } }, + "node_modules/@clack/prompts/node_modules/is-unicode-supported": { + "version": "1.3.0", + "extraneous": true, + "inBundle": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@emmetio/abbreviation": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.3.3.tgz", @@ -1211,6 +1224,23 @@ "resolved": "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.4.tgz", "integrity": "sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dev": true, + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true, + "optional": true + }, "node_modules/@esbuild/android-arm": { "version": "0.19.2", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.2.tgz", @@ -1652,6 +1682,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@manypkg/find-root": { "version": "1.1.0", "dev": true, @@ -2622,6 +2657,35 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@react-hook/latest": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz", + "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==", + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/passive-layout-effect": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz", + "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==", + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/resize-observer": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz", + "integrity": "sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==", + "dependencies": { + "@juggle/resize-observer": "^3.3.1", + "@react-hook/latest": "^1.0.2", + "@react-hook/passive-layout-effect": "^1.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/@remix-run/router": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz", @@ -5785,6 +5849,30 @@ "superjson": "^1.9.1" } }, + "node_modules/framer-motion": { + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", + "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "dev": true, + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs-extra": { "version": "11.1.1", "license": "MIT", @@ -12041,7 +12129,8 @@ "dependencies": { "@radix-ui/react-dialog": "1.0.4", "@radix-ui/react-select": "1.2.2", - "@radix-ui/react-slot": "1.0.2" + "@radix-ui/react-slot": "1.0.2", + "@react-hook/resize-observer": "^1.2.6" }, "devDependencies": { "@pandacss/dev": "0.15.1", diff --git a/package.json b/package.json index debec78..c7343b8 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@sweatpants/libra": "^0.0.28", "@types/react": "18.2.22", "@types/react-dom": "18.2.7", + "framer-motion": "10.16.4", "prettier": "3.0.3", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/packages/panda-preset/src/index.ts b/packages/panda-preset/src/index.ts index d4ccc45..7208f89 100644 --- a/packages/panda-preset/src/index.ts +++ b/packages/panda-preset/src/index.ts @@ -2,24 +2,6 @@ import { definePreset } from '@pandacss/dev'; export default definePreset({ theme: { - keyframes: { - fadein: { - from: { opacity: '0' }, - to: { opacity: '1' } - }, - fadeout: { - to: { opacity: '0' }, - from: { opacity: '1' } - }, - slideinright: { - from: { transform: 'translateX(100%)' }, - to: { transform: 'translateX(0)' } - }, - slideinbottom: { - from: { transform: 'translateY(100%)' }, - to: { transform: 'translateY(0)' } - } - }, breakpoints: { sm: '640px', md: '768px', diff --git a/packages/react/package.json b/packages/react/package.json index 0ce62fc..61d7101 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -30,6 +30,7 @@ "dependencies": { "@radix-ui/react-dialog": "1.0.4", "@radix-ui/react-select": "1.2.2", - "@radix-ui/react-slot": "1.0.2" + "@radix-ui/react-slot": "1.0.2", + "@react-hook/resize-observer": "^1.2.6" } } diff --git a/packages/react/src/button/Button.tsx b/packages/react/src/button/Button.tsx index 955a88e..71cee39 100644 --- a/packages/react/src/button/Button.tsx +++ b/packages/react/src/button/Button.tsx @@ -51,8 +51,8 @@ const styles = cva({ lineHeight: 'calc(2.5rem - 2px)' }, md: { fontSize: '4', paddingX: '4', lineHeight: 'calc(2rem - 2px)' }, - sm: { fontSize: '3', paddingX: '4', lineHeight: 'calc(1.75rem - 2px)' }, - xs: { fontSize: '3', paddingX: '3', lineHeight: 'calc(1.25rem - 2px)' } + sm: { fontSize: '2', paddingX: '4', lineHeight: 'calc(1.75rem - 2px)' }, + xs: { fontSize: '2', paddingX: '3', lineHeight: 'calc(1.25rem - 2px)' } }, disabled: { true: { cursor: 'not-allowed', opacity: '0.7' }, @@ -94,7 +94,7 @@ const styles = cva({ bg: 'transparent', borderColor: 'transparent', position: 'relative', - color: 'gray12', + color: 'gray10', _before: { content: '""', position: 'absolute', @@ -113,6 +113,7 @@ const styles = cva({ }, '&:hover:not(:disabled)': { bg: 'transparent', + color: 'gray12', _before: { opacity: '0.08' } diff --git a/packages/react/src/drawer/Drawer.tsx b/packages/react/src/drawer/Drawer.tsx index dfa98b6..c28e724 100644 --- a/packages/react/src/drawer/Drawer.tsx +++ b/packages/react/src/drawer/Drawer.tsx @@ -1,7 +1,18 @@ 'use client'; -import { ComponentPropsWithRef, ReactNode, forwardRef } from 'react'; +import { + ComponentPropsWithRef, + MutableRefObject, + ReactNode, + forwardRef, + useEffect, + useLayoutEffect, + useRef, + useState +} from 'react'; import * as Dialog from '@radix-ui/react-dialog'; +import { motion, AnimatePresence } from 'framer-motion'; +import useResizeObserver from '@react-hook/resize-observer'; import { css } from '@styles/css'; import { Button } from '../button/Button'; import { Cross } from '../icons/icons'; @@ -16,9 +27,7 @@ const overlay = css({ position: 'fixed', zIndex: '2', inset: 0, - background: '#b9bbc650', // gray8 - transition: '0.15s', - animation: ['fadein 150ms linear'] + background: '#b9bbc650' // gray8 }); const content = css({ @@ -28,20 +37,21 @@ const content = css({ right: '0', background: 'baseBg', borderTopLeftRadius: 'xl', - borderBottomLeftRadius: 'xl', + borderBottomLeftRadius: '0', + borderTopRightRadius: 'xl', boxShadow: '0 0 24px 0px rgba(0,0,0,0.1)', p: '6', maxWidth: '100%', width: '100%', height: '95%', top: 'auto', - animation: ['slideinbottom .25s cubic-bezier(0.33, 1, 0.68, 1)'], sm: { maxWidth: '90%', width: '350px', height: '100%', top: '0', - animation: ['slideinright .25s cubic-bezier(0.33, 1, 0.68, 1)'] + borderBottomLeftRadius: 'xl', + borderTopRightRadius: '0' } }); @@ -53,22 +63,80 @@ const close = css({ }); const Drawer = forwardRef((props, userRef) => { - const { children, trigger, ...rest } = props; + const { children, trigger, defaultOpen, open, onOpenChange, ...rest } = props; + const [internalOpen, setInternalOpen] = useState( + defaultOpen ?? open ?? false + ); + const [isSmall, setIsSmall] = useState(false); + const ref = useRef(null) as MutableRefObject; + + useEffect(() => { + if (typeof document !== 'undefined' && document.body) { + ref.current = document.body; + } + }, []); + + useResizeObserver(ref.current, (entry) => { + setIsSmall(entry.contentRect.width < 640); + }); + + useLayoutEffect(() => { + setIsSmall((ref.current?.getBoundingClientRect()?.width ?? 0) < 640); + }, [ref]); + + const handleOpenChange = (value: boolean) => { + setInternalOpen(value); + onOpenChange?.(value); + }; + + const finalOpen = defaultOpen ?? open ?? internalOpen; + return ( - + {trigger} - - - - {children} - - - - - + + {finalOpen ? ( + + + + + + + + {children} + + + + + + + ) : null} + ); }); diff --git a/packages/react/src/tab/Tab.tsx b/packages/react/src/tab/Tab.tsx index 7294806..68ec107 100644 --- a/packages/react/src/tab/Tab.tsx +++ b/packages/react/src/tab/Tab.tsx @@ -10,7 +10,6 @@ export type TabProps = ComponentPropsWithRef<'button'> & { const styles = cva({ base: { position: 'relative', - color: 'gray10!', _after: { content: "''", display: 'block', @@ -22,7 +21,8 @@ const styles = cva({ bg: 'gray12', borderRadius: 'sm', transition: '0.15s' - } + }, + _hover: {} }, variants: { selected: { diff --git a/packages/react/src/toast/Toast.tsx b/packages/react/src/toast/Toast.tsx index e9c8edb..9305cb8 100644 --- a/packages/react/src/toast/Toast.tsx +++ b/packages/react/src/toast/Toast.tsx @@ -26,7 +26,10 @@ const styles = cva({ borderColor: 'red11', boxShadow: '0 3px 5px 0px rgba(255,0,0,0.1)', '& button': { - color: 'red5' + color: 'red5!', + _hover: { + color: 'red2!' + } } }, neutral: { @@ -35,7 +38,10 @@ const styles = cva({ borderColor: 'gray12', boxShadow: '0 3px 5px 0px rgba(0,0,0,0.05)', '& button': { - color: 'gray6' + color: 'gray8!', + _hover: { + color: 'gray1!' + } } } }