ixia-ui-react 1.8.0 → 2.0.0

package/dist/code-block/index.d.ts

@@ -0,0 +1,50 @@
+import { r as SelectTrigger } from "../index-CIDOd4Z8.js";
+import { t as Tabs } from "../index-DyQYoAUf.js";
+import React$1 from "react";
+type CodeBlockProps = Omit<React.ComponentProps<'div'>, 'defaultValue'> & {
+  defaultValue: CodeBlockValue;
+  items: CodeBlockValue[];
+};
+interface CodeBlockProviderState {
+  currentValue: CodeBlockValue;
+  setCurrentValue: React.Dispatch<React.SetStateAction<CodeBlockValue>>;
+  items: CodeBlockValue[];
+}
+interface CodeBlockValue {
+  id: string;
+  name: string;
+  label?: string;
+  code?: string;
+  content?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+type CodeBlockTabsProps = React.ComponentProps<typeof Tabs>;
+type CodeBlockCopyProps = React.ComponentProps<'button'>;
+type CodeBlockNameProps = React.ComponentProps<'div'>;
+type CodeBlockSelectProps = React.ComponentProps<typeof SelectTrigger>;
+type CodeBlockHeaderGroupProps = React.ComponentProps<'div'>;
+type CodeBlockDownloadProps = React.ComponentProps<'button'>;
+type CodeBlockActionsProps = React.ComponentProps<'div'>;
+type CodeBlockWindowProps = React.ComponentProps<'div'>;
+declare function CodeBlock$1({ items, defaultValue, className, ref, ...props }: CodeBlockProps): React$1.JSX.Element;
+export declare function CodeBlockActions({ className, ref, ...props }: CodeBlockActionsProps): import("react").JSX.Element;
+export declare function CodeBlockCopy({ className, children, disabled, ref, ...props }: CodeBlockCopyProps): React$1.JSX.Element;
+export declare function CodeBlockDownload({ className, children, disabled, ref, ...props }: CodeBlockDownloadProps): React$1.JSX.Element;
+type CodeBlockHeaderProps = React.ComponentProps<'div'>;
+export declare function CodeBlockHeader({ className, ref, ...props }: CodeBlockHeaderProps): import("react").JSX.Element;
+export declare function CodeBlockName({ className, children, ref, ...props }: CodeBlockNameProps): import("react").JSX.Element | undefined;
+export declare function CodeBlockSelect({ className, children, ref, ...props }: CodeBlockSelectProps): import("react").JSX.Element;
+export declare function CodeBlockTabs({ className, children, ref, ...props }: CodeBlockTabsProps): import("react").JSX.Element;
+export declare function CodeBlockWindow({ className, children, ref, ...props }: CodeBlockWindowProps): import("react").JSX.Element;
+declare const CodeBlock: typeof CodeBlock$1 & {
+  Actions: typeof CodeBlockActions;
+  Copy: typeof CodeBlockCopy;
+  Download: typeof CodeBlockDownload;
+  Header: typeof CodeBlockHeader;
+  Name: typeof CodeBlockName;
+  Select: typeof CodeBlockSelect;
+  Tabs: typeof CodeBlockTabs;
+  Window: typeof CodeBlockWindow;
+};
+export { CodeBlock, type CodeBlockActionsProps, type CodeBlockCopyProps, type CodeBlockDownloadProps, type CodeBlockHeaderGroupProps, type CodeBlockNameProps, type CodeBlockProps, type CodeBlockProviderState, type CodeBlockSelectProps, type CodeBlockTabsProps, type CodeBlockValue, type CodeBlockWindowProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/code-block/index.js

@@ -0,0 +1,208 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { n as Icon } from "../icon-D3JWfCa2.js";
+import { t as trimTextChildren } from "../trim-text-children-CQRFg2fL.js";
+import { t as Button } from "../button-BpUC-R1J.js";
+import { a as SelectPopup, c as SelectIcon, i as SelectTitle, n as SelectValue, o as SelectList, r as SelectTrigger, s as SelectItem, t as Select } from "../select-DncJXYim.js";
+import { i as TabsList, n as TabsTab, t as Tabs } from "../tabs-DTC7coap.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+// src/components/code-block/code-block.tsx
+const CodeBlockContext = React.createContext(void 0);
+function CodeBlock$1({ items, defaultValue, className, ref, ...props }) {
+	const [currentValue, setCurrentValue] = React.useState(defaultValue);
+	return /* @__PURE__ */ jsx(CodeBlockContext.Provider, {
+		value: {
+			currentValue,
+			items,
+			setCurrentValue
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col rounded-xl border border-border bg-surface", className),
+			ref,
+			...props
+		})
+	});
+}
+function useCodeBlock() {
+	const context = React.useContext(CodeBlockContext);
+	if (!context) throw new Error("useCodeBlock must be used within a CodeBlock");
+	return context;
+}
+// src/components/code-block/code-block-actions.tsx
+function CodeBlockActions({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute top-2xs right-2xs flex items-center gap-3xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/code-block/code-block-copy.tsx
+const COPY_TIMEOUT = 2e3;
+const COPY_STATUS_ICON = {
+	false: /* @__PURE__ */ jsx(Icon, {
+		name: "copy",
+		className: "animate-in zoom-in"
+	}),
+	true: /* @__PURE__ */ jsx(Icon, {
+		name: "selected",
+		className: "animate-in zoom-in"
+	})
+};
+function CodeBlockCopy({ className, children, disabled, ref, ...props }) {
+	const { currentValue } = useCodeBlock(), { code } = currentValue, [copied, setCopied] = React.useState(false), handleClick = async () => {
+		try {
+			if (code === void 0) throw new Error("No source code available to copy");
+			await navigator.clipboard.writeText(code);
+			setCopied(true);
+			setTimeout(() => setCopied(false), COPY_TIMEOUT);
+		} catch (error) {
+			console.error("Failed to copy text:", error);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": "Copy code",
+		className: cn("", className),
+		onClick: handleClick,
+		ref,
+		size: "medium",
+		tone: "neutral",
+		variant: "ghost",
+		...props,
+		disabled: disabled || code === void 0,
+		children: [children, COPY_STATUS_ICON[`${copied}`]]
+	});
+}
+// src/components/code-block/code-block-download.tsx
+const DOWNLOAD_TIMEOUT = 2e3;
+const DOWNLOAD_STATUS_ICON = {
+	false: /* @__PURE__ */ jsx(Icon, {
+		name: "download",
+		className: "animate-in zoom-in"
+	}),
+	true: /* @__PURE__ */ jsx(Icon, {
+		name: "selected",
+		className: "animate-in zoom-in"
+	})
+};
+function CodeBlockDownload({ className, children, disabled, ref, ...props }) {
+	const { currentValue } = useCodeBlock(), { code } = currentValue, [downloaded, setDownloaded] = React.useState(false), handleClick = async () => {
+		try {
+			if (code === void 0) throw new Error("No source code available to download");
+			const blob = new Blob([code], { type: "text/plain;charset=utf-8" }), url = URL.createObjectURL(blob), link = document.createElement("a");
+			link.href = url;
+			link.download = currentValue.name;
+			link.click();
+			URL.revokeObjectURL(url);
+			setDownloaded(true);
+			setTimeout(() => setDownloaded(false), DOWNLOAD_TIMEOUT);
+		} catch (error) {
+			console.error("Failed to download file:", error);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Button, {
+		"aria-label": "Download file",
+		onClick: handleClick,
+		size: "medium",
+		variant: "ghost",
+		tone: "neutral",
+		className: cn("", className),
+		ref,
+		...props,
+		disabled: disabled || code === void 0,
+		children: [children, DOWNLOAD_STATUS_ICON[`${downloaded}`]]
+	});
+}
+// src/components/code-block/code-block-header.tsx
+function CodeBlockHeader({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-2xl items-center justify-between border-b border-border px-2xs pl-(--code-block-header-padding-left) [--code-block-header-padding-left:var(--spacing-2xs)] has-data-[slot=code-block-tabs]:[--code-block-header-padding-left:0px]", className),
+		ref,
+		...props
+	});
+}
+// src/components/code-block/code-block-name.tsx
+function CodeBlockName({ className, children, ref, ...props }) {
+	const { currentValue } = useCodeBlock();
+	if (!currentValue?.name) return;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-center gap-2xs px-xs font-heading text-base leading-none font-bold text-on-surface-variant [&>svg]:size-md", className),
+		ref,
+		...props,
+		children: [
+			trimTextChildren(children),
+			currentValue?.icon,
+			trimTextChildren(currentValue.name)
+		]
+	});
+}
+// src/components/code-block/code-block-select.tsx
+function CodeBlockSelect({ className, children, ref, ...props }) {
+	const { currentValue, setCurrentValue, items } = useCodeBlock(), handleChange = (value) => {
+		const selectedValue = items.find(({ id }) => id === value);
+		if (selectedValue) setCurrentValue(selectedValue);
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		value: currentValue.id,
+		onValueChange: handleChange,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			"aria-label": "Select snippet",
+			className: cn("", className),
+			ref,
+			...props,
+			variant: "ghost",
+			children: [/* @__PURE__ */ jsx(SelectValue, { children: (value) => items.find((item) => item.id === value)?.label }), /* @__PURE__ */ jsx(SelectIcon, { children: /* @__PURE__ */ jsx(Icon, { name: "chevronsUpDown" }) })]
+		}), /* @__PURE__ */ jsx(SelectPopup, { children: /* @__PURE__ */ jsxs(SelectList, { children: [children, items.map(({ label, id }) => /* @__PURE__ */ jsx(SelectItem, {
+			value: id,
+			children: /* @__PURE__ */ jsx(SelectTitle, { children: label })
+		}, id))] }) })]
+	});
+}
+// src/components/code-block/code-block-tabs.tsx
+function CodeBlockTabs({ className, children, ref, ...props }) {
+	const { currentValue, items, setCurrentValue } = useCodeBlock(), handleOnValueChange = (value) => {
+		const selectedValue = items.find((item) => item.id === value);
+		if (selectedValue) setCurrentValue(selectedValue);
+	};
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value: currentValue.id,
+		onValueChange: handleOnValueChange,
+		className: cn("", className),
+		variant: "underline",
+		showBorder: false,
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			"data-slot": "code-block-tabs",
+			children: items.map(({ id, label }) => /* @__PURE__ */ jsx(TabsTab, {
+				value: id,
+				children: label
+			}, id))
+		}), children]
+	});
+}
+// src/components/code-block/code-block-window.tsx
+function CodeBlockWindow({ className, children, ref, ...props }) {
+	const { currentValue } = useCodeBlock();
+	let { content } = currentValue;
+	if (content === void 0 && currentValue.code !== void 0) content = /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: currentValue.code }) });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative overflow-auto rounded-lg px-md py-sm", className),
+		ref,
+		...props,
+		children: [children, content]
+	});
+}
+// src/components/code-block/index.ts
+const CodeBlock = Object.assign(CodeBlock$1, {
+	Actions: CodeBlockActions,
+	Copy: CodeBlockCopy,
+	Download: CodeBlockDownload,
+	Header: CodeBlockHeader,
+	Name: CodeBlockName,
+	Select: CodeBlockSelect,
+	Tabs: CodeBlockTabs,
+	Window: CodeBlockWindow
+});
+export { CodeBlock, CodeBlockActions, CodeBlockCopy, CodeBlockDownload, CodeBlockHeader, CodeBlockName, CodeBlockSelect, CodeBlockTabs, CodeBlockWindow };
+
+//# sourceMappingURL=index.js.map

