paris 0.23.0 → 0.24.0

package/dist/types/Enhancer.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export type Enhancer = ReactNode | (({ size }: {
+    size: number;
+}) => ReactNode);

package/package.json

@@ -2,7 +2,12 @@
     "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.23.0",
+    "version": "0.24.0",
+    "type": "module",
+    "sideEffects": [
+        "**/*.css",
+        "**/*.scss"
+    ],
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {
@@ -10,8 +15,7 @@
         "url": "https://github.com/slingshot/paris"
     },
     "files": [
-        "src/stories",
-        "src",
+        "dist",
         "README.md",
         "CHANGELOG.md"
     ],
@@ -27,21 +31,23 @@
         "storybook"
     ],
     "scripts": {
-        "build": "bun run generate:exports && next build",
+        "build": "bun run generate:exports && vite build && node scripts/buildThemeCss.mjs",
+        "build:site": "next build",
+        "prepack": "bun run build",
         "storybook": "storybook dev -p 6006",
         "build:storybook": "storybook build",
-        "create:component": "node ./scripts/createComponent.js",
-        "generate:exports": "node ./scripts/generateExports.js",
+        "create:component": "node ./scripts/createComponent.cjs",
+        "generate:exports": "node ./scripts/generateExports.cjs",
         "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
         "generate:text": "ts-node --esm ./scripts/text.ts",
-        "release": "bun run generate:exports && bunx changeset publish",
+        "release": "bun run build && bunx changeset publish",
         "prepare": "test -n \"$CI\" || lefthook install",
         "test": "vitest run --project unit",
         "test:watch": "vitest --project unit",
         "test:coverage": "vitest run --project unit --coverage",
         "test:storybook": "vitest run --project storybook",
         "test:all": "vitest run",
-        "test:coverage-check": "node scripts/checkTestCoverage.js",
+        "test:coverage-check": "node scripts/checkTestCoverage.cjs",
         "typecheck": "tsc --noEmit",
         "lint": "biome check .",
         "lint:fix": "biome check --write .",
@@ -51,39 +57,136 @@
         "node": "22.x"
     },
     "exports": {
-        "./*": "./src/stories/*",
-        "./accordion": "./src/stories/accordion/index.ts",
-        "./accordionselect": "./src/stories/accordionselect/index.ts",
-        "./avatar": "./src/stories/avatar/index.ts",
-        "./button": "./src/stories/button/index.ts",
-        "./callout": "./src/stories/callout/index.ts",
-        "./card": "./src/stories/card/index.ts",
-        "./cardbutton": "./src/stories/cardbutton/index.ts",
-        "./checkbox": "./src/stories/checkbox/index.ts",
-        "./codeinput": "./src/stories/codeinput/index.ts",
-        "./combobox": "./src/stories/combobox/index.ts",
-        "./dialog": "./src/stories/dialog/index.ts",
-        "./drawer": "./src/stories/drawer/index.ts",
-        "./field": "./src/stories/field/index.ts",
-        "./icon": "./src/stories/icon/index.ts",
-        "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
-        "./input": "./src/stories/input/index.ts",
-        "./markdown": "./src/stories/markdown/index.ts",
-        "./markdowneditor": "./src/stories/markdowneditor/index.ts",
-        "./menu": "./src/stories/menu/index.ts",
-        "./pagination": "./src/stories/pagination/index.ts",
-        "./popover": "./src/stories/popover/index.ts",
-        "./select": "./src/stories/select/index.ts",
-        "./styledlink": "./src/stories/styledlink/index.ts",
-        "./table": "./src/stories/table/index.ts",
-        "./tabs": "./src/stories/tabs/index.ts",
-        "./tag": "./src/stories/tag/index.ts",
-        "./text": "./src/stories/text/index.ts",
-        "./textarea": "./src/stories/textarea/index.ts",
-        "./theme": "./src/stories/theme/index.ts",
-        "./tilt": "./src/stories/tilt/index.ts",
-        "./toast": "./src/stories/toast/index.ts",
-        "./utility": "./src/stories/utility/index.ts"
+        "./styles.css": "./dist/styles.css",
+        "./theme/global.css": "./dist/stories/theme/global.css",
+        "./accordion": {
+            "types": "./dist/stories/accordion/index.d.ts",
+            "import": "./dist/stories/accordion/index.js"
+        },
+        "./accordionselect": {
+            "types": "./dist/stories/accordionselect/index.d.ts",
+            "import": "./dist/stories/accordionselect/index.js"
+        },
+        "./avatar": {
+            "types": "./dist/stories/avatar/index.d.ts",
+            "import": "./dist/stories/avatar/index.js"
+        },
+        "./button": {
+            "types": "./dist/stories/button/index.d.ts",
+            "import": "./dist/stories/button/index.js"
+        },
+        "./callout": {
+            "types": "./dist/stories/callout/index.d.ts",
+            "import": "./dist/stories/callout/index.js"
+        },
+        "./card": {
+            "types": "./dist/stories/card/index.d.ts",
+            "import": "./dist/stories/card/index.js"
+        },
+        "./cardbutton": {
+            "types": "./dist/stories/cardbutton/index.d.ts",
+            "import": "./dist/stories/cardbutton/index.js"
+        },
+        "./checkbox": {
+            "types": "./dist/stories/checkbox/index.d.ts",
+            "import": "./dist/stories/checkbox/index.js"
+        },
+        "./codeinput": {
+            "types": "./dist/stories/codeinput/index.d.ts",
+            "import": "./dist/stories/codeinput/index.js"
+        },
+        "./combobox": {
+            "types": "./dist/stories/combobox/index.d.ts",
+            "import": "./dist/stories/combobox/index.js"
+        },
+        "./dialog": {
+            "types": "./dist/stories/dialog/index.d.ts",
+            "import": "./dist/stories/dialog/index.js"
+        },
+        "./drawer": {
+            "types": "./dist/stories/drawer/index.d.ts",
+            "import": "./dist/stories/drawer/index.js"
+        },
+        "./field": {
+            "types": "./dist/stories/field/index.d.ts",
+            "import": "./dist/stories/field/index.js"
+        },
+        "./icon": {
+            "types": "./dist/stories/icon/index.d.ts",
+            "import": "./dist/stories/icon/index.js"
+        },
+        "./informationaltooltip": {
+            "types": "./dist/stories/informationaltooltip/index.d.ts",
+            "import": "./dist/stories/informationaltooltip/index.js"
+        },
+        "./input": {
+            "types": "./dist/stories/input/index.d.ts",
+            "import": "./dist/stories/input/index.js"
+        },
+        "./markdown": {
+            "types": "./dist/stories/markdown/index.d.ts",
+            "import": "./dist/stories/markdown/index.js"
+        },
+        "./markdowneditor": {
+            "types": "./dist/stories/markdowneditor/index.d.ts",
+            "import": "./dist/stories/markdowneditor/index.js"
+        },
+        "./menu": {
+            "types": "./dist/stories/menu/index.d.ts",
+            "import": "./dist/stories/menu/index.js"
+        },
+        "./pagination": {
+            "types": "./dist/stories/pagination/index.d.ts",
+            "import": "./dist/stories/pagination/index.js"
+        },
+        "./popover": {
+            "types": "./dist/stories/popover/index.d.ts",
+            "import": "./dist/stories/popover/index.js"
+        },
+        "./select": {
+            "types": "./dist/stories/select/index.d.ts",
+            "import": "./dist/stories/select/index.js"
+        },
+        "./styledlink": {
+            "types": "./dist/stories/styledlink/index.d.ts",
+            "import": "./dist/stories/styledlink/index.js"
+        },
+        "./table": {
+            "types": "./dist/stories/table/index.d.ts",
+            "import": "./dist/stories/table/index.js"
+        },
+        "./tabs": {
+            "types": "./dist/stories/tabs/index.d.ts",
+            "import": "./dist/stories/tabs/index.js"
+        },
+        "./tag": {
+            "types": "./dist/stories/tag/index.d.ts",
+            "import": "./dist/stories/tag/index.js"
+        },
+        "./text": {
+            "types": "./dist/stories/text/index.d.ts",
+            "import": "./dist/stories/text/index.js"
+        },
+        "./textarea": {
+            "types": "./dist/stories/textarea/index.d.ts",
+            "import": "./dist/stories/textarea/index.js"
+        },
+        "./theme": {
+            "types": "./dist/stories/theme/index.d.ts",
+            "import": "./dist/stories/theme/index.js"
+        },
+        "./tilt": {
+            "types": "./dist/stories/tilt/index.d.ts",
+            "import": "./dist/stories/tilt/index.js"
+        },
+        "./toast": {
+            "types": "./dist/stories/toast/index.d.ts",
+            "import": "./dist/stories/toast/index.js"
+        },
+        "./utility": {
+            "types": "./dist/stories/utility/index.d.ts",
+            "import": "./dist/stories/utility/index.js"
+        }
     },
     "dependencies": {
         "@ariakit/react": "^0.4.28",
@@ -124,7 +227,6 @@
         "@types/react-dom": "^19",
         "react": "^19.x",
         "react-dom": "^19.x",
-        "sass": "^1.x",
         "typescript": "^5.0"
     },
     "devDependencies": {
@@ -156,15 +258,17 @@
         "playwright": "^1.60.0",
         "react": "^19.2.6",
         "react-dom": "^19.2.6",
+        "rollup-preserve-directives": "^1.1.3",
         "sass": "^1.100.0",
         "storybook": "10.3.4",
         "storybook-dark-mode": "^5.0.0",
         "title-case": "^3.0.3",
         "ts-node": "^10.9.2",
-        "tsup": "^8",
         "type-fest": "^3.13.1",
         "typescript": "^5.9.3",
         "vite": "^7.3.3",
+        "vite-plugin-dts": "^5.0.2",
+        "vite-plugin-lib-inject-css": "^2.2.2",
         "vitest": "^4.1.7"
     }
