paris 0.23.0 → 0.24.0

package/dist/stories/pagination/usePagination.js

@@ -0,0 +1,52 @@
+'use client';
+import { useState } from 'react';
+
+const usePagination = (initialPage) => {
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [history, setHistory] = useState([initialPage]);
+  const open = (page) => {
+    if (page === currentPage) {
+      return;
+    }
+    const index = history.indexOf(currentPage);
+    setCurrentPage(page);
+    setHistory((hist) => hist.slice(0, index + 1).concat(page));
+  };
+  const canGoBack = () => {
+    const index = history.indexOf(currentPage);
+    return index > 0;
+  };
+  const back = () => {
+    if (canGoBack()) {
+      const index = history.indexOf(currentPage);
+      setCurrentPage(history[index - 1]);
+    }
+  };
+  const canGoForward = () => {
+    const index = history.indexOf(currentPage);
+    return index < history.length - 1;
+  };
+  const forward = () => {
+    if (canGoForward()) {
+      const index = history.indexOf(currentPage);
+      setCurrentPage(history[index + 1]);
+    }
+  };
+  const reset = () => {
+    setCurrentPage(initialPage);
+    setHistory([initialPage]);
+  };
+  return {
+    currentPage,
+    open,
+    canGoBack,
+    back,
+    canGoForward,
+    forward,
+    reset,
+    history
+  };
+};
+
+export { usePagination };
+//# sourceMappingURL=usePagination.js.map

package/dist/stories/pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../../../src/stories/pagination/usePagination.ts"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nexport type PaginationState<T extends string[] | readonly string[] = string[]> = {\n    /**\n     * The current page key.\n     */\n    currentPage: T[number];\n\n    /**\n     * Open a page and add it to the history.\n     * @param page - The page's unique key.\n     */\n    open: (page: T[number]) => void;\n\n    /**\n     * Check if the current page can go back.\n     */\n    canGoBack: () => boolean;\n\n    /**\n     * Go back to the previous page.\n     *\n     * If the current page is the first page, nothing happens.\n     */\n    back: () => void;\n\n    /**\n     * Check if the current page can go forward.\n     */\n    canGoForward: () => boolean;\n\n    /**\n     * Go forward to the next page.\n     *\n     * If there is no next page, nothing happens.\n     */\n    forward: () => void;\n\n    /**\n     * The page history.\n     */\n    history: T[number][];\n\n    /**\n     * Clear the page history and reset to the initial page.\n     */\n    reset: () => void;\n};\n\n/**\n * A hook to create a page history and navigate between pages.\n *\n * In TypeScript, you can pass in a string array to the generic type to explicitly define the page keys, which will add type safety and auto-completion for each method.\n *\n * @param initialPage - The initial page key.\n */\nexport const usePagination = <T extends string[] | readonly string[] = string[]>(\n    initialPage: T[number],\n): PaginationState<T> => {\n    // The current page.\n    const [currentPage, setCurrentPage] = useState<T[number]>(initialPage);\n\n    // The page history.\n    const [history, setHistory] = useState<T[number][]>([initialPage]);\n\n    const open = (page: T[number]): void => {\n        // Do nothing if the page is already open.\n        if (page === currentPage) {\n            return;\n        }\n\n        // Open the page and add it to the history, removing all pages after it.\n        const index = history.indexOf(currentPage);\n        setCurrentPage(page);\n        setHistory((hist) => hist.slice(0, index + 1).concat(page));\n    };\n\n    const canGoBack = (): boolean => {\n        const index = history.indexOf(currentPage);\n        return index > 0;\n    };\n\n    const back = (): void => {\n        if (canGoBack()) {\n            const index = history.indexOf(currentPage);\n            setCurrentPage(history[index - 1]);\n        }\n    };\n\n    const canGoForward = (): boolean => {\n        const index = history.indexOf(currentPage);\n        return index < history.length - 1;\n    };\n\n    const forward = (): void => {\n        if (canGoForward()) {\n            const index = history.indexOf(currentPage);\n            setCurrentPage(history[index + 1]);\n        }\n    };\n\n    const reset = (): void => {\n        setCurrentPage(initialPage);\n        setHistory([initialPage]);\n    };\n\n    return {\n        currentPage,\n        open,\n        canGoBack,\n        back,\n        canGoForward,\n        forward,\n        reset,\n        history,\n    } as PaginationState<T>;\n};\n"],"names":[],"mappings":"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"}

