mainbase-ui 1.2.5 → 3.36.0

package/dist/esm/components/code/code.js

@@ -0,0 +1,10 @@
+"use client";
+import { createRecipeContext } from '../../styled-system/create-recipe-context.js';
+
+const { withContext, PropsProvider } = createRecipeContext({
+  key: "code"
+});
+const Code = withContext("code");
+const CodePropsProvider = PropsProvider;
+
+export { Code, CodePropsProvider };

package/dist/esm/components/code/index.js

@@ -0,0 +1 @@
+export { Code, CodePropsProvider } from './code.js';

package/dist/esm/components/code-block/adapters.js

@@ -0,0 +1,96 @@
+const plainTextAdapter = {
+  getHighlighter: () => ({ code }) => ({ code, highlighted: false })
+};
+function createShikiAdapter(opts) {
+  const { load, loadSync, highlightOptions, theme } = opts;
+  return {
+    loadContextSync: loadSync,
+    loadContext: load,
+    unloadContext(ctx) {
+      ctx?.dispose?.();
+    },
+    getHighlighter: (ctx) => {
+      return ({ code, language, meta }) => {
+        if (!ctx) {
+          return { code, highlighted: false };
+        }
+        const colorScheme = meta?.colorScheme || "dark";
+        const resolvedTheme = typeof theme === "string" ? theme : theme[colorScheme];
+        if (!resolvedTheme) {
+          throw new Error(`Theme not found for color scheme: ${colorScheme}`);
+        }
+        return {
+          highlighted: true,
+          code: removeWrapperTags(
+            ctx.codeToHtml(code, {
+              theme: resolvedTheme,
+              ...highlightOptions,
+              lang: language,
+              transformers: [
+                {
+                  line(hast, line) {
+                    hast.properties || (hast.properties = {});
+                    Object.assign(hast.properties, {
+                      "data-line": line,
+                      "data-highlight": meta?.highlightLines?.includes(line) ? "" : void 0,
+                      "data-word-wrap": meta?.wordWrap ? "" : void 0,
+                      "data-diff": meta?.addedLineNumbers?.includes(line) ? "added" : meta?.removedLineNumbers?.includes(line) ? "removed" : void 0,
+                      "data-focused": meta?.focusedLineNumbers?.includes(line) ? "" : void 0
+                    });
+                  }
+                },
+                ...highlightOptions?.transformers ?? []
+              ]
+            })
+          )
+        };
+      };
+    }
+  };
+}
+const removeWrapperTags = (html) => {
+  return html.replace(/<pre[^>]*>/, "").replace(/<\/pre>$/, "").replace(/<code[^>]*>/, "").replace(/<\/code>$/, "");
+};
+function createHighlightJsAdapter(opts) {
+  const { load, loadSync, highlightOptions } = opts;
+  return {
+    loadContextSync: loadSync,
+    loadContext: load,
+    unloadContext(ctx) {
+      const langs = ctx?.listLanguages?.();
+      langs?.forEach((lang) => {
+        ctx?.unregisterLanguage?.(lang);
+      });
+    },
+    getHighlighter: (ctx) => {
+      return ({ code, language = "plaintext", meta }) => {
+        if (!ctx) {
+          return { code, highlighted: false };
+        }
+        const hasDiff = (meta?.addedLineNumbers?.length ?? 0) > 0 || (meta?.removedLineNumbers?.length ?? 0) > 0;
+        const result = ctx.highlight(code.trim(), {
+          language,
+          ...highlightOptions
+        });
+        const lines = result.value.split("\n");
+        return {
+          highlighted: true,
+          code: lines.map((line, index) => {
+            const lineNumber = index + 1;
+            const attrs = [
+              `data-line="${lineNumber}"`,
+              meta?.highlightLines?.includes(lineNumber) && "data-highlight",
+              meta?.wordWrap && "data-word-wrap",
+              hasDiff && meta?.addedLineNumbers?.includes(lineNumber) && `data-diff="added"`,
+              hasDiff && meta?.removedLineNumbers?.includes(lineNumber) && `data-diff="removed"`,
+              meta?.focusedLineNumbers?.includes(lineNumber) && "data-focused"
+            ];
+            return `<span ${attrs.filter(Boolean).join(" ")}>${line || " "}</span>`;
+          }).join("\n")
+        };
+      };
+    }
+  };
+}
+
+export { createHighlightJsAdapter, createShikiAdapter, plainTextAdapter };