package/dist/code-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CodeBlock","CodeBlockRoot"],"sources":["../../src/components/code-block/code-block.tsx","../../src/components/code-block/code-block-actions.tsx","../../src/components/code-block/code-block-copy.tsx","../../src/components/code-block/code-block-download.tsx","../../src/components/code-block/code-block-header.tsx","../../src/components/code-block/code-block-name.tsx","../../src/components/code-block/code-block-select.tsx","../../src/components/code-block/code-block-tabs.tsx","../../src/components/code-block/code-block-window.tsx","../../src/components/code-block/index.ts"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport type { CodeBlockProps, CodeBlockProviderState, CodeBlockValue } from './code-block.types'\n\nconst CodeBlockContext = React.createContext<CodeBlockProviderState | undefined>(undefined)\n\nfunction CodeBlock({ items, defaultValue, className, ref, ...props }: CodeBlockProps) {\n  const [currentValue, setCurrentValue] = React.useState<CodeBlockValue>(defaultValue)\n\n  return (\n    <CodeBlockContext.Provider value={{ currentValue, items, setCurrentValue }}>\n      <div\n        className={cn('flex flex-col rounded-xl border border-border bg-surface', className)}\n        ref={ref}\n        {...props}\n      />\n    </CodeBlockContext.Provider>\n  )\n}\n\nfunction useCodeBlock() {\n  const context = React.useContext(CodeBlockContext)\n\n  if (!context) {\n    throw new Error('useCodeBlock must be used within a CodeBlock')\n  }\n\n  return context\n}\n\nexport { CodeBlock, useCodeBlock }\n","import { cn } from '@/utils/cn'\n\nimport type { CodeBlockActionsProps } from './code-block.types'\n\nexport function CodeBlockActions({ className, ref, ...props }: CodeBlockActionsProps) {\n  return (\n    <div\n      className={cn('absolute top-2xs right-2xs flex items-center gap-3xs', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockCopyProps } from './code-block.types'\n\nconst COPY_TIMEOUT = 2000,\n  COPY_STATUS_ICON = {\n    false: <Icon name=\"copy\" className=\"animate-in zoom-in\" />,\n    true: <Icon name=\"selected\" className=\"animate-in zoom-in\" />,\n  }\n\nexport function CodeBlockCopy({\n  className,\n  children,\n  disabled,\n  ref,\n  ...props\n}: CodeBlockCopyProps) {\n  const { currentValue } = useCodeBlock(),\n    { code } = currentValue,\n    [copied, setCopied] = React.useState(false),\n    handleClick = async () => {\n      try {\n        if (code === undefined) {\n          throw new Error('No source code available to copy')\n        }\n        await navigator.clipboard.writeText(code)\n        setCopied(true)\n        setTimeout(() => setCopied(false), COPY_TIMEOUT)\n      } catch (error) {\n        console.error('Failed to copy text:', error)\n      }\n    }\n\n  return (\n    <Button\n      aria-label=\"Copy code\"\n      className={cn('', className)}\n      onClick={handleClick}\n      ref={ref}\n      size=\"medium\"\n      tone=\"neutral\"\n      variant=\"ghost\"\n      {...props}\n      disabled={disabled || code === undefined}\n    >\n      {children}\n      {COPY_STATUS_ICON[`${copied}`]}\n    </Button>\n  )\n}\n","import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockDownloadProps } from './code-block.types'\n\nconst DOWNLOAD_TIMEOUT = 2000,\n  DOWNLOAD_STATUS_ICON = {\n    false: <Icon name=\"download\" className=\"animate-in zoom-in\" />,\n    true: <Icon name=\"selected\" className=\"animate-in zoom-in\" />,\n  }\n\nexport function CodeBlockDownload({\n  className,\n  children,\n  disabled,\n  ref,\n  ...props\n}: CodeBlockDownloadProps) {\n  const { currentValue } = useCodeBlock(),\n    { code } = currentValue,\n    [downloaded, setDownloaded] = React.useState(false),\n    handleClick = async () => {\n      try {\n        if (code === undefined) {\n          throw new Error('No source code available to download')\n        }\n        const blob = new Blob([code], { type: 'text/plain;charset=utf-8' }),\n          url = URL.createObjectURL(blob),\n          link = document.createElement('a')\n        link.href = url\n        link.download = currentValue.name\n        link.click()\n        URL.revokeObjectURL(url)\n\n        setDownloaded(true)\n        setTimeout(() => setDownloaded(false), DOWNLOAD_TIMEOUT)\n      } catch (error) {\n        console.error('Failed to download file:', error)\n      }\n    }\n\n  return (\n    <Button\n      aria-label=\"Download file\"\n      onClick={handleClick}\n      size=\"medium\"\n      variant=\"ghost\"\n      tone=\"neutral\"\n      className={cn('', className)}\n      ref={ref}\n      {...props}\n      disabled={disabled || code === undefined}\n    >\n      {children}\n      {DOWNLOAD_STATUS_ICON[`${downloaded}`]}\n    </Button>\n  )\n}\n","import { cn } from '@/utils/cn'\n\ntype CodeBlockHeaderProps = React.ComponentProps<'div'>\n\nexport function CodeBlockHeader({ className, ref, ...props }: CodeBlockHeaderProps) {\n  return (\n    <div\n      className={cn(\n        // Keep the tab-specific default overridable by ordinary padding classes.\n        'flex min-h-2xl items-center justify-between border-b border-border px-2xs pl-(--code-block-header-padding-left) [--code-block-header-padding-left:var(--spacing-2xs)] has-data-[slot=code-block-tabs]:[--code-block-header-padding-left:0px]',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockNameProps } from './code-block.types'\n\nexport function CodeBlockName({ className, children, ref, ...props }: CodeBlockNameProps) {\n  const { currentValue } = useCodeBlock()\n\n  if (!currentValue?.name) {\n    return undefined\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-2xs px-xs font-heading text-base leading-none font-bold text-on-surface-variant [&>svg]:size-md',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {trimTextChildren(children)}\n      {currentValue?.icon}\n      {trimTextChildren(currentValue.name)}\n    </div>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport {\n  Select,\n  SelectIcon,\n  SelectItem,\n  SelectList,\n  SelectPopup,\n  SelectTitle,\n  SelectTrigger,\n  SelectValue,\n} from '../select'\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockSelectProps } from './code-block.types'\n\nexport function CodeBlockSelect({ className, children, ref, ...props }: CodeBlockSelectProps) {\n  const { currentValue, setCurrentValue, items } = useCodeBlock(),\n    handleChange = (value: unknown) => {\n      const selectedValue = items.find(({ id }) => id === value)\n      if (selectedValue) {\n        setCurrentValue(selectedValue)\n      }\n    }\n\n  return (\n    <Select value={currentValue.id} onValueChange={handleChange}>\n      <SelectTrigger\n        aria-label=\"Select snippet\"\n        className={cn('', className)}\n        ref={ref}\n        {...props}\n        variant=\"ghost\"\n      >\n        <SelectValue>\n          {(value: keyof typeof items) => items.find((item) => item.id === value)?.label}\n        </SelectValue>\n        <SelectIcon>\n          <Icon name=\"chevronsUpDown\" />\n        </SelectIcon>\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectList>\n          {children}\n          {items.map(({ label, id }) => (\n            <SelectItem key={id} value={id}>\n              <SelectTitle>{label}</SelectTitle>\n            </SelectItem>\n          ))}\n        </SelectList>\n      </SelectPopup>\n    </Select>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Tabs, TabsList, TabsTab } from '../tabs'\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockTabsProps } from './code-block.types'\n\nexport function CodeBlockTabs({ className, children, ref, ...props }: CodeBlockTabsProps) {\n  const { currentValue, items, setCurrentValue } = useCodeBlock(),\n    handleOnValueChange = (value: string) => {\n      const selectedValue = items.find((item) => item.id === value)\n      if (selectedValue) {\n        setCurrentValue(selectedValue)\n      }\n    }\n\n  return (\n    <Tabs\n      value={currentValue.id}\n      onValueChange={handleOnValueChange}\n      className={cn('', className)}\n      variant=\"underline\"\n      showBorder={false}\n      ref={ref}\n      {...props}\n    >\n      <TabsList data-slot=\"code-block-tabs\">\n        {items.map(({ id, label }) => (\n          <TabsTab key={id} value={id}>\n            {label}\n          </TabsTab>\n        ))}\n      </TabsList>\n      {children}\n    </Tabs>\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useCodeBlock } from './code-block'\nimport type { CodeBlockWindowProps } from './code-block.types'\n\nexport function CodeBlockWindow({ className, children, ref, ...props }: CodeBlockWindowProps) {\n  const { currentValue } = useCodeBlock()\n  let { content } = currentValue\n\n  if (content === undefined && currentValue.code !== undefined) {\n    content = (\n      <pre>\n        <code>{currentValue.code}</code>\n      </pre>\n    )\n  }\n\n  return (\n    <div\n      className={cn('relative overflow-auto rounded-lg px-md py-sm', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {content}\n    </div>\n  )\n}\n","import { CodeBlock as CodeBlockRoot } from './code-block'\nimport { CodeBlockActions } from './code-block-actions'\nimport { CodeBlockCopy } from './code-block-copy'\nimport { CodeBlockDownload } from './code-block-download'\nimport { CodeBlockHeader } from './code-block-header'\nimport { CodeBlockName } from './code-block-name'\nimport { CodeBlockSelect } from './code-block-select'\nimport { CodeBlockTabs } from './code-block-tabs'\nimport { CodeBlockWindow } from './code-block-window'\n\nconst CodeBlock = Object.assign(CodeBlockRoot, {\n  Actions: CodeBlockActions,\n  Copy: CodeBlockCopy,\n  Download: CodeBlockDownload,\n  Header: CodeBlockHeader,\n  Name: CodeBlockName,\n  Select: CodeBlockSelect,\n  Tabs: CodeBlockTabs,\n  Window: CodeBlockWindow,\n})\n\nexport type {\n  CodeBlockProps,\n  CodeBlockActionsProps,\n  CodeBlockCopyProps,\n  CodeBlockDownloadProps,\n  CodeBlockHeaderGroupProps,\n  CodeBlockNameProps,\n  CodeBlockProviderState,\n  CodeBlockSelectProps,\n  CodeBlockTabsProps,\n  CodeBlockWindowProps,\n  CodeBlockValue,\n} from './code-block.types'\nexport { CodeBlockActions } from './code-block-actions'\nexport { CodeBlockCopy } from './code-block-copy'\nexport { CodeBlockDownload } from './code-block-download'\nexport { CodeBlockHeader } from './code-block-header'\nexport { CodeBlockName } from './code-block-name'\nexport { CodeBlockSelect } from './code-block-select'\nexport { CodeBlockTabs } from './code-block-tabs'\nexport { CodeBlockWindow } from './code-block-window'\n\nexport { CodeBlock }\n"],"mappings":"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"}