-}
+}

package/src/helpers/OpenChangeEffect.tsx

@@ -1,21 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-/**
- * A renderless component that fires a callback when an `open` boolean changes.
- * Designed to sit inside a Headless UI render-prop child to bridge
- * the library's internal open state to a consumer-facing `onOpenChange` callback.
- *
- * Does not fire on the initial mount — only on subsequent changes.
- */
-export function OpenChangeEffect({ open, onOpenChange }: { open: boolean; onOpenChange?: (open: boolean) => void }) {
-    const previousOpen = useRef(open);
-
-    useEffect(() => {
-        if (previousOpen.current !== open) {
-            previousOpen.current = open;
-            onOpenChange?.(open);
-        }
-    }, [open, onOpenChange]);
-
-    return null;
-}

package/src/helpers/renderEnhancer.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-import { isValidElement, memo } from 'react';
-import type { Enhancer } from '../types/Enhancer';
-
-export const renderEnhancer = (enhancer: Enhancer, size: number): ReactNode => {
-    if (isValidElement(enhancer)) {
-        return enhancer;
-    }
-
-    if (typeof enhancer === 'function') {
-        return enhancer({ size });
-    }
-
-    return enhancer;
-};
-
-export const MemoizedEnhancer = memo<{ enhancer: Enhancer; size: number }>(
-    ({ enhancer, size }) => <>{renderEnhancer(enhancer, size)}</>,
-    (prev, next) => prev.enhancer === next.enhancer && prev.size === next.size,
-);