package/dist/stories/popover/Popover.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { PopoverProps as RTPopoverProps } from 'react-tiny-popover';
+export type PopoverProps = {
+    /** The trigger element for the Popover. */
+    trigger: ReactElement;
+    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
+    isOpen?: boolean;
+    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
+    setIsOpen?: (isOpen: boolean) => void;
+    /** The contents of the Popover. */
+    children?: ReactNode;
+} & Omit<RTPopoverProps, 'content' | 'children' | 'isOpen'>;
+/**
+ * A Popover component, based on [`react-tiny-popover`](https://github.com/alexkatz/react-tiny-popover). Refer to its docs for more information on positioning props.
+ *
+ * <hr />
+ *
+ * To use this component:
+ *
+ * ```js
+ * import { Popover } from 'paris/popover';
+ *
+ * <Popover trigger={<button>Trigger</button>}>
+ *    <p>Content</p>
+ * </Popover>
+ * ```
+ * @constructor
+ */
+export declare const Popover: FC<PopoverProps>;

package/dist/stories/popover/Popover.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { Popover as Popover$1 } from 'react-tiny-popover';
+import { useControllableState } from '../../helpers/useControllableState.js';
+import typography from '../text/Typography.module.css.js';
+import styles from './Popover.module.scss.js';
+
+const Trigger = forwardRef((props, ref) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+  /* @__PURE__ */ jsx("div", { className: styles.trigger, ref, onClick: props.onClick, children: props.children })
+));
+const Popover = ({
+  trigger,
+  children,
+  padding,
+  positions,
+  align,
+  isOpen,
+  setIsOpen,
+  ...props
+}) => {
+  const [open, setOpen] = useControllableState({
+    value: isOpen,
+    defaultValue: false,
+    onChange: setIsOpen
+  });
+  return /* @__PURE__ */ jsx(
+    Popover$1,
+    {
+      positions: positions || ["bottom", "top", "left", "right"],
+      align: align || "start",
+      padding: padding || 8,
+      isOpen: open,
+      containerClassName: clsx(typography.paragraphSmall, styles.content),
+      content: /* @__PURE__ */ jsx(Fragment, { children }),
+      onClickOutside: () => {
+        setOpen(false);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Trigger,
+        {
+          onClick: () => {
+            setOpen((cur) => !cur);
+          },
+          children: trigger
+        }
+      )
+    }
+  );
+};
+
+export { Popover };
+//# sourceMappingURL=Popover.js.map

package/dist/stories/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/stories/popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport { forwardRef } from 'react';\nimport type { PopoverProps as RTPopoverProps } from 'react-tiny-popover';\nimport { Popover as RTPopover } from 'react-tiny-popover';\nimport { useControllableState } from '../../helpers/useControllableState';\nimport typography from '../text/Typography.module.css';\nimport styles from './Popover.module.scss';\n\n// TODO(URGENT): Figure out how to properly handle accessibility; the popover content should capture focus for tabbing and clicking, and `esc` should allow closing the popover. Might be better to use Radix popover instead of react-tiny-popover?\n\nexport type PopoverProps = {\n    /** The trigger element for the Popover. */\n    trigger: ReactElement;\n    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */\n    isOpen?: boolean;\n    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */\n    setIsOpen?: (isOpen: boolean) => void;\n    /** The contents of the Popover. */\n    children?: ReactNode;\n} & Omit<RTPopoverProps, 'content' | 'children' | 'isOpen'>;\n\ninterface TriggerProps extends ComponentPropsWithoutRef<'div'> {\n    onClick: () => void;\n}\nconst Trigger = forwardRef<HTMLDivElement, TriggerProps>((props, ref) => (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n    <div className={styles.trigger} ref={ref} onClick={props.onClick}>\n        {props.children}\n    </div>\n));\n\n/**\n * A Popover component, based on [`react-tiny-popover`](https://github.com/alexkatz/react-tiny-popover). Refer to its docs for more information on positioning props.\n *\n * <hr />\n *\n * To use this component:\n *\n * ```js\n * import { Popover } from 'paris/popover';\n *\n * <Popover trigger={<button>Trigger</button>}>\n *    <p>Content</p>\n * </Popover>\n * ```\n * @constructor\n */\nexport const Popover: FC<PopoverProps> = ({\n    trigger,\n    children,\n    padding,\n    positions,\n    align,\n    isOpen,\n    setIsOpen,\n    ...props\n}) => {\n    const [open, setOpen] = useControllableState({\n        value: isOpen,\n        defaultValue: false,\n        onChange: setIsOpen,\n    });\n\n    return (\n        <RTPopover\n            positions={positions || ['bottom', 'top', 'left', 'right']}\n            align={align || 'start'}\n            padding={padding || 8}\n            isOpen={open}\n            containerClassName={clsx(typography.paragraphSmall, styles.content)}\n            content={<>{children}</>}\n            onClickOutside={() => {\n                setOpen(false);\n            }}\n            {...props}\n        >\n            <Trigger\n                onClick={() => {\n                    setOpen((cur) => !cur);\n                }}\n            >\n                {trigger}\n            </Trigger>\n        </RTPopover>\n    );\n};\n"],"names":["RTPopover"],"mappings":";;;;;;;;;AA2BA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,OAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAyC,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,EAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAE7D,CAAA,CAAA,CAAA,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAI,SAAA,CAAA,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,GAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACpD,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACX;AAAA,CACH,CAAA;AAkBM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAA4B,CAAC;AAAA,CAAA,CACtC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CACA,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA;AACP,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM;AACF,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,OAAO,CAAA,CAAA,CAAA,CAAI,oBAAA,CAAqB;AAAA,CAAA,CAAA,CAAA,CACzC,CAAA,CAAA,CAAA,CAAA,CAAA,EAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CACP,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAc,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CACd,QAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CACb,CAAA;AAED,CAAA,CAAA,uBACI,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAACA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAa,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,GAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACzD,CAAA,CAAA,CAAA,CAAA,GAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAChB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACpB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAQ,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACR,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoB,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAgB,CAAA,CAAA,CAAA,CAAA,CAAA,EAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAClE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,kCAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACrB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAgB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM;AAClB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACjB,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACC,GAAG,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAEJ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,kBAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM;AACX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAQ,CAAC,GAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAC,GAAG,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACzB,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAEC,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACL,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CACJ;AAER,CAAA;;"}