package/dist/esm/components/code-block/code-block-adapter-context.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext } from '../../create-context.js';
+import { plainTextAdapter } from './adapters.js';
+
+const [CodeBlockAdapterContextProvider, useCodeBlockAdapterContext] = createContext({
+  strict: false,
+  defaultValue: {
+    highlight: plainTextAdapter.getHighlighter(null),
+    loadContext: () => Promise.resolve(null),
+    getHighlighter: plainTextAdapter.getHighlighter
+  }
+});
+
+export { CodeBlockAdapterContextProvider, useCodeBlockAdapterContext };

package/dist/esm/components/code-block/code-block-adapter-provider.js

@@ -0,0 +1,11 @@
+"use client";
+import { CodeBlockAdapterContextProvider } from './code-block-adapter-context.js';
+import { useCodeHighlight } from './use-code-highlight.js';
+
+function CodeBlockAdapterProvider(props) {
+  const { children, value } = props;
+  const context = useCodeHighlight(value);
+  return /* @__PURE__ */ React.createElement(CodeBlockAdapterContextProvider, { value: context }, children);
+}
+
+export { CodeBlockAdapterProvider };

package/dist/esm/components/code-block/code-block-context.js

@@ -0,0 +1,9 @@
+import { createContext } from '../../create-context.js';
+
+const [CodeBlockContextProvider, useCodeBlockContext] = createContext({
+  name: "CodeBlockContext",
+  providerName: "CodeBlock.Root",
+  hookName: "useCodeBlockContext"
+});
+
+export { CodeBlockContextProvider, useCodeBlockContext };

package/dist/esm/components/code-block/code-block.js

