@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/{modal/Modal.css → dialog/Dialog.css}

@@ -1,9 +1,9 @@
 @layer components {
-  .modal {
+  .dialog {
     display: contents;
   }
 
-  .modal__trigger {
+  .dialog__trigger {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -14,24 +14,24 @@
       box-shadow 150ms var(--ease-out, ease);
   }
 
-  .modal__trigger:focus-visible,
-  .modal__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+  .dialog__trigger:focus-visible,
+  .dialog__trigger[data-focus-visible="true"] {
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  .modal__trigger:active,
-  .modal__trigger[data-pressed="true"] {
+  .dialog__trigger:active,
+  .dialog__trigger[data-pressed="true"] {
     transform: scale(0.97);
   }
 
-  .modal__trigger:disabled,
-  .modal__trigger[aria-disabled="true"] {
+  .dialog__trigger:disabled,
+  .dialog__trigger[aria-disabled="true"] {
     opacity: var(--disabled-opacity, 0.6);
     cursor: not-allowed;
   }
 
-  .modal__backdrop {
+  .dialog__backdrop {
     position: fixed;
     inset: 0;
     z-index: var(--z-overlay, 70);
@@ -45,29 +45,29 @@
     transition: opacity 150ms var(--ease-out, ease);
   }
 
-  .modal__backdrop--transparent {
+  .dialog__backdrop--transparent {
     background-color: transparent;
   }
 
-  .modal__backdrop--opaque {
-    background-color: color-mix(in oklab, black 40%, transparent);
+  .dialog__backdrop--opaque {
+    background-color: color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 40%, transparent);
   }
 
-  .modal__backdrop--blur {
-    background-color: color-mix(in oklab, black 35%, transparent);
+  .dialog__backdrop--blur {
+    background-color: color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 35%, transparent);
     backdrop-filter: blur(0.75rem);
     -webkit-backdrop-filter: blur(0.75rem);
   }
 
-  .modal__backdrop--entering {
+  .dialog__backdrop--entering {
     opacity: 0;
   }
 
-  .modal__backdrop--exiting {
+  .dialog__backdrop--exiting {
     opacity: 0;
   }
 
-  .modal__container {
+  .dialog__container {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -79,31 +79,31 @@
     pointer-events: none;
   }
 
-  .modal__container--auto,
-  .modal__container--bottom {
+  .dialog__container--auto,
+  .dialog__container--bottom {
     justify-content: flex-end;
   }
 
-  .modal__container--top {
+  .dialog__container--top {
     justify-content: flex-start;
   }
 
-  .modal__container--center {
+  .dialog__container--center {
     justify-content: center;
   }
 
-  .modal__container--scroll-outside {
+  .dialog__container--scroll-outside {
     overflow-y: auto;
     pointer-events: auto;
     -webkit-overflow-scrolling: touch;
   }
 
-  .modal__container--size-cover,
-  .modal__container--size-full {
+  .dialog__container--size-cover,
+  .dialog__container--size-full {
     padding: 0;
   }
 
-  .modal__content {
+  .dialog__content {
     position: relative;
     display: flex;
     width: 100%;
@@ -112,7 +112,7 @@
     background-color: var(--color-overlay, var(--color-base-100));
     box-shadow: var(
       --shadow-overlay,
-      0 24px 48px color-mix(in oklab, black 24%, transparent)
+      0 24px 48px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 24%, transparent)
     );
     outline: none;
     padding: 1.5rem;
@@ -125,35 +125,35 @@
       box-shadow 200ms var(--ease-out, ease);
   }
 
-  .modal__content--scroll-inside {
+  .dialog__content--scroll-inside {
     overflow: hidden;
     max-height: min(40rem, calc(100dvh - 2rem));
   }
 
-  .modal__content--scroll-outside {
+  .dialog__content--scroll-outside {
     height: auto;
     min-height: 0;
     flex-shrink: 0;
   }
 
-  .modal__content--xs {
+  .dialog__content--xs {
     max-width: 20rem;
   }
 
-  .modal__content--sm {
+  .dialog__content--sm {
     max-width: 24rem;
   }
 
-  .modal__content--md {
+  .dialog__content--md {
     max-width: 28rem;
   }
 
-  .modal__content--lg {
+  .dialog__content--lg {
     max-width: 32rem;
   }
 
-  .modal__content--cover,
-  .modal__content--full {
+  .dialog__content--cover,
+  .dialog__content--full {
     width: 100%;
     max-width: none;
     min-height: 100%;
@@ -162,35 +162,35 @@
     box-shadow: none;
   }
 
-  .modal__container--top .modal__content--entering {
+  .dialog__container--top .dialog__content--entering {
     transform: translate3d(0, -0.5rem, 0) scale(1.02);
   }
 
-  .modal__container--bottom .modal__content--entering,
-  .modal__container--auto .modal__content--entering {
+  .dialog__container--bottom .dialog__content--entering,
+  .dialog__container--auto .dialog__content--entering {
     transform: translate3d(0, 0.5rem, 0) scale(1.02);
   }
 
-  .modal__container--center .modal__content--entering {
+  .dialog__container--center .dialog__content--entering {
     transform: translate3d(0, 0, 0) scale(1.05);
   }
 
-  .modal__content--entering,
-  .modal__content--exiting {
+  .dialog__content--entering,
+  .dialog__content--exiting {
     opacity: 0;
   }
 
-  .modal__content--exiting {
+  .dialog__content--exiting {
     transform: translate3d(0, 0.25rem, 0) scale(0.96);
   }
 
-  .modal__header {
+  .dialog__header {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
   }
 
-  .modal__heading {
+  .dialog__heading {
     margin: 0;
     font-size: 1rem;
     font-weight: 600;
@@ -198,18 +198,18 @@
     color: var(--color-foreground, var(--color-base-content));
   }
 
-  .modal__icon {
+  .dialog__icon {
     display: flex;
     width: 2.5rem;
     height: 2.5rem;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     flex-shrink: 0;
     user-select: none;
   }
 
-  .modal__body {
+  .dialog__body {
     min-height: 0;
     flex: 1;
     margin: 0;
@@ -221,16 +221,16 @@
     );
   }
 
-  .modal__body--scroll-inside {
+  .dialog__body--scroll-inside {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 
-  .modal__body--scroll-outside {
+  .dialog__body--scroll-outside {
     overflow-y: visible;
   }
 
-  .modal__footer {
+  .dialog__footer {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -239,7 +239,7 @@
     margin: 0;
   }
 
-  .modal__close-trigger {
+  .dialog__close-trigger {
     position: absolute;
     top: 1rem;
     right: 1rem;
@@ -249,7 +249,7 @@
     width: 2rem;
     height: 2rem;
     border: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: transparent;
     color: var(--color-foreground, var(--color-base-content));
     cursor: var(--cursor-interactive, pointer);
@@ -259,50 +259,50 @@
       opacity 120ms var(--ease-out, ease);
   }
 
-  .modal__close-trigger:hover,
-  .modal__close-trigger[data-hovered="true"] {
+  .dialog__close-trigger:hover,
+  .dialog__close-trigger[data-hovered="true"] {
     background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
   }
 
-  .modal__close-trigger:active,
-  .modal__close-trigger[data-pressed="true"] {
+  .dialog__close-trigger:active,
+  .dialog__close-trigger[data-pressed="true"] {
     transform: scale(0.95);
   }
 
-  .modal__close-trigger:focus-visible,
-  .modal__close-trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+  .dialog__close-trigger:focus-visible,
+  .dialog__close-trigger[data-focus-visible="true"] {
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
-  .modal__close-trigger-icon {
+  .dialog__close-trigger-icon {
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;
     pointer-events: none;
   }
 
-  .modal__header + .modal__body {
+  .dialog__header + .dialog__body {
     margin-top: 0.5rem;
   }
 
-  .modal__header + .modal__footer,
-  .modal__body + .modal__footer {
+  .dialog__header + .dialog__footer,
+  .dialog__body + .dialog__footer {
     margin-top: 1.25rem;
   }
 
   @media (min-width: 640px) {
-    .modal__container {
+    .dialog__container {
       width: fit-content;
       padding: 2.5rem;
     }
 
-    .modal__container--auto {
+    .dialog__container--auto {
       justify-content: center;
     }
 
-    .modal__container--size-cover,
-    .modal__container--size-full {
+    .dialog__container--size-cover,
+    .dialog__container--size-full {
       width: 100%;
       max-width: 100%;
       padding: 0;
@@ -310,10 +310,10 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .modal__trigger,
-    .modal__backdrop,
-    .modal__content,
-    .modal__close-trigger {
+    .dialog__trigger,
+    .dialog__backdrop,
+    .dialog__content,
+    .dialog__close-trigger {
       transition: none;
     }
   }

package/dist/components/dialog/Dialog.generated.d.ts

@@ -0,0 +1,84 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Dialog.css";
+import { type Component, type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type DialogPlacement = "auto" | "top" | "center" | "bottom";
+export type DialogSize = "xs" | "sm" | "md" | "lg" | "cover" | "full";
+export type DialogBackdropVariant = "opaque" | "blur" | "transparent";
+export type DialogScrollBehavior = "inside" | "outside";
+export type DialogRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    isDismissable?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+    placement?: DialogPlacement;
+    size?: DialogSize;
+    backdrop?: DialogBackdropVariant;
+    scrollBehavior?: DialogScrollBehavior;
+};
+export type DialogTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    variant?: DialogBackdropVariant;
+    isDismissable?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+};
+export type DialogContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    placement?: DialogPlacement;
+    size?: DialogSize;
+    backdrop?: DialogBackdropVariant;
+    scrollBehavior?: DialogScrollBehavior;
+    isDismissable?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+};
+export type DialogHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogIconProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+};
+export type DialogCloseTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & UIBaseProps & {
+    children?: JSX.Element;
+};
+declare const DialogRoot: __LayoutComponent<DialogRootProps>;
+declare const DialogTrigger: __LayoutComponent<DialogTriggerProps>;
+declare const DialogBackdrop: __LayoutComponent<DialogBackdropProps>;
+declare const DialogContent: __LayoutComponent<DialogContentProps>;
+declare const DialogHeader: __LayoutComponent<DialogHeaderProps>;
+declare const DialogHeading: __LayoutComponent<DialogHeadingProps>;
+declare const DialogIcon: __LayoutComponent<DialogIconProps>;
+declare const DialogBody: __LayoutComponent<DialogBodyProps>;
+declare const DialogFooter: __LayoutComponent<DialogFooterProps>;
+declare const DialogCloseTrigger: __LayoutComponent<DialogCloseTriggerProps>;
+type DialogComponent = Component<DialogRootProps> & {
+    Root: Component<DialogRootProps>;
+    Trigger: Component<DialogTriggerProps>;
+    Backdrop: Component<DialogBackdropProps>;
+    Content: Component<DialogContentProps>;
+    Header: Component<DialogHeaderProps>;
+    Heading: Component<DialogHeadingProps>;
+    Icon: Component<DialogIconProps>;
+    Body: Component<DialogBodyProps>;
+    Footer: Component<DialogFooterProps>;
+    CloseTrigger: Component<DialogCloseTriggerProps>;
+};
+declare const Dialog: DialogComponent;
+export type DialogProps = DialogRootProps;
+export type DialogPanelProps = DialogContentProps;
+export { DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogHeading, DialogIcon, DialogBody, DialogFooter, DialogCloseTrigger, };
+export default Dialog;