@duskmoon-dev/components 0.3.1 → 0.4.0

package/README.md

@@ -41,8 +41,8 @@ import { Button, DmTable, theme } from "@duskmoon-dev/components";
 
 ## Public Surface
 
-- 71 standard components such as `Button`, `Table`, `Modal`, `Select`, and
-  `Typography`.
+- 78 standard components such as `Button`, `Chat`, `OtpInput`, `Swap`, `Fab`,
+  `Megamenu`, `ConsolePage`, `Table`, `Modal`, `Select`, and `Typography`.
 - 21 DuskMoon workflow components such as `DmLayout`, `DmSearch`, `DmTable`,
   `DmProTable`, and `DmToolbar`.
 - 13 infrastructure exports including `theme`, `version`,
@@ -50,6 +50,65 @@ import { Button, DmTable, theme } from "@duskmoon-dev/components";
 - Component subpath exports follow `@duskmoon-dev/components/{component-id}`,
   for example `@duskmoon-dev/components/date-picker`.
 
+`OtpInput` uses one native input with decorative slots. `Swap` uses a native
+checkbox. `Fab`, `Megamenu`, and the mobile menu in `ConsolePage` use the
+browser's Popover API for opening, Escape dismissal, and focus restoration.
+These components require `@duskmoon-dev/core` 1.20.0 or newer.
+
+`Form.Item` associates its label with a single child control, preserving an
+existing child `id`. For composite controls, pass `htmlFor` with the target
+control's `id`. `Badge appearance="outline"` emits both `badge-outlined` and
+the supported `badge-outline` alias.
+
+`Chat.Scroll` provides a fixed-height transcript with a sticky reply rail.
+Pair assistant rows and indicator buttons with timeline slots 1–24; user rows
+do not need ticks. `Chat.Status` and `Chat.Actions` accept ordinary content and
+button callbacks, so the application owns generation state and metrics. The
+Chat docs show all ten Core 1.20.3 showcases, including RTL bubbles, live states,
+tool statuses, and message actions. For an LLM reply, place reasoning and tool
+details inside one `Chat.Bubble`, with final content in
+`.chat-bubble-content`. The new Chat styles and the `Avatar` `2xl` size require
+Core 1.20.3 or newer.
+
+```tsx
+import { Chat } from "@duskmoon-dev/components/chat";
+import { useId } from "react";
+
+export function Conversation() {
+  const replyId = useId();
+  async function copyReply() {
+    await navigator.clipboard.writeText("The build passed.");
+  }
+
+  return (
+    <Chat.Scroll style={{ height: 320 }} aria-label="Conversation">
+      <Chat.ScrollTrack aria-label="Assistant replies">
+        <Chat.ScrollIndicator timeline={1} targetId={replyId} />
+      </Chat.ScrollTrack>
+      <Chat.ScrollBody>
+        <Chat id={replyId} timeline={1}>
+          <Chat.Bubble>The build passed.</Chat.Bubble>
+          <Chat.Status>
+            <Chat.StatusItem>Completed</Chat.StatusItem>
+            <Chat.StatusItem><Chat.StatusValue>42</Chat.StatusValue> token/s</Chat.StatusItem>
+          </Chat.Status>
+          <Chat.Actions hover>
+            <button type="button" onClick={copyReply}>Copy reply</button>
+          </Chat.Actions>
+        </Chat>
+      </Chat.ScrollBody>
+    </Chat.Scroll>
+  );
+}
+```
+
+`Modal` requires a modern browser with native `<dialog>` support. It opens and
+closes through `showModal()` and `close()`, while its forwarded ref and div props
+remain on the inner modal box. Controlled callers must update `open` in
+`onCancel`; `maskClassName` is applied to the dialog for `::backdrop` styling.
+The static `Modal.confirm`, `info`, `success`, `error`, and `warning` handles
+remain exported but do not render a service surface yet.
+
 ## Development
 
 ```bash

package/dist/{chunk-r9wkv7xd.js → chunk-fwjzvsrx.js}

@@ -20,10 +20,10 @@ function clsx() {
 }
 
 // src/utils/cn.ts
-function cn(...inputs) {
+function cn2(...inputs) {
   return clsx(inputs);
 }
-function duskmoonMerge(classes) {
+function duskmoonMerge2(classes) {
   return classes;
 }
-export { cn, duskmoonMerge };
+export { cn2, duskmoonMerge2 };

package/dist/classes/chat.d.ts

@@ -0,0 +1,43 @@
+import type { ChatBubbleColor, ChatBubbleSize, ChatPlacement, ChatToolState } from "../components/chat/Chat.types";
+export declare const chatBaseClass = "chat";
+export declare const chatAvatarClass = "chat-avatar";
+export declare const chatHeaderClass = "chat-header";
+export declare const chatBubbleBaseClass = "chat-bubble";
+export declare const chatFooterClass = "chat-footer";
+export declare const chatStatusClass = "chat-status";
+export declare const chatStatusItemClass = "chat-status-item";
+export declare const chatStatusValueClass = "chat-status-value";
+export declare const chatActionsClass = "chat-actions";
+export declare const chatActionsHoverClass = "chat-actions-hover";
+export declare const chatScrollClass = "chat-scroll";
+export declare const chatScrollBodyClass = "chat-scroll-body";
+export declare const chatScrollTrackClass = "chat-scroll-track";
+export declare const chatScrollIndicatorClass = "chat-scroll-indicator";
+export declare const chatReasoningClass = "chat-reasoning";
+export declare const chatToolBaseClass = "chat-tool";
+export declare const chatToolHeaderClass = "chat-tool-header";
+export declare const chatToolStatusClass = "chat-tool-status";
+export declare const chatToolCallClass = "chat-tool-call";
+export declare const chatToolResultClass = "chat-tool-result";
+export declare const chatTypingClass = "chat-typing";
+export declare const chatBubbleFilledClass = "chat-bubble-filled";
+export declare const chatBubbleStreamingClass = "chat-bubble-streaming";
+export declare const chatPlacementClasses: Record<ChatPlacement, string>;
+export declare const chatBubbleColorClasses: Record<ChatBubbleColor, string>;
+export declare const chatBubbleSizeClasses: Record<ChatBubbleSize, string>;
+export declare const chatToolStateClasses: Record<ChatToolState, string>;
+export declare function getChatClasses({ placement, className, }: {
+    placement?: ChatPlacement;
+    className?: string;
+}): string;
+export declare function getChatBubbleClasses({ color, size, filled, streaming, className, }: {
+    color?: ChatBubbleColor;
+    size?: ChatBubbleSize;
+    filled?: boolean;
+    streaming?: boolean;
+    className?: string;
+}): string;
+export declare function getChatToolClasses({ status, className, }: {
+    status?: ChatToolState;
+    className?: string;
+}): string;

package/dist/classes/console-page.d.ts

@@ -0,0 +1,16 @@
+export type ConsolePageSidebarState = "expanded" | "compact" | "hidden";
+export declare const consolePageFrameClass = "console-page-frame";
+export declare const consolePageAppbarClass = "console-page-appbar";
+export declare const consolePageSidebarClass = "console-page-sidebar";
+export declare const consolePageSidebarHeaderClass = "console-page-sidebar-header";
+export declare const consolePageSidebarBodyClass = "console-page-sidebar-body";
+export declare const consolePageSidebarFooterClass = "console-page-sidebar-footer";
+export declare const consolePageMainClass = "console-page-main";
+export declare const consolePageNavLabelClass = "console-page-nav-label";
+export declare const consolePageSidebarToggleClass = "console-page-sidebar-toggle";
+export declare const consolePageMenuTriggerClass = "console-page-menu-trigger";
+export declare const consolePageMobileMenuClass = "console-page-mobile-menu";
+export declare function getConsolePageClasses({ sidebarState, className, }: {
+    sidebarState?: ConsolePageSidebarState;
+    className?: string;
+}): string;

package/dist/classes/dropdown.d.ts

@@ -1,12 +1,12 @@
 import type { DropdownPlacement } from "../components/dropdown/Dropdown.types";
-export declare const dropdownWrapperClass = "dropdown-wrapper";
-export declare const dropdownBaseClass = "popover dropdown";
-export declare const dropdownOpenClass = "popover-show dropdown-open";
-export declare const dropdownArrowClass = "popover-arrow dropdown-arrow";
+export declare const dropdownWrapperClass = "dropdown";
+export declare const dropdownBaseClass = "dropdown-content";
+export declare const dropdownOpenClass = "";
+export declare const dropdownArrowClass = "dropdown-arrow";
 export declare const dropdownMenuClass = "menu dropdown-menu";
 export declare const dropdownButtonClass = "dropdown-button";
 export declare const dropdownPlacementClasses: Record<DropdownPlacement, string>;
-export declare function getDropdownClasses({ placement, open, arrow, className, }: {
+export declare function getDropdownClasses({ className, }: {
     placement?: DropdownPlacement;
     open?: boolean;
     arrow?: boolean;

package/dist/classes/fab.d.ts

@@ -0,0 +1,11 @@
+export declare const fabClass = "fab";
+export declare const fabTriggerClass = "fab-trigger";
+export declare const fabActionsClass = "fab-actions";
+export declare const fabActionClass = "fab-action";
+export declare const fabLabelClass = "fab-label";
+export declare function getFabClasses({ contained, start, speedDial, className, }: {
+    contained?: boolean;
+    start?: boolean;
+    speedDial?: boolean;
+    className?: string;
+}): string;

package/dist/classes/index.d.ts

@@ -10,6 +10,8 @@ export * from "./breadcrumb";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
+export * from "./chat";
+export * from "./console-page";
 export * from "./carousel";
 export * from "./cascader";
 export * from "./checkbox";
@@ -46,6 +48,7 @@ export * from "./dropdown";
 export * from "./empty";
 export * from "./flex";
 export * from "./float-button";
+export * from "./fab";
 export * from "./form";
 export * from "./grid";
 export * from "./image";
@@ -55,9 +58,11 @@ export * from "./layout";
 export * from "./list";
 export * from "./mentions";
 export * from "./menu";
+export * from "./megamenu";
 export * from "./message";
 export * from "./modal";
 export * from "./notification";
+export * from "./otp-input";
 export * from "./pagination";
 export * from "./popover";
 export * from "./popconfirm";
@@ -77,6 +82,7 @@ export * from "./splitter";
 export * from "./statistic";
 export * from "./steps";
 export * from "./switch";
+export * from "./swap";
 export * from "./tabs";
 export * from "./tag";
 export * from "./table";