@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/drawer/Drawer.css

@@ -0,0 +1,305 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__trigger {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .drawer__trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Backdrop
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .drawer__backdrop[data-entering="true"] {
+    opacity: 0;
+  }
+
+  .drawer__backdrop[data-exiting="true"] {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
+  .drawer__backdrop--opaque {
+    background-color: oklch(0% 0 0 / 40%);
+  }
+
+  .drawer__backdrop--blur {
+    background-color: oklch(0% 0 0 / 40%);
+    backdrop-filter: blur(12px);
+  }
+
+  .drawer__backdrop--transparent {
+    background-color: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__backdrop {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content — positioning wrapper
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__content {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .drawer__content--bottom {
+    align-items: flex-end;
+  }
+
+  .drawer__content--top {
+    align-items: flex-start;
+  }
+
+  .drawer__content--left {
+    justify-content: flex-start;
+  }
+
+  .drawer__content--right {
+    justify-content: flex-end;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — the drawer panel
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    padding: 1.5rem;
+    pointer-events: auto;
+    outline: none;
+    box-shadow:
+      0 10px 15px -3px oklch(0% 0 0 / 0.1),
+      0 4px 6px -4px oklch(0% 0 0 / 0.1);
+
+    --drawer-enter-duration: 250ms;
+    --drawer-exit-duration: 200ms;
+    --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+    will-change: translate;
+    transition: translate var(--drawer-enter-duration) var(--drawer-ease);
+  }
+
+  [data-exiting="true"] .drawer__dialog {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
+  /* Bottom/top: full width, auto height */
+  .drawer__dialog[data-placement="bottom"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 1rem 1rem 0 0;
+  }
+
+  .drawer__dialog[data-placement="top"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 0 0 1rem 1rem;
+  }
+
+  /* Left/right: fixed width, full height */
+  .drawer__dialog[data-placement="left"],
+  .drawer__dialog[data-placement="right"] {
+    height: 100%;
+    width: 20rem;
+    max-width: 85vw;
+    border-radius: 0;
+  }
+
+  @media (min-width: 640px) {
+    .drawer__dialog[data-placement="left"],
+    .drawer__dialog[data-placement="right"] {
+      width: 24rem;
+    }
+  }
+
+  /* Slide transitions — open state */
+  .drawer__content--left .drawer__dialog,
+  .drawer__content--right .drawer__dialog,
+  .drawer__content--top .drawer__dialog,
+  .drawer__content--bottom .drawer__dialog {
+    translate: 0 0;
+  }
+
+  /* Entering/exiting slide transforms */
+  .drawer__content--left[data-entering="true"] .drawer__dialog,
+  .drawer__content--left[data-exiting="true"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--right[data-entering="true"] .drawer__dialog,
+  .drawer__content--right[data-exiting="true"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--top[data-entering="true"] .drawer__dialog,
+  .drawer__content--top[data-exiting="true"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--bottom[data-entering="true"] .drawer__dialog,
+  .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__dialog {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Header
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Heading
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__heading {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--color-base-content);
+    margin: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Body
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__body {
+    min-height: 0;
+    flex: 1;
+    font-size: 0.875rem;
+    line-height: 1.43;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Footer
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Handle
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .drawer__handle > [data-slot="drawer-handle-bar"] {
+    height: 0.25rem;
+    width: 2.25rem;
+    border-radius: 9999px;
+    background-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Close Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__close-trigger {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: none;
+    border-radius: var(--radius-field, 0.375rem);
+    cursor: pointer;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    transition: color 150ms ease, background-color 150ms ease;
+    padding: 0;
+  }
+
+  .drawer__close-trigger:hover {
+    color: var(--color-base-content);
+    background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+  }
+
+  .drawer__close-trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Element spacing
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header + .drawer__body {
+    margin-top: 0.5rem;
+  }
+
+  .drawer__header + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__body + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__handle + .drawer__header {
+    margin-top: 0;
+  }
+
+  .drawer__handle + .drawer__body {
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,73 @@
+import "./Drawer.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type DrawerPlacement = "top" | "bottom" | "left" | "right";
+export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
+export type DrawerRootProps = IComponentBaseProps & {
+    children: JSX.Element;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type DrawerTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    variant?: DrawerBackdropVariant;
+    isDismissable?: boolean;
+};
+export type DrawerContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    placement?: DrawerPlacement;
+};
+export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type DrawerHandleProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export type DrawerCloseTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const DrawerRoot: ParentComponent<DrawerRootProps>;
+declare const DrawerTrigger: Component<DrawerTriggerProps>;
+declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
+declare const DrawerContent: ParentComponent<DrawerContentProps>;
+declare const DrawerDialog: ParentComponent<DrawerDialogProps>;
+declare const DrawerHeader: ParentComponent<DrawerHeaderProps>;
+declare const DrawerHeading: ParentComponent<DrawerHeadingProps>;
+declare const DrawerBody: ParentComponent<DrawerBodyProps>;
+declare const DrawerFooter: ParentComponent<DrawerFooterProps>;
+declare const DrawerHandle: Component<DrawerHandleProps>;
+declare const DrawerCloseTrigger: Component<DrawerCloseTriggerProps>;
+export type DrawerCloseProps = {
+    children: JSX.Element;
+};
+declare const DrawerClose: ParentComponent<DrawerCloseProps>;
+declare const Drawer: ParentComponent<DrawerRootProps> & {
+    Root: ParentComponent<DrawerRootProps>;
+    Trigger: Component<DrawerTriggerProps>;
+    Backdrop: ParentComponent<DrawerBackdropProps>;
+    Content: ParentComponent<DrawerContentProps>;
+    Dialog: ParentComponent<DrawerDialogProps>;
+    Header: ParentComponent<DrawerHeaderProps>;
+    Heading: ParentComponent<DrawerHeadingProps>;
+    Body: ParentComponent<DrawerBodyProps>;
+    Footer: ParentComponent<DrawerFooterProps>;
+    Handle: Component<DrawerHandleProps>;
+    CloseTrigger: Component<DrawerCloseTriggerProps>;
+    Close: ParentComponent<DrawerCloseProps>;
+};
+export default Drawer;
+export { DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, };