package/dist/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CollapsibleProps, i as CollapsiblePanelProps, n as CollapsibleTrigger, o as CollapsibleTriggerProps, r as CollapsiblePanel, t as Collapsible } from "../index-N2CBSUDu.js";
+export { Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/collapsible/index.js

@@ -0,0 +1 @@
+export { t as Collapsible, r as CollapsiblePanel, n as CollapsibleTrigger } from "../collapsible-BVqrh0Q0.js";

package/dist/collapsible-BVqrh0Q0.js

@@ -0,0 +1,44 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { n as Icon } from "./icon-D3JWfCa2.js";
+import { t as Button } from "./button-BpUC-R1J.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/collapsible.tsx
+function Collapsible$2({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		className: cn("flex min-h-xl w-full flex-col justify-center gap-xs", className),
+		ref,
+		...props
+	});
+}
+// src/components/collapsible/collapsible-panel.tsx
+function CollapsiblePanel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className: cn("mb-3xs ml-md flex h-(--collapsible-panel-height) flex-col justify-end gap-3xs overflow-hidden border-l border-border-strong pl-sm transition-all duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden=\"until-found\"])]:hidden", className),
+		ref,
+		...props
+	});
+}
+// src/components/collapsible/collapsible-trigger.tsx
+function CollapsibleTrigger({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, { render: (renderProps) => /* @__PURE__ */ jsxs(Button, {
+		...renderProps,
+		tone: "neutral",
+		variant: "elevated",
+		className: cn("group/trigger", className),
+		ref,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Icon, {
+			name: "chevronRight",
+			className: "ml-auto transition-all ease-out group-data-panel-open/trigger:rotate-90"
+		})]
+	}) });
+}
+// src/components/collapsible/index.ts
+const Collapsible$1 = Object.assign(Collapsible$2, {
+	Panel: CollapsiblePanel,
+	Trigger: CollapsibleTrigger
+});
+export { CollapsibleTrigger as n, CollapsiblePanel as r, Collapsible$1 as t };
+
+//# sourceMappingURL=collapsible-BVqrh0Q0.js.map

