moduix 0.11.0 → 0.11.1

package/dist/components/Toast/Toast.css

@@ -0,0 +1,351 @@
+@layer ui.components {
+  .xGZ1aG_portal {
+    z-index: var(--toast-z-index, var(--z-toast));
+  }
+
+  .xGZ1aG_viewport {
+    z-index: var(--toast-z-index, var(--z-toast));
+    width: var(--toast-viewport-width, 20rem);
+    max-width: calc(100vw - (var(--toast-viewport-inset, 1rem) * 2));
+    min-height: 1px;
+    margin: 0 auto;
+    position: fixed;
+
+    &[data-placement^="top"] {
+      top: var(--toast-viewport-inset, 1rem);
+      bottom: auto;
+    }
+
+    &[data-placement^="bottom"] {
+      top: auto;
+      bottom: var(--toast-viewport-inset, 1rem);
+    }
+
+    &[data-placement$="left"] {
+      left: var(--toast-viewport-inset, 1rem);
+      right: auto;
+    }
+
+    &[data-placement$="center"] {
+      left: 50%;
+      right: auto;
+      translate: -50%;
+    }
+
+    &[data-placement$="right"] {
+      left: auto;
+      right: var(--toast-viewport-inset, 1rem);
+    }
+  }
+
+  .xGZ1aG_anchoredViewport {
+    outline: 0;
+  }
+
+  .xGZ1aG_anchoredPositioner {
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+  }
+
+  .xGZ1aG_anchoredRoot {
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(var(--toast-anchored-max-width, 20rem),
+      calc(100vw - (var(--toast-viewport-inset, 1rem) * 2)));
+    border-radius: var(--toast-radius, var(--radius-md));
+    background-color: var(--toast-bg, var(--color-popover));
+    color: var(--toast-color, var(--color-popover-foreground));
+    padding: var(--toast-anchored-padding-y, .25rem) var(--toast-anchored-padding-x, .5rem);
+    font-size: var(--toast-anchored-font-size, var(--text-sm));
+    line-height: var(--toast-anchored-line-height, var(--line-height-text-sm));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    outline: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    pointer-events: auto;
+    transform-origin: var(--transform-origin);
+    transition: var(--toast-anchored-transition, transform .15s, opacity .15s);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--toast-anchored-scale, .9));
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_anchoredArrow {
+    color: var(--toast-bg, var(--color-popover));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: var(--toast-anchored-arrow-offset-y, -8px);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: var(--toast-anchored-arrow-offset-x, -13px);
+      rotate: -90deg;
+    }
+  }
+
+  .xGZ1aG_anchoredArrowSvg {
+    width: var(--toast-anchored-arrow-width, 1.25rem);
+    height: var(--toast-anchored-arrow-height, .625rem);
+    shape-rendering: geometricprecision;
+    display: block;
+  }
+
+  .xGZ1aG_anchoredArrowFill {
+    fill: currentColor;
+  }
+
+  .xGZ1aG_anchoredArrowOuterStroke {
+    fill: var(--toast-border-color, var(--color-border));
+  }
+
+  .xGZ1aG_anchoredArrowInnerStroke {
+    fill: var(--toast-bg, var(--color-popover));
+  }
+
+  .xGZ1aG_anchoredContent {
+    align-items: center;
+    gap: var(--toast-content-gap, .25rem);
+    display: grid;
+  }
+
+  .xGZ1aG_anchoredDescription {
+    color: inherit;
+    margin: 0;
+  }
+
+  .xGZ1aG_root {
+    --gap: var(--toast-stack-gap, .75rem);
+    --peek: var(--toast-stack-peek, .75rem);
+    --scale: calc(max(0, 1 - (var(--toast-index) * .1)));
+    --shrink: calc(1 - var(--scale));
+    --height: var(--toast-frontmost-height, var(--toast-height));
+    --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+        var(--toast-swipe-movement-y));
+    box-sizing: border-box;
+    border: var(--toast-border-width, var(--border-width-sm)) solid
+      var(--toast-border-color, var(--color-border));
+    border-radius: var(--toast-radius, var(--radius-lg));
+    background-color: var(--toast-bg, var(--color-popover));
+    width: 100%;
+    color: var(--toast-color, var(--color-popover-foreground));
+    box-shadow: var(--toast-shadow, var(--shadow-lg));
+    padding: var(--toast-padding, 1rem);
+    user-select: none;
+    pointer-events: auto;
+    transition: transform var(--toast-transition, .5s cubic-bezier(.22, 1, .36, 1)),
+      opacity .5s,
+      height .15s ease;
+    z-index: calc(var(--toast-z-index, var(--z-toast)) - var(--toast-index));
+    height: var(--height);
+    transform: translateX(var(--toast-swipe-movement-x))
+      translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+            (var(--shrink) * var(--height))))
+      scale(var(--scale));
+    transform-origin: bottom;
+    background-clip: padding-box;
+    margin-right: 0;
+    position: absolute;
+    bottom: 0;
+    left: auto;
+    right: 0;
+
+    &[data-placement^="top"] {
+      --offset-y: calc(var(--toast-offset-y) + (var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y));
+      transform: translateX(var(--toast-swipe-movement-x))
+        translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek)) +
+              (var(--shrink) * var(--height))))
+        scale(var(--scale));
+      transform-origin: top;
+      margin-left: auto;
+      margin-right: auto;
+      inset: 0 0 auto;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"]:not([data-starting-style]):not([data-ending-style]) {
+      transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+      height: var(--toast-height);
+    }
+
+    &[data-starting-style] {
+      transform: translateY(150%);
+
+      &[data-placement^="top"] {
+        transform: translateY(-150%);
+      }
+    }
+
+    &[data-limited] {
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      opacity: 0;
+
+      &:not([data-limited]):not([data-swipe-direction]) {
+        transform: translateY(150%);
+
+        &[data-placement^="top"] {
+          transform: translateY(-150%);
+        }
+      }
+
+      &[data-swipe-direction="up"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+      }
+
+      &[data-swipe-direction="left"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="right"] {
+        transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+          translateY(var(--offset-y));
+      }
+
+      &[data-swipe-direction="down"] {
+        transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+      }
+    }
+
+    &:after {
+      content: "";
+      width: 100%;
+      height: calc(var(--gap) + var(--toast-border-width, var(--border-width-sm)));
+      position: absolute;
+      top: 100%;
+      left: 0;
+    }
+
+    &[data-placement^="top"] {
+      &:after {
+        top: auto;
+        bottom: 100%;
+      }
+    }
+  }
+
+  .xGZ1aG_content {
+    gap: var(--toast-content-gap, .25rem);
+    padding-inline-end: calc(var(--toast-close-offset-right, .5rem) + var(--toast-close-size, 1.25rem) + var(--spacing-2));
+    transition: opacity .25s;
+    display: grid;
+    overflow: hidden;
+
+    &[data-behind] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &[data-expanded], &[data-stack-behavior="expanded"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .xGZ1aG_title {
+    color: inherit;
+    font-size: var(--toast-title-font-size, var(--text-sm));
+    font-weight: var(--toast-title-font-weight, var(--weight-semibold));
+    line-height: var(--toast-title-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_description {
+    color: var(--toast-description-color, var(--color-muted-foreground));
+    font-size: var(--toast-description-font-size, var(--text-sm));
+    line-height: var(--toast-description-line-height, var(--line-height-text-sm));
+    margin: 0;
+  }
+
+  .xGZ1aG_action {
+    margin-top: var(--toast-action-margin-top, .5rem);
+    border: var(--toast-action-border-width, var(--toast-border-width, var(--border-width-sm)))
+      solid var(--toast-action-border-color, var(--color-border));
+    border-radius: var(--toast-action-radius, var(--radius-sm));
+    background: var(--toast-action-bg, var(--color-background));
+    color: var(--toast-action-color, var(--color-foreground));
+    padding: var(--toast-action-padding-y, .25rem) var(--toast-action-padding-x, .5rem);
+    font-size: var(--toast-action-font-size, var(--text-xs));
+    line-height: var(--toast-action-line-height, var(--line-height-text-xs));
+    font-weight: var(--toast-action-font-weight, var(--weight-medium));
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm))) * -1);
+    }
+
+    &:disabled, &[data-disabled] {
+      cursor: default;
+      opacity: var(--opacity-disabled);
+    }
+
+    @media (hover: hover) {
+      &:hover:not(:disabled):not([data-disabled]) {
+        background-color: var(--toast-action-bg-hover, var(--color-accent));
+      }
+    }
+  }
+
+  .xGZ1aG_close {
+    top: var(--toast-close-offset-top, .5rem);
+    right: var(--toast-close-offset-right, .5rem);
+    width: var(--toast-close-size, 1.25rem);
+    height: var(--toast-close-size, 1.25rem);
+    border-radius: var(--toast-close-radius, var(--radius-sm));
+    background: var(--toast-close-bg, transparent);
+    color: var(--toast-close-color, var(--color-muted-foreground));
+    padding: var(--toast-close-padding, 0);
+    cursor: pointer;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: absolute;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toast-close-bg-hover, var(--color-accent));
+        color: var(--toast-close-color-hover, var(--color-foreground));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--toast-focus-ring-width, var(--toast-border-width, var(--border-width-sm)))
+        solid var(--toast-focus-ring-color, var(--color-ring));
+      outline-offset: var(--toast-close-focus-ring-offset, 0);
+    }
+  }
+
+  .xGZ1aG_closeIcon {
+    width: var(--toast-close-icon-size, 1rem);
+    height: var(--toast-close-icon-size, 1rem);
+  }
+
+  .xGZ1aG_positioner {
+    pointer-events: none;
+  }
+}

