paris 0.16.2 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.17.1
+
+### Patch Changes
+
+- 8a01d4b: chore: Upgrade @fortawesome/react-fontawesome from ^0.2.0 to ^0.2.2
+
+## 0.17.0
+
+### Minor Changes
+
+- 079d8b7: chore: [Breaking] Upgrade to React v19 & NextJS 15
+
 ## 0.16.2
 
 ### Patch Changes

package/README.md

@@ -4,7 +4,7 @@ Paris is Slingshot's React design system, meant to work universally across serve
 
 Currently, Paris is provided as a set of *unbundled* `.tsx` components styled with SCSS modules. This means that you can import only the components you need, and you can use your own bundler to optimize your bundle size. As a result, Paris works best with frameworks like Next.js that have built-in support for TypeScript and SCSS modules.
 
-Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris to move away from Styletron and CSS-in-JS, since we're now largely working with React 18, RSC, and the Next.js `app` directory.
+Paris 1.x styling is heavily inspired by Uber's [Base Web](https://baseweb.design), which we previously used in our production apps. We built Paris to move away from Styletron and CSS-in-JS, since we're now largely working with React 19, RSC, and the Next.js `app` directory.
 
 <br />
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.16.2",
+  "version": "0.17.1",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -62,26 +62,27 @@
     "./utility": "./src/stories/utility/index.ts"
   },
   "dependencies": {
-    "@ariakit/react": "^0.2.3",
+    "@ariakit/react": "^0.4.20",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.2.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.1.8",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "clsx": "^1.2.1",
     "font-color-contrast": "^11.1.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^12.24.10",
     "pte": "^0.5.0",
     "react-hot-toast": "^2.4.1",
-    "react-parallax-tilt": "^1.7.144",
-    "react-tiny-popover": "^8.0.4",
+    "react-parallax-tilt": "^1.7.315",
+    "react-tiny-popover": "^8.1.6",
     "ts-deepmerge": "^6.0.3"
   },
   "peerDependencies": {
-    "react": "^18.x",
-    "react-dom": "^18.x",
+    "react": "^19.x",
+    "react-dom": "^19.x",
     "sass": "^1.x",
     "typescript": "^5.0"
   },
@@ -102,8 +103,8 @@
     "@storybook/theming": "8.6.14",
     "@stylistic/eslint-plugin": "^5.2.0",
     "@types/node": "^22.0.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8.46.1",
     "@typescript-eslint/parser": "^8.46.1",
     "autoprefixer": "^10.4.14",
@@ -121,9 +122,9 @@
     "husky": "^8.0.0",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
-    "next": "^14.2.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sass": "^1.62.1",
     "storybook": "8.6.14",
     "storybook-dark-mode": "^4.0.2",

package/src/stories/combobox/Combobox.tsx

@@ -8,8 +8,6 @@ import {
     Combobox as HCombobox, ComboboxInput, ComboboxOptions, ComboboxOption, Transition,
 } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from '../select/Select.module.scss';
@@ -23,7 +21,7 @@ import { Field } from '../field';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import { TextWhenString } from '../utility';
-import { Check, Icon } from '../icon';
+import { Check, Close, Icon } from '../icon';
 
 export type Option<T extends Record<string, any> = Record<string, any>> = {
     id: string,
@@ -264,7 +262,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         <Button
                             size="xs"
                             shape="circle"
-                            startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
+                            startEnhancer={<Close size={10} />}
                             onClick={() => {
                                 if (onChange) {
                                     onChange(null);

package/src/stories/text/Text.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 import { createElement, memo } from 'react';
 import { clsx } from 'clsx';
 import type { CSSColor } from '@ssh/csstypes';
@@ -69,7 +69,7 @@ export const Text = memo(<T extends TextElement = TextElement>({
     color,
     children,
     ...props
-}: TextProps<T>): JSX.Element => createElement(
+}: TextProps<T>): ReactElement => createElement(
     as || 'span',
     {
         ...props,

package/src/stories/tilt/Tilt.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { Property } from 'csstype';
+import type { CSSProperties } from 'react';
 import { Tilt } from './Tilt';
 import { Text } from '../text';
 import { pvar } from '../theme';
@@ -21,21 +21,25 @@ export const Default: Story = {
         onLeave: undefined,
         onMove: undefined,
     },
-    render: ({ children, style, ...args }) => (
-        <Tilt
-            {...args}
-            style={{
-                width: 'max-content',
-                userSelect: pvar('utils.defaultUserSelect') as Property.UserSelect,
-                backgroundColor: pvar('new.colors.surfacePrimary'),
-                boxShadow: pvar('new.lighting.shallowBelow'),
-                padding: '8px 16px',
-                // border: `1px solid ${pvar('new.borders.dropdown.color')}`,
-                borderRadius: pvar('borders.radius.rounded'),
-                ...style,
-            }}
-        >
-            {children}
-        </Tilt>
-    ),
+    render: ({ children, style, ...args }) => {
+        const tiltStyle = {
+            width: 'max-content',
+            userSelect: pvar('utils.defaultUserSelect'),
+            backgroundColor: pvar('new.colors.surfacePrimary'),
+            boxShadow: pvar('new.lighting.shallowBelow'),
+            padding: '8px 16px',
+            // border: `1px solid ${pvar('new.borders.dropdown.color')}`,
+            borderRadius: pvar('borders.radius.rounded'),
+            ...style,
+        } as CSSProperties;
+
+        return (
+            <Tilt
+                {...args}
+                style={tiltStyle}
+            >
+                {children}
+            </Tilt>
+        );
+    },
 };