package/dist/collapsible-BVqrh0Q0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-BVqrh0Q0.js","names":["Collapsible","BaseCollapsible","BaseCollapsible","BaseCollapsible","Collapsible","CollapsibleRoot"],"sources":["../src/components/collapsible/collapsible.tsx","../src/components/collapsible/collapsible-panel.tsx","../src/components/collapsible/collapsible-trigger.tsx","../src/components/collapsible/index.ts"],"sourcesContent":["import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible'\n\nimport { cn } from '@/utils/cn'\n\nimport type { CollapsibleProps } from './collapsible.types'\n\nexport function Collapsible({ className, ref, ...props }: CollapsibleProps) {\n  return (\n    <BaseCollapsible.Root\n      className={cn('flex min-h-xl w-full flex-col justify-center gap-xs', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible'\n\nimport { cn } from '@/utils/cn'\n\nimport type { CollapsiblePanelProps } from './collapsible.types'\n\nexport function CollapsiblePanel({ className, ref, ...props }: CollapsiblePanelProps) {\n  return (\n    <BaseCollapsible.Panel\n      className={cn(\n        'mb-3xs ml-md flex h-(--collapsible-panel-height) flex-col justify-end gap-3xs overflow-hidden border-l border-border-strong pl-sm transition-all duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden=\"until-found\"])]:hidden',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport type { CollapsibleTriggerProps } from './collapsible.types'\n\nexport function CollapsibleTrigger({\n  className,\n  children,\n  ref,\n  ...props\n}: CollapsibleTriggerProps) {\n  return (\n    <BaseCollapsible.Trigger\n      render={(renderProps) => (\n        <Button\n          {...renderProps}\n          tone=\"neutral\"\n          variant=\"elevated\"\n          className={cn('group/trigger', className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n          <Icon\n            name=\"chevronRight\"\n            className=\"ml-auto transition-all ease-out group-data-panel-open/trigger:rotate-90\"\n          />\n        </Button>\n      )}\n    />\n  )\n}\n","import { Collapsible as CollapsibleRoot } from './collapsible'\nimport { CollapsiblePanel } from './collapsible-panel'\nimport { CollapsibleTrigger } from './collapsible-trigger'\n\nconst Collapsible = Object.assign(CollapsibleRoot, {\n  Panel: CollapsiblePanel,\n  Trigger: CollapsibleTrigger,\n})\n\nexport type {\n  CollapsibleProps,\n  CollapsibleTriggerProps,\n  CollapsiblePanelProps,\n} from './collapsible.types'\nexport { CollapsiblePanel } from './collapsible-panel'\nexport { CollapsibleTrigger } from './collapsible-trigger'\n\nexport { Collapsible }\n"],"mappings":";;;;;;AAMA,SAAgBA,cAAY,EAAE,WAAW,KAAK,GAAG,SAA2B;CAC1E,OACE,oBAACC,YAAgB,MAAjB;EACE,WAAW,GAAG,uDAAuD,SAAS;EACzE;EACL,GAAI;CACL,CAAA;AAEL;;ACRA,SAAgB,iBAAiB,EAAE,WAAW,KAAK,GAAG,SAAgC;CACpF,OACE,oBAACC,YAAgB,OAAjB;EACE,WAAW,GACT,yQACA,SACF;EACK;EACL,GAAI;CACL,CAAA;AAEL;;ACTA,SAAgB,mBAAmB,EACjC,WACA,UACA,KACA,GAAG,SACuB;CAC1B,OACE,oBAACC,YAAgB,SAAjB,EACE,SAAS,gBACP,qBAAC,QAAD;EACE,GAAI;EACJ,MAAK;EACL,SAAQ;EACR,WAAW,GAAG,iBAAiB,SAAS;EACnC;EACL,GAAI;EANN,UAAA,CAQG,UACD,oBAAC,MAAD;GACE,MAAK;GACL,WAAU;EACX,CAAA,CACK;CAEX,CAAA,EAAA,CAAA;AAEL;;AC9BA,MAAMC,gBAAc,OAAO,OAAOC,eAAiB;CACjD,OAAO;CACP,SAAS;AACX,CAAC"}

package/dist/color-channel-slider/index.d.ts

@@ -0,0 +1,2 @@
+import { n as ColorChannelSliderProps, t as ColorChannelSlider } from "../index-PuhTRMce.js";
+export { ColorChannelSlider, type ColorChannelSliderProps };

package/dist/color-channel-slider/index.js

@@ -0,0 +1 @@
+export { t as ColorChannelSlider } from "../color-channel-slider-h8mUPJ35.js";

package/dist/color-channel-slider-h8mUPJ35.js

@@ -0,0 +1,70 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react";
+// src/components/color-channel-slider/color-channel-slider.types.ts
+const colorChannelSliderVariants = cva("flex flex-col gap-xs", {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		large: "[&_[data-slot='slider-thumb']]:size-lg [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-lg [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-md [&_[data-slot='slider-track'][data-orientation='vertical']]:w-xs",
+		medium: "[&_[data-slot='slider-thumb']]:size-md [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-md [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-sm [&_[data-slot='slider-track'][data-orientation='vertical']]:w-2xs",
+		small: "[&_[data-slot='slider-thumb']]:size-sm [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-sm [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-3xs"
+	} }
+});
+// src/components/color-channel-slider/color-channel-slider.tsx
+const PRIMARY_THUMB_INDEX = 0;
+function ColorChannelSlider({ size, trackStyle, className, children, "aria-label": ariaLabel = "Color value", ref, ...props }) {
+	const hasTransparency = trackStyle.some((color) => color.includes("rgba") || color.includes("hsla") || color.includes("/")), baseGradient = `linear-gradient(to right, ${trackStyle.join(", ")})`, checkerboard = "linear-gradient(45deg, #d4d4d8 25%, transparent 25%, transparent 75%, #d4d4d8 75%, #d4d4d8)";
+	let backgroundImage = baseGradient, backgroundPosition = "auto", backgroundSize = "auto";
+	if (hasTransparency) {
+		backgroundImage = [
+			baseGradient,
+			checkerboard,
+			checkerboard
+		].join(", ");
+		backgroundPosition = "0 0, 0 0, 5px 5px";
+		backgroundSize = "100% 100%, 10px 10px, 10px 10px";
+	}
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		className: cn(colorChannelSliderVariants({ size }), className),
+		"data-slot": "slider-root",
+		thumbAlignment: "edge",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "shrink-0 hover:cursor-pointer data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				"data-slot": "slider-track",
+				className: cn("relative size-full rounded-full"),
+				style: {
+					backgroundColor: "#ffffff",
+					backgroundImage,
+					backgroundPosition,
+					backgroundSize
+				},
+				children: [
+					children,
+					/* @__PURE__ */ jsx(Slider.Indicator, {
+						"data-slot": "slider-indicator",
+						className: "rounded-full"
+					}),
+					/* @__PURE__ */ jsx(Slider.Thumb, {
+						"data-slot": "slider-thumb",
+						"aria-label": ariaLabel,
+						className: cn("absolute aspect-square rounded-full border-white shadow-xs transition-[width,height,opacity] data-dragging:cursor-grabbing hover:[&:not([data-dragging])]:cursor-pointer"),
+						render: (thumbProps, state) => /* @__PURE__ */ jsx("div", {
+							...thumbProps,
+							style: {
+								...thumbProps.style,
+								backgroundColor: trackStyle[state.values[PRIMARY_THUMB_INDEX]]
+							}
+						})
+					})
+				]
+			})
+		})
+	});
+}
+export { ColorChannelSlider as t };
+
+//# sourceMappingURL=color-channel-slider-h8mUPJ35.js.map

