paris 0.23.1 → 0.24.1

package/dist/stories/drawer/Drawer.css

@@ -0,0 +1,406 @@
+.paris_root_wVedw {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  z-index: var(--pte-new-layers-overlay);
+  user-select: var(--pte-utils-defaultUserSelect);
+}
+
+.paris_overlay_WN57R {
+  position: absolute;
+  inset: 0;
+}
+.paris_overlay_WN57R.paris_overlayBlur_W12Sf {
+  backdrop-filter: blur(2px);
+  background-color: var(--pte-new-colors-overlayPageBackground);
+  will-change: backdrop-filter, opacity;
+}
+.paris_overlay_WN57R.paris_overlayGrey_q3bTn {
+  background-color: var(--pte-new-colors-overlayPageBackground);
+  will-change: opacity;
+}
+
+.paris_overlayBlurContainer_cSgvI .paris_enterFrom_zr3n4 {
+  backdrop-filter: blur(0);
+  opacity: 0;
+}
+.paris_overlayBlurContainer_cSgvI .paris_enterTo_GrF2Z {
+  backdrop-filter: blur(2px);
+  opacity: 1;
+}
+.paris_overlayBlurContainer_cSgvI .paris_leave_w8FN3 {
+  transition-delay: var(--pte-animations-duration-fast);
+}
+.paris_overlayBlurContainer_cSgvI .paris_leaveFrom_YtyIZ {
+  backdrop-filter: blur(2px);
+  opacity: 1;
+}
+.paris_overlayBlurContainer_cSgvI .paris_leaveTo_9QQtj {
+  backdrop-filter: blur(0);
+  opacity: 0;
+}
+
+.paris_overlayGreyContainer_CXgCA .paris_enterFrom_zr3n4 {
+  opacity: 0;
+}
+.paris_overlayGreyContainer_CXgCA .paris_enterTo_GrF2Z {
+  opacity: 1;
+}
+.paris_overlayGreyContainer_CXgCA .paris_leave_w8FN3 {
+  transition-delay: var(--pte-animations-duration-fast);
+}
+.paris_overlayGreyContainer_CXgCA .paris_leaveFrom_YtyIZ {
+  opacity: 1;
+}
+.paris_overlayGreyContainer_CXgCA .paris_leaveTo_9QQtj {
+  opacity: 0;
+}
+
+.paris_panelContainer_APxfS {
+  position: fixed;
+  justify-self: flex-end;
+  z-index: var(--pte-new-layers-overlay);
+}
+.paris_panelContainer_APxfS .paris_enter_WSNrL {
+  transition: var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeOutQuad);
+  transition-delay: var(--pte-animations-duration-fast);
+}
+.paris_panelContainer_APxfS .paris_leave_w8FN3 {
+  transition: var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInQuad);
+}
+.paris_panelContainer_APxfS.paris_from-right_2gsEu {
+  right: 0;
+}
+.paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-fullWithMargin_fcu9t {
+  padding-left: 30px;
+}
+@media (min-width: 371px) {
+  .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-default_1Q1At {
+    padding-left: 30px;
+  }
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-fullOnMobile_G97hn {
+    padding-left: 30px;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-right_2gsEu .paris_enterFrom_zr3n4 {
+  transform: translateX(30%);
+}
+.paris_panelContainer_APxfS.paris_from-right_2gsEu .paris_enterTo_GrF2Z, .paris_panelContainer_APxfS.paris_from-right_2gsEu .paris_leaveFrom_YtyIZ {
+  transform: translateX(0);
+}
+.paris_panelContainer_APxfS.paris_from-right_2gsEu .paris_leaveTo_9QQtj {
+  transform: translateX(20%);
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg {
+  left: 0;
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-fullWithMargin_fcu9t {
+  padding-right: 30px;
+}
+@media (min-width: 371px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-default_1Q1At {
+    padding-right: 30px;
+  }
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-fullOnMobile_G97hn {
+    padding-right: 30px;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg .paris_enterFrom_zr3n4 {
+  transform: translateX(-30%);
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg .paris_enterTo_GrF2Z, .paris_panelContainer_APxfS.paris_from-left_1gDXg .paris_leaveFrom_YtyIZ {
+  transform: translateX(0);
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg .paris_leaveTo_9QQtj {
+  transform: translateX(-20%);
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg, .paris_panelContainer_APxfS.paris_from-right_2gsEu {
+  height: 100dvh;
+  top: 0;
+  bottom: 0;
+}
+@media (min-width: 371px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-default_1Q1At, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-default_1Q1At {
+    width: min(100vw, 390px);
+  }
+}
+@media (max-width: 370px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-default_1Q1At, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-default_1Q1At {
+    width: 100vw;
+  }
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-fullOnMobile_G97hn, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-fullOnMobile_G97hn {
+    width: min(100vw, 390px);
+  }
+}
+@media (max-width: 480px) {
+  .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-fullOnMobile_G97hn, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-fullOnMobile_G97hn {
+    width: 100vw;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-content_-2Lgk {
+  width: auto;
+}
+.paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-full_Vltmt, .paris_panelContainer_APxfS.paris_from-left_1gDXg.paris_size-fullWithMargin_fcu9t, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-full_Vltmt, .paris_panelContainer_APxfS.paris_from-right_2gsEu.paris_size-fullWithMargin_fcu9t {
+  width: 100vw;
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82 {
+  top: 0;
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-fullWithMargin_fcu9t, .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-default_1Q1At {
+  padding-bottom: 30px;
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-fullOnMobile_G97hn {
+    padding-bottom: 30px;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82 .paris_enterFrom_zr3n4 {
+  transform: translateY(-100%);
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82 .paris_enterTo_GrF2Z, .paris_panelContainer_APxfS.paris_from-top_-Vc82 .paris_leaveFrom_YtyIZ {
+  transform: translateY(0);
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82 .paris_leaveTo_9QQtj {
+  transform: translateY(-60%);
+}
+.paris_panelContainer_APxfS.paris_from-bottom_G1MLu {
+  bottom: 0;
+}
+.paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-fullWithMargin_fcu9t, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-default_1Q1At {
+  padding-top: 30px;
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-fullOnMobile_G97hn {
+    padding-top: 30px;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-bottom_G1MLu .paris_enterFrom_zr3n4 {
+  transform: translateY(100%);
+}
+.paris_panelContainer_APxfS.paris_from-bottom_G1MLu .paris_enterTo_GrF2Z, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu .paris_leaveFrom_YtyIZ {
+  transform: translateY(0);
+}
+.paris_panelContainer_APxfS.paris_from-bottom_G1MLu .paris_leaveTo_9QQtj {
+  transform: translateY(60%);
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu {
+  width: 100vw;
+  left: 0;
+  right: 0;
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-default_1Q1At, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-default_1Q1At {
+  height: min(100dvh, 390px);
+}
+@media (min-width: 481px) {
+  .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-fullOnMobile_G97hn, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-fullOnMobile_G97hn {
+    height: min(100dvh, 390px);
+  }
+}
+@media (max-width: 480px) {
+  .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-fullOnMobile_G97hn, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-fullOnMobile_G97hn {
+    height: 100dvh;
+  }
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-content_-2Lgk, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-content_-2Lgk {
+  height: auto;
+}
+.paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-full_Vltmt, .paris_panelContainer_APxfS.paris_from-top_-Vc82.paris_size-fullWithMargin_fcu9t, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-full_Vltmt, .paris_panelContainer_APxfS.paris_from-bottom_G1MLu.paris_size-fullWithMargin_fcu9t {
+  height: 100dvh;
+}
+
+.paris_panel_TfIuG {
+  position: relative;
+  height: 100%;
+  padding: 0;
+  background-color: var(--pte-new-colors-surfacePrimary);
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.paris_panel_TfIuG.paris_enterFrom_zr3n4 {
+  box-shadow: none;
+}
+.paris_panel_TfIuG.paris_enterTo_GrF2Z.paris_from-right_2gsEu, .paris_panel_TfIuG.paris_leaveFrom_YtyIZ.paris_from-right_2gsEu {
+  border-left-color: var(--pte-new-borders-dropdown-color);
+  box-shadow: var(--pte-new-lighting-shallowLeft);
+}
+.paris_panel_TfIuG.paris_enterTo_GrF2Z.paris_from-left_1gDXg, .paris_panel_TfIuG.paris_leaveFrom_YtyIZ.paris_from-left_1gDXg {
+  border-right-color: var(--pte-new-borders-dropdown-color);
+  box-shadow: var(--pte-new-lighting-shallowRight);
+}
+.paris_panel_TfIuG.paris_enterTo_GrF2Z.paris_from-top_-Vc82, .paris_panel_TfIuG.paris_leaveFrom_YtyIZ.paris_from-top_-Vc82 {
+  border-bottom-color: var(--pte-new-borders-dropdown-color);
+  box-shadow: var(--pte-new-lighting-shallowBelow);
+}
+.paris_panel_TfIuG.paris_enterTo_GrF2Z.paris_from-bottom_G1MLu, .paris_panel_TfIuG.paris_leaveFrom_YtyIZ.paris_from-bottom_G1MLu {
+  border-top-color: var(--pte-new-borders-dropdown-color);
+  box-shadow: var(--pte-new-lighting-shallowAbove);
+}
+.paris_panel_TfIuG.paris_leaveTo_9QQtj {
+  box-shadow: none;
+}
+
+.paris_titleTextContainer_vxVpU {
+  display: flex;
+}
+
+.paris_titleBar_SMIdo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--pte-new-colors-borderMedium);
+  padding: 14px 16px;
+}
+
+.paris_titleBarButtons_0oNpU {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.paris_content_NRQ-q {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.paris_contentChildren_3gvnu {
+  padding: 20px;
+}
+
+.paris_paginationButtons_9T8xu {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.paris_paginationButtons_9T8xu .paris_navButton_2bjrt {
+  padding: 2px;
+}
+
+.paris_titleArea_q2SWc {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.paris_enter_WSNrL {
+  transition: var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
+}
+
+.paris_enterFrom_zr3n4, .paris_enterFromOpacity_ddD5x {
+  opacity: 0;
+}
+
+.paris_enterTo_GrF2Z, .paris_enterToOpacity_JKJ7T {
+  opacity: 1;
+}
+
+.paris_leave_w8FN3 {
+  transition: var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
+}
+
+.paris_leaveFrom_YtyIZ, .paris_leaveFromOpacity_xAfhm {
+  opacity: 1;
+}
+
+.paris_leaveTo_9QQtj, .paris_leaveToOpacity_-gHpF {
+  opacity: 0;
+}
+
+.paris_paginationEnter_DT9JT {
+  transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInQuad);
+}
+
+.paris_paginationLeave_OR93X {
+  transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeOutQuad);
+}
+
+.paris_pageStack_s7fPJ {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 0;
+}
+
+.paris_pageStackClip_DQKZW {
+  overflow: hidden;
+}
+
+.paris_pageStackItem_n8m9c {
+  grid-area: 1/1;
+}
+.paris_pageStackItem_n8m9c[data-active=false] {
+  pointer-events: none;
+}
+
+.paris_progressBar_3-iya {
+  position: relative;
+  width: 100%;
+  height: 2px;
+  background: var(--pte-new-colors-borderMedium);
+}
+
+.paris_progressBarFill_QAxRP {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--pte-new-colors-contentPrimary);
+  transition: width var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInQuad);
+}
+
+.paris_bottomPanel_g3-TO {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+.paris_bottomPanelSlots_aLf1H {
+  display: flex;
+  flex-direction: column;
+}
+
+.paris_bottomPanelContent_dfSgU {
+  position: relative;
+  padding: 20px;
+}
+.paris_bottomPanelContent_dfSgU.paris_noPadding_fr4a4 {
+  padding: 0;
+}
+
+.paris_bottomPanelSlotItem_fEB43 {
+  border-top: 1px solid var(--pte-new-colors-borderStrong);
+  position: relative;
+  padding: 20px;
+}
+
+.paris_bottomPanelSpacer_bBinW {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.paris_glassBlend_5DeJV {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--pte-new-materials-secondaryThin-backgroundBlend);
+  mix-blend-mode: var(--pte-new-materials-secondaryThin-mixBlendMode);
+}
+
+.paris_glassOpacity_flxn1 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: var(--pte-new-materials-secondaryThin-background);
+  backdrop-filter: var(--pte-new-blurs-strong);
+}

package/dist/stories/drawer/Drawer.d.ts

@@ -0,0 +1,143 @@
+import { CSSLength } from '@ssh/csstypes';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PaginationState } from '../pagination';
+import { DrawerProgressBarStyleProps } from './DrawerProgressBar';
+export declare const DrawerSizePresets: readonly ["content", "default", "full", "fullWithMargin", "fullOnMobile"];
+export type DrawerPageTransition = 'none' | 'crossfade' | 'slide';
+export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
+    /**
+     * The dialog's open state.
+     */
+    isOpen?: boolean;
+    /**
+     * A callback that will be called when the user closes the drawer by clicking the close button or the backdrop overlay.
+     *
+     * @param value {boolean} - The new open state of the dialog.
+     */
+    onClose?: (value: boolean) => void | Promise<void>;
+    /**
+     * The title of the drawer. Required for accessibility, but can be hidden with the `hideTitle` prop.
+     *
+     * If pagination is enabled, the title should instead describe the entire drawer, not any single page. The title will be visually hidden on all pages.
+     *
+     * If a string is passed, it will be wrapped in a {@link Text} component with `headingXSmall` styling.
+     */
+    title: ReactNode;
+    /**
+     * Whether the title should be hidden. If `true`, the title will be visually hidden but still accessible to screen readers.
+     *
+     * If you're hiding the title to add a custom header, you may also want to hide the close button and render your own by using the `hideCloseButton` prop.
+     *
+     * @default false
+     */
+    hideTitle?: boolean;
+    /**
+     * Whether the close button should be hidden. This will entirely remove the close button from the DOM, so you should provide your own way to close the dialog.
+     *
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * An optional area that will be rendered at the top of the Drawer next to the title. This is useful for adding actions to the Drawer. Recommended to use {@link Menu} for an action menu.
+     */
+    additionalActions?: ReactNode;
+    /**
+     * The direction from which the Drawer will appear.
+     */
+    from?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * The size of the Drawer, either a preset or a valid {@link CSSLength} string.
+     *
+     * `default` is the default size (360px), with a margin until the screen hits 370px.
+     * `fullOnMobile` uses the default size (360px) until the mobile breakpoint (480px), where it then fills the viewport.
+     * `full` is the size of the viewport.
+     * `fullWithMargin` is the size of the viewport, minus the panel container's padding.
+     * `content` is the size of the Drawer's content.
+     *
+     * @see DrawerSizePresets
+     * @default 'default'
+     */
+    size?: (typeof DrawerSizePresets)[number] | CSSLength;
+    /**
+     * An optional pagination state. If provided, each child of the Drawer will be rendered in its own page, and the Drawer will contain back and next buttons that will be used to navigate between pages.
+     *
+     * The state should be created using the {@link usePagination} hook and the entire state should be passed to the Drawer. For example:
+     * ```tsx
+     * const pagination = usePagination<['step1', 'step2', 'step3']>();
+     * // ...
+     * <Drawer pagination={pagination}>
+     *     <DrawerPage id="step1">Step 1</DrawerPage>
+     *     <DrawerPage id="step2">Step 2</DrawerPage>
+     *     <DrawerPage id="step3">Step 3</DrawerPage>
+     * </Drawer>
+     *```
+     *
+     * @see {@link PaginationState} for more information on the pagination state and available methods
+     * @see {@link usePagination} for more information on how to create the pagination state
+     * @default false
+     */
+    pagination?: PaginationState<T>;
+    /**
+     * The page transition animation style for paginated drawers.
+     *
+     * - `'none'` — instant page switch
+     * - `'crossfade'` — opacity crossfade between pages (default)
+     * - `'slide'` — direction-aware horizontal slide (Framer Motion)
+     *
+     * @default 'crossfade'
+     */
+    pageTransition?: DrawerPageTransition;
+    /**
+     * Show a progress bar at the top of the bottom panel. Requires `pagination` to be set.
+     * The bar auto-fills based on the current page position.
+     *
+     * Pass `true` for defaults, or an object with `fill`, `track`, and `height` overrides.
+     *
+     * For explicit percentage control, use `<DrawerProgressBar value={75} />` directly instead.
+     *
+     * @default false
+     */
+    progressBar?: boolean | DrawerProgressBarStyleProps;
+    /**
+     * Callback fired after the drawer's close animation completes.
+     * Use this to reset forms, clear state, and clean up without visual glitches.
+     */
+    onAfterClose?: () => void;
+    /**
+     * The overlay style of the Drawer, either 'grey' or 'blur'.
+     *
+     * @default 'grey'
+     */
+    overlayStyle?: 'grey' | 'blur';
+    /** The contents of the Drawer. */
+    children?: ReactNode | ReactNode[];
+    /** Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component. */
+    overrides?: {
+        dialog?: ComponentPropsWithoutRef<'div'>;
+        overlay?: ComponentPropsWithoutRef<'div'>;
+        panelContainer?: ComponentPropsWithoutRef<'div'>;
+        panel?: ComponentPropsWithoutRef<'div'>;
+        titleBar?: ComponentPropsWithoutRef<'div'>;
+        titleArea?: ComponentPropsWithoutRef<'div'>;
+        titleBarButtons?: ComponentPropsWithoutRef<'div'>;
+        content?: ComponentPropsWithoutRef<'div'>;
+        contentChildren?: ComponentPropsWithoutRef<'div'>;
+        contentChildrenChildren?: ComponentPropsWithoutRef<'div'>;
+        bottomPanelSpacer?: ComponentPropsWithoutRef<'div'>;
+        bottomPanel?: ComponentPropsWithoutRef<'div'>;
+        bottomPanelContent?: ComponentPropsWithoutRef<'div'>;
+    };
+};
+/**
+ * Drawers are panels that slide in from the edge of the screen to reveal additional content.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Drawer } from 'paris/drawer';
+ * ```
+ * @constructor
+ */
+export declare const Drawer: <T extends string[] | readonly string[] = string[]>(props: DrawerProps<T>) => import("react/jsx-runtime").JSX.Element;