@duskmoon-dev/components 0.3.1 → 0.4.0

package/dist/components/chat/index.js

@@ -0,0 +1,309 @@
+"use client";
+
+// src/components/chat/Chat.tsx
+import { forwardRef } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/chat.ts
+var chatBaseClass = "chat";
+var chatAvatarClass = "chat-avatar";
+var chatHeaderClass = "chat-header";
+var chatBubbleBaseClass = "chat-bubble";
+var chatFooterClass = "chat-footer";
+var chatStatusClass = "chat-status";
+var chatStatusItemClass = "chat-status-item";
+var chatStatusValueClass = "chat-status-value";
+var chatActionsClass = "chat-actions";
+var chatActionsHoverClass = "chat-actions-hover";
+var chatScrollClass = "chat-scroll";
+var chatScrollBodyClass = "chat-scroll-body";
+var chatScrollTrackClass = "chat-scroll-track";
+var chatScrollIndicatorClass = "chat-scroll-indicator";
+var chatReasoningClass = "chat-reasoning";
+var chatToolBaseClass = "chat-tool";
+var chatToolHeaderClass = "chat-tool-header";
+var chatToolStatusClass = "chat-tool-status";
+var chatToolCallClass = "chat-tool-call";
+var chatToolResultClass = "chat-tool-result";
+var chatTypingClass = "chat-typing";
+var chatBubbleFilledClass = "chat-bubble-filled";
+var chatBubbleStreamingClass = "chat-bubble-streaming";
+var chatPlacementClasses = {
+  start: "chat-start",
+  end: "chat-end"
+};
+var chatBubbleColorClasses = {
+  primary: "chat-bubble-primary",
+  secondary: "chat-bubble-secondary",
+  tertiary: "chat-bubble-tertiary",
+  accent: "chat-bubble-accent",
+  neutral: "chat-bubble-neutral",
+  base: "chat-bubble-base",
+  info: "chat-bubble-info",
+  success: "chat-bubble-success",
+  warning: "chat-bubble-warning",
+  error: "chat-bubble-error"
+};
+var chatBubbleSizeClasses = {
+  xs: "chat-bubble-xs",
+  sm: "chat-bubble-sm",
+  md: "chat-bubble-md",
+  lg: "chat-bubble-lg"
+};
+var chatToolStateClasses = {
+  pending: "chat-tool-pending",
+  running: "chat-tool-running",
+  success: "chat-tool-success",
+  error: "chat-tool-error"
+};
+function getChatClasses({
+  placement = "start",
+  className
+}) {
+  return cn(chatBaseClass, chatPlacementClasses[placement], className);
+}
+function getChatBubbleClasses({
+  color,
+  size = "md",
+  filled,
+  streaming,
+  className
+}) {
+  return cn(chatBubbleBaseClass, color && chatBubbleColorClasses[color], chatBubbleSizeClasses[size], filled && chatBubbleFilledClass, streaming && chatBubbleStreamingClass, className);
+}
+function getChatToolClasses({
+  status,
+  className
+}) {
+  return cn(chatToolBaseClass, status && chatToolStateClasses[status], className);
+}
+
+// src/components/chat/Chat.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChatAvatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatAvatarClass, className)
+}));
+ChatAvatar.displayName = "Chat.Avatar";
+var ChatHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatHeaderClass, className)
+}));
+ChatHeader.displayName = "Chat.Header";
+var ChatBubble = forwardRef(({ color, size = "md", filled, streaming, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  className: getChatBubbleClasses({
+    color,
+    size,
+    filled,
+    streaming,
+    className
+  }),
+  children: [
+    children,
+    streaming ? /* @__PURE__ */ jsx("span", {
+      className: "chat-bubble-content chat-bubble-streaming",
+      "aria-hidden": "true"
+    }) : null
+  ]
+}));
+ChatBubble.displayName = "Chat.Bubble";
+var ChatFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatFooterClass, className)
+}));
+ChatFooter.displayName = "Chat.Footer";
+var ChatStatus = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatStatusClass, className)
+}));
+ChatStatus.displayName = "Chat.Status";
+var ChatStatusItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  className: cn(chatStatusItemClass, className)
+}));
+ChatStatusItem.displayName = "Chat.StatusItem";
+var ChatStatusValue = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  className: cn(chatStatusValueClass, className)
+}));
+ChatStatusValue.displayName = "Chat.StatusValue";
+var ChatActions = forwardRef(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatActionsClass, hover && chatActionsHoverClass, className)
+}));
+ChatActions.displayName = "Chat.Actions";
+var ChatScroll = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollClass, className)
+}));
+ChatScroll.displayName = "Chat.Scroll";
+var ChatScrollBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollBodyClass, className)
+}));
+ChatScrollBody.displayName = "Chat.ScrollBody";
+var ChatScrollTrack = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollTrackClass, className)
+}));
+ChatScrollTrack.displayName = "Chat.ScrollTrack";
+var ChatScrollIndicator = forwardRef(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", {
+  ...props,
+  ref,
+  type,
+  "data-chat-target": targetId,
+  "data-chat-tl": timeline,
+  "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? undefined : `Jump to assistant reply ${timeline}`),
+  className: cn(chatScrollIndicatorClass, className),
+  onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented)
+      return;
+    const scroller = event.currentTarget.closest(`.${chatScrollClass}`);
+    const target = Array.from(scroller?.querySelectorAll("[id]") ?? []).find((element) => element.id === targetId && element.closest(`.${chatScrollClass}`) === scroller);
+    if (!scroller || !target)
+      return;
+    const top = scroller.scrollTop + target.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+    const reducedMotion = scroller.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    scroller.scrollTo({ top, behavior: reducedMotion ? "auto" : "smooth" });
+  }
+}));
+ChatScrollIndicator.displayName = "Chat.ScrollIndicator";
+var ChatReasoning = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("details", {
+  ...props,
+  ref,
+  className: cn(chatReasoningClass, className)
+}));
+ChatReasoning.displayName = "Chat.Reasoning";
+var ChatTool = forwardRef(({ status, className, ...props }, ref) => /* @__PURE__ */ jsx("details", {
+  ...props,
+  ref,
+  className: getChatToolClasses({ status, className })
+}));
+ChatTool.displayName = "Chat.Tool";
+var ChatToolHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("summary", {
+  ...props,
+  ref,
+  className: cn(chatToolHeaderClass, className)
+}));
+ChatToolHeader.displayName = "Chat.ToolHeader";
+var ChatToolStatus = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  className: cn(chatToolStatusClass, className)
+}));
+ChatToolStatus.displayName = "Chat.ToolStatus";
+var ChatToolCall = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatToolCallClass, className)
+}));
+ChatToolCall.displayName = "Chat.ToolCall";
+var ChatToolResult = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatToolResultClass, className)
+}));
+ChatToolResult.displayName = "Chat.ToolResult";
+var ChatTyping = forwardRef(({
+  className,
+  role = "status",
+  "aria-label": ariaLabel = "Assistant is typing",
+  ...props
+}, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  role,
+  "aria-label": ariaLabel,
+  className: cn(chatTypingClass, className),
+  children: /* @__PURE__ */ jsx("span", {
+    "aria-hidden": "true"
+  })
+}));
+ChatTyping.displayName = "Chat.Typing";
+var ChatRoot = forwardRef(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  "data-chat-tl": timeline ?? props["data-chat-tl"],
+  className: getChatClasses({ placement, className })
+}));
+ChatRoot.displayName = "Chat";
+var Chat = Object.assign(ChatRoot, {
+  Avatar: ChatAvatar,
+  Header: ChatHeader,
+  Bubble: ChatBubble,
+  Footer: ChatFooter,
+  Status: ChatStatus,
+  StatusItem: ChatStatusItem,
+  StatusValue: ChatStatusValue,
+  Actions: ChatActions,
+  Scroll: ChatScroll,
+  ScrollBody: ChatScrollBody,
+  ScrollTrack: ChatScrollTrack,
+  ScrollIndicator: ChatScrollIndicator,
+  Reasoning: ChatReasoning,
+  Tool: ChatTool,
+  ToolHeader: ChatToolHeader,
+  ToolStatus: ChatToolStatus,
+  ToolCall: ChatToolCall,
+  ToolResult: ChatToolResult,
+  Typing: ChatTyping
+});
+export {
+  Chat,
+  ChatActions,
+  ChatAvatar,
+  ChatBubble,
+  ChatFooter,
+  ChatHeader,
+  ChatReasoning,
+  ChatScroll,
+  ChatScrollBody,
+  ChatScrollIndicator,
+  ChatScrollTrack,
+  ChatStatus,
+  ChatStatusItem,
+  ChatStatusValue,
+  ChatTool,
+  ChatToolCall,
+  ChatToolHeader,
+  ChatToolResult,
+  ChatToolStatus,
+  ChatTyping
+};

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 export type ColorPickerFormat = "hex" | "rgb" | "hsb";
 export type ColorPickerTrigger = "hover" | "click";
 export type ColorPickerSize = "small" | "middle" | "large" | "sm" | "md" | "lg";