package/src/helpers/useControllableState.test.ts

@@ -1,88 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { useControllableState } from './useControllableState';
-
-describe('useControllableState', () => {
-    describe('uncontrolled mode', () => {
-        it('initializes to defaultValue when value is undefined', () => {
-            const { result } = renderHook(() => useControllableState({ defaultValue: 'hello' }));
-            expect(result.current[0]).toBe('hello');
-        });
-
-        it('updates internal state via setter', () => {
-            const { result } = renderHook(() => useControllableState({ defaultValue: 'a' }));
-            act(() => result.current[1]('b'));
-            expect(result.current[0]).toBe('b');
-        });
-
-        it('supports functional updates', () => {
-            const { result } = renderHook(() => useControllableState({ defaultValue: 1 }));
-            act(() => result.current[1]((prev) => prev + 1));
-            expect(result.current[0]).toBe(2);
-        });
-
-        it('calls onChange when setter is invoked', () => {
-            const onChange = vi.fn();
-            const { result } = renderHook(() => useControllableState({ defaultValue: 'a', onChange }));
-            act(() => result.current[1]('b'));
-            expect(onChange).toHaveBeenCalledWith('b');
-        });
-    });
-
-    describe('controlled mode', () => {
-        it('uses the provided value', () => {
-            const { result } = renderHook(() => useControllableState({ value: 'controlled', defaultValue: 'default' }));
-            expect(result.current[0]).toBe('controlled');
-        });
-
-        it('reflects value changes from props', () => {
-            const { result, rerender } = renderHook(
-                ({ value }) => useControllableState({ value, defaultValue: 'default' }),
-                { initialProps: { value: 'a' as string | undefined } },
-            );
-            expect(result.current[0]).toBe('a');
-
-            rerender({ value: 'b' });
-            expect(result.current[0]).toBe('b');
-        });
-
-        it('treats null as controlled (not uncontrolled)', () => {
-            const { result } = renderHook(() =>
-                useControllableState<string | null>({ value: null, defaultValue: 'default' }),
-            );
-            expect(result.current[0]).toBe(null);
-        });
-
-        it('calls onChange but does not update internal state', () => {
-            const onChange = vi.fn();
-            const { result } = renderHook(() =>
-                useControllableState({ value: 'locked', defaultValue: 'default', onChange }),
-            );
-            act(() => result.current[1]('new'));
-            expect(onChange).toHaveBeenCalledWith('new');
-            expect(result.current[0]).toBe('locked');
-        });
-    });
-
-    describe('dev warning', () => {
-        it('warns when both value and defaultValue are provided', () => {
-            const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-            renderHook(() => useControllableState({ value: 'a', defaultValue: 'b' }));
-            expect(spy).toHaveBeenCalledWith(expect.stringContaining('received both `value` and `defaultValue`'));
-            spy.mockRestore();
-        });
-
-        it('does not warn when only value is provided', () => {
-            const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-            renderHook(() => useControllableState({ value: 'a' }));
-            expect(spy).not.toHaveBeenCalled();
-            spy.mockRestore();
-        });
-
-        it('does not warn when only defaultValue is provided', () => {
-            const spy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-            renderHook(() => useControllableState({ defaultValue: 'a' }));
-            expect(spy).not.toHaveBeenCalled();
-            spy.mockRestore();
-        });
-    });
-});