package/dist/stories/popover/Popover.module.css

@@ -0,0 +1,20 @@
+@keyframes paris_intro_srltg {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.paris_trigger_NZC4B {
+  width: fit-content;
+}
+
+.paris_content_qDvSV {
+  background-color: var(--pte-new-colors-surfacePrimary);
+  animation: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOutExpo) 0s 1 paris_intro_srltg;
+  width: fit-content;
+  border-radius: var(--pte-borders-radius-rounded);
+  box-shadow: var(--pte-new-lighting-shallowPopup);
+  border: var(--pte-new-borders-dropdown-border);
+}

package/dist/stories/popover/Popover.module.scss.js

@@ -0,0 +1,8 @@
+import './Popover.module.css';const trigger = "paris_trigger_NZC4B";
+const content = "paris_content_qDvSV";
+const styles = {
+	trigger: trigger,
+	content: content};
+
+export { content, styles as default, trigger };
+//# sourceMappingURL=Popover.module.scss.js.map

package/dist/stories/popover/Popover.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/stories/popover/index.js

@@ -0,0 +1,2 @@
+export { Popover } from './Popover.js';
+//# sourceMappingURL=index.js.map

package/dist/stories/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/stories/select/Select.d.ts

@@ -0,0 +1,112 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { InputProps } from '../input';
+import { TextProps } from '../text';
+export type Option<T = Record<string, any>> = {
+    id: string;
+    node: ReactNode;
+    disabled?: boolean;
+    metadata?: T;
+};
+export type CommonSelectProps<T = Record<string, any>> = {
+    /**
+     * The  {@link Option}s to render in the select box.
+     *
+     * Each option should have an id (`string`) and node ({@link ReactNode}) property at minimum. You can also pass in any other metadata through the `metadata` attribute.
+     *
+     * For type safety, you can pass in a type parameter to `SelectProps` component. This will be used as the type for the `metadata` property of each option.
+     */
+    options: Option<T>[];
+    /**
+     * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
+     */
+    maxHeight?: number;
+    /**
+     * Adds a bottom border to the dropdown options. Only applicable to kind="listbox".
+     * @default false
+     */
+    hasOptionBorder?: boolean;
+    /**
+     * Controls the height of the segment control. Only applicable to kind="segmented".
+     * @default compact
+     */
+    segmentedHeight?: 'compact' | 'tall';
+    /**
+     * Called when the listbox dropdown opens or closes. Only applicable to kind="listbox".
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        container?: ComponentPropsWithoutRef<'div'>;
+        selectInput?: ComponentPropsWithoutRef<'button'>;
+        optionsContainer?: ComponentPropsWithoutRef<'div'>;
+        option?: ComponentPropsWithoutRef<'div'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+    };
+} & Omit<InputProps, 'type' | 'overrides'>;
+export type SingleSelectProps<T = Record<string, any>> = {
+    /**
+     * The option ID to render as selected in the select box.
+     *
+     * This should exactly match the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'] | null;
+    /** The initial value for uncontrolled mode. If `value` is provided, this is ignored. */
+    defaultValue?: Option<T>['id'] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
+    /**
+     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
+     * @default listbox
+     */
+    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
+    multiple?: false;
+    multipleItemsName?: never;
+} & CommonSelectProps;
+export type MultiSelectProps<T = Record<string, any>> = {
+    /**
+     * Controls the text of the Multiselect button when multiple items selected, such as "All ___" or "2 ___"
+     * @default items
+     */
+    multipleItemsName?: string;
+    /**
+     * The visual variant of the Select. For multiselect, only `listbox` is supported.
+     * @default listbox
+     */
+    kind?: 'listbox';
+    /**
+     * Converts the single select into a multiselect.
+     */
+    multiple: true;
+    /**
+     * For multiselect, should be a string[] that matches the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: Option<T>['id'][] | null;
+    /** The initial value for uncontrolled multi-select. If `value` is provided, this is ignored. */
+    defaultValue?: Option<T>['id'][] | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: Option<T>['id'][] | null) => void | Promise<void>;
+} & CommonSelectProps;
+type SelectProps<T = Record<string, any>> = SingleSelectProps<T> | MultiSelectProps<T>;
+/**
+ * A Select component is used to render a `select` box.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Select } from 'paris/select';
+ * ```
+ * @constructor
+ */
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps<unknown> & import('react').RefAttributes<any>>;
+export {};

