@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/menu/menu.css

@@ -0,0 +1,364 @@
+@layer components {
+  .menu {
+      display: flex;
+      width: fit-content;
+      flex-direction: column;
+      flex-wrap: wrap;
+      padding: calc(0.25rem * 2);
+      --menu-active-fg: var(--color-neutral-content);
+      --menu-active-bg: var(--color-neutral);
+      font-size: 0.875rem;
+    }
+
+  .menu :where(li ul) {
+      position: relative;
+      margin-inline-start: calc(0.25rem * 4);
+      padding-inline-start: calc(0.25rem * 2);
+      white-space: nowrap;
+    }
+
+  .menu :where(li ul):before {
+      position: absolute;
+      inset-inline-start: calc(0.25rem * 0);
+      top: calc(0.25rem * 3);
+      bottom: calc(0.25rem * 3);
+      background-color: var(--color-base-content);
+      opacity: 10%;
+      width: var(--border);
+      content: "";
+    }
+
+  .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
+      display: none;
+    }
+
+  .menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
+    .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      display: grid;
+      grid-auto-flow: column;
+      align-content: flex-start;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      text-align: start;
+      transition-property: color, background-color, box-shadow;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      grid-auto-columns: minmax(auto, max-content) auto max-content;
+      text-wrap: balance;
+      user-select: none;
+    }
+
+  .menu :where(li > details > summary) {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .menu :where(li > details > summary) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li > details > summary)::-webkit-details-marker {
+      display: none;
+    }
+
+  .menu :where(li > details > summary):after,
+    .menu :where(li > .menu-dropdown-toggle):after {
+      justify-self: flex-end;
+      display: block;
+      height: 0.375rem;
+      width: 0.375rem;
+      rotate: -135deg;
+      translate: 0 -1px;
+      transition-property: rotate, translate;
+      transition-duration: 0.2s;
+      content: "";
+      transform-origin: 50% 50%;
+      box-shadow: 2px 2px inset;
+      pointer-events: none;
+    }
+
+  .menu details {
+      overflow: hidden;
+      interpolate-size: allow-keywords;
+    }
+
+  .menu details::details-content {
+      block-size: 0;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .menu details::details-content {
+      transition-behavior: allow-discrete;
+      transition-property: block-size, content-visibility;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+    }
+
+  .menu details[open]::details-content {
+      block-size: auto;
+    }
+
+  .menu :where(li > details[open] > summary):after,
+    .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+
+  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn).menu-focus,
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+      box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .menu :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li:empty) {
+      background-color: var(--color-base-content);
+      opacity: 10%;
+      margin: 0.5rem 1rem;
+      height: 1px;
+    }
+
+  .menu :where(li) {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-items: stretch;
+    }
+
+  .menu :where(li) .badge {
+      justify-self: flex-end;
+    }
+
+  .menu :where(li) > *:not(ul, .menu-title, details, .btn):active,
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active,
+    .menu :where(li) > details > summary:active {
+      --tw-outline-style: none;
+      outline-style: none;
+      color: var(--menu-active-fg);
+      background-color: var(--menu-active-bg);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+
+  @media (forced-colors: active) {
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn):active,
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active,
+    .menu :where(li) > details > summary:active {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .menu :where(li) > *:not(ul, .menu-title, details, .btn):active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn):active:active),
+    .menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:not(.menu :where(li) > *:not(ul, .menu-title, details, .btn).menu-active:active),
+    .menu :where(li) > details > summary:active:not(.menu :where(li) > details > summary:active:active) {
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);
+    }
+
+  .menu :where(li).menu-disabled {
+      pointer-events: none;
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu :where(li).menu-disabled {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .menu .dropdown:focus-within .menu-dropdown-toggle:after {
+      rotate: 45deg;
+      translate: 0 1px;
+    }
+
+  .menu .dropdown-content {
+      margin-top: calc(0.25rem * 2);
+      padding: calc(0.25rem * 2);
+    }
+
+  .menu .dropdown-content:before {
+      display: none;
+    }
+
+  .menu-horizontal {
+      display: inline-flex;
+      flex-direction: row;
+    }
+
+  .menu-horizontal > li:not(.menu-title) > details > ul {
+      position: absolute;
+      margin-inline-start: calc(0.25rem * 0);
+      margin-top: calc(0.25rem * 4);
+      transform-origin: top;
+      border-radius: var(--radius-box);
+      background-color: var(--color-base-100);
+      padding-block: calc(0.25rem * 2);
+      padding-inline-end: calc(0.25rem * 2);
+      opacity: 0%;
+      scale: 95%;
+      box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @starting-style {
+    .menu-horizontal > li:not(.menu-title) > details > ul {
+      scale: 95%;
+      opacity: 0;
+    }
+    }
+    }
+
+  .menu-horizontal > li:not(.menu-title) > details[open] > ul {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .menu-horizontal > li > details > ul:before {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+
+  .menu-vertical {
+      display: inline-flex;
+      flex-direction: column;
+    }
+
+  .menu-vertical > li:not(.menu-title) > details > ul {
+      position: relative;
+      margin-inline-start: calc(0.25rem * 4);
+      margin-top: calc(0.25rem * 0);
+      padding-block: calc(0.25rem * 0);
+      padding-inline-end: calc(0.25rem * 0);
+      background-color: revert-layer;
+      border-radius: revert-layer;
+      animation: revert-layer;
+      transition: revert-layer;
+      box-shadow: revert-layer;
+    }
+
+  .menu-lg :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-lg :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 1.125rem;
+    }
+
+  .menu-lg .menu-title {
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 3);
+    }
+
+  .menu-md :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-md :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 0.875rem;
+    }
+
+  .menu-md .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .menu-sm :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+      font-size: 0.75rem;
+    }
+
+  .menu-sm .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .menu-xl :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-xl :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 1.5);
+      font-size: 1.375rem;
+    }
+
+  .menu-xl .menu-title {
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 3);
+    }
+
+  .menu-xs :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
+    .menu-xs :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+      font-size: 0.6875rem;
+    }
+
+  .menu-xs .menu-title {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+      color: var(--color-base-content);
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .menu-title {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+}

package/dist/components/modal/Modal.d.ts

@@ -1,83 +1,27 @@
-import "./Modal.css";
-import { type Component, type JSX, type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ModalPlacement = "auto" | "top" | "center" | "bottom";
-export type ModalSize = "xs" | "sm" | "md" | "lg" | "cover" | "full";
-export type ModalBackdropVariant = "opaque" | "blur" | "transparent";
-export type ModalScrollBehavior = "inside" | "outside";
-export type ModalRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-    isOpen?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-    isDismissable?: boolean;
-    shouldCloseOnEsc?: boolean;
-    shouldCloseOnBackdropClick?: boolean;
-    placement?: ModalPlacement;
-    size?: ModalSize;
-    backdrop?: ModalBackdropVariant;
-    scrollBehavior?: ModalScrollBehavior;
-};
-export type ModalTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-    variant?: ModalBackdropVariant;
-    isDismissable?: boolean;
-    shouldCloseOnBackdropClick?: boolean;
-};
-export type ModalContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-    placement?: ModalPlacement;
-    size?: ModalSize;
-    backdrop?: ModalBackdropVariant;
-    scrollBehavior?: ModalScrollBehavior;
-    isDismissable?: boolean;
-    shouldCloseOnBackdropClick?: boolean;
-};
-export type ModalHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalIconProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children: JSX.Element;
-};
-export type ModalCloseTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
-};
-declare const ModalRoot: ParentComponent<ModalRootProps>;
-declare const ModalTrigger: Component<ModalTriggerProps>;
-declare const ModalBackdrop: ParentComponent<ModalBackdropProps>;
-declare const ModalContent: ParentComponent<ModalContentProps>;
-declare const ModalHeader: ParentComponent<ModalHeaderProps>;
-declare const ModalHeading: ParentComponent<ModalHeadingProps>;
-declare const ModalIcon: ParentComponent<ModalIconProps>;
-declare const ModalBody: ParentComponent<ModalBodyProps>;
-declare const ModalFooter: ParentComponent<ModalFooterProps>;
-declare const ModalCloseTrigger: Component<ModalCloseTriggerProps>;
-type ModalComponent = Component<ModalRootProps> & {
-    Root: Component<ModalRootProps>;
-    Trigger: Component<ModalTriggerProps>;
-    Backdrop: Component<ModalBackdropProps>;
-    Content: Component<ModalContentProps>;
-    Header: Component<ModalHeaderProps>;
-    Heading: Component<ModalHeadingProps>;
-    Icon: Component<ModalIconProps>;
-    Body: Component<ModalBodyProps>;
-    Footer: Component<ModalFooterProps>;
-    CloseTrigger: Component<ModalCloseTriggerProps>;
-};
-declare const Modal: ModalComponent;
-export type ModalProps = ModalRootProps;
-export type DialogProps = ModalContentProps;
-export { ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, };
-export default Modal;
+import "./modal.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentSize } from "../types";
+import ModalActions from "./ModalActions";
+import ModalBody from "./ModalBody";
+import ModalHeader from "./ModalHeader";
+import ModalLegacy from "./ModalLegacy";
+export type ModalProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDialogElement> & {
+    open?: boolean;
+    position?: "start" | "end" | "top" | "middle" | "bottom";
+    responsive?: boolean;
+    backdrop?: boolean;
+    ariaHidden?: boolean;
+    onClose?: () => void;
+    closeOnEsc?: boolean;
+    closeOnOutsideClick?: boolean;
+    size?: ComponentSize | "full";
+};
+export type DialogProps = Omit<ModalProps, "ref">;
+export declare function Modal(props: ModalProps): JSX.Element;
+declare const _default: typeof Modal & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Actions: typeof ModalActions;
+    Legacy: typeof ModalLegacy;
+};
+export default _default;