@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/overlays/dialog/dialog.css

@@ -0,0 +1,31 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._03QP4a_root {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-raised);
+    width: 100%;
+    box-shadow: var(--shadow-md);
+    position: relative;
+  }
+
+  ._03QP4a_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._03QP4a_close {
+    top: calc(var(--spacing) * 2);
+    right: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._03QP4a_content {
+    padding: calc(var(--spacing) * 4);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dialog/dialog.d.mts

@@ -1,15 +1,14 @@
 import { FC, PropsWithChildren, ReactNode, Ref } from "react";
 //#region src/components/overlays/dialog/dialog.d.ts
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   ref?: Ref<HTMLElement> | undefined;
   id?: string | undefined;
   tabIndex?: number | undefined;
   role?: 'dialog' | 'alertdialog' | undefined;
 }>>;
-declare const Header: FC<{
+export declare const Header: FC<{
   title: ReactNode;
   onClose: () => void;
 }>;
-declare const Content: FC<PropsWithChildren>;
-//#endregion
-export { Content, Header, Root };
+export declare const Content: FC<PropsWithChildren>;
+//#endregion

package/dist/components/overlays/dialog/dialog.mjs

@@ -1,10 +1,13 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { useModalDialogContext } from "../_internal/modal-dialog-context.mjs";
+import dialog_module_default from "./dialog.module.mjs";
+import { clsx } from "clsx";
 import { useEffect, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dialog/dialog.tsx
@@ -33,7 +36,7 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	return /* @__PURE__ */ jsx("section", {
 		"aria-describedby": describedBy,
 		"aria-labelledby": labelledBy,
-		className: "bg-bg-raised relative w-full rounded-lg shadow-md",
+		className: clsx(dialog_module_default.root, high_contrast_module_default.edge),
 		id,
 		ref,
 		role: resolvedRole,
@@ -45,16 +48,16 @@ const Root = ({ ref, id, children, tabIndex, role }) => {
 	});
 };
 const Header = ({ title, onClose }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-center p-4 pb-2",
+		className: dialog_module_default.header,
 		children: [/* @__PURE__ */ jsx(Heading, {
 			id: `${rootId}-title`,
 			level: "h3",
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
-			className: "absolute top-2 right-2",
+			className: dialog_module_default.close,
 			children: /* @__PURE__ */ jsx(IconButton, {
 				label: messages.close,
 				onClick: (e) => {
@@ -70,7 +73,7 @@ const Header = ({ title, onClose }) => {
 const Content = ({ children }) => {
 	const { rootId } = useDialogContext();
 	return /* @__PURE__ */ jsx("div", {
-		className: "p-4",
+		className: dialog_module_default.content,
 		id: `${rootId}-content`,
 		onClick: (e) => {
 			e.stopPropagation();

package/dist/components/overlays/dialog/dialog.module.mjs

@@ -0,0 +1,10 @@
+import './dialog.css';
+//#region src/components/overlays/dialog/dialog.module.css
+var dialog_module_default = {
+	"close": "_03QP4a_close",
+	"content": "_03QP4a_content",
+	"header": "_03QP4a_header",
+	"root": "_03QP4a_root"
+};
+//#endregion
+export { dialog_module_default as default };

package/dist/components/overlays/dialog/index.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/overlays/dialog/index.d.ts
-declare const Dialog: {
+export declare const Dialog: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     ref?: import("react").Ref<HTMLElement> | undefined;
     id?: string | undefined;
@@ -14,5 +14,4 @@ declare const Dialog: {
     children?: import("react").ReactNode | undefined;
   }>;
 };
-//#endregion
-export { Dialog };
+//#endregion

package/dist/components/overlays/drawer/drawer.css

@@ -0,0 +1,48 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5lYcFq_root {
+    flex-direction: column;
+    height: 100%;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      flex-direction: row;
+    }
+  }
+
+  ._5lYcFq_header {
+    padding: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 2);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  ._5lYcFq_title {
+    display: contents;
+  }
+
+  ._5lYcFq_close {
+    top: calc(var(--spacing) * 2);
+    position: absolute;
+  }
+
+  ._5lYcFq_closeLeft {
+    left: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_closeRight {
+    right: calc(var(--spacing) * 2);
+  }
+
+  ._5lYcFq_content {
+    overscroll-behavior: contain;
+    padding: calc(var(--spacing) * 4);
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/drawer/drawer.d.mts

@@ -1,12 +1,11 @@
 import { DrawerSide } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/drawer/drawer.d.ts
-declare const Drawer: FC<PropsWithChildren<{
+export declare const Drawer: FC<PropsWithChildren<{
   title: ReactNode;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onClose?: () => void;
   side?: DrawerSide;
 }>>;
-//#endregion
-export { Drawer };
+//#endregion

package/dist/components/overlays/drawer/drawer.mjs

@@ -1,15 +1,16 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
-import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
 import { Modal } from "../modal/modal.mjs";
+import drawer_module_default from "./drawer.module.mjs";
+import { clsx } from "clsx";
 import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/drawer/drawer.tsx
 const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const rootId = useId();
 	const dialogRef = useRef(null);
 	return /* @__PURE__ */ jsx(Modal, {
@@ -21,32 +22,32 @@ const Drawer = ({ title, isOpen, defaultOpen, onClose, side = "right", children
 		ref: dialogRef,
 		side,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "vertical:flex-row flex h-full flex-col",
+			className: drawer_module_default.root,
 			id: rootId,
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex shrink-0 items-center justify-center p-4 pb-2",
+				className: drawer_module_default.header,
 				children: [typeof title === "string" ? /* @__PURE__ */ jsx(Heading, {
 					id: `${rootId}-title`,
 					level: "h3",
 					children: title
 				}) : /* @__PURE__ */ jsx("div", {
-					className: "contents",
+					className: drawer_module_default.title,
 					id: `${rootId}-title`,
 					children: title
 				}), /* @__PURE__ */ jsx("div", {
-					className: cn("absolute top-2", side === "left" ? "left-2" : "right-2"),
+					className: clsx(drawer_module_default.close, side === "left" ? drawer_module_default.closeLeft : drawer_module_default.closeRight),
 					children: /* @__PURE__ */ jsx(IconButton, {
 						label: messages.close,
 						onClick: (e) => {
 							e.stopPropagation();
-							dialogRef.current?.close();
+							if (dialogRef.current) dialogRef.current.close();
 						},
 						tooltipDisabled: true,
 						children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 					})
 				})]
 			}), /* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-y-auto overscroll-contain p-4",
+				className: drawer_module_default.content,
 				id: `${rootId}-content`,
 				onClick: (e) => {
 					e.stopPropagation();

package/dist/components/overlays/drawer/drawer.module.mjs

@@ -0,0 +1,13 @@
+import './drawer.css';
+//#region src/components/overlays/drawer/drawer.module.css
+var drawer_module_default = {
+	"close": "_5lYcFq_close",
+	"closeLeft": "_5lYcFq_closeLeft",
+	"closeRight": "_5lYcFq_closeRight",
+	"content": "_5lYcFq_content",
+	"header": "_5lYcFq_header",
+	"root": "_5lYcFq_root",
+	"title": "_5lYcFq_title"
+};
+//#endregion
+export { drawer_module_default as default };

package/dist/components/overlays/dropdown-menu/dropdown-menu.d.mts

@@ -3,28 +3,25 @@ import "../../buttons/button/index.mjs";
 import { Placement } from "../../../types/variables.mjs";
 import { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.d.ts
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   placement?: Placement;
   isOpen?: boolean;
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 }>>;
-declare const Content: FC<PropsWithChildren>;
-type ItemProps = {
+export declare const Content: FC<PropsWithChildren>;
+export type ItemProps = {
   onAction: () => void;
   label: string;
 };
-declare const Item: FC<ItemProps & {
-  index?: number;
-}>;
-declare const Trigger: FC<{
+export declare const Item: FC<ItemProps>;
+export declare const Trigger: FC<{
   label: string;
   size?: ComponentProps<typeof Button>['size'];
   variant?: ComponentProps<typeof Button>['variant'];
 }>;
-declare const IconTrigger: FC<{
+export declare const IconTrigger: FC<{
   icon: ReactNode;
   label: string;
 }>;
-//#endregion
-export { Content, IconTrigger, Item, ItemProps, Root, Trigger };
+//#endregion

package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs

@@ -1,13 +1,13 @@
 "use client";
 import { Button } from "../../buttons/button/button.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useListNavigation } from "../_internal/use-list-navigation.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
 import { Popover } from "../popover/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { ChevronIcon } from "../../icons/lucide.mjs";
 import { MenuContextProvider, useMenuContent, useMenuItem } from "./hooks.mjs";
-import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
-import { useState } from "react";
+import { itemClass, panelClass } from "./shared.mjs";
+import { useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/dropdown-menu/dropdown-menu.tsx
 const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onChange }) => /* @__PURE__ */ jsx(Popover.Root, {
@@ -20,11 +20,11 @@ const Root = ({ children, placement = "bottom-start", isOpen, defaultOpen, onCha
 });
 const MenuProvider = ({ children }) => {
 	const { isOpen, onClose } = useOpenContext();
-	const [activeIndex, setActiveIndex] = useState(null);
+	const [activeId, setActiveId] = useState(null);
 	const nav = useListNavigation({
 		open: isOpen,
-		activeIndex,
-		setActiveIndex,
+		activeId,
+		setActiveId,
 		loop: true
 	});
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
@@ -41,13 +41,14 @@ const Content = ({ children }) => {
 		...props,
 		...contentProps,
 		className: panelClass,
-		children: cloneWithIndex(children)
+		children
 	}) });
 };
-const Item = ({ label, onAction, index = 0 }) => {
+const Item = ({ label, onAction }) => {
+	const id = useId();
 	const props = useMenuItem({
 		onAction,
-		index
+		id
 	});
 	return /* @__PURE__ */ jsx("button", {
 		className: itemClass,

package/dist/components/overlays/dropdown-menu/hooks.d.mts

@@ -4,21 +4,21 @@ import "../_internal/index.mjs";
 type MenuContext = ListNavigation & {
   closeRoot: () => void;
 };
-declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
-declare const useMenuContent: () => {
+export declare const MenuContextProvider: import("react").Context<MenuContext | null>, useMenuContext: () => MenuContext;
+export declare const useMenuContent: () => {
   contentProps: {
     onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
   };
 };
-declare const useMenuItem: ({ onAction, index }: {
+export declare const useMenuItem: ({ onAction, id }: {
   onAction: () => void;
-  index: number;
+  id: string;
 }) => {
-  ref: (node: HTMLElement | null) => void;
+  id: string;
+  ref: (node: HTMLElement | null) => (() => void) | undefined;
   tabIndex: number;
   onFocus: () => void;
   role: 'menuitem';
   onClick: () => void;
 };
-//#endregion
-export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem };
+//#endregion

package/dist/components/overlays/dropdown-menu/hooks.mjs

@@ -7,17 +7,17 @@ const useMenuContent = () => {
 	const menu = useMenuContext();
 	return useMemo(() => ({ contentProps: menu.getContentProps() }), [menu]);
 };
-const useMenuItem = ({ onAction, index }) => {
+const useMenuItem = ({ onAction, id }) => {
 	const menu = useMenuContext();
 	return useMemo(() => ({
 		role: "menuitem",
-		...menu.getItemProps(index),
+		...menu.getItemProps(id),
 		onClick: () => {
 			onAction();
 			menu.closeRoot();
 		}
 	}), [
-		index,
+		id,
 		menu,
 		onAction
 	]);

package/dist/components/overlays/dropdown-menu/index.d.mts

@@ -4,29 +4,27 @@ import { ItemProps } from "./dropdown-menu.mjs";
 import { SubMenuProps } from "./sub-menu.mjs";
 import "../../index.mjs";
 import "../../../index.mjs";
-import { FC } from "react";
 //#region src/components/overlays/dropdown-menu/index.d.ts
-declare const DropdownMenu: {
-  readonly Root: FC<import("react").PropsWithChildren<{
+export declare const DropdownMenu: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
     placement?: Placement;
     isOpen?: boolean;
     defaultOpen?: boolean;
     onChange?: (isOpen: boolean) => void;
   }>>;
-  readonly Content: FC<{
+  readonly Content: import("react").FC<{
     children?: import("react").ReactNode | undefined;
   }>;
-  readonly Item: FC<ItemProps>;
-  readonly SubMenu: FC<SubMenuProps>;
-  readonly Trigger: FC<{
+  readonly Item: import("react").FC<ItemProps>;
+  readonly SubMenu: import("react").FC<SubMenuProps>;
+  readonly Trigger: import("react").FC<{
     label: string;
     size?: import("react").ComponentProps<typeof Button>['size'];
     variant?: import("react").ComponentProps<typeof Button>['variant'];
   }>;
-  readonly IconTrigger: FC<{
+  readonly IconTrigger: import("react").FC<{
     icon: import("react").ReactNode;
     label: string;
   }>;
 };
-//#endregion
-export { DropdownMenu };
+//#endregion

package/dist/components/overlays/dropdown-menu/shared.css

@@ -0,0 +1,51 @@
+@layer properties, theme, base;
+
+@layer components {
+  .PNaAlq_panel {
+    min-width: calc(var(--spacing) * 40);
+    border-radius: var(--radius-lg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    padding-block: calc(var(--spacing) * 2);
+    box-shadow: var(--shadow-md);
+    flex-direction: column;
+    display: flex;
+
+    @container style(--writing: vertical) {
+      min-width: 0;
+      min-height: calc(var(--spacing) * 40);
+    }
+  }
+
+  .PNaAlq_item {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    text-align: left;
+    outline-offset: -2px;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    outline-color: #0000;
+
+    &:focus-visible {
+      background-color: var(--color-bg-subtle);
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (prefers-contrast: more) {
+      outline-color: var(--color-border-base);
+    }
+  }
+
+  @media (hover: hover) {
+    .PNaAlq_item:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dropdown-menu/shared.d.mts

@@ -1,7 +1,4 @@
-import { ReactNode } from "react";
 //#region src/components/overlays/dropdown-menu/shared.d.ts
-declare const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
-declare const itemClass: string;
-declare const cloneWithIndex: (children: ReactNode) => ReactNode;
-//#endregion
-export { cloneWithIndex, itemClass, panelClass };
+export declare const panelClass: any;
+export declare const itemClass: any;
+//#endregion

package/dist/components/overlays/dropdown-menu/shared.mjs

@@ -1,8 +1,6 @@
-import { cn } from "../../../helpers/cn.mjs";
-import { Children, cloneElement, isValidElement } from "react";
+import shared_module_default from "./shared.module.mjs";
 //#region src/components/overlays/dropdown-menu/shared.ts
-const panelClass = "bg-bg-raised border-border-subtle vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg border py-2 shadow-md";
-const itemClass = cn("w-full px-2 py-1 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:bg-bg-subtle focus-visible:outline-hidden");
-const cloneWithIndex = (children) => Children.toArray(children).map((child, index) => isValidElement(child) ? cloneElement(child, { index }) : child);
+const panelClass = shared_module_default.panel;
+const itemClass = shared_module_default.item;
 //#endregion
-export { cloneWithIndex, itemClass, panelClass };
+export { itemClass, panelClass };

package/dist/components/overlays/dropdown-menu/shared.module.mjs

@@ -0,0 +1,8 @@
+import './shared.css';
+//#region src/components/overlays/dropdown-menu/shared.module.css
+var shared_module_default = {
+	"item": "PNaAlq_item",
+	"panel": "PNaAlq_panel"
+};
+//#endregion
+export { shared_module_default as default };

package/dist/components/overlays/dropdown-menu/sub-menu.css

@@ -0,0 +1,28 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._3Nd7bW_trigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+    position: relative;
+  }
+
+  ._3Nd7bW_open {
+    background-color: var(--color-bg-subtle);
+  }
+
+  ._3Nd7bW_safeTriangle:after {
+    content: "";
+    top: var(--safe-top);
+    left: var(--safe-left);
+    z-index: var(--z-index-raised);
+    height: var(--safe-height);
+    width: var(--safe-width);
+    clip-path: var(--safe-clip);
+    position: absolute;
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/dropdown-menu/sub-menu.d.mts

@@ -1,10 +1,7 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/overlays/dropdown-menu/sub-menu.d.ts
-type SubMenuProps = PropsWithChildren<{
+export type SubMenuProps = PropsWithChildren<{
   label: string;
 }>;
-declare const SubMenu: FC<SubMenuProps & {
-  index?: number;
-}>;
-//#endregion
-export { SubMenu, SubMenuProps };
+export declare const SubMenu: FC<SubMenuProps>;
+//#endregion