package/dist/stories/select/Select.js

@@ -0,0 +1,283 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption, RadioGroup, Radio } from '@headlessui/react';
+import { clsx } from 'clsx';
+import { motion } from 'framer-motion';
+import { forwardRef, useId } from 'react';
+import { OpenChangeEffect } from '../../helpers/OpenChangeEffect.js';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer.js';
+import { useControllableState } from '../../helpers/useControllableState.js';
+import { Field } from '../field/Field.js';
+import { Check } from '../icon/Check.js';
+import { Icon } from '../icon/Icon.js';
+import inputStyles from '../input/Input.module.scss.js';
+import { Text } from '../text/Text.js';
+import 'pte';
+import { theme, pget } from '../theme/themes.js';
+import { TextWhenString } from '../utility/TextWhenString.js';
+import styles from './Select.module.scss.js';
+
+const Select = forwardRef(
+  ({
+    options,
+    value,
+    defaultValue,
+    onChange,
+    label,
+    status,
+    hideLabel,
+    description,
+    hideDescription,
+    descriptionPosition,
+    placeholder,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    kind = "listbox",
+    maxHeight = 320,
+    hasOptionBorder = false,
+    multiple = false,
+    multipleItemsName,
+    segmentedHeight = "compact",
+    onOpenChange,
+    overrides
+  }, ref) => {
+    const inputID = useId();
+    const multiItems = multipleItemsName || "items";
+    const [resolvedValue, setResolvedValue] = useControllableState({
+      value,
+      defaultValue: defaultValue ?? (multiple ? [] : null),
+      onChange
+    });
+    const listboxValue = resolvedValue;
+    const listboxOnChange = setResolvedValue;
+    const singleValue = resolvedValue;
+    const singleOnChange = setResolvedValue;
+    const buttonText = () => {
+      if (!resolvedValue || resolvedValue.length === 0) {
+        return placeholder || "Select an option";
+      }
+      if (!multiple) {
+        return options?.find((o) => o.id === resolvedValue)?.node;
+      }
+      if (resolvedValue && resolvedValue.length === 1) {
+        return options?.find((o) => o.id === resolvedValue[0])?.node;
+      }
+      if (resolvedValue.length === options.length) {
+        return `All ${multiItems}`;
+      }
+      return `${resolvedValue.length} ${multiItems}`;
+    };
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        htmlFor: inputID,
+        label,
+        hideLabel,
+        description,
+        hideDescription,
+        descriptionPosition,
+        disabled,
+        overrides: {
+          container: overrides?.container,
+          label: overrides?.label,
+          description: overrides?.description
+        },
+        children: [
+          kind === "listbox" && /* @__PURE__ */ jsx(Listbox, { as: "div", ref, value: listboxValue, onChange: listboxOnChange, multiple, children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(OpenChangeEffect, { open, onOpenChange }),
+            /* @__PURE__ */ jsxs(
+              ListboxButton,
+              {
+                id: inputID,
+                ...overrides?.selectInput,
+                "aria-disabled": disabled,
+                "data-status": disabled ? "disabled" : status || "default",
+                className: clsx(
+                  overrides?.selectInput?.className,
+                  inputStyles.inputContainer,
+                  styles.listboxButton,
+                  styles.field
+                ),
+                children: [
+                  !!startEnhancer && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...overrides?.startEnhancerContainer,
+                      className: clsx(
+                        inputStyles.enhancer,
+                        overrides?.startEnhancerContainer?.className
+                      ),
+                      "data-status": disabled ? "disabled" : status || "default",
+                      children: !!startEnhancer && /* @__PURE__ */ jsx(
+                        MemoizedEnhancer,
+                        {
+                          enhancer: startEnhancer,
+                          size: parseInt(
+                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                            10
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  buttonText(),
+                  endEnhancer ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...overrides?.endEnhancerContainer,
+                      className: clsx(
+                        inputStyles.enhancer,
+                        overrides?.endEnhancerContainer?.className
+                      ),
+                      "data-status": disabled ? "disabled" : status || "default",
+                      children: !!endEnhancer && /* @__PURE__ */ jsx(
+                        MemoizedEnhancer,
+                        {
+                          enhancer: endEnhancer,
+                          size: parseInt(
+                            pget("typography.styles.paragraphSmall.fontSize") || theme.typography.styles.paragraphSmall.fontSize,
+                            10
+                          )
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    FontAwesomeIcon,
+                    {
+                      className: clsx(inputStyles.enhancer, styles.chevron),
+                      "data-status": disabled ? "disabled" : status || "default",
+                      width: "10px",
+                      icon: faChevronDown
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ListboxOptions,
+              {
+                anchor: "bottom start",
+                transition: true,
+                className: clsx(overrides?.optionsContainer, styles.options),
+                style: {
+                  "--options-maxHeight": `${maxHeight}px`
+                },
+                children: (options || []).map((option) => /* @__PURE__ */ jsxs(
+                  ListboxOption,
+                  {
+                    value: option.id,
+                    className: clsx(
+                      overrides?.option,
+                      styles.option,
+                      hasOptionBorder && styles.optionBorder
+                    ),
+                    disabled: option.disabled || false,
+                    children: [
+                      typeof option.node === "string" ? /* @__PURE__ */ jsx(Text, { as: "span", kind: "paragraphSmall", children: option.node }) : option.node,
+                      /* @__PURE__ */ jsx(Icon, { icon: Check, size: 12, className: styles.check })
+                    ]
+                  },
+                  option.id
+                ))
+              }
+            )
+          ] }) }),
+          kind === "radio" && /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              ref,
+              as: "div",
+              className: styles.radioContainer,
+              value: singleValue,
+              onChange: singleOnChange,
+              children: options.map((option) => /* @__PURE__ */ jsxs(
+                Radio,
+                {
+                  as: "div",
+                  className: clsx(styles.radioOption),
+                  value: option.id,
+                  disabled: option.disabled || false,
+                  "data-status": disabled ? "disabled" : status || "default",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles.radioCircle }),
+                    /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", children: option.node })
+                  ]
+                },
+                option.id
+              ))
+            }
+          ),
+          kind === "card" && /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              ref,
+              as: "div",
+              className: styles.cardContainer,
+              value: singleValue,
+              onChange: singleOnChange,
+              children: options.map((option) => /* @__PURE__ */ jsx(
+                Radio,
+                {
+                  as: "div",
+                  className: clsx(styles.cardOption),
+                  value: option.id,
+                  disabled: option.disabled || false,
+                  "data-status": disabled ? "disabled" : status || "default",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(styles.cardSurface, typeof option.node === "string" && styles.text),
+                      children: /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphSmall", children: option.node })
+                    }
+                  )
+                },
+                option.id
+              ))
+            }
+          ),
+          kind === "segmented" && /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              ref,
+              as: "div",
+              className: styles.segmentedContainer,
+              value: singleValue ?? options[0].id,
+              onChange: singleOnChange,
+              children: options.map((option) => /* @__PURE__ */ jsxs(
+                Radio,
+                {
+                  as: "div",
+                  className: clsx(styles.segmentedOption, styles[segmentedHeight]),
+                  value: option.id,
+                  disabled: option.disabled || false,
+                  "data-status": disabled ? "disabled" : status || "default",
+                  children: [
+                    (option.id === resolvedValue || !resolvedValue && option.id === options[0].id) && /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: styles.segmentedBackground,
+                        layoutId: `${inputID}-segmented-selected`,
+                        transition: {
+                          ease: [0.42, 0, 0.58, 1],
+                          duration: 0.25
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(TextWhenString, { kind: "paragraphXSmall", weight: "medium", className: styles.segmentedText, children: option.node })
+                  ]
+                },
+                option.id
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { Select };
+//# sourceMappingURL=Select.js.map