package/dist/color-channel-slider-h8mUPJ35.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-channel-slider-h8mUPJ35.js","names":["BaseSlider"],"sources":["../src/components/color-channel-slider/color-channel-slider.types.ts","../src/components/color-channel-slider/color-channel-slider.tsx"],"sourcesContent":["import type { Slider as BaseSlider } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nexport type ColorChannelSliderProps = React.ComponentProps<typeof BaseSlider.Root> &\n  VariantProps<typeof colorChannelSliderVariants> & {\n    trackStyle: string[]\n  }\n\nexport const colorChannelSliderVariants = cva('flex flex-col gap-xs', {\n  defaultVariants: {\n    size: 'medium',\n  },\n  variants: {\n    size: {\n      large:\n        \"[&_[data-slot='slider-thumb']]:size-lg [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-lg [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-md [&_[data-slot='slider-track'][data-orientation='vertical']]:w-xs\",\n      medium:\n        \"[&_[data-slot='slider-thumb']]:size-md [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-md [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-sm [&_[data-slot='slider-track'][data-orientation='vertical']]:w-2xs\",\n      small:\n        \"[&_[data-slot='slider-thumb']]:size-sm [&_[data-slot='slider-thumb']]:border-4 [&_[data-slot='slider-thumb'][data-dragging]]:size-sm [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-3xs\",\n    },\n  },\n})\n","import { Slider as BaseSlider } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { colorChannelSliderVariants } from './color-channel-slider.types'\nimport type { ColorChannelSliderProps } from './color-channel-slider.types'\n\nconst PRIMARY_THUMB_INDEX = 0\n\nexport function ColorChannelSlider({\n  size,\n  trackStyle,\n  className,\n  children,\n  'aria-label': ariaLabel = 'Color value',\n  ref,\n  ...props\n}: ColorChannelSliderProps) {\n  const hasTransparency = trackStyle.some(\n      (color: string) => color.includes('rgba') || color.includes('hsla') || color.includes('/'),\n    ),\n    baseGradient = `linear-gradient(to right, ${trackStyle.join(', ')})`,\n    checkerboard =\n      'linear-gradient(45deg, #d4d4d8 25%, transparent 25%, transparent 75%, #d4d4d8 75%, #d4d4d8)'\n  let backgroundImage = baseGradient,\n    backgroundPosition = 'auto',\n    backgroundSize = 'auto'\n  if (hasTransparency) {\n    backgroundImage = [baseGradient, checkerboard, checkerboard].join(', ')\n    backgroundPosition = '0 0, 0 0, 5px 5px'\n    backgroundSize = '100% 100%, 10px 10px, 10px 10px'\n  }\n\n  return (\n    <BaseSlider.Root\n      className={cn(colorChannelSliderVariants({ size }), className)}\n      data-slot=\"slider-root\"\n      thumbAlignment=\"edge\"\n      ref={ref}\n      {...props}\n    >\n      <BaseSlider.Control className=\"shrink-0 hover:cursor-pointer data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\">\n        <BaseSlider.Track\n          data-slot=\"slider-track\"\n          className={cn('relative size-full rounded-full')}\n          style={{\n            backgroundColor: '#ffffff',\n            backgroundImage,\n            backgroundPosition,\n            backgroundSize,\n          }}\n        >\n          {children}\n          <BaseSlider.Indicator data-slot=\"slider-indicator\" className=\"rounded-full\" />\n          <BaseSlider.Thumb\n            data-slot=\"slider-thumb\"\n            aria-label={ariaLabel}\n            className={cn(\n              'absolute aspect-square rounded-full border-white shadow-xs transition-[width,height,opacity] data-dragging:cursor-grabbing hover:[&:not([data-dragging])]:cursor-pointer',\n            )}\n            render={(thumbProps, state) => (\n              <div\n                {...thumbProps}\n                style={{\n                  ...thumbProps.style,\n                  backgroundColor: trackStyle[state.values[PRIMARY_THUMB_INDEX]],\n                }}\n              />\n            )}\n          />\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  )\n}\n"],"mappings":";;;;;AASA,MAAa,6BAA6B,IAAI,wBAAwB;CACpE,iBAAiB,EACf,MAAM,SACR;CACA,UAAU,EACR,MAAM;EACJ,OACE;EACF,QACE;EACF,OACE;CACJ,EACF;AACF,CAAC;;AChBD,MAAM,sBAAsB;AAE5B,SAAgB,mBAAmB,EACjC,MACA,YACA,WACA,UACA,cAAc,YAAY,eAC1B,KACA,GAAG,SACuB;CAC1B,MAAM,kBAAkB,WAAW,MAC9B,UAAkB,MAAM,SAAS,MAAM,KAAK,MAAM,SAAS,MAAM,KAAK,MAAM,SAAS,GAAG,CAC3F,GACA,eAAe,6BAA6B,WAAW,KAAK,IAAI,EAAE,IAClE,eACE;CACJ,IAAI,kBAAkB,cACpB,qBAAqB,QACrB,iBAAiB;CACnB,IAAI,iBAAiB;EACnB,kBAAkB;GAAC;GAAc;GAAc;EAAY,CAAC,CAAC,KAAK,IAAI;EACtE,qBAAqB;EACrB,iBAAiB;CACnB;CAEA,OACE,oBAACA,OAAW,MAAZ;EACE,WAAW,GAAG,2BAA2B,EAAE,KAAK,CAAC,GAAG,SAAS;EAC7D,aAAU;EACV,gBAAe;EACV;EACL,GAAI;EAEJ,UAAA,oBAACA,OAAW,SAAZ;GAAoB,WAAU;GAC5B,UAAA,qBAACA,OAAW,OAAZ;IACE,aAAU;IACV,WAAW,GAAG,iCAAiC;IAC/C,OAAO;KACL,iBAAiB;KACjB;KACA;KACA;IACF;IARF,UAAA;KAUG;KACD,oBAACA,OAAW,WAAZ;MAAsB,aAAU;MAAmB,WAAU;KAAgB,CAAA;KAC7E,oBAACA,OAAW,OAAZ;MACE,aAAU;MACV,cAAY;MACZ,WAAW,GACT,0KACF;MACA,SAAS,YAAY,UACnB,oBAAC,OAAD;OACE,GAAI;OACJ,OAAO;QACL,GAAG,WAAW;QACd,iBAAiB,WAAW,MAAM,OAAO;OAC3C;MACD,CAAA;KAEJ,CAAA;IACe;;EACA,CAAA;CACL,CAAA;AAErB"}

package/dist/color-picker/index.d.ts

@@ -0,0 +1,137 @@
+import { r as SelectTrigger } from "../index-CIDOd4Z8.js";
+import { t as ColorChannelSlider } from "../index-PuhTRMce.js";
+import { t as InputGroup } from "../index-DdFxZ3Xr.js";
+import { VariantProps } from "class-variance-authority";
+import React$1 from "react";
+import chroma from "chroma-js";
+interface ColorPickerContextType {
+  color: chroma.Color;
+  setColor: (color: chroma.Color) => void;
+  hue: number;
+  saturation: number;
+  value: number;
+  alpha: number;
+  setHue: (hue: number) => void;
+  setSaturation: (saturation: number) => void;
+  setValue: (value: number) => void;
+  setSaturationValue: (saturation: number, value: number) => void;
+  setAlpha: (alpha: number) => void;
+  setLightness: (lightness: number) => void;
+  valueType: ValueType;
+  setValueType: (valueType: ValueType) => void;
+  palette: chroma.Color[];
+  setPalette: (palette: chroma.Color[]) => void;
+  addPaletteColor: (color: chroma.Color) => void;
+  paletteLimit?: number;
+}
+interface ColorPickerState {
+  hue: number;
+  saturation: number;
+  value: number;
+  alpha: number;
+  valueType: ValueType;
+  palette: chroma.Color[];
+}
+type ColorPickerAction = {
+  type: 'set_color';
+  color: chroma.Color;
+} | {
+  type: 'set_hue';
+  hue: number;
+} | {
+  type: 'set_saturation';
+  saturation: number;
+} | {
+  type: 'set_value';
+  value: number;
+} | {
+  type: 'set_saturation_value';
+  saturation: number;
+  value: number;
+} | {
+  type: 'set_alpha';
+  alpha: number;
+} | {
+  type: 'set_lightness';
+  lightness: number;
+} | {
+  type: 'set_value_type';
+  valueType: ValueType;
+} | {
+  type: 'set_palette';
+  palette: chroma.Color[];
+} | {
+  type: 'add_palette_color';
+  color: chroma.Color;
+};
+type ColorPickerProps = React.ComponentProps<'div'> & VariantProps<typeof colorPickerVariants> & {
+  value?: string;
+  onValueChange?: (color: string) => void;
+  defaultColor?: string;
+  palette?: string[];
+  defaultPalette?: string[];
+  onPaletteChange?: (palette: string[]) => void;
+  paletteLimit?: number;
+  defaultValueType?: ValueTypeValue;
+};
+declare const colorPickerVariants: (props?: ({
+  variant?: "elevated" | "ghost" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string, colorPickerSwatchVariants: (props?: ({
+  size?: "large" | "medium" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string, VALUE_TYPES: ValueType[];
+interface ValueType {
+  label: string;
+  value: string;
+  getValue: (color: chroma.Color) => string | number[];
+  parseValue: (value: string) => chroma.Color | undefined;
+}
+type ValueTypeValue = 'rgb' | 'css' | 'hex' | 'hsl' | 'hsv';
+type ColorPickerInputProps = React.ComponentProps<typeof InputGroup> & {
+  showPopover?: boolean;
+  showTransparencyField?: boolean;
+};
+type ColorPickerAreaProps = React.ComponentProps<'div'>;
+type ColorPickerHueSliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>;
+type ColorPickerLightnessSliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>;
+type ColorPickerTransparencySliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>;
+type ColorPickerValueTypeProps = React.ComponentProps<typeof SelectTrigger>;
+type ColorPickerRowProps = React.ComponentProps<'div'>;
+type ColorPickerGroupProps = React.ComponentProps<'div'>;
+type ColorPickerLabelProps = React.ComponentProps<'span'>;
+type ColorPickerPaletteListProps = React.ComponentProps<'div'>;
+type ColorPickerPaletteSwatchProps = Omit<React.ComponentProps<'button'>, 'color'> & VariantProps<typeof colorPickerSwatchVariants> & {
+  color: string;
+};
+type ColorPickerPaletteAddProps = React.ComponentProps<'button'>;
+type ColorPickerPaletteLimitProps = React.ComponentProps<'span'>;
+declare function ColorPicker$1({ variant, value: controlledValue, defaultColor, palette: controlledPalette, defaultPalette, onPaletteChange, paletteLimit, defaultValueType, onValueChange, className, ref, ...props }: ColorPickerProps): React$1.JSX.Element;
+export declare function ColorPickerArea({ className, ref, ...props }: ColorPickerAreaProps): import("react").JSX.Element;
+export declare function ColorPickerGroup({ className, ref, ...props }: ColorPickerGroupProps): import("react").JSX.Element;
+export declare function ColorPickerHueSlider({ className, ref, ...props }: ColorPickerHueSliderProps): import("react").JSX.Element;
+export declare function ColorPickerInput({ showPopover, showTransparencyField, className, children, ref, ...props }: ColorPickerInputProps): React$1.JSX.Element;
+export declare function ColorPickerLabel({ className, ref, ...props }: ColorPickerLabelProps): import("react").JSX.Element;
+export declare function ColorPickerLightnessSlider({ className, ref, ...props }: ColorPickerLightnessSliderProps): import("react").JSX.Element;
+declare function ColorPickerPaletteAdd({ className, children, ref, ...props }: ColorPickerPaletteAddProps): import("react").JSX.Element;
+export declare function ColorPickerPaletteLimit({ className, children, ref, ...props }: ColorPickerPaletteLimitProps): false | import("react").JSX.Element;
+export declare function ColorPickerPaletteList({ className, children, ref, ...props }: ColorPickerPaletteListProps): import("react").JSX.Element;
+export declare function ColorPickerPaletteSwatch({ size, color, className, children, ref, ...props }: ColorPickerPaletteSwatchProps): import("react").JSX.Element;
+export declare function ColorPickerRow({ className, ref, ...props }: ColorPickerRowProps): import("react").JSX.Element;
+export declare function ColorPickerTransparencySlider({ className, ref, ...props }: ColorPickerTransparencySliderProps): import("react").JSX.Element;
+export declare function ColorPickerValueType({ className, children, ref, ...props }: ColorPickerValueTypeProps): import("react").JSX.Element;
+declare const ColorPicker: typeof ColorPicker$1 & {
+  Area: typeof ColorPickerArea;
+  Group: typeof ColorPickerGroup;
+  HueSlider: typeof ColorPickerHueSlider;
+  Input: typeof ColorPickerInput;
+  Label: typeof ColorPickerLabel;
+  LightnessSlider: typeof ColorPickerLightnessSlider;
+  PaletteAdd: typeof ColorPickerPaletteAdd;
+  PaletteLimit: typeof ColorPickerPaletteLimit;
+  PaletteList: typeof ColorPickerPaletteList;
+  PaletteSwatch: typeof ColorPickerPaletteSwatch;
+  Row: typeof ColorPickerRow;
+  TransparencySlider: typeof ColorPickerTransparencySlider;
+  ValueType: typeof ColorPickerValueType;
+};
+export { ColorPicker, type ColorPickerAction, type ColorPickerAreaProps, type ColorPickerContextType, type ColorPickerGroupProps, type ColorPickerHueSliderProps, type ColorPickerInputProps, type ColorPickerLabelProps, type ColorPickerLightnessSliderProps, type ColorPickerPaletteAddProps, type ColorPickerPaletteLimitProps, type ColorPickerPaletteListProps, type ColorPickerPaletteSwatchProps, type ColorPickerProps, type ColorPickerRowProps, type ColorPickerState, type ColorPickerTransparencySliderProps, type ColorPickerValueTypeProps };
+//# sourceMappingURL=index.d.ts.map