paris 0.17.1 → 0.17.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.17.4
+
+### Patch Changes
+
+- 693a687: fix(combobox): revert close icon to FontAwesomeIcon
+- 12331bd: Theme: fix dark theme color value for `overlayWhiteUltrastrong`
+- 9774b0e: Field's container `onClick` called `input.click()` even when the click originated from the button itself, causing a double toggle on touch devices. This broke Headless UI Select/Menu/Combobox on iOS Safari since HUI 2.2+ toggles on `onClick` for touch (unlike mouse, which toggles on `pointerDown`).
+
+## 0.17.3
+
+### Patch Changes
+
+- 1f67456: chore: add typecheck script and PR check CI workflow
+
 ## 0.17.1
 
 ### Patch Changes

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.17.1",
+  "version": "0.17.4",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -64,9 +64,9 @@
   "dependencies": {
     "@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/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.2.4",
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -81,6 +81,8 @@
     "ts-deepmerge": "^6.0.3"
   },
   "peerDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "react": "^19.x",
     "react-dom": "^19.x",
     "sass": "^1.x",
@@ -144,6 +146,7 @@
     "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
     "generate:text": "ts-node --esm ./scripts/text.ts",
     "release": "pnpm generate:exports && pnpm changeset publish",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint ."
   }
 }

package/src/stories/combobox/Combobox.tsx

@@ -8,6 +8,8 @@ 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';
@@ -21,7 +23,7 @@ import { Field } from '../field';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import { TextWhenString } from '../utility';
-import { Check, Close, Icon } from '../icon';
+import { Check, Icon } from '../icon';
 
 export type Option<T extends Record<string, any> = Record<string, any>> = {
     id: string,
@@ -262,7 +264,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         <Button
                             size="xs"
                             shape="circle"
-                            startEnhancer={<Close size={10} />}
+                            startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
                             onClick={() => {
                                 if (onChange) {
                                     onChange(null);

package/src/stories/field/Field.tsx

@@ -124,7 +124,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             onClick={(e) => {
                 if (typeof window !== 'undefined' && htmlFor) {
                     const input = document.getElementById(htmlFor);
-                    if (input && !disabled) {
+                    if (input && !disabled && !input.contains(e.target as Node)) {
                         if (input.tagName === 'BUTTON') input.click();
                         else input.focus();
                     }

package/src/stories/select/Select.tsx

@@ -151,6 +151,14 @@ export const Select = forwardRef(<T = Record<string, any>>({
 }: SelectProps<T>, ref: ForwardedRef<any>) => {
     const inputID = useId();
     const multiItems = multipleItemsName || 'items';
+
+    // TypeScript can't track discriminated union correlation through destructuring and JSX conditionals.
+    // For Listbox: supports both single and multi via overloads, needs explicit union types
+    // For RadioGroup: only supports single-select, needs narrowed types
+    const listboxValue = value as string | string[] | null | undefined;
+    const listboxOnChange = onChange as ((value: string | string[] | null) => void) | undefined;
+    const singleValue = value as string | null | undefined;
+    const singleOnChange = onChange as ((value: string | null) => void) | undefined;
     const buttonText = () => {
         if (!value || value.length === 0) {
             return placeholder || 'Select an option';
@@ -182,8 +190,8 @@ export const Select = forwardRef(<T = Record<string, any>>({
                 <Listbox
                     as="div"
                     ref={ref}
-                    value={value}
-                    onChange={onChange}
+                    value={listboxValue}
+                    onChange={listboxOnChange}
                     multiple={multiple}
                 >
                     <ListboxButton
@@ -273,7 +281,7 @@ export const Select = forwardRef(<T = Record<string, any>>({
                 </Listbox>
             )}
             {kind === 'radio' && (
-                <RadioGroup ref={ref} as="div" className={styles.radioContainer} value={value} onChange={onChange}>
+                <RadioGroup ref={ref} as="div" className={styles.radioContainer} value={singleValue} onChange={singleOnChange}>
                     {options.map((option) => (
                         <Radio
                             as="div"
@@ -294,7 +302,7 @@ export const Select = forwardRef(<T = Record<string, any>>({
                 </RadioGroup>
             )}
             {kind === 'card' && (
-                <RadioGroup ref={ref} as="div" className={styles.cardContainer} value={value} onChange={onChange}>
+                <RadioGroup ref={ref} as="div" className={styles.cardContainer} value={singleValue} onChange={singleOnChange}>
                     {options.map((option) => (
                         <Radio
                             as="div"
@@ -316,7 +324,7 @@ export const Select = forwardRef(<T = Record<string, any>>({
                 </RadioGroup>
             )}
             {kind === 'segmented' && (
-                <RadioGroup ref={ref} as="div" className={styles.segmentedContainer} value={value || options[0].id} onChange={onChange}>
+                <RadioGroup ref={ref} as="div" className={styles.segmentedContainer} value={singleValue || options[0].id} onChange={singleOnChange}>
                     {options.map((option) => (
                         <Radio
                             as="div"

package/src/stories/theme/themes.ts

@@ -1380,7 +1380,7 @@ export const DarkTheme: Theme = merge(LightTheme, {
             overlayStrong: 'rgba(255, 255, 255, 0.09)',
             overlayInverseSubtle: 'rgba(0, 0, 0, 0.02)',
             overlayInverseMedium: 'rgba(0, 0, 0, 0.05)',
-            overlayWhiteUltrastrong: 'rgba(0, 0, 0, 0.18)',
+            overlayWhiteUltrastrong: 'rgba(255, 255, 255, 0.18)',
             overlayBlackSubtle: 'rgba(0, 0, 0, 0.2)',
             overlayBlackMedium: 'rgba(0, 0, 0, 0.3)',
             overlayBlackStrong: 'rgba(0, 0, 0, 0.4)',