package/dist/components/Toast/Toast.d.ts

@@ -1,47 +1,88 @@
-import { ToastManager as BaseToastManager, ToastObject, Toast as ToastPrimitive } from '@base-ui/react/toast';
-import { ReactNode } from 'react';
-export type ToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastStackBehavior = 'stacked' | 'expanded';
+import { ReactNode } from "react";
+import { Toast, ToastManager, ToastObject } from "@base-ui/react/toast";
+
+//#region src/components/Toast/Toast.d.ts
+type ToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+type ToastStackBehavior = 'stacked' | 'expanded';
 type ToastItem = ToastObject<any>;
-export type AnchoredToastOptions = Omit<Parameters<BaseToastManager['add']>[0], 'id' | 'positionerProps'> & {
-    anchor: Element;
-    id?: string;
-    positionerProps?: NonNullable<Parameters<BaseToastManager['add']>[0]['positionerProps']>;
+type AnchoredToastOptions = Omit<Parameters<ToastManager['add']>[0], 'id' | 'positionerProps'> & {
+  anchor: Element;
+  id?: string;
+  positionerProps?: NonNullable<Parameters<ToastManager['add']>[0]['positionerProps']>;
 };
-declare const createToastManager: typeof ToastPrimitive.createToastManager;
-declare const useToastManager: typeof ToastPrimitive.useToastManager;
-declare function ToastProvider({ children, toastManager, anchoredToastManager, ...props }: ToastPrimitive.Provider.Props & {
-    anchoredToastManager?: BaseToastManager;
+declare const createToastManager: typeof Toast.createToastManager;
+declare const useToastManager: typeof Toast.useToastManager;
+declare function ToastProvider({
+  children,
+  toastManager,
+  anchoredToastManager,
+  ...props
+}: Toast.Provider.Props & {
+  anchoredToastManager?: ToastManager;
 }): import("react").JSX.Element;
-declare function ToastPortal({ className, ...props }: ToastPrimitive.Portal.Props): import("react").JSX.Element;
-declare function ToastViewport({ className, placement, stackBehavior, ...props }: ToastPrimitive.Viewport.Props & {
-    placement?: ToastPlacement;
-    stackBehavior?: ToastStackBehavior;
+declare function ToastPortal({
+  className,
+  ...props
+}: Toast.Portal.Props): import("react").JSX.Element;
+declare function ToastViewport({
+  className,
+  placement,
+  stackBehavior,
+  ...props
+}: Toast.Viewport.Props & {
+  placement?: ToastPlacement;
+  stackBehavior?: ToastStackBehavior;
 }): import("react").JSX.Element;
-declare function ToastRoot(props: ToastPrimitive.Root.Props & {
-    placement?: ToastPlacement;
+declare function ToastRoot(props: Toast.Root.Props & {
+  placement?: ToastPlacement;
 }): import("react").JSX.Element;
-declare function ToastContent(props: ToastPrimitive.Content.Props): import("react").JSX.Element;
-declare function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props): import("react").JSX.Element;
-declare function ToastDescription(props: ToastPrimitive.Description.Props): import("react").JSX.Element;
-declare function ToastAction({ className, ...props }: ToastPrimitive.Action.Props): import("react").JSX.Element;
-declare function ToastClose({ className, children, ...props }: ToastPrimitive.Close.Props): import("react").JSX.Element;
-declare function ToastPositioner({ className, ...props }: ToastPrimitive.Positioner.Props): import("react").JSX.Element;
-declare function ToastArrow(props: ToastPrimitive.Arrow.Props): import("react").JSX.Element;
-declare function ToastRegion({ className, container, renderToast, placement, stackBehavior, ...props }: Omit<ToastPrimitive.Viewport.Props, 'children'> & {
-    placement?: ToastPlacement;
-    stackBehavior?: ToastStackBehavior;
-    container?: ToastPrimitive.Portal.Props['container'];
-    renderToast?: (toast: ToastItem, index: number) => ReactNode;
+declare function ToastContent(props: Toast.Content.Props): import("react").JSX.Element;
+declare function ToastTitle({
+  className,
+  ...props
+}: Toast.Title.Props): import("react").JSX.Element;
+declare function ToastDescription(props: Toast.Description.Props): import("react").JSX.Element;
+declare function ToastAction({
+  className,
+  ...props
+}: Toast.Action.Props): import("react").JSX.Element;
+declare function ToastClose({
+  className,
+  children,
+  ...props
+}: Toast.Close.Props): import("react").JSX.Element;
+declare function ToastPositioner({
+  className,
+  ...props
+}: Toast.Positioner.Props): import("react").JSX.Element;
+declare function ToastArrow(props: Toast.Arrow.Props): import("react").JSX.Element;
+declare function ToastRegion({
+  className,
+  container,
+  renderToast,
+  placement,
+  stackBehavior,
+  ...props
+}: Omit<Toast.Viewport.Props, 'children'> & {
+  placement?: ToastPlacement;
+  stackBehavior?: ToastStackBehavior;
+  container?: Toast.Portal.Props['container'];
+  renderToast?: (toast: ToastItem, index: number) => ReactNode;
 }): import("react").JSX.Element;
-declare function ToastAnchoredRegion({ className, container, renderToast, ...props }: Omit<ToastPrimitive.Viewport.Props, 'children'> & {
-    container?: ToastPrimitive.Portal.Props['container'];
-    renderToast?: (toast: ToastItem, index: number) => ReactNode;
+declare function ToastAnchoredRegion({
+  className,
+  container,
+  renderToast,
+  ...props
+}: Omit<Toast.Viewport.Props, 'children'> & {
+  container?: Toast.Portal.Props['container'];
+  renderToast?: (toast: ToastItem, index: number) => ReactNode;
 }): import("react").JSX.Element;
 declare function useAnchoredToastManager(): {
-    manager: BaseToastManager;
-    show: (options: AnchoredToastOptions) => string;
-    closeByAnchor: (anchor: Element | null) => void;
-    closeAll: () => void;
+  manager: ToastManager;
+  show: (options: AnchoredToastOptions) => string;
+  closeByAnchor: (anchor: Element | null) => void;
+  closeAll: () => void;
 };
-export { ToastProvider, ToastPortal, ToastViewport, ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, ToastPositioner, ToastArrow, ToastRegion, ToastAnchoredRegion, createToastManager, useToastManager, useAnchoredToastManager, };
+//#endregion
+export { AnchoredToastOptions, ToastAction, ToastAnchoredRegion, ToastArrow, ToastClose, ToastContent, ToastDescription, ToastPlacement, ToastPortal, ToastPositioner, ToastProvider, ToastRegion, ToastRoot, ToastStackBehavior, ToastTitle, ToastViewport, createToastManager, useAnchoredToastManager, useToastManager };