package/src/helpers/useControllableState.ts

@@ -1,59 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-type UseControllableStateProps<T> = {
-    value?: T;
-    defaultValue?: T;
-    onChange?: (value: T) => void;
-};
-
-export function useControllableState<T>({
-    value: controlledValue,
-    defaultValue,
-    onChange,
-}: UseControllableStateProps<T>): [T, (next: T | ((prev: T) => T)) => void] {
-    const isControlled = controlledValue !== undefined;
-    const [internalValue, setInternalValue] = useState(defaultValue);
-
-    const hasWarned = useRef(false);
-    if (process.env.NODE_ENV !== 'production' && !hasWarned.current) {
-        hasWarned.current = true;
-        if (controlledValue !== undefined && defaultValue !== undefined) {
-            console.warn(
-                '[Paris] A component received both `value` and `defaultValue`. ' +
-                    'A component can be either controlled or uncontrolled, not both. ' +
-                    'Decide between using `value` (controlled) or `defaultValue` (uncontrolled) ' +
-                    'and remove the other. Defaulting to controlled mode.',
-            );
-        }
-    }
-
-    const resolvedValue = isControlled ? controlledValue : internalValue;
-
-    const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
-
-    const setValue = useCallback(
-        (next: T | ((prev: T) => T)) => {
-            if (typeof next === 'function') {
-                const updater = next as (prev: T) => T;
-                if (!isControlled) {
-                    setInternalValue((prev) => {
-                        const nextValue = updater(prev as T);
-                        onChangeRef.current?.(nextValue);
-                        return nextValue;
-                    });
-                } else {
-                    onChangeRef.current?.(updater(controlledValue));
-                }
-            } else {
-                if (!isControlled) {
-                    setInternalValue(next);
-                }
-                onChangeRef.current?.(next);
-            }
-        },
-        [isControlled, controlledValue],
-    );
-
-    return [resolvedValue as T, setValue];
-}