@@ -20,6 +20,7 @@ export interface ColorPreset {
     colors: ColorValue[];
 }
 export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange"> {
+    triggerProps?: ComponentProps<"button">;
     value?: ColorValue;
     defaultValue?: ColorValue;
     format?: ColorPickerFormat;

package/dist/components/color-picker/index.js

@@ -1,7 +1,14 @@
 "use client";
 
 // src/components/color-picker/ColorPicker.tsx
-import { forwardRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -88,9 +95,9 @@ function hsbToRgb(value) {
   const c = brightness * s;
   const x = c * (1 - Math.abs(h / 60 % 2 - 1));
   const m = brightness - c;
-  const [r2, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  const [r, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
   return {
-    r: (r2 + m) * 255,
+    r: (r + m) * 255,
     g: (g + m) * 255,
     b: (b + m) * 255,
     a: value.a
@@ -102,7 +109,7 @@ function colorToRgb(value) {
   if (isHsb(value))
     return hsbToRgb(value);
   const normalized = value.trim();
-  if (normalized.startsWith("#")) {
+  if (/^#(?:[a-f\d]{3}|[a-f\d]{6})$/i.test(normalized)) {
     const hex = normalized.slice(1);
     const fullHex = hex.length === 3 ? hex.split("").map((item) => item + item).join("") : hex.padEnd(6, "0").slice(0, 6);
     return {
@@ -113,22 +120,49 @@ function colorToRgb(value) {
   }
   const match = normalized.match(/rgba?\(([^)]+)\)/i);
   if (match) {
-    const [r2, g, b, a] = match[1].split(",").map((part) => Number(part.trim()));
-    return { r: r2, g, b, a };
+    const [r, g, b, a] = match[1].split(",").map((part) => Number(part.trim()));
+    return { r, g, b, a };
   }
   return { r: 0, g: 0, b: 0 };
 }
+function colorToHsb(value) {
+  if (isHsb(value))
+    return {
+      ...value,
+      h: (value.h % 360 + 360) % 360,
+      s: clamp(value.s, 0, 100),
+      b: clamp(value.b, 0, 100)
+    };
+  const rgb = colorToRgb(value);
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((part) => Number.isFinite(part) ? clamp(part, 0, 255) / 255 : 0);
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+  const hue = delta === 0 ? 0 : max === r ? (g - b) / delta % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4;
+  return {
+    h: (hue * 60 + 360) % 360,
+    s: max === 0 ? 0 : delta / max * 100,
+    b: max * 100,
+    a: rgb.a
+  };
+}
 function colorToCss(value, format) {
   const rgb = colorToRgb(value);
   if (format === "rgb") {
     return rgb.a !== undefined ? `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a})` : `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
   }
-  if (format === "hsb" && isHsb(value)) {
-    return `hsb(${Math.round(value.h)}, ${Math.round(value.s)}%, ${Math.round(value.b)}%)`;
+  if (format === "hsb") {
+    const hsb = colorToHsb(value);
+    return `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%)`;
   }
   return `#${componentToHex(rgb.r)}${componentToHex(rgb.g)}${componentToHex(rgb.b)}`;
 }
 function parseInput(value, format) {
+  if (format === "hsb") {
+    const match = value.match(/^hsb\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
+    if (match)
+      return { h: Number(match[1]), s: Number(match[2]), b: Number(match[3]) };
+    return value;
+  }
   if (format === "rgb") {
     const rgb = colorToRgb(value);
     return {
@@ -156,9 +190,14 @@ var ColorPicker = forwardRef(({
   showText,
   size = "middle",
   trigger = "click",
+  triggerProps,
   value,
   ...props
 }, ref) => {
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelId = useId();
+  useImperativeHandle(ref, () => rootRef.current, []);
   const valueControlled = value !== undefined;
   const openControlled = open !== undefined;
   const [innerValue, setInnerValue] = useState(defaultValue);
@@ -166,6 +205,16 @@ var ColorPicker = forwardRef(({
   const currentValue = valueControlled ? value : innerValue;
   const visible = openControlled ? Boolean(open) : innerOpen;
   const cssValue = colorToCss(currentValue, format);
+  const [lastSelection, setLastSelection] = useState(() => colorToHsb(currentValue));
+  const selection = colorToHsb(currentValue);
+  if (selection.s === 0 || selection.b === 0)
+    selection.h = lastSelection.h;
+  if (selection.b === 0)
+    selection.s = lastSelection.s;
+  if (selection.h === 0 && lastSelection.h === 360)
+    selection.h = 360;
+  const pointerId = useRef(null);
+  const instructionsId = useId();
   function setVisible(nextOpen) {
     if (disabled)
       return;
@@ -174,21 +223,163 @@ var ColorPicker = forwardRef(({
     }
     onOpenChange?.(nextOpen);
   }
-  function emitChange(nextValue) {
+  useEffect(() => {
+    if (!visible)
+      return;
+    function dismissOutside(event) {
+      if (!rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function dismissEscape(event) {
+      if (event.key === "Escape" && rootRef.current?.contains(event.target)) {
+        event.preventDefault();
+        setVisible(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("keydown", dismissEscape);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("keydown", dismissEscape);
+    };
+  });
+  function emitChange(nextValue, complete = true) {
+    if (disabled)
+      return;
     const css = colorToCss(nextValue, format);
     if (!valueControlled) {
       setInnerValue(nextValue);
     }
     onChange?.(nextValue, css);
-    onChangeComplete?.(nextValue, css);
+    if (complete)
+      onChangeComplete?.(nextValue, css);
+  }
+  function selectColor(next, complete = true) {
+    if (disabled)
+      return;
+    setLastSelection(next);
+    emitChange(format === "hex" ? colorToCss(next, "hex") : format === "rgb" ? hsbToRgb(next) : next, complete);
+  }
+  function selectPosition(event, complete = false) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    if (disabled || bounds.width === 0 || bounds.height === 0)
+      return;
+    selectColor({
+      ...selection,
+      s: clamp((event.clientX - bounds.left) / bounds.width * 100, 0, 100),
+      b: clamp(100 - (event.clientY - bounds.top) / bounds.height * 100, 0, 100)
+    }, complete);
   }
   const panel = /* @__PURE__ */ jsxs("div", {
+    id: panelId,
     className: colorPickerPanelClass,
+    role: "dialog",
+    "aria-label": "Choose color",
     children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "color-picker-area",
+        role: "slider",
+        "aria-label": "Saturation and brightness",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(selection.s),
+        "aria-valuetext": `Saturation ${Math.round(selection.s)}%, brightness ${Math.round(selection.b)}%`,
+        "aria-describedby": instructionsId,
+        "aria-disabled": Boolean(disabled),
+        tabIndex: disabled ? -1 : 0,
+        style: { "--color-picker-hue": `${selection.h}` },
+        onPointerDown: (event) => {
+          if (disabled || event.button !== 0)
+            return;
+          event.preventDefault();
+          event.currentTarget.focus();
+          pointerId.current = event.pointerId;
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+          selectPosition(event);
+        },
+        onPointerMove: (event) => {
+          if (pointerId.current === event.pointerId)
+            selectPosition(event);
+        },
+        onPointerUp: (event) => {
+          if (pointerId.current !== event.pointerId)
+            return;
+          selectPosition(event, true);
+          pointerId.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel: () => {
+          pointerId.current = null;
+        },
+        onLostPointerCapture: () => {
+          pointerId.current = null;
+        },
+        onKeyDown: (event) => {
+          if (disabled)
+            return;
+          const step = event.shiftKey ? 10 : 1;
+          let { s, b } = selection;
+          switch (event.key) {
+            case "ArrowLeft":
+              s -= step;
+              break;
+            case "ArrowRight":
+              s += step;
+              break;
+            case "ArrowDown":
+              b -= step;
+              break;
+            case "ArrowUp":
+              b += step;
+              break;
+            case "Home":
+              s = 0;
+              break;
+            case "End":
+              s = 100;
+              break;
+            default:
+              return;
+          }
+          event.preventDefault();
+          selectColor({
+            ...selection,
+            s: clamp(s, 0, 100),
+            b: clamp(b, 0, 100)
+          });
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "color-picker-area-indicator",
+          "aria-hidden": "true",
+          style: {
+            left: `${selection.s}%`,
+            top: `${100 - selection.b}%`,
+            backgroundColor: colorToCss(currentValue, "hex")
+          }
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        id: instructionsId,
+        className: "color-picker-instructions",
+        children: "Left/right: saturation. Up/down: brightness. Shift: larger steps."
+      }),
+      /* @__PURE__ */ jsx("input", {
+        className: "color-picker-hue",
+        type: "range",
+        "aria-label": "Hue",
+        min: 0,
+        max: 360,
+        step: 1,
+        value: selection.h,
+        disabled,
+        onChange: (event) => selectColor({ ...selection, h: Number(event.currentTarget.value) })
+      }),
       /* @__PURE__ */ jsx("input", {
         className: colorPickerInputClass,
         "aria-label": "Color value",
-        value: cssValue,
+        value: format === "hex" && typeof currentValue === "string" ? currentValue : cssValue,
+        disabled,
         onChange: (event) => emitChange(parseInput(event.currentTarget.value, format))
       }),
       presets?.length ? /* @__PURE__ */ jsx("div", {
@@ -206,6 +397,7 @@ var ColorPicker = forwardRef(({
                 const presetCss = colorToCss(presetColor, format);
                 return /* @__PURE__ */ jsx("button", {
                   type: "button",
+                  disabled,
                   "aria-label": `Select color ${presetCss}`,
                   className: colorPickerSwatchClass,
                   style: {
@@ -222,7 +414,7 @@ var ColorPicker = forwardRef(({
   });
   return /* @__PURE__ */ jsxs("div", {
     ...props,
-    ref,
+    ref: rootRef,
     className: getColorPickerClasses({
       size,
       trigger,
@@ -241,9 +433,14 @@ var ColorPicker = forwardRef(({
     },
     children: [
       /* @__PURE__ */ jsx("button", {
+        ...triggerProps,
+        ref: triggerRef,
         type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? panelId : undefined,
         className: colorPickerSwatchClass,
-        "aria-label": "Open color picker",
+        "aria-label": triggerProps?.["aria-label"] ?? "Open color picker",
         disabled,
         style: { backgroundColor: colorToCss(currentValue, "hex") },
         onClick: () => {

package/dist/components/config-provider/index.js

@@ -122,6 +122,6 @@ ConfigProvider.config = (config) => {
   globalConfig = { ...globalConfig, ...config };
 };
 export {
-  ConfigProvider,
-  ConfigContext
+  ConfigContext,
+  ConfigProvider
 };

package/dist/components/console-page/ConsolePage.d.ts

@@ -0,0 +1,2 @@
+import type { ConsolePageComponent } from "./ConsolePage.types";
+export declare const ConsolePage: ConsolePageComponent;

package/dist/components/console-page/ConsolePage.types.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import type { ConsolePageSidebarState } from "../../classes/console-page";
+export interface ConsolePageProps extends Omit<ComponentProps<"div">, "ref"> {
+    sidebarState?: ConsolePageSidebarState;
+    sidebarMode?: ConsolePageSidebarState;
+    appBar?: ReactNode;
+    sidebar?: ReactNode;
+    sidebarHeader?: ReactNode;
+    sidebarFooter?: ReactNode;
+}
+export type ConsolePageSidebarMode = ConsolePageSidebarState;
+export type ConsolePageFrameProps = Omit<ComponentProps<"div">, "ref">;
+export type ConsolePageAppbarProps = Omit<ComponentProps<"header">, "ref">;
+export type ConsolePageSidebarProps = Omit<ComponentProps<"aside">, "ref">;
+export type ConsolePageSidebarBodyProps = Omit<ComponentProps<"nav">, "ref">;
+export type ConsolePageMainProps = Omit<ComponentProps<"main">, "ref">;
+export type ConsolePageButtonProps = Omit<ComponentProps<"button">, "ref">;
+export interface ConsolePageComponent extends ForwardRefExoticComponent<ConsolePageProps & RefAttributes<HTMLDivElement>> {
+    Frame: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    Appbar: ForwardRefExoticComponent<ConsolePageAppbarProps & RefAttributes<HTMLElement>>;
+    Sidebar: ForwardRefExoticComponent<ConsolePageSidebarProps & RefAttributes<HTMLElement>>;
+    SidebarHeader: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    SidebarBody: ForwardRefExoticComponent<ConsolePageSidebarBodyProps & RefAttributes<HTMLElement>>;
+    SidebarFooter: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    Main: ForwardRefExoticComponent<ConsolePageMainProps & RefAttributes<HTMLElement>>;
+    SidebarToggle: ForwardRefExoticComponent<ConsolePageButtonProps & RefAttributes<HTMLButtonElement>>;
+    MobileTrigger: ForwardRefExoticComponent<ConsolePageButtonProps & RefAttributes<HTMLButtonElement>>;
+    MobileMenu: ForwardRefExoticComponent<ConsolePageSidebarBodyProps & RefAttributes<HTMLElement>>;
+}

package/dist/components/console-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ConsolePage";
+export * from "./ConsolePage.types";