@corvu-next/drawer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Jasmin Noetzli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,207 @@
+import * as _solidjs_web from '@solidjs/web';
+import { ValidComponent, JSX } from '@solidjs/web';
+import * as solid_js from 'solid-js';
+import { Accessor } from 'solid-js';
+import { CloseCorvuProps, CloseSharedElementProps, CloseElementProps, ContentCorvuProps, ContentSharedElementProps, ContentElementProps, DescriptionCorvuProps, DescriptionSharedElementProps, DescriptionElementProps, LabelCorvuProps, LabelSharedElementProps, LabelElementProps, OverlayCorvuProps, OverlaySharedElementProps, OverlayElementProps, RootChildrenProps, RootProps, TriggerCorvuProps, TriggerSharedElementProps, TriggerElementProps, PortalProps, ContextValue } from '@corvu-next/dialog';
+export { ContextValue as DialogContextValue, PortalProps } from '@corvu-next/dialog';
+import { Side, Size } from '@corvu-next/utils';
+export { Side, Size } from '@corvu-next/utils';
+import { DynamicProps } from '@corvu-next/utils/dynamic';
+export { DynamicProps } from '@corvu-next/utils/dynamic';
+
+type DrawerCloseCorvuProps = CloseCorvuProps;
+type DrawerCloseSharedElementProps<T extends ValidComponent = 'button'> = CloseSharedElementProps<T>;
+type DrawerCloseElementProps = DrawerCloseSharedElementProps & {
+    'data-corvu-drawer-close': '';
+} & CloseElementProps;
+type DrawerCloseProps<T extends ValidComponent = 'button'> = DrawerCloseCorvuProps & Partial<DrawerCloseSharedElementProps<T>>;
+
+type DrawerContentCorvuProps = ContentCorvuProps;
+type DrawerContentSharedElementProps<T extends ValidComponent = 'div'> = ContentSharedElementProps<T>;
+type DrawerContentElementProps = DrawerContentSharedElementProps & {
+    onPointerDown: JSX.EventHandlerUnion<HTMLElement, PointerEvent>;
+    onTouchStart: JSX.EventHandlerUnion<HTMLElement, TouchEvent>;
+    onTransitionEnd: JSX.EventHandlerUnion<HTMLElement, TransitionEvent>;
+    'data-side': Side;
+    'data-opening': '' | undefined;
+    'data-closing': '' | undefined;
+    'data-snapping': '' | undefined;
+    'data-transitioning': '' | undefined;
+    'data-resizing': '' | undefined;
+    'data-corvu-drawer-content': '';
+} & ContentElementProps;
+type DrawerContentProps<T extends ValidComponent = 'div'> = DrawerContentCorvuProps & Partial<DrawerContentSharedElementProps<T>>;
+
+type DrawerDescriptionCorvuProps = DescriptionCorvuProps;
+type DrawerDescriptionSharedElementProps<T extends ValidComponent = 'p'> = DescriptionSharedElementProps<T>;
+type DrawerDescriptionElementProps = DrawerDescriptionSharedElementProps & {
+    'data-corvu-drawer-description': '';
+} & DescriptionElementProps;
+type DrawerDescriptionProps<T extends ValidComponent = 'p'> = DrawerDescriptionCorvuProps & Partial<DrawerDescriptionSharedElementProps<T>>;
+
+type DrawerContextValue = {
+    /** An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values. */
+    snapPoints: Accessor<Size[]>;
+    /** Breakpoints between snap points. */
+    breakPoints: Accessor<(Size | null)[]>;
+    /** The point to snap to when the drawer opens. */
+    defaultSnapPoint: Accessor<Size>;
+    /** The active snap point. */
+    activeSnapPoint: Accessor<Size>;
+    /** Change the active snap point. */
+    setActiveSnapPoint: (snapPoint: Size) => void;
+    /** The side of the viewport the drawer appears. Is used to properly calculate dragging. */
+    side: Accessor<Side>;
+    /** Whether the drawer is currently being dragged by the user. */
+    isDragging: Accessor<boolean>;
+    /** Whether the drawer is currently transitioning to a snap point after the user stopped dragging or the drawer opens/closes. */
+    isTransitioning: Accessor<boolean>;
+    /** The transition state that the drawer is currently in. */
+    transitionState: Accessor<'opening' | 'closing' | 'snapping' | 'resizing' | null>;
+    /** How much the drawer is currently open. Can be > 1 depending on your `dampFunction`. */
+    openPercentage: Accessor<number>;
+    /** The current translate value applied to the drawer. Is the same for every side. */
+    translate: Accessor<number>;
+    /** After how many milliseconds the cached distance used for the velocity function should reset. */
+    velocityCacheReset: Accessor<number>;
+    /** Whether the user can skip snap points if the velocity is high enough. */
+    allowSkippingSnapPoints: Accessor<boolean>;
+    /** Whether the logic to handle dragging on scrollable elements is enabled. */
+    handleScrollableElements: Accessor<boolean>;
+    /** Whether the drawer watches for size changes and applies a fixed width/height for transitions. */
+    transitionResize: Accessor<boolean>;
+};
+
+type DrawerLabelCorvuProps = LabelCorvuProps;
+type DrawerLabelSharedElementProps<T extends ValidComponent = 'h2'> = LabelSharedElementProps<T>;
+type DrawerLabelElementProps = DrawerLabelSharedElementProps & {
+    'data-corvu-drawer-label': '';
+} & LabelElementProps;
+type DrawerLabelProps<T extends ValidComponent = 'h2'> = DrawerLabelCorvuProps & Partial<DrawerLabelSharedElementProps<T>>;
+
+type DrawerOverlayCorvuProps = OverlayCorvuProps;
+type DrawerOverlaySharedElementProps<T extends ValidComponent = 'div'> = OverlaySharedElementProps<T>;
+type DrawerOverlayElementProps = DrawerOverlaySharedElementProps & {
+    'data-side': Side;
+    'data-opening': '' | undefined;
+    'data-closing': '' | undefined;
+    'data-snapping': '' | undefined;
+    'data-transitioning': '' | undefined;
+    'data-resizing': '' | undefined;
+    'data-corvu-drawer-overlay': '';
+} & OverlayElementProps;
+type DrawerOverlayProps<T extends ValidComponent = 'div'> = DrawerOverlayCorvuProps & Partial<DrawerOverlaySharedElementProps<T>>;
+
+type DrawerRootProps = {
+    /**
+     * An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values.
+     * @defaultValue `[0, 1]`
+     */
+    snapPoints?: Size[];
+    /**
+     * Optionally override the default breakpoints between snap points. This list has to be the length of `snapPoints.length - 1`. Provide `null` for breakpoints you don't want to override.
+     */
+    breakPoints?: (Size | null)[];
+    /**
+     * The point to snap to when the drawer opens.
+     * @defaultValue `1`
+     */
+    defaultSnapPoint?: Size;
+    /**
+     * The active snap point.
+     */
+    activeSnapPoint?: Size;
+    /**
+     * Callback fired when the active snap point changes.
+     */
+    onActiveSnapPointChange?: (activeSnapPoint: Size) => void;
+    /**
+     * The side of the viewport the drawer appears. Is used to properly calculate dragging.
+     * @defaultValue `'bottom'`
+     */
+    side?: Side;
+    /**
+     * Function to create a dampened distance if the user tries to drag the drawer away from the last snap point.
+     */
+    dampFunction?: (distance: number) => number;
+    /**
+     * Function to calculate the velocity when the user stop dragging. This velocity modifier is used to calculate the point the drawer will snap to after release. You can disable velocity by always returning 1
+     */
+    velocityFunction?: (distance: number, time: number) => number;
+    /**
+     * After how many milliseconds the cached distance used for the velocity function should reset.
+     * @defaultValue `200`
+     */
+    velocityCacheReset?: number;
+    /**
+     * Whether the user can skip snap points if the velocity is high enough.
+     * @defaultValue `true`
+     */
+    allowSkippingSnapPoints?: boolean;
+    /**
+     * corvu drawers have logic to make dragging and scrolling work together. If you don't want this behavior or if you want to implement something yourself, you can disable it with this property.
+     * @defaultValue `true`
+     */
+    handleScrollableElements?: boolean;
+    /**
+     * Whether the drawer should watch for size changes and apply a fixed width/height for transitions.
+     * @defaultValue `false`
+     */
+    transitionResize?: boolean;
+    /** @hidden */
+    children: JSX.Element | ((props: DrawerRootChildrenProps & RootChildrenProps) => JSX.Element);
+} & Omit<RootProps, 'children'>;
+/** Props that are passed to the Root component children callback. */
+type DrawerRootChildrenProps = {
+    /** An array of points to snap to. Can be either percentages of the total drawer height or CSS pixel values. */
+    snapPoints: Size[];
+    /** Breakpoints between snap points. */
+    breakPoints: (Size | null)[];
+    /** The point to snap to when the drawer opens. */
+    defaultSnapPoint: Size;
+    /** The active snap point. */
+    activeSnapPoint: Size;
+    /** Set the current active snap point. */
+    setActiveSnapPoint: (snapPoint: Size) => void;
+    /** The side of the viewport the drawer appears. Is used to properly calculate dragging. */
+    side: Side;
+    /** Whether the drawer is currently being dragged by the user. */
+    isDragging: boolean;
+    /** Whether the drawer is currently transitioning to a snap point after the user stopped dragging or the drawer opens/closes. */
+    isTransitioning: boolean;
+    /** The transition state that the drawer is currently in. */
+    transitionState: 'opening' | 'closing' | 'snapping' | 'resizing' | null;
+    /** How much the drawer is currently open. Can be > 1 depending on your `dampFunction`. */
+    openPercentage: number;
+    /** The current translate value applied to the drawer. Is the same for every side. */
+    translate: number;
+    /** After how many milliseconds the cached distance used for the velocity function should reset. */
+    velocityCacheReset: number;
+    /** Whether the user can skip snap points if the velocity is high enough. */
+    allowSkippingSnapPoints: boolean;
+    /** Whether the logic to handle dragging on scrollable elements is enabled. */
+    handleScrollableElements: boolean;
+    /** Whether the drawer watches for size changes and applies a fixed width/height for transitions. */
+    transitionResize: boolean;
+};
+
+type DrawerTriggerCorvuProps = TriggerCorvuProps;
+type DrawerTriggerSharedElementProps<T extends ValidComponent = 'button'> = TriggerSharedElementProps<T>;
+type DrawerTriggerElementProps = DrawerTriggerSharedElementProps & {
+    'data-corvu-drawer-trigger': '';
+} & TriggerElementProps;
+type DrawerTriggerProps<T extends ValidComponent = 'button'> = DrawerTriggerCorvuProps & Partial<DrawerTriggerSharedElementProps<T>>;
+
+declare const Drawer: solid_js.Component<DrawerRootProps> & {
+    Trigger: <T extends _solidjs_web.ValidComponent = "button">(props: DynamicProps<T, DrawerTriggerProps<T>>) => _solidjs_web.JSX.Element;
+    Portal: (props: PortalProps & _solidjs_web.ComponentProps<typeof _solidjs_web.Portal>) => _solidjs_web.JSX.Element;
+    Overlay: <T extends _solidjs_web.ValidComponent = "div">(props: DynamicProps<T, DrawerOverlayProps<T>>) => _solidjs_web.JSX.Element;
+    Content: <T extends _solidjs_web.ValidComponent = "div">(props: DynamicProps<T, DrawerContentProps<T>>) => _solidjs_web.JSX.Element;
+    Label: <T extends _solidjs_web.ValidComponent = "h2">(props: DynamicProps<T, DrawerLabelProps<T>>) => _solidjs_web.JSX.Element;
+    Description: <T extends _solidjs_web.ValidComponent = "p">(props: DynamicProps<T, DrawerDescriptionProps<T>>) => _solidjs_web.JSX.Element;
+    Close: <T extends _solidjs_web.ValidComponent = "button">(props: DynamicProps<T, DrawerCloseProps<T>>) => _solidjs_web.JSX.Element;
+    useContext: (contextId?: string) => DrawerContextValue;
+    useDialogContext: (contextId?: string) => ContextValue;
+};
+
+export { type DrawerCloseCorvuProps as CloseCorvuProps, type DrawerCloseElementProps as CloseElementProps, type DrawerCloseProps as CloseProps, type DrawerCloseSharedElementProps as CloseSharedElementProps, type DrawerContentCorvuProps as ContentCorvuProps, type DrawerContentElementProps as ContentElementProps, type DrawerContentProps as ContentProps, type DrawerContentSharedElementProps as ContentSharedElementProps, type DrawerContextValue as ContextValue, type DrawerDescriptionCorvuProps as DescriptionCorvuProps, type DrawerDescriptionElementProps as DescriptionElementProps, type DrawerDescriptionProps as DescriptionProps, type DrawerDescriptionSharedElementProps as DescriptionSharedElementProps, type DrawerLabelCorvuProps as LabelCorvuProps, type DrawerLabelElementProps as LabelElementProps, type DrawerLabelProps as LabelProps, type DrawerLabelSharedElementProps as LabelSharedElementProps, type DrawerOverlayCorvuProps as OverlayCorvuProps, type DrawerOverlayElementProps as OverlayElementProps, type DrawerOverlayProps as OverlayProps, type DrawerOverlaySharedElementProps as OverlaySharedElementProps, type DrawerRootChildrenProps as RootChildrenProps, type DrawerRootProps as RootProps, type DrawerTriggerCorvuProps as TriggerCorvuProps, type DrawerTriggerElementProps as TriggerElementProps, type DrawerTriggerProps as TriggerProps, type DrawerTriggerSharedElementProps as TriggerSharedElementProps, Drawer as default };