package/src/helpers/useIsMounted.ts

@@ -1,17 +0,0 @@
-// Copied from https://usehooks-ts.com/react-hook/use-is-mounted
-
-import { useCallback, useEffect, useRef } from 'react';
-
-export function useIsMounted(): () => boolean {
-    const isMounted = useRef(false);
-
-    useEffect(() => {
-        isMounted.current = true;
-
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    return useCallback(() => isMounted.current, []);
-}

package/src/helpers/useResizeObserver.ts

@@ -1,94 +0,0 @@
-// Copied from https://usehooks-ts.com/react-hook/use-resize-observer
-
-import type { RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
-
-import { useIsMounted } from './useIsMounted';
-
-type BoxSizesKey = keyof Pick<ResizeObserverEntry, 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize'>;
-
-function extractSize(
-    entry: ResizeObserverEntry,
-    box: BoxSizesKey,
-    sizeType: keyof ResizeObserverSize,
-): number | undefined {
-    if (!entry[box]) {
-        if (box === 'contentBoxSize') {
-            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
-        }
-        return undefined;
-    }
-
-    return Array.isArray(entry[box])
-        ? entry[box][0][sizeType]
-        : // @ts-expect-error Support Firefox's non-standard behavior
-          (entry[box][sizeType] as number);
-}
-
-type Size = {
-    width: number | undefined;
-    height: number | undefined;
-};
-
-type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
-    ref: RefObject<T>;
-    onResize?: (size: Size) => void;
-    box?: 'border-box' | 'content-box' | 'device-pixel-content-box';
-};
-
-const initialSize: Size = {
-    width: undefined,
-    height: undefined,
-};
-
-export function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>): Size {
-    const { ref, box = 'content-box' } = options;
-    const [{ width, height }, setSize] = useState<Size>(initialSize);
-    const isMounted = useIsMounted();
-    const previousSize = useRef<Size>({ ...initialSize });
-    const onResize = useRef<((size: Size) => void) | undefined>(undefined);
-
-    useEffect(() => {
-        onResize.current = options.onResize;
-    }, [options.onResize]);
-
-    useEffect(() => {
-        if (!ref.current) return undefined;
-
-        if (typeof window === 'undefined' || !('ResizeObserver' in window)) return undefined;
-
-        const observer = new ResizeObserver(([entry]) => {
-            const boxProp =
-                box === 'border-box'
-                    ? 'borderBoxSize'
-                    : box === 'device-pixel-content-box'
-                      ? 'devicePixelContentBoxSize'
-                      : 'contentBoxSize';
-
-            const newWidth = extractSize(entry, boxProp, 'inlineSize');
-            const newHeight = extractSize(entry, boxProp, 'blockSize');
-
-            const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
-
-            if (hasChanged) {
-                const newSize: Size = { width: newWidth, height: newHeight };
-                previousSize.current.width = newWidth;
-                previousSize.current.height = newHeight;
-
-                if (onResize.current) {
-                    onResize.current(newSize);
-                } else if (isMounted()) {
-                    setSize(newSize);
-                }
-            }
-        });
-
-        observer.observe(ref.current, { box });
-
-        return () => {
-            observer.disconnect();
-        };
-    }, [box, ref, isMounted]);
-
-    return { width, height };
-}

package/src/pages/_app.tsx

@@ -1,6 +0,0 @@
-import 'src/styles/globals.css';
-import type { AppProps } from 'next/app';
-
-export default function App({ Component, pageProps }: AppProps) {
-    return <Component {...pageProps} />;
-}

package/src/pages/_document.tsx

@@ -1,13 +0,0 @@
-import { Head, Html, Main, NextScript } from 'next/document';
-
-export default function Document() {
-    return (
-        <Html lang="en">
-            <Head />
-            <body>
-                <Main />
-                <NextScript />
-            </body>
-        </Html>
-    );
-}