@@ -0,0 +1,244 @@
+"use client";
+import { useClipboard } from '@ark-ui/react/clipboard';
+import { ark } from '@ark-ui/react/factory';
+import { forwardRef, useMemo, useId } from 'react';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+import { useControllableState } from '../../hooks/use-controllable-state.js';
+import '@ark-ui/react';
+import '@ark-ui/react/collection';
+import { dataAttr } from '../../utils/attr.js';
+import { cx } from '../../utils/cx.js';
+import '../../utils/unit.js';
+import { mergeProps } from '../../merge-props.js';
+import { CopyIcon, CheckIcon, ChevronUpIcon, ChevronDownIcon } from '../icons.js';
+import { useCodeBlockAdapterContext } from './code-block-adapter-context.js';
+import { CodeBlockContextProvider, useCodeBlockContext } from './code-block-context.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useCodeBlockStyles,
+  PropsProvider
+} = createSlotRecipeContext({
+  key: "codeBlock"
+});
+const RootBase = forwardRef(
+  function RootBase2(props, ref) {
+    const {
+      children,
+      code: codeProp,
+      language,
+      meta: metaProp,
+      maxLines,
+      defaultColorScheme = "dark",
+      copyTimeout = 1e3,
+      onCopy,
+      ...rest
+    } = props;
+    const meta = useMemo(
+      () => ({
+        ...metaProp,
+        colorScheme: metaProp?.colorScheme ?? defaultColorScheme
+      }),
+      [metaProp, defaultColorScheme]
+    );
+    const code = codeProp.trim();
+    const codeLines = code.split("\n").length;
+    const clipboard = useClipboard({
+      value: code,
+      timeout: copyTimeout,
+      onStatusChange(details) {
+        if (details.copied) onCopy?.();
+      }
+    });
+    const [collapsed, setCollapsed] = useControllableState({
+      defaultValue: maxLines != null ? codeLines > maxLines : false
+    });
+    const uid = useId();
+    const collapsible = useMemo(
+      () => ({
+        contentId: `${uid}-content`,
+        collapsed,
+        setCollapsed,
+        toggleCollapsed: () => setCollapsed((prev) => !prev)
+      }),
+      [collapsed, setCollapsed, uid]
+    );
+    const context = useMemo(
+      () => ({
+        code,
+        language,
+        clipboard,
+        collapsible,
+        meta
+      }),
+      [code, language, clipboard, collapsible, meta]
+    );
+    return /* @__PURE__ */ React.createElement(CodeBlockContextProvider, { value: context }, /* @__PURE__ */ React.createElement(
+      ark.div,
+      {
+        ref,
+        "data-has-focused": dataAttr(Boolean(meta?.focusedLineNumbers?.length)),
+        "data-has-diff": dataAttr(
+          Boolean(meta?.addedLineNumbers?.length) || Boolean(meta?.removedLineNumbers?.length)
+        ),
+        "data-has-line-numbers": dataAttr(Boolean(meta?.showLineNumbers)),
+        ...rest,
+        className: cx("mainbase-theme", meta.colorScheme, rest.className),
+        style: {
+          ...rest.style,
+          ["--code-block-line-length"]: `${String(codeLines).length}ch`
+        }
+      },
+      children
+    ));
+  }
+);
+const CodeBlockRoot = withProvider(
+  RootBase,
+  "root",
+  { forwardAsChild: true, forwardProps: ["maxLines"] }
+);
+const CodeBlockPropsProvider = PropsProvider;
+const ContentBase = forwardRef(
+  function ContentBase2(props, ref) {
+    const { children, ...restProps } = props;
+    const { collapsible } = useCodeBlockContext();
+    return /* @__PURE__ */ React.createElement(
+      ark.div,
+      {
+        ref,
+        id: collapsible.contentId,
+        "data-expanded": dataAttr(!collapsible.collapsed),
+        "aria-expanded": !collapsible.collapsed,
+        ...restProps
+      },
+      children
+    );
+  }
+);
+const CodeBlockContent = withContext(ContentBase, "content", { forwardAsChild: true });
+const CodeBlockTitle = withContext(
+  "div",
+  "title"
+);
+const CodeBlockHeader = withContext("header", "header");
+const CodeBlockCode = withContext(
+  "pre",
+  "code",
+  {
+    defaultProps: {
+      tabIndex: 0
+    }
+  }
+);
+const CodeText = forwardRef(
+  function CodeText2(props, ref) {
+    const { code, language, meta } = useCodeBlockContext();
+    const { highlight } = useCodeBlockAdapterContext();
+    const highlighted = highlight?.({ code, language, meta });
+    const codeContentProps = highlighted?.highlighted ? { dangerouslySetInnerHTML: { __html: highlighted.code } } : { children: code };
+    return /* @__PURE__ */ React.createElement(
+      ark.code,
+      {
+        "data-plaintext": dataAttr(!highlighted?.highlighted),
+        "data-has-focused": dataAttr(Boolean(meta?.focusedLineNumbers?.length)),
+        "data-has-diff": dataAttr(
+          Boolean(meta?.addedLineNumbers?.length) || Boolean(meta?.removedLineNumbers?.length)
+        ),
+        "data-has-line-numbers": dataAttr(Boolean(meta?.showLineNumbers)),
+        "data-word-wrap": dataAttr(Boolean(meta?.wordWrap)),
+        ref,
+        ...props,
+        ...codeContentProps
+      }
+    );
+  }
+);
+const CodeBlockCodeText = withContext(CodeText, "codeText", { forwardAsChild: true });
+const BaseCopyTrigger = forwardRef(
+  function BaseCopyTrigger2(props, ref) {
+    const { children, ...restProps } = props;
+    const { clipboard } = useCodeBlockContext();
+    return /* @__PURE__ */ React.createElement(
+      ark.button,
+      {
+        ref,
+        ...mergeProps(clipboard.getTriggerProps(), restProps)
+      },
+      children
+    );
+  }
+);
+const CodeBlockCopyTrigger = withContext(BaseCopyTrigger, "copyTrigger", { forwardAsChild: true });
+const BaseCopyIndicator = forwardRef(
+  function BaseCopyIndicator2(props, ref) {
+    const { children, copied, ...restProps } = props;
+    const { clipboard } = useCodeBlockContext();
+    return /* @__PURE__ */ React.createElement(ark.span, { ref, ...restProps }, clipboard.copied ? copied : children);
+  }
+);
+const CodeBlockCopyIndicator = withContext(BaseCopyIndicator, "copyIndicator", {
+  forwardAsChild: true,
+  defaultProps: {
+    copied: /* @__PURE__ */ React.createElement(CheckIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ React.createElement(CopyIcon, { boxSize: "1em" })
+  }
+});
+const BaseCollapseTrigger = forwardRef(function BaseCollapseTrigger2(props, ref) {
+  const { children, ...restProps } = props;
+  const { collapsible } = useCodeBlockContext();
+  return /* @__PURE__ */ React.createElement(
+    ark.button,
+    {
+      type: "button",
+      "aria-controls": collapsible.contentId,
+      "aria-expanded": !collapsible.collapsed,
+      "aria-label": collapsible.collapsed ? "Expand code block" : "Collapse code block",
+      ref,
+      ...restProps,
+      onClick: (e) => {
+        restProps.onClick?.(e);
+        collapsible.toggleCollapsed();
+      }
+    },
+    children
+  );
+});
+const CodeBlockCollapseTrigger = withContext(BaseCollapseTrigger, "collapseTrigger", { forwardAsChild: true });
+const BaseCollapseIndicator = forwardRef(function BaseCollapseIndicator2(props, ref) {
+  const { children, collapsed, ...restProps } = props;
+  const { collapsible } = useCodeBlockContext();
+  return /* @__PURE__ */ React.createElement(ark.span, { ref, ...restProps }, collapsible.collapsed ? collapsed : children);
+});
+const CodeBlockCollapseIndicator = withContext(BaseCollapseIndicator, "collapseIndicator", {
+  forwardAsChild: true,
+  defaultProps: {
+    collapsed: /* @__PURE__ */ React.createElement(ChevronDownIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ React.createElement(ChevronUpIcon, { boxSize: "1em" })
+  }
+});
+const CodeBlockCollapseText = forwardRef(function CodeBlockCollapseText2(props, ref) {
+  return /* @__PURE__ */ React.createElement(CodeBlockCollapseIndicator, { ref, ...props, collapsed: "Expand code" }, props.children || "Collapse code");
+});
+const CodeBlockFooter = withContext("footer", "footer");
+const CodeBlockControl = withContext("div", "control");
+const BaseOverlay = forwardRef(
+  function BaseOverlay2(props, ref) {
+    const { collapsible } = useCodeBlockContext();
+    return /* @__PURE__ */ React.createElement(
+      ark.div,
+      {
+        ref,
+        ...props,
+        "data-expanded": dataAttr(!collapsible.collapsed)
+      }
+    );
+  }
+);
+const CodeBlockOverlay = withContext(BaseOverlay, "overlay", { forwardAsChild: true });
+const CodeBlockContext = (props) => {
+  return props.children(useCodeBlockContext());
+};
+
+export { CodeBlockCode, CodeBlockCodeText, CodeBlockCollapseIndicator, CodeBlockCollapseText, CodeBlockCollapseTrigger, CodeBlockContent, CodeBlockContext, CodeBlockControl, CodeBlockCopyIndicator, CodeBlockCopyTrigger, CodeBlockFooter, CodeBlockHeader, CodeBlockOverlay, CodeBlockPropsProvider, CodeBlockRoot, CodeBlockTitle, useCodeBlockStyles };

package/dist/esm/components/code-block/index.js

@@ -0,0 +1,5 @@
+export { CodeBlockAdapterProvider } from './code-block-adapter-provider.js';
+export { CodeBlockCode, CodeBlockCodeText, CodeBlockCollapseIndicator, CodeBlockCollapseText, CodeBlockCollapseTrigger, CodeBlockContent, CodeBlockContext, CodeBlockControl, CodeBlockCopyIndicator, CodeBlockCopyTrigger, CodeBlockFooter, CodeBlockHeader, CodeBlockOverlay, CodeBlockRoot, CodeBlockTitle } from './code-block.js';
+export { createHighlightJsAdapter, createShikiAdapter, plainTextAdapter } from './adapters.js';
+import * as namespace from './namespace.js';
+export { namespace as CodeBlock };

package/dist/esm/components/code-block/namespace.js

@@ -0,0 +1,2 @@
+export { CodeBlockAdapterProvider as AdapterProvider } from './code-block-adapter-provider.js';
+export { CodeBlockCode as Code, CodeBlockCodeText as CodeText, CodeBlockCollapseIndicator as CollapseIndicator, CodeBlockCollapseText as CollapseText, CodeBlockCollapseTrigger as CollapseTrigger, CodeBlockContent as Content, CodeBlockContext as Context, CodeBlockControl as Control, CodeBlockCopyIndicator as CopyIndicator, CodeBlockCopyTrigger as CopyTrigger, CodeBlockFooter as Footer, CodeBlockHeader as Header, CodeBlockOverlay as Overlay, CodeBlockRoot as Root, CodeBlockTitle as Title } from './code-block.js';

package/dist/esm/components/code-block/types.js

@@ -0,0 +1 @@
+

package/dist/esm/components/code-block/use-code-highlight.js

@@ -0,0 +1,28 @@
+"use client";
+import { useState, useRef, useMemo, useEffect } from 'react';
+
+function useCodeHighlight(props) {
+  const { loadContext, loadContextSync, getHighlighter, unloadContext } = props;
+  const [context, setContext] = useState(() => loadContextSync?.() ?? null);
+  const contextRef = useRef(context);
+  const highlight = useMemo(
+    () => getHighlighter(context),
+    [getHighlighter, context]
+  );
+  useEffect(() => {
+    loadContext?.().then((c) => {
+      contextRef.current = c;
+      setContext(c);
+    });
+    return () => {
+      unloadContext?.(contextRef.current);
+    };
+  }, [loadContext, unloadContext]);
+  return {
+    highlight,
+    loadContext,
+    getHighlighter
+  };
+}
+
+export { useCodeHighlight };

package/dist/esm/components/collapsible/collapsible.js

@@ -0,0 +1,19 @@
+"use client";
+import { Collapsible } from '@ark-ui/react/collapsible';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useCollapsibleStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "collapsible" });
+const CollapsibleRootProvider = withProvider(Collapsible.RootProvider, "root", { forwardAsChild: true });
+const CollapsibleRoot = withProvider(Collapsible.Root, "root", { forwardAsChild: true });
+const CollapsiblePropsProvider = PropsProvider;
+const CollapsibleTrigger = withContext(Collapsible.Trigger, "trigger", { forwardAsChild: true });
+const CollapsibleContent = withContext(Collapsible.Content, "content", { forwardAsChild: true });
+const CollapsibleIndicator = withContext(Collapsible.Indicator, "indicator", { forwardAsChild: true });
+const CollapsibleContext = Collapsible.Context;
+
+export { CollapsibleContent, CollapsibleContext, CollapsibleIndicator, CollapsiblePropsProvider, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, useCollapsibleStyles };

package/dist/esm/components/collapsible/index.js

@@ -0,0 +1,4 @@
+export { CollapsibleContent, CollapsibleContext, CollapsibleIndicator, CollapsiblePropsProvider, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, useCollapsibleStyles } from './collapsible.js';
+export { useCollapsible, useCollapsibleContext } from '@ark-ui/react/collapsible';
+import * as namespace from './namespace.js';
+export { namespace as Collapsible };

package/dist/esm/components/collapsible/namespace.js

@@ -0,0 +1 @@
+export { CollapsibleContent as Content, CollapsibleContext as Context, CollapsibleIndicator as Indicator, CollapsiblePropsProvider as PropsProvider, CollapsibleRoot as Root, CollapsibleRootProvider as RootProvider, CollapsibleTrigger as Trigger } from './collapsible.js';

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

@@ -0,0 +1,104 @@
+"use client";
+import { ColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
+import { forwardRef } from 'react';
+import { mergeProps } from '../../merge-props.js';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
+import '../button/button.js';
+import { IconButton } from '../button/icon-button.js';
+import '../button/button-group.js';
+import '../button/close-button.js';
+import { PipetteIcon } from '../icons.js';
+import '../stack/h-stack.js';
+import '../stack/v-stack.js';
+import { Stack } from '../stack/stack.js';
+import '../stack/stack-separator.js';
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useColorPickerStyles,
+  PropsProvider
+} = createSlotRecipeContext({ key: "colorPicker" });
+const ColorPickerRootProvider = withProvider(ColorPicker.RootProvider, "root", { forwardAsChild: true });
+const ColorPickerRoot = withProvider(ColorPicker.Root, "root", { forwardAsChild: true });
+const ColorPickerPropsProvider = PropsProvider;
+const ColorPickerLabel = withContext(ColorPicker.Label, "label", { forwardAsChild: true });
+const ColorPickerControl = withContext(ColorPicker.Control, "control", { forwardAsChild: true });
+const ColorPickerValueSwatch = withContext(ColorPicker.ValueSwatch, "swatch", { forwardAsChild: true });
+const ColorPickerTrigger = withContext(ColorPicker.Trigger, "trigger", {
+  forwardAsChild: true,
+  defaultProps: {
+    children: /* @__PURE__ */ React.createElement(ColorPickerValueSwatch, null)
+  }
+});
+const ColorPickerPositioner = withContext(ColorPicker.Positioner, "positioner", { forwardAsChild: true });
+const ColorPickerContent = withContext(ColorPicker.Content, "content", { forwardAsChild: true });
+const ColorPickerAreaBackground = withContext(ColorPicker.AreaBackground, "areaBackground", { forwardAsChild: true });
+const ColorPickerAreaThumb = withContext(ColorPicker.AreaThumb, "areaThumb", { forwardAsChild: true });
+const ColorPickerArea = withContext(ColorPicker.Area, "area", {
+  forwardAsChild: true,
+  defaultProps: {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerAreaBackground, null), /* @__PURE__ */ React.createElement(ColorPickerAreaThumb, null))
+  }
+});
+const ColorPickerChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, "channelSliderTrack", {
+  forwardAsChild: true
+});
+const ColorPickerChannelSliderThumb = withContext(ColorPicker.ChannelSliderThumb, "channelSliderThumb", {
+  forwardAsChild: true
+});
+const ColorPickerTransparencyGrid = withContext(ColorPicker.TransparencyGrid, "transparencyGrid", { forwardAsChild: true });
+const ColorPickerChannelSlider = withContext(ColorPicker.ChannelSlider, "channelSlider", {
+  forwardAsChild: true,
+  defaultProps: {
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerTransparencyGrid, { size: "0.6rem" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderTrack, null), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderThumb, null))
+  }
+});
+const ColorPickerSliders = forwardRef(
+  function ColorPickerSliders2(props, ref) {
+    return /* @__PURE__ */ React.createElement(Stack, { gap: "1", flex: "1", px: "1", ref, ...props }, /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "hue" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "alpha" }));
+  }
+);
+const ColorPickerChannelInput = withContext(ColorPicker.ChannelInput, "channelInput", { forwardAsChild: true });
+const ColorPickerInput = forwardRef(function ColorHexInput(props, ref) {
+  return /* @__PURE__ */ React.createElement(ColorPickerChannelInput, { channel: "hex", ref, ...props });
+});
+const ColorPickerSwatchGroup = withContext(ColorPicker.SwatchGroup, "swatchGroup", { forwardAsChild: true });
+const ColorPickerSwatchTrigger = withContext(ColorPicker.SwatchTrigger, "swatchTrigger", { forwardAsChild: true });
+const ColorPickerSwatch = withContext(ColorPicker.Swatch, "swatch", { forwardAsChild: true });
+const ColorPickerSwatchIndicator = withContext(ColorPicker.SwatchIndicator, "swatchIndicator", { forwardAsChild: true });
+const ColorPickerValueText = withContext(ColorPicker.ValueText, "valueText", { forwardAsChild: true });
+const ColorPickerView = withContext(ColorPicker.View, "view", { forwardAsChild: true });
+const ColorPickerFormatTrigger = withContext(ColorPicker.FormatTrigger, "formatTrigger", { forwardAsChild: true });
+const ColorPickerFormatSelect = withContext(ColorPicker.FormatSelect, "formatSelect", { forwardAsChild: true });
+const ColorPickerEyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger, "eyeDropperTrigger", {
+  forwardAsChild: true
+});
+const ColorPickerEyeDropper = forwardRef(function ColorPickerEyeDropper2(props, ref) {
+  const { children = /* @__PURE__ */ React.createElement(PipetteIcon, null), ...rest } = props;
+  const picker = useColorPickerContext();
+  const localProps = mergeProps(picker.getEyeDropperTriggerProps(), rest);
+  return /* @__PURE__ */ React.createElement(IconButton, { ref, ...localProps }, children);
+});
+const ColorPickerChannelSliderValueText = withContext(ColorPicker.ChannelSliderValueText, "channelSliderValueText", {
+  forwardAsChild: true
+});
+const ColorPickerChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel, "channelSliderLabel", {
+  forwardAsChild: true
+});
+const ColorPickerHiddenInput = forwardRef(function ColorPickerHiddenInput2(props, ref) {
+  return /* @__PURE__ */ React.createElement(ColorPicker.HiddenInput, { tabIndex: -1, ref, ...props });
+});
+const ColorPickerContext = ColorPicker.Context;
+const ColorPickerChannelText = withContext("span", "channelText", {
+  forwardAsChild: true
+});
+const formatMap = {
+  rgba: ["red", "green", "blue", "alpha"],
+  hsla: ["hue", "saturation", "lightness", "alpha"],
+  hsba: ["hue", "saturation", "brightness", "alpha"],
+  hexa: ["hex", "alpha"]
+};
+const getColorChannels = (format) => formatMap[format];
+
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerChannelText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropper, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerPropsProvider, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSliders, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, getColorChannels, useColorPickerStyles };

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

@@ -0,0 +1,4 @@
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderLabel, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerChannelSliderValueText, ColorPickerChannelText, ColorPickerContent, ColorPickerContext, ColorPickerControl, ColorPickerEyeDropper, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerHiddenInput, ColorPickerInput, ColorPickerLabel, ColorPickerPositioner, ColorPickerPropsProvider, ColorPickerRoot, ColorPickerRootProvider, ColorPickerSliders, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueSwatch, ColorPickerValueText, ColorPickerView, getColorChannels, useColorPickerStyles } from './color-picker.js';
+export { parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
+import * as namespace from './namespace.js';
+export { namespace as ColorPicker };

package/dist/esm/components/color-picker/namespace.js

@@ -0,0 +1 @@
+export { ColorPickerArea as Area, ColorPickerAreaBackground as AreaBackground, ColorPickerAreaThumb as AreaThumb, ColorPickerChannelInput as ChannelInput, ColorPickerChannelSlider as ChannelSlider, ColorPickerChannelSliderLabel as ChannelSliderLabel, ColorPickerChannelSliderThumb as ChannelSliderThumb, ColorPickerChannelSliderTrack as ChannelSliderTrack, ColorPickerChannelSliderValueText as ChannelSliderValueText, ColorPickerChannelText as ChannelText, ColorPickerContent as Content, ColorPickerContext as Context, ColorPickerControl as Control, ColorPickerEyeDropper as EyeDropper, ColorPickerEyeDropperTrigger as EyeDropperTrigger, ColorPickerFormatSelect as FormatSelect, ColorPickerFormatTrigger as FormatTrigger, ColorPickerHiddenInput as HiddenInput, ColorPickerInput as Input, ColorPickerLabel as Label, ColorPickerPositioner as Positioner, ColorPickerPropsProvider as PropsProvider, ColorPickerRoot as Root, ColorPickerRootProvider as RootProvider, ColorPickerSliders as Sliders, ColorPickerSwatch as Swatch, ColorPickerSwatchGroup as SwatchGroup, ColorPickerSwatchIndicator as SwatchIndicator, ColorPickerSwatchTrigger as SwatchTrigger, ColorPickerTransparencyGrid as TransparencyGrid, ColorPickerTrigger as Trigger, ColorPickerValueSwatch as ValueSwatch, ColorPickerValueText as ValueText, ColorPickerView as View } from './color-picker.js';

package/dist/esm/components/color-swatch/index.js

@@ -0,0 +1,53 @@
+"use client";
+import { forwardRef } from 'react';
+import { createRecipeContext } from '../../styled-system/create-recipe-context.js';
+import { mainbase } from '../../styled-system/factory.js';
+import { cx } from '../../utils/cx.js';
+import '../../utils/unit.js';
+import { Grid } from '../grid/grid.js';
+import '../grid/grid-item.js';
+
+const { withPropsProvider, useRecipeResult } = createRecipeContext({
+  key: "colorSwatch"
+});
+const ColorSwatch = forwardRef(
+  function ColorSwatch2(props, ref) {
+    const { value, ...restProps } = props;
+    const { styles, className, props: localProps } = useRecipeResult(restProps);
+    return /* @__PURE__ */ React.createElement(
+      mainbase.span,
+      {
+        ...localProps,
+        ref,
+        "data-value": value,
+        css: [styles, { "--color": value }, props.css],
+        className: cx(className, props.className)
+      }
+    );
+  }
+);
+const ColorSwatchPropsProvider = withPropsProvider();
+const ColorSwatchMix = (props) => {
+  const { items, ...restProps } = props;
+  if (items.length > 4) {
+    throw new Error("ColorSwatchMix doesn't support more than 4 colors");
+  }
+  const isThreeColors = items.length === 3;
+  return /* @__PURE__ */ React.createElement(ColorSwatch, { overflow: "hidden", ...restProps, value: "transparent" }, /* @__PURE__ */ React.createElement(Grid, { templateColumns: "var(--swatch-size) var(--swatch-size)" }, items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ React.createElement(
+      ColorSwatch,
+      {
+        size: "inherit",
+        key: item,
+        rounded: "none",
+        value: item,
+        boxShadow: "none",
+        gridColumn: isThreeColors && isLast ? "span 2 / span 2" : void 0,
+        width: isThreeColors && isLast ? "unset" : void 0
+      }
+    );
+  })));
+};
+
+export { ColorSwatch, ColorSwatchMix, ColorSwatchPropsProvider };