@solid2-aria/vaul 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pekochan069
+
+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/NOTICE.txt

@@ -0,0 +1,29 @@
+@solid2-aria/vaul third-party notices
+==============================
+
+Derived from Vaul (https://github.com/emilkowalski/vaul), version 1.1.2,
+revision 3e97aac6a38e4481bade71d7233ed6002e80f9b0.
+Copyright (c) 2023 Emil Kowalski.
+The upstream MIT license is reproduced verbatim in VAUL-LICENSE.
+
+Source mappings are recorded in each derived source file. Changes replace
+React and Radix Dialog with native Solid 2 reactivity, callback refs, JSX,
+contexts, lifecycle, presence, and DOM events. Drawer geometry, drag damping,
+velocity thresholds, snap selection, background scaling, fixed positioning,
+and directional CSS are adapted from Vaul. CSS also corrects the upstream
+handle selector and supports native touch scrolling and reduced motion.
+Exit motion uses Solid-controlled transitions without competing CSS keyframes.
+Snap entry waits for viewport measurement and starts from the closed position.
+
+Vaul's src/use-prevent-scroll.ts identifies Adobe React Spectrum as its
+source. That file is not copied into this package. Accessibility and scroll
+prevention use the separately licensed @solid2-aria/core dependency, whose Adobe
+attribution and Apache-2.0 notices remain with that package.
+
+Vaul's React-specific src/use-controllable-state.ts and src/use-composed-refs.ts
+identify Radix UI as their source. Neither file is copied. Controlled signals
+and ref arrays use Solid's native APIs.
+
+Tests, build scripts, and the export barrel are independently authored.
+Solid Aria contributions use the MIT license in LICENSE, Copyright (c) 2026
+pekochan069. This license does not replace the upstream license and notices.

package/README.md

@@ -1,3 +1,153 @@
-# Temporary Holding Version
+# @solid2-aria/vaul
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Build unstyled, draggable drawers with Solid 2. This package ports [Vaul](https://github.com/emilkowalski/vaul) 1.1.2 and uses Solid2 Aria for focus management and scroll prevention.
+
+## Add a drawer
+
+Install the package alongside Solid 2 and its web renderer:
+
+```sh
+bun add @solid2-aria/vaul solid-js@^2.0.0-rc.17 @solidjs/web@^2.0.0-rc.17
+```
+
+Set `jsxImportSource` to `@solidjs/web` in your TypeScript configuration. Import the drawer stylesheet once in your application:
+
+```tsx
+import { Drawer } from "@solid2-aria/vaul";
+
+import "@solid2-aria/vaul/style.css";
+
+export function Example() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>Open settings</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay class="drawer-overlay" />
+        <Drawer.Content class="drawer-content">
+          <Drawer.Handle />
+          <Drawer.Title>Settings</Drawer.Title>
+          <Drawer.Description>Change your preferences.</Drawer.Description>
+          <Drawer.Close>Done</Drawer.Close>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+
+Add your layout and colors. The package stylesheet supplies gestures, directional animations, and the handle appearance:
+
+```css
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: rgb(0 0 0 / 40%);
+}
+
+.drawer-content {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 41;
+  box-sizing: border-box;
+  max-height: 90dvh;
+  overflow-y: auto;
+  padding: 24px;
+  border-radius: 12px 12px 0 0;
+  background: white;
+  color: black;
+}
+```
+
+Click **Open settings**, drag toward the bottom edge, or press Escape to close the drawer. To use another direction, set `direction="top"`, `"left"`, or `"right"` on `Drawer.Root` and position your content against that edge.
+
+## Control opening and snap points
+
+Pass signal values at the JSX boundary. Snap points are visible viewport fractions or pixel strings, ordered from the smallest visible portion to the largest. Give snap-point content the full height or width of its viewport or container:
+
+```tsx
+import { Drawer } from "@solid2-aria/vaul";
+import type { SnapPoint } from "@solid2-aria/vaul";
+import { createSignal } from "solid-js";
+
+export function SnappingDrawer() {
+  const [open, setOpen] = createSignal(false);
+  const [snap, setSnap] = createSignal<SnapPoint | null>(0.25);
+
+  return (
+    <Drawer.Root
+      open={open()}
+      onOpenChange={(value) => {
+        setOpen(value);
+      }}
+      snapPoints={[0.25, 0.5, 1]}
+      activeSnapPoint={snap()}
+      setActiveSnapPoint={(value) => {
+        setSnap(value);
+      }}
+      fadeFromIndex={2}
+    >
+      <Drawer.Trigger>Open drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Overlay class="drawer-overlay" />
+        <Drawer.Content
+          class="drawer-content"
+          style={{ height: "100dvh", "max-height": "100dvh" }}
+        >
+          <Drawer.Handle />
+          <Drawer.Title>Choose a height</Drawer.Title>
+          <Drawer.Description>
+            Drag or tap the handle to change the snap point.
+          </Drawer.Description>
+          <Drawer.Close>Done</Drawer.Close>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+
+Set `snapToSequentialPoint` to keep each gesture within the adjacent snap points. Add `data-vaul-no-drag` to controls that must not initiate dragging. Set `handleOnly` on the root to restrict dragging to `Drawer.Handle`.
+
+For a nested drawer, put `Drawer.NestedRoot` inside the parent content and give it its own trigger, portal, overlay, and content. Use higher stacking levels for the nested overlay and content.
+
+To scale the page while a drawer opens, add `data-vaul-drawer-wrapper` to the page container and set `shouldScaleBackground` on the root. Keep the portal outside that wrapper.
+
+## Compose a custom trigger
+
+Use `render` on `Drawer.Trigger` or `Drawer.Close` in place of React's `asChild`. Spread the supplied props onto your button to retain its ref, events, and ARIA attributes:
+
+```tsx
+<Drawer.Trigger
+  render={(attributes) => (
+    <button {...attributes} class="primary-button">
+      Open
+    </button>
+  )}
+/>
+```
+
+Use Solid's `class` prop and callback refs. Content event handlers can call `preventDefault()` to cancel Escape dismissal, outside dismissal, or automatic focus.
+
+Portals mount after the client settles, so server rendering and hydration do not access `document`. For server-rendered inline content, omit `Drawer.Portal`.
+
+## Verify the package
+
+From this directory:
+
+```sh
+bun install
+bun run check-types
+bun test --conditions=browser --conditions=development --preload ./tests/setup.ts
+bun run check
+bun run build
+bun run check-build
+bunx playwright install chromium
+bun run check-browser
+```
+
+`check-build` installs only the shipped files into a temporary consumer and checks server rendering, hydration, exports, and consumer types. `check-browser` drives the built package in Chromium.
+
+See the [API reference](docs/api.md) for defaults and component props. The upstream revision, source attribution, and modifications are recorded in [NOTICE.txt](NOTICE.txt). Solid Aria contributions use the [MIT license](LICENSE). Vaul's original MIT license is preserved in [VAUL-LICENSE](VAUL-LICENSE).

package/VAUL-LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 Emil Kowalski
+
+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/browser/index.d.ts

@@ -0,0 +1,107 @@
+/*!
+ * Derived from Vaul (https://github.com/emilkowalski/vaul), src/.
+ * Copyright (c) 2023 Emil Kowalski
+ * Modified for Solid Aria: native Solid 2 rendering, state, events, and lifecycle.
+ * MIT licensed. See LICENSE, VAUL-LICENSE, and NOTICE.txt in the package root.
+ */
+import { JSX } from "@solidjs/web";
+type DrawerDirection = "top" | "bottom" | "left" | "right";
+type SnapPoint = number | string;
+interface WithFadeFromProps {
+  /** Visible viewport fractions (0–1) or pixel lengths, ordered smallest first. */
+  snapPoints: readonly SnapPoint[];
+  fadeFromIndex: number;
+}
+interface WithoutFadeFromProps {
+  snapPoints?: readonly SnapPoint[];
+  fadeFromIndex?: never;
+}
+type DialogProps = {
+  children?: JSX.Element;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClose?: () => void;
+  onAnimationEnd?: (open: boolean) => void;
+  activeSnapPoint?: SnapPoint | null;
+  setActiveSnapPoint?: (point: SnapPoint | null) => void;
+  closeThreshold?: number;
+  scrollLockTimeout?: number;
+  dismissible?: boolean;
+  modal?: boolean;
+  nested?: boolean;
+  direction?: DrawerDirection;
+  handleOnly?: boolean;
+  shouldScaleBackground?: boolean;
+  setBackgroundColorOnScale?: boolean;
+  noBodyStyles?: boolean;
+  fixed?: boolean;
+  /** Enables the additional mobile input scroll prevention. */
+  disablePreventScroll?: boolean;
+  repositionInputs?: boolean;
+  snapToSequentialPoint?: boolean;
+  container?: HTMLElement | null;
+  preventScrollRestoration?: boolean;
+  autoFocus?: boolean;
+  onDrag?: (event: PointerEvent, percentageDragged: number) => void;
+  onRelease?: (event: PointerEvent, open: boolean) => void;
+} & (WithFadeFromProps | WithoutFadeFromProps);
+type DrawerProps = DialogProps;
+type PointerDownOutsideEvent = CustomEvent<{
+  originalEvent: PointerEvent;
+}>;
+type FocusOutsideEvent = CustomEvent<{
+  originalEvent: FocusEvent;
+}>;
+type InteractOutsideEvent = PointerDownOutsideEvent | FocusOutsideEvent;
+type ContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  forceMount?: boolean;
+  onOpenAutoFocus?: (event: Event) => void;
+  onCloseAutoFocus?: (event: Event) => void;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+  onFocusOutside?: (event: FocusOutsideEvent) => void;
+  onInteractOutside?: (event: InteractOutsideEvent) => void;
+};
+type OverlayProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  forceMount?: boolean;
+};
+type HandleProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  preventCycle?: boolean;
+};
+type TriggerProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** Compose a custom button by spreading these reactive props onto it. */
+  render?: (props: JSX.ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+};
+type CloseProps = TriggerProps;
+type TitleProps = JSX.HTMLAttributes<HTMLHeadingElement>;
+type DescriptionProps = JSX.HTMLAttributes<HTMLParagraphElement>;
+interface PortalProps {
+  children?: JSX.Element;
+  container?: HTMLElement | null;
+  forceMount?: boolean;
+}
+export declare function Root(props: DialogProps): JSX.Element;
+export declare function NestedRoot(props: DialogProps): JSX.Element;
+export declare function Portal(props: PortalProps): JSX.Element;
+export declare function Trigger(props: TriggerProps): JSX.Element;
+export declare function Close(props: CloseProps): JSX.Element;
+export declare function Overlay(props: OverlayProps): JSX.Element;
+export declare function Content(props: ContentProps): JSX.Element;
+export declare function Title(props: TitleProps): JSX.Element;
+export declare function Description(props: DescriptionProps): JSX.Element;
+export declare function Handle(props: HandleProps): JSX.Element;
+export declare const Drawer: {
+  Close: typeof Close;
+  Content: typeof Content;
+  Description: typeof Description;
+  Handle: typeof Handle;
+  NestedRoot: typeof NestedRoot;
+  Overlay: typeof Overlay;
+  Portal: typeof Portal;
+  Root: typeof Root;
+  Title: typeof Title;
+  Trigger: typeof Trigger;
+};
+export type { CloseProps, ContentProps, DescriptionProps, DialogProps, DrawerDirection, DrawerProps, FocusOutsideEvent, HandleProps, InteractOutsideEvent, OverlayProps, PointerDownOutsideEvent, PortalProps, SnapPoint, TitleProps, TriggerProps, WithFadeFromProps, WithoutFadeFromProps };
+//# sourceMappingURL=